[피그마 플러그인] html.to.design 2편 — 피그마 시안, Claude Code로 넘겨서 바이브코딩하기

시리즈: html.to.design 실무 사용기 2편

 

1편: URL 하나로 피그마 시안 만드는 법

https://cherrycoding0.tistory.com/23

[피그마 플러그인] 사이트를 피그마로 '통째로' 옮기기! URL 하나로 피그마 시안 만드는 법 | html.to

 

 

---

1편에서 html.to.design으로 운영 중인 사이트를 피그마 레이어로 가져왔잖아요.

그 다음이 문제예요.

피그마 시안이 완성됐는데, 이걸 코드로 어떻게 옮기냐고요. Codia AI? Figma Dev Mode로 CSS 긁기?

저는 둘 다 안 썼어요.

피그마 작업물을 그대로 Claude Code로 넘겨서 바이브코딩했거든요.

처음엔 "이게 될까?" 반신반의했는데, 생각보다 훨씬 자연스럽게 이어졌어요. 그 플로우를 그대로 정리해볼게요.

---

피그마 시안을 코드로 옮기는 흔한 방법, 뭐가 문제냐면

Figma Dev Mode는 좋아요. CSS 값이나 spacing, 컬러 코드 확인할 때 진짜 편하거든요. 근데 뽑아낸 CSS를 실제 컴포넌트에 붙이는 건 결국 사람이 해야 해요. 컴포넌트 구조 파악하고, props 설계하고, 반응형 잡고 — 이게 다 수동이에요.

Codia AI 같은 "피그마 → 코드 자동 변환" 툴도 써봤는데, 퀄리티가 일정하지 않아요. 단순한 카드 레이아웃은 그럭저럭 나오는데, 조금만 복잡해지면 코드가 꼬여요. 결국 고치는 시간이 새로 짜는 시간이랑 비슷하거나 더 걸리는 경우도 있었고요.

그래서 제가 찾은 방법은 — 피그마에서 컨텍스트를 뽑아서, Claude Code한테 설명을 시키는 것이에요.

---

실제로 어떻게 활용했냐면

플로우는 이렇게 돼요.
https://help.figma.com/hc/ko/articles/15023124644247-Dev-Mode-%EA%B0%80%EC%9D%B4%EB%93%9C

Dev Mode 가이드

html.to.design으로 사이트 임포트
→ 피그마에서 수정 작업 완료
→ Figma Dev Mode로 스펙 확인
→ Claude Code에 시안 설명 + 작업 지시
→ 바이브코딩으로 컴포넌트 완성

각 단계를 하나씩 설명할게요.

---

Step 1. 피그마에서 컨텍스트 정리하기

피그마 Dev Mode를 열면 선택한 레이어의 CSS, 크기, 색상 코드가 다 나와요. 이걸 그대로 Claude Code에 붙여도 되는데, 저는 조금 더 손을 씁니다.

Claude Code에 넘길 때 이런 식으로 묶어요.

컴포넌트: 상품 카드
구조:
- 이미지 영역 (width: 100%, aspect-ratio: 4/3)
- 타이틀 텍스트 (font-size: 16px, font-weight: 600, color: #1A1A1A)
- 가격 텍스트 (font-size: 14px, color: #FF3D00)
- 찜하기 버튼 (우상단 고정, 아이콘 버튼)

반응형:
- Desktop: 4열 그리드
- Tablet: 2열 그리드
- Mobile: 1열 리스트

상태:
- 기본 / 호버 (그림자 + 살짝 올라오는 효과) / 품절 (이미지 그레이스케일)

 

스펙 값을 다 복붙하는 게 아니라, 구조와 상태를 언어로 정리하는 거예요.

Claude Code는 이 정도 컨텍스트면 충분히 시작할 수 있어요.

---

Step 2. Claude Code에 작업 지시하기

터미널에서 claude 실행하고, 이렇게 시작해요.

위 스펙으로 React 컴포넌트 만들어줘.
스타일은 Tailwind CSS 써줘.
props는 { title, price, imageUrl, isSoldOut, isWishlisted } 이 정도면 돼.
호버 애니메이션은 framer-motion 쓰고.

 

여기서 포인트는 — 도구 선택을 명시하는 거예요.

Claude Code가 스스로 선택하게 두면 프로젝트 기술 스택이랑 안 맞는 코드가 나올 수 있거든요.

그 다음은 진짜 바이브코딩이에요.

나오는 코드 보면서 "이 부분 호버 더 부드럽게", "품절 오버레이 텍스트 가운데 정렬로" 이런 식으로 계속 수정 요청을 주고받아요.

피그마 시안이 있으니까, 비교하면서 수정 방향을 잡을 수 있어서 훨씬 빠르게 끝나요.

---

Step 3. 피그마를 레퍼런스로 계속 열어두기

바이브코딩 중에 피그마를 닫으면 안 돼요.

코드가 어느 정도 완성됐을 때, 피그마랑 브라우저 미리보기를 나란히 놓고 비교해요. 간격이 좀 다르다, 폰트 굵기가 다르다 — 이런 디테일을 이 단계에서 잡아요.

Claude Code한테 "피그마 시안이랑 지금 코드 결과물이 다른 부분" 리스트로 정리해서 보내면, 한 번에 여러 수정사항을 처리해줘요. 이게 생각보다 시간이 많이 절약돼요.

---

솔직한 한계

이 방식이 무조건 좋은 건 아니에요. 솔직하게 얘기할게요.

① 피그마 레이어가 정리돼 있어야 해요

html.to.design으로 가져오면 레이어 이름이 div, span, p 같은 태그명으로 들어오는 경우가 많아요. 이 상태로 Claude Code에 넘기면 컨텍스트가 불명확해서 엉뚱한 컴포넌트가 나올 수 있어요.

임포트 후에 주요 섹션 레이어 이름은 의미 있는 이름으로 바꿔주는 게 좋아요. Header / ProductCard / FilterBar 이런 식으로요. 15분 정도면 돼요.

② 복잡한 인터랙션은 여전히 설명이 필요해요

드래그, 스크롤 연동 애니메이션 같은 건 피그마 시안만으로는 Claude Code가 파악하기 어려워요. 동작 방식을 텍스트로 추가 설명해야 해요.

③ 디자인 토큰이 없으면 색상·타이포가 중구난방으로 나와요

피그마에 컬러 스타일이나 텍스트 스타일이 없으면, Claude Code가 비슷한 색을 직접 집어넣어요. 나중에 디자인 시스템이랑 충돌할 수 있어요.

가능하면 피그마 작업 전에 컬러 변수 / 텍스트 스타일 최소한 몇 개라도 잡아두는 게 좋아요.

---

마무리: 피그마 시안은 "설계도"고, Claude Code는 "시공사"예요

코드 자동 변환 툴을 기대했다면 이 방식이 처음엔 번거롭게 느껴질 수 있어요.

근데 실무에서 진짜 필요한 건 "퀄리티 있는 컴포넌트"지, "빠르게 뽑힌 지저분한 코드"가 아니잖아요.

피그마 시안을 설계도 삼아,

Claude Code가 실제 컴포넌트를 짓는 구조 — 이 흐름이 한 번 손에 익으면 생각보다 빠르게 작업이 돌아가요.

html.to.design으로 베이스 잡고 → 피그마에서 시안 완성 → Claude Code로 바이브코딩.

이게 지금 제가 1인 개발자로 움직이는 현실적인 플로우예요.