JSX로 그리고 Figma로 다듬은 OG 카드

이 카드는 단순한 이미지 파일이 아닙니다. XPLORED의 OG 카드는 Figma 같은 디자인 도구에서 내보낸 결과물이 아니라 next/og(Satori)로 만든 JSX 컴포넌트입니다. 요청이 들어올 때마다 서버가 1200×630 PNG를 새로 그리기 때문에, 텍스트 몇 줄을 고쳐 배포하면 Slack이나 X(구 Twitter)에 공유되는 카드도 조용히 최신 버전으로 바뀝니다. 이미지를 매번 직접 만들어 버킷에 올릴 필요도, 오래된 카드가 계속 떠돌 일도 없습니다.

첫 번째 시안: “디자인 도구? 한번 없이 해보지 뭐.”

처음에는 디자인 도구를 한 번도 열지 않고 카드 전체를 코드로 바로 그렸습니다. 레이아웃은 Flexbox, 궤도 선은 평범한 div, 빛나는 브랜드 그린 광원은 radial gradient로 만들었습니다. Satori가 지원하는 CSS 범위는 매우 제한적입니다. grid나 filter는 쓸 수 없고 사실상 display: flex 정도만 제대로 동작합니다. 역설적으로 그 제약이 디자인 스타일이 됐습니다. 몇 줄의 style prop만으로 그릴 수 있는 깔끔하고 선명한 기하학이 만들어졌습니다.

결국 Figma를 열게 됐다.

하지만 “디자인 도구 없이 코드만으로”라는 생각은 틀렸습니다. 궤도 링이 화면 밖으로 얼마나 잘려 나가야 자연스러운지, 배지에 브랜드 그린을 쓰는 편이 시선을 더 잘 잡는지, 부제목이 정말 필요한지 같은 질문은 코드를 입력하는 것보다 직접 보고 감각적으로 비교하는 편이 훨씬 빨랐습니다.

그래서 Figma를 열어 디테일을 조정했습니다. 부제목을 빼고, 배지는 그린 틴트 배경 위의 그린 텍스트로 바꾸고, 장식 요소를 오른쪽 위에 고정했습니다. 여기서 Figma는 원본 파일을 만드는 도구가 아니라, 디자인을 잠시 펼쳐 두고 여러 선택지를 시험하는 시각 편집 공간이었습니다.

디자인을 다시 코드로 가져오기

Figma에서 디자인이 정리된 뒤 다시 코드로 옮겼습니다. 스크린샷을 눈대중으로 따라 그린 것이 아니라, Figma에서 내보낸 SVG를 직접 읽어 정확한 불투명도와 그라디언트 스톱 값을 가져왔습니다. 바깥쪽 링 10%, 안쪽 링 25%, 광원은 30% → 10% → 0%로 사라지도록 숫자까지 그대로 반영했습니다.

작은 문제도 하나 있었습니다. Satori는 radial gradient의 크기를 기본적으로 가장 먼 모서리를 기준으로 잡기 때문에 원형으로 퍼져야 할 빛이 자꾸 사각형처럼 눌렸습니다. closest-side 옵션 하나로 깔끔하게 해결했습니다.

그리고 꽤 아름다운 루프가 닫혔다.

JSX 초안 → Figma에서 디테일 조정 → 다시 JSX 코드로

코드는 여전히 단 하나의 원본이고, PNG를 따로 내보낼 필요도 없습니다. 대신 모든 디자인 변경은 코드 diff로 투명하게 남아 언제든 리뷰할 수 있습니다.