Claude로 만든 디자인을 개발자에게 효율적으로 전달하는 핸드오프 방법을 배운다. 디자인 스펙 문서 작성, Figma 연동, 코드 주석 규칙, 유지보수 가이드까지 실무 협업의 전체 흐름을 익힌다.
이번 강에서 배울 것
- 디자인 핸드오프란 무엇인가
- 개발자가 필요한 스펙 문서 Claude로 작성하기
- Figma와 코드 기반 협업의 차이
- 유지보수 가이드 문서 자동 생성
- 12강 시리즈 최종 정리 및 다음 단계
디자인 핸드오프란?
핸드오프(Handoff)는 디자이너가 완성한 디자인을 개발자가 구현할 수 있도록 전달하는 과정입니다. 이 단계가 불명확하면 개발자가 디자이너에게 매번 질문해야 하고, 결과물이 디자인과 달라지는 문제가 발생합니다.
Claude를 활용하면 코드와 함께 상세한 스펙 문서를 자동으로 생성할 수 있어 핸드오프 품질이 크게 높아집니다.
개발자에게 필요한 정보
| 항목 | 내용 | 예시 |
|---|---|---|
| 색상 | HEX, RGB, CSS 변수명 | --color-primary: #16a34a |
| 타이포그래피 | 폰트명, 크기, 굵기, 줄간격 | h1: Pretendard Bold 40px/1.2 |
| 간격 | 패딩, 마진, 갭 기준 단위 | 8px 배수 시스템 |
| 반응형 | 브레이크포인트, 동작 방식 | 768px 이상에서 2열 그리드 |
| 인터랙션 | hover, focus, active 상태 | 버튼 hover 시 배경 #15803d |
| 에셋 | 아이콘, 이미지 파일 위치 | /assets/icons/check.svg |
스펙 문서 자동 생성
실습 프롬프트 1
11강에서 만든 포트폴리오 사이트의 개발 스펙 문서를 작성해줘. 문서 형식: 마크다운 (.md 파일로 저장 가능) 포함 내용: 1. 색상 시스템 (변수명, HEX, 사용 위치) 2. 타이포그래피 (폰트, 크기 체계, 클래스명) 3. 간격 시스템 (기준 단위, 사용 패턴) 4. 컴포넌트 목록 (각 컴포넌트 사용법, HTML 구조) 5. 반응형 브레이크포인트 6. 애니메이션 명세 (효과, duration, easing) 7. 브라우저 지원 범위
Figma 연동 — 디자인-코드 동기화
Claude로 만든 HTML/CSS 코드를 Figma로 역변환하거나, Figma 디자인을 코드로 변환하는 두 가지 방향이 있습니다.
방향 1 — 코드 to Figma:
Claude가 만든 CSS를 보고 Figma에서 동일하게 구현
- 색상 변수를 Figma 색상 스타일로 등록
- 컴포넌트를 Figma 컴포넌트로 재현
- 타이포그래피를 Figma 텍스트 스타일로 등록
방향 2 — Figma to 코드:
Figma 화면을 캡처해 Claude에게 전달
- "이 Figma 디자인을 HTML/CSS로 구현해줘" + 이미지 첨부
- Claude가 시각적으로 분석해 코드 생성
방향 3 — Figma MCP 연동 (고급):
Claude에 Figma MCP를 연결하면 디자인 파일 직접 읽기 가능
- Figma Dev Mode의 CSS 스펙을 Claude가 자동으로 읽어 구현유지보수 가이드 작성
실습 프롬프트 2
이 포트폴리오 사이트를 나중에 혼자 유지보수할 때 참고할 가이드 문서를 작성해줘. 포함 내용: 1. 새 프로젝트 카드 추가하는 법 (HTML 복사 위치, 수정할 내용) 2. 색상 변경하는 법 (어디서 무엇을 바꾸면 되는지) 3. 폰트 변경하는 법 4. 새 섹션 추가하는 법 (내비게이션 자동 연동) 5. 자주 하는 실수와 해결법 형식: 비개발자도 읽을 수 있는 쉬운 언어로
Git으로 버전 관리
실습 프롬프트 3
포트폴리오 사이트를 GitHub Pages로 무료 배포하는 단계별 가이드를 작성해줘. 단계: 1. Git 초기화 및 첫 커밋 2. GitHub 저장소 생성 및 연결 3. GitHub Pages 설정 (Settings - Pages) 4. 커스텀 도메인 연결 (선택) 5. 이후 업데이트 시 배포 방법 Git을 처음 쓰는 사람 기준으로 설명해줘.
12강 시리즈 최종 정리
| 강의 | 배운 것 |
|---|---|
| 1~2강 | AI 디자인 개요, 프롬프트 작성법 |
| 3~4강 | 브랜드 기획, 색상/폰트 시스템 |
| 5~6강 | 컴포넌트 설계, 랜딩 페이지 구현 |
| 7~8강 | 반응형, 다크모드 |
| 9~10강 | 마이크로인터랙션, 이미지/아이콘 |
| 11~12강 | 실전 포트폴리오, 핸드오프 |
이 시리즈를 마친 여러분은 이제 아이디어를 Claude에게 말하고, 코드로 구현하고, 브라우저에서 확인하는 전체 사이클을 혼자 돌릴 수 있습니다. 디자이너도, 개발자도 아닌 "AI와 함께 만드는 사람"이 된 것입니다.
시리즈 최종 요약
- 핸드오프 = 스펙 문서 + 코드 주석 + 유지보수 가이드
- Claude로 스펙 문서와 유지보수 가이드도 자동 생성 가능
- GitHub Pages로 무료 배포 — 포트폴리오 링크를 이력서에 추가하세요
- 다음 단계: Figma 입문 시리즈 또는 React로 컴포넌트 시스템 구축
관련 검색어 · 디자인 핸드오프, Figma 개발자 모드, GitHub Pages 배포, 디자인 스펙 문서, 디자이너 개발자 협업, CSS 유지보수