Figma 레퍼런스를 Claude Code + Fable 5로 구현하는 법
1. 디자인 컨셉 및 리퍼런스 수집
- 기획 & 이미지 수집 : 핀터레스트 등에서 색상, 3D 그래픽 요소, 레이아웃 리퍼런스 이미지를 탐색하고 Figma에 수집합니다.
- AI 이미지 합성 : Hixfield 등 생성형 AI를 활용해 수집한 요소(나뭇가지, 어두운 그라데이션 배경 등)를 명상 앱 주제의 디자인 스타일로 리믹스합니다.
2. 코드 생성용 에셋 분리
- 배경/텍스트 분리 : 코드 빌더가 레이아웃을 정확히 구현할 수 있도록 배경 이미지와 UI/텍스트 레이아웃을 각각 생성해 분리합니다.
- 폰트 선택 : Google Fonts의 인기 폰트(예: Instrumental Serif)를 찾아 디자인과 매칭시킵니다.
3. Claude Code 및 Fable 5를 활용한 UI 프론트엔드 구현
- Hero 섹션 빌드 : Claude Code 세션에서 프롬프트와 참조 이미지를 전달해 Hero 섹션, 반응형 레이아웃, 아이콘, Hover 효과 등을 자동 생성합니다.
- 비디오 배경 애니메이션 : 생성한 이미지를 비디오(Kling 3.0 활용)로 변환해 배경 웹 루프 비디오로 적용합니다.
4. 전체 웹사이트 레이아웃 및 세부 디테일 다듬기
- 섹션 확장 : 체스판 형식의 카드 레이아웃, 주요 기능 섹션, 후기및 푸터영역을 추가 구축합니다.
- 구분선 및 모바일 최적화 : 섹션 사이에 자연스러운 3D 에셋 구분선을 Absolute 배치하고, 모바일 반응형 폰트 크기 및 스패싱을 세밀하게 수정합니다.
