Claude로 반응형 웹 코딩할 때, 파일 넘기는 순서

Figma로 디자인을 완성하고 Claude에게 코딩을 맡길 때, 어떤 순서로 파일을 넘기느냐에 따라 작업 속도와 결과물의 완성도가 크게 달라진다.

특히 다중 페이지 + 반응형(멀티 브레이크포인트) 프로젝트라면 순서 없이 파일을 던지면 Claude가 나중에 CSS를 계속 수정하게 되고, 컴포넌트 일관성도 무너지기 쉽다.

아래는 Figma + Claude 조합으로 반응형 웹을 코딩할 때 권장하는 순서다.

1단계 — Figma Variables & 브레이크포인트 먼저

가장 먼저 넘겨야 할 것은 디자인 시스템의 기초다.

넘길 것:

• Figma Variables (Color, Typography, Spacing 토큰)
• 브레이크포인트별 프레임 (예: 1516px / 1024px / 768px / 402px)

이유: Claude는 Variables를 받으면 CSS Custom Property(--color-primary, --spacing-m 등)로 한 번에 세팅한다. 이 작업이 먼저 확정돼야 이후 모든 페이지에서 동일한 토큰을 쓸 수 있다. 나중에 폰트 크기나 컬러를 수정하면 전체 CSS를 다시 건드려야 하기 때문에, 첫 번째 단계에서 정확하게 잡는 게 중요하다.

브레이크포인트도 마찬가지다. 미디어쿼리 기준값이 초반에 확정돼야 반응형 구조가 처음부터 올바르게 잡힌다.

2단계 — 공통 컴포넌트 (Header / Footer)

Variables 세팅이 끝나면, 모든 페이지에 반복되는 공통 UI를 먼저 만든다.

넘길 것:

• Header (네비게이션, 드롭다운, 모바일 메뉴 등)
• Footer
• 반복 사용되는 버튼, 카드, 뱃지 등 공통 컴포넌트

이유: Header와 Footer에서 HTML 구조와 CSS 클래스 네이밍 패턴이 결정된다. 이 패턴이 먼저 잡혀야 나머지 페이지들을 일관성 있게 이어서 만들 수 있다. 반대로 페이지부터 만들고 나중에 Header를 수정하면, 이미 만들어진 페이지들의 구조에도 영향을 줄 수 있다.

3단계 — 메인 페이지

공통 컴포넌트가 완성되면 메인(index) 페이지를 만든다.

넘길 것:

• 메인 페이지 Figma URL (node-id 지정 권장)
• 메인 페이지에만 있는 특수 인터랙션 메모 (슬라이더, 애니메이션 등)

이유: 메인 페이지는 보통 가장 복잡하고 섹션이 많다. 여기서 레이아웃 그리드, 섹션 간격, 반응형 동작 방식의 기준이 만들어진다. 서브 페이지들은 메인 페이지의 패턴을 이어받아 훨씬 빠르게 작업할 수 있다.

4단계 — 서브 페이지 (우선순위 순)

메인이 완성되면 나머지 페이지를 하나씩 넘긴다.

권장 순서: 핵심 서비스/소개 페이지 → 콘텐츠 페이지 → 문의/폼 페이지

넘기는 방법: 페이지마다 Figma node-id를 지정해서 넘기면 Claude가 정확한 섹션만 참조한다. 전체 파일 URL만 던지면 어떤 페이지인지 파악하는 데 시간이 걸린다.

5단계 — 인터랙션 & QA

모든 페이지가 완성되면 마지막으로 동작을 다듬는다.

다룰 것:

• 특수 애니메이션, 모달, 폼 유효성 검사 등 JavaScript 동작
• 실제 브라우저에서 확인 후 수정 요청

정리

실전 팁

Figma node-id를 페이지별로 미리 정리해두자. URL의 ?node-id=xxxx-xxxx 부분이 node-id다. 각 페이지나 주요 섹션의 node-id를 스프레드시트나 노션에 미리 정리해두면, Claude에게 넘길 때 정확한 디자인을 참조할 수 있어서 오차가 줄어든다.

이미지 에셋은 별도로 export하지 않아도 된다. Claude + Figma MCP 환경에서는 node-id만 넘기면 이미지 URL을 자동으로 추출한다.

반복되는 카드나 섹션은 한 번만 만들고 패턴을 알려주자. “이 카드 컴포넌트 기준으로 나머지도 동일한 구조로” 라고 명시하면 일관성 있게 이어진다.

이 순서를 지키면 CSS 수정 횟수가 줄고, 컴포넌트 일관성이 유지되며, 전체 작업 흐름이 훨씬 매끄러워진다.