랜딩을 Figma 에서 코드로 옮긴 방법

홈 화면은 Figma 파일의 구현 v1 프레임 하나를 옮긴 것이다. 절대 좌표로 겹쳐 둔 콜라주를 반응형 코드로 바꾸는 게 작업의 전부였다. 영상은 그 과정에서 정한 규칙을 따라간다.

정본은 Figma 다

랜딩은 코드가 아니라 Figma 가 정본이다.

정본은 Figma 다 — 어긋나면 코드를 고친다.

README 에 한 줄로 박아 뒀다. 화면과 시안이 어긋날 때마다 어느 쪽이 맞는지 따지지 않으려고 정한 것이다. 대신 색과 글꼴 같은 기반층은 반대로 코드가 정본이라, app.css 의 @theme 에 Figma 변수 이름을 그대로 쓴다.

좌표를 비율로 바꾼다

Figma 프레임 안의 px 를 그대로 적으면 canvas() 가 프레임 크기 대비 퍼센트로 바꿔 CSS 변수로 심는다. 글자 크기는 cqw 라 캔버스 폭을 따라 줄고, 1440 에서 Figma 와 픽셀이 같아진다.

// Hero.tsx 를 줄여 쓴 예 — 데스크톱 1440×1210, 모바일 390×800 두 좌표계를 함께 연다.
const { frame, item } = canvas([1440, 1210], [390, 800]);

// [x, y, w, h] 는 Figma 프레임 안의 px 그대로 적는다. 실제로는 이 값을 요소의 style 에 바로 넣는다.
const character = item([160, 245, 930, 930], [-8, 262, 406, 406]);

시안에서 숫자만 읽어 옮기면 되니 눈대중으로 맞출 일이 없다.

세 프레임, 세 구간

같은 페이지에 프레임이 세 벌 있고 코드의 구간도 셋이다.

프레임	Figma 노드	코드
데스크톱 1440	61:2	1024 이상은 이 구도를 비율로 줄인다
태블릿 768	119:2	768~1023 은 1열, 03 섹션은 가로 스와이프
모바일 390	108:2	768 미만은 모바일 좌표계로 바뀐다

내비만 기준이 달라 1024 미만에서 햄버거가 된다. 세 뷰의 섹션 높이는 프레임과 px 단위로 같다.

영상에서 다룬 것

• canvas() 와 scene() 의 차이 — 장면 캔버스는 1024 이상에서만 좌표가 된다.
• 점 배경을 이미지가 아니라 CSS 그라디언트로 그린 이유. Figma 는 점 하나하나가 벡터라 11MB 다.
• 히어로 이미지가 LCP 라 820w·1254w 두 벌을 두고 root.tsx 에서 미리 받는 것.