13. Figma와 Claude Code로 만드는 팀 바이브코딩 워크플로우

이 문서는 다섯 명이 한 팀이 되어 실제 웹사이트(KB손해보험)를 Figma로 가져오고, 팀 공통 규칙을 정한 뒤, Claude Code와 Figma MCP로 페이지를 한 장씩 나눠 만드는 작업 흐름을 세우는 문서다. 앞의 "Tailwind CSS v4 – 레이아웃부터 반응형까지"를 따라 해 봤다면 코드가 눈에 익고, HTML 기본 태그와 폴더 만들기 정도는 할 수 있어야 한다. 끝까지 따라 하면 팀 공통 규칙 파일(CLAUDE.md), 참고 화면을 담은 Figma 팀 파일, 그리고 서로 링크로 이어지고 화면 요소가 움직이는 HTML 페이지 다섯 장이 결과물로 남는다.

준비물은 다섯 명 모두 같다. Figma 계정(무료), Chrome, VS Code, 그리고 Claude Code다. Claude Code는 유료 구독이 있어야 쓸 수 있으므로, Claude Pro·Max·Team 구독 계정이나 선불 크레딧을 채운 Claude Console 계정을 각자 하나씩 준비한다.

1 – 워크플로우 전체 그림과 팀 분담

바이브코딩은 원하는 결과를 말로 설명하면 AI가 코드를 작성하는 개발 방식이다. 코드를 한 줄씩 직접 치는 대신 "이 디자인대로 페이지를 만들어 줘"라고 지시하고, 나온 결과를 확인하며 다듬는다. 다만 다섯 명이 각자 마음대로 지시하면 다섯 가지 모양의 코드가 나오므로, 팀 작업에서는 공통 규칙을 정하는 일이 코드보다 먼저다.

이 팀이 만들 사이트는 MPA 방식이다. MPA(Multi Page Application)는 페이지마다 HTML 파일을 따로 두고 링크로 오가는 웹사이트 구성 방식이다. 메인은 main.html, 보험상품은 product.html처럼 파일이 나뉘고, 메뉴를 누르면 브라우저가 그 파일을 새로 연다. 공책 한 권에 다 같이 적는 대신 사람마다 종이 한 장씩 나눠 갖는 방식과 같다.

MPA를 고른 이유는 다섯 명이 동시에 작업하기 때문이다. 파일이 사람마다 하나씩 나뉘면 서로의 코드를 덮어쓸 일이 없어서, 각자 자기 파일만 손보면 된다. 대신 상단 메뉴처럼 모든 페이지에 똑같이 들어가는 부분은 파일마다 복사되므로, 그 공통 부분을 2장에서 규칙으로 못 박아 둔다.

작업 흐름은 다섯 단계다.

1. 팀 공통 규칙을 정해 문서로 만든다.
2. html.to.design으로 참고 사이트를 Figma로 가져온다.
3. Tailwind CSS v4 디자인 시스템 파일과 대조해 색·간격 기준을 정한다.
4. Claude Code에 Figma MCP를 연결한다.
5. 각자 페이지 한 장을 만들고 GSAP로 움직임을 넣은 뒤, 팀장이 한 폴더에 모아 링크로 잇는다.

역할과 담당 화면은 다음처럼 나눈다. 서브페이지 이름은 참고 사이트 상단 메뉴에서 골랐고, 팀 상황에 맞게 바꿔도 된다.

1.1 – 분담 확정과 규칙 회의 열기

첫 모임에서 정할 것은 위 표의 담당과 2장의 규칙이다. 이 두 가지가 확정돼야 각자 흩어져 작업할 수 있으므로, 코드나 디자인보다 이 회의를 먼저 한다.

1. 팀원 다섯 명이 모여 위 분담표를 보고 각자 담당 화면을 정한다.
2. 정한 담당을 팀 대화방에 표 그대로 옮겨 적어 공유한다.
3. 팀장을 한 명 정한다. 팀장은 규칙 문서를 관리하고, 마지막에 다섯 파일을 한 폴더에 모으는 일을 맡는다.
4. 2장의 규칙 기본안을 함께 읽고, 팀에 맞게 고칠 항목을 표시한다.

담당이 정해지면 그 사람의 화면 이름 하나가 Figma 프레임 이름과 HTML 파일 이름을 함께 정한다. 팀원 A가 보험상품을 맡았다면 프레임은 02_product, 파일은 product.html이 되므로, 이름만 보고도 누구 작업인지 알 수 있다.

실습 코칭 프롬프트

분담을 정하다 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움받는다.

아래는 5인 팀 웹사이트 만들기 실습에서 역할 분담을 정하다가 막혀 도움을 청하는 요청이다.
우리 팀은 참고 사이트를 보고 한 사람이 페이지 한 장씩 맡아 HTML 파일로 만드는 MPA 방식으로 작업한다.
팀 인원은 {팀 인원수}명이고, 참고 사이트와 후보 화면은 {참고 사이트와 화면 목록}이다.
지금 막힌 점은 {막힌 점}이다.

답할 때 다음을 지켜 달라.
- 분담표를 통째로 만들어 주지 말고, 내가 스스로 정하도록 이끌어 달라.
- 먼저 내가 막힌 까닭을 한 줄로 짚어 달라.
- 그다음 판단 기준 하나와 내가 할 일 한 단계만 알려 달라.
- 내가 그 한 단계를 해 본 뒤 확인할 수 있게 질문을 하나 던져 달라.
- 화면 수가 사람 수와 맞지 않거나 한 사람에게 유난히 큰 화면이 몰리면 짚어 달라.

1. {팀 인원수} — 실제 팀 인원. 예시 값: 5.
2. {참고 사이트와 화면 목록} — 참고 사이트 이름과 후보 화면 이름. 예시 값: KB손해보험, 메인/보험상품/청구·접수/고객지원/상담.
3. {막힌 점} — 지금 정하지 못하고 있는 것. 예시 값: 메인 화면이 다른 화면보다 두 배 길어 한 사람이 맡기 버거워 보인다.

변수를 채운 예시는 다음과 같다.

아래는 5인 팀 웹사이트 만들기 실습에서 역할 분담을 정하다가 막혀 도움을 청하는 요청이다.
우리 팀은 참고 사이트를 보고 한 사람이 페이지 한 장씩 맡아 HTML 파일로 만드는 MPA 방식으로 작업한다.
팀 인원은 5명이고, 참고 사이트와 후보 화면은 KB손해보험, 메인/보험상품/청구·접수/고객지원/상담이다.
지금 막힌 점은 메인 화면이 다른 화면보다 두 배 길어 한 사람이 맡기 버거워 보인다는 것이다.

답할 때 다음을 지켜 달라.
- 분담표를 통째로 만들어 주지 말고, 내가 스스로 정하도록 이끌어 달라.
- 먼저 내가 막힌 까닭을 한 줄로 짚어 달라.
- 그다음 판단 기준 하나와 내가 할 일 한 단계만 알려 달라.
- 내가 그 한 단계를 해 본 뒤 확인할 수 있게 질문을 하나 던져 달라.
- 화면 수가 사람 수와 맞지 않거나 한 사람에게 유난히 큰 화면이 몰리면 짚어 달라.

2 – 팀 공통 규칙 정의

규칙 없이 시작하면 어떤 일이 생기는지부터 본다. 한 명은 파일 이름을 main_page.html로, 다른 한 명은 MainPage.html로 짓고, 주 색도 한 명은 blue-600, 다른 한 명은 blue-500을 쓴다. 다섯 장을 한 폴더에 모으는 순간 한 사이트가 아니라 다섯 사이트처럼 보인다.

공통 규칙은 팀원 다섯 명이 똑같이 지키는 이름·구조·코드 작성 약속이다. MPA에서는 이 규칙이 더 중요하다. 상단 메뉴와 색 설정이 파일 다섯 개에 각각 복사되므로, 규칙이 흔들리면 페이지를 옮길 때마다 메뉴 모양이 달라진다.

바이브코딩 팀에서는 이 규칙을 사람만 아니라 AI도 지켜야 한다. 그래서 규칙을 회의록에 두지 않고 CLAUDE.md라는 파일에 적는다. CLAUDE.md는 Claude Code가 세션을 시작할 때 가장 먼저 읽는 프로젝트 규칙 파일이다. 여기에 적은 규칙은 팀원 누가 지시하든 AI가 함께 지킨다.

2.1 – 이름과 폴더 규칙 정하기

이름 규칙의 원칙은 하나다. 같은 대상은 어디서나 같은 이름으로 부른다. Figma 프레임 02_product와 파일 product.html처럼 담당 화면 하나가 두 곳에서 같은 단어로 이어지면, 누가 무엇을 맡았는지 이름만 보고 알 수 있다.

기본안은 다음과 같다. 회의에서 이 항목을 읽고 바꿀 곳만 고친다.

1. Figma 프레임 이름은 번호_영문이름으로 짓는다. 예: 01_main, 02_product.
2. HTML 파일 이름은 프레임의 영문이름을 그대로 쓰고 모두 소문자로 적는다. 예: product.html.
3. 폴더는 하나만 쓴다. HTML 파일 다섯 개를 kb_team_site 폴더 바로 아래에 두고, 이미지가 필요하면 그 아래 images 폴더에 넣는다.
4. 이미지 파일 이름은 페이지이름_설명.확장자로 짓는다. 예: product_banner.jpg.
5. 자기 담당 파일만 고친다. 다른 사람 파일을 열어 수정하지 않는다.

폴더를 하나만 쓰는 이유는 링크 때문이다. 파일이 모두 같은 자리에 있으면 메뉴 링크를 href="product.html"처럼 짧게 쓸 수 있고, 팀장이 파일을 모을 때 경로를 고칠 일도 없다.

2.2 – 모든 페이지에 똑같이 들어갈 공통 뼈대 정하기

MPA에서 가장 중요한 규칙은 공통 뼈대다. 공통 뼈대는 페이지 다섯 장에 글자 하나 다르지 않게 똑같이 들어가는 코드 덩어리를 말한다. 여기서는 두 가지를 뼈대로 정한다. 첫째는 도구를 불러오고 색을 정하는 head 부분이고, 둘째는 페이지 사이를 오가는 상단 메뉴다.

head 부분의 기본안은 다음과 같다. Tailwind는 앞 문서에서 쓴 Play CDN 방식을 그대로 쓴다. Play CDN은 설치 없이 script 태그 한 줄로 Tailwind를 불러오는 개발용 도구다.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>KB 리디자인 연습 - 메인</title>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      --color-brand: #F2A900;
      --color-ink: #1F2937;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/ScrollTrigger.min.js"></script>
</head>

@theme 블록이 팀 색을 정하는 자리다. 여기에 --color-brand를 적어 두면 다섯 페이지에서 모두 bg-brand, text-brand 클래스를 쓸 수 있다. 색을 바꿀 일이 생기면 이 한 줄만 고치면 되므로, 페이지마다 색 이름을 외워 맞출 필요가 없다. 값은 4장에서 참고 사이트를 보고 확정하므로 지금은 자리만 잡아 둔다.

상단 메뉴의 기본안은 다음과 같다. 링크 주소가 곧 다른 팀원의 파일 이름이다.

<nav class="flex items-center justify-between bg-ink text-white p-4">
  <a href="main.html" class="text-xl font-bold">KB 리디자인 연습</a>
  <div class="flex gap-6">
    <a href="product.html">보험상품</a>
    <a href="claim.html">청구/접수</a>
    <a href="support.html">고객지원</a>
    <a href="counsel.html">상담</a>
  </div>
</nav>

이 두 덩어리를 다섯 명이 각자 손으로 옮겨 적으면 오타가 생긴다. 그래서 2.3에서 이 코드를 규칙 파일에 그대로 넣고, 각자는 AI에게 "규칙 파일의 공통 뼈대를 그대로 쓰라"고 지시한다.

스타일 규칙의 기본안도 함께 정한다.

1. 색은 @theme에 정한 이름(brand, ink)과 Tailwind 기본 회색 계열만 쓴다.
2. 임의값(w-[13px]처럼 대괄호로 직접 적는 값)은 쓰지 않고, 기본 간격 단계(p-4, gap-6)만 쓴다.
3. 반응형은 접두사 없는 클래스로 모바일 화면을 먼저 만들고, md:와 lg: 접두사로 큰 화면을 덧입힌다.
4. 참고 사이트의 사진과 로고는 내려받아 쓰지 않고, 색 블록이나 회색 상자로 대신한다.

네 번째 항목은 저작권 때문이다. 실제 회사의 사진과 로고는 저작물이므로 연습 결과물에 그대로 넣지 않는다.

2.3 – 규칙을 CLAUDE.md 파일로 굳히기

회의에서 확정한 규칙을 팀장이 CLAUDE.md 파일로 만든다. 5장에서 팀 폴더를 만들 때 그 폴더 맨 위에 이 파일을 둔다.

1. 팀장 컴퓨터에서 VS Code를 실행한다.
2. 메뉴에서 [File] → [New File]을 클릭하고, 아래 내용을 입력한다. 2.2의 공통 뼈대 코드는 빠짐없이 그대로 넣는다.

# 팀 공통 규칙

## 프로젝트
- KB손해보험 웹사이트를 참고해 연습용 사이트를 만든다. 결과물은 학습용으로만 쓴다.
- MPA 방식이다. 페이지마다 HTML 파일 하나를 만들고 링크로 오간다.
- Tailwind는 Play CDN으로 불러온다. 별도 CSS 파일을 만들지 않는다.
- 움직임은 GSAP로만 넣는다. 다른 애니메이션 라이브러리를 추가하지 않는다.

## 파일과 이름
- HTML 파일은 main.html, product.html, claim.html, support.html, counsel.html 다섯 개다.
- 파일은 모두 kb_team_site 폴더 바로 아래에 둔다. 이미지는 images 폴더에 넣는다.
- 파일 이름과 이미지 이름은 모두 소문자로 적는다.

## 공통 뼈대
- 모든 페이지의 head는 아래 코드를 그대로 쓴다. title의 페이지 이름만 바꾼다.
- 모든 페이지의 상단 메뉴는 아래 nav 코드를 그대로 쓴다. 링크 주소를 바꾸지 않는다.

## Tailwind 작성 규칙
- 색은 @theme에 정한 brand, ink와 Tailwind 기본 회색 계열만 쓴다.
- 임의값(대괄호 값)을 쓰지 않는다. 기본 간격 단계만 쓴다.
- 반응형은 접두사 없는 클래스로 모바일을 먼저 만들고 md:, lg:로 큰 화면을 덧입힌다.

## 이미지
- 참고 사이트의 사진과 로고를 내려받아 쓰지 않는다. 색 블록이나 회색 상자로 대신한다.

## 작업 범위
- 자기 담당 파일 하나만 고친다. 다른 사람의 HTML 파일을 수정하지 않는다.

1. Ctrl+S 키를 눌러 바탕화면에 CLAUDE.md라는 이름으로 저장한다.
2. 2.2의 head 코드와 nav 코드를 이 파일의 "공통 뼈대" 항목 아래에 붙여 넣고 다시 저장한다.

이 파일이 이 워크플로우의 중심이다. 사람이 읽는 회의록이면서, 동시에 AI가 세션마다 읽는 지시서가 된다. 예를 들어 팀원 B가 "청구 페이지를 만들어 줘"라고만 지시해도, Claude Code는 이 파일을 읽고 파일 이름을 claim.html로 짓고 상단 메뉴를 규칙대로 넣는다.

실습 코칭 프롬프트

규칙을 정리하다 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움받는다.

아래는 5인 팀 웹사이트 만들기 실습에서 팀 공통 규칙을 정리하다가 막혀 도움을 청하는 요청이다.
우리 팀은 페이지마다 HTML 파일을 따로 두는 MPA 방식으로 작업한다.
규칙은 CLAUDE.md 한 파일에 적어 팀원과 AI가 함께 지키게 한다.
지금까지 적은 규칙 초안은 {규칙 초안}이다.
모든 페이지에 똑같이 들어갈 공통 뼈대로 정한 것은 {공통 뼈대 항목}이다.
지금 막힌 점은 {막힌 점}이다.

답할 때 다음을 지켜 달라.
- 완성된 규칙 문서를 대신 써 주지 말고, 내 초안에서 빠진 자리를 찾아 주는 방식으로 도와 달라.
- 먼저 내 초안에서 가장 먼저 보완할 항목 하나만 짚어 달라.
- 그 항목을 내가 직접 문장으로 적을 수 있게 질문으로 이끌어 달라.
- 내가 적은 문장을 팀원 다섯 명이 서로 다르게 해석할 여지가 있는지 확인해 달라.
- 상단 메뉴나 색 설정처럼 파일마다 복사되는 부분이 규칙에서 빠져 있으면 짚어 달라.

1. {규칙 초안} — 지금까지 적은 규칙 항목. 예시 값: 파일 이름은 소문자, 색은 brand와 ink만 사용, 자기 파일만 수정.
2. {공통 뼈대 항목} — 모든 페이지에 똑같이 넣기로 한 코드. 예시 값: head의 CDN 스크립트와 @theme 블록, 상단 메뉴 nav 코드.
3. {막힌 점} — 규칙으로 정하기 어려운 것. 예시 값: 페이지마다 title을 어떻게 다르게 적을지 규칙으로 못 정하겠다.

변수를 채운 예시는 다음과 같다.

아래는 5인 팀 웹사이트 만들기 실습에서 팀 공통 규칙을 정리하다가 막혀 도움을 청하는 요청이다.
우리 팀은 페이지마다 HTML 파일을 따로 두는 MPA 방식으로 작업한다.
규칙은 CLAUDE.md 한 파일에 적어 팀원과 AI가 함께 지키게 한다.
지금까지 적은 규칙 초안은 파일 이름은 소문자, 색은 brand와 ink만 사용, 자기 파일만 수정이다.
모든 페이지에 똑같이 들어갈 공통 뼈대로 정한 것은 head의 CDN 스크립트와 @theme 블록, 상단 메뉴 nav 코드다.
지금 막힌 점은 페이지마다 title을 어떻게 다르게 적을지 규칙으로 못 정하겠다는 것이다.

답할 때 다음을 지켜 달라.
- 완성된 규칙 문서를 대신 써 주지 말고, 내 초안에서 빠진 자리를 찾아 주는 방식으로 도와 달라.
- 먼저 내 초안에서 가장 먼저 보완할 항목 하나만 짚어 달라.
- 그 항목을 내가 직접 문장으로 적을 수 있게 질문으로 이끌어 달라.
- 내가 적은 문장을 팀원 다섯 명이 서로 다르게 해석할 여지가 있는지 확인해 달라.
- 상단 메뉴나 색 설정처럼 파일마다 복사되는 부분이 규칙에서 빠져 있으면 짚어 달라.

3 – html.to.design으로 사이트를 Figma로 가져오기

규칙을 정했으니 참고 디자인을 팀의 Figma 파일로 가져온다. html.to.design은 웹사이트 주소를 입력하면 그 화면을 편집 가능한 Figma 디자인으로 가져오는 플러그인이다. 화면을 그림 한 장으로 찍는 것이 아니라 글자·상자·이미지를 각각 Figma 요소로 만들어 주므로, 요소를 눌러 크기와 색을 확인할 수 있다.

3.1 – 팀 파일 만들고 팀원 초대하기 (팀장)

다섯 명이 한 파일에서 작업하도록, 팀장이 디자인 파일을 만들어 팀원을 초대한다.

1. https://www.figma.com 에 로그인한다.
2. 화면의 [Create new] 또는 [+] 버튼을 눌러 새 디자인 파일(Design file)을 만든다.
3. 화면 왼쪽 위 파일 이름을 클릭하고 KB_리디자인_팀파일로 바꾼다.
4. 화면 오른쪽 위 [Share] 버튼을 클릭한다.
5. 초대 입력란에 팀원 네 명의 이메일(Figma 가입 메일)을 입력한다.
6. 권한을 "can edit"(편집 가능)로 선택하고 초대를 보낸다.
7. 팀원 네 명은 초대 메일의 링크를 열어 같은 파일에 들어온다.

이제 다섯 명이 같은 캔버스를 실시간으로 본다. 한 명이 프레임을 옮기면 나머지 화면에도 바로 반영된다.

3.2 – 메인 페이지 가져오기 (팀장)

팀 파일에서 플러그인을 실행해 참고 사이트의 메인 페이지부터 가져온다.

1. 캔버스의 빈 곳에서 마우스 오른쪽 버튼을 클릭한다.
2. [Plugins]에 마우스를 올리고 플러그인 검색 메뉴를 연다.
3. 검색창에 html.to.design을 입력하고, 목록에서 "html.to.design — by ‹div›RIOTS"를 클릭해 실행한다.
4. 플러그인 창의 URL 입력란에 https://www.kbinsure.co.kr/main.ec를 입력한다.
5. 뷰포트(가져올 화면 너비)는 Desktop을 선택한다.
6. [Import] 버튼을 클릭하고 변환이 끝날 때까지 30초~2분 기다린다.
7. 캔버스에 생긴 프레임의 이름을 더블클릭해 규칙대로 01_main으로 바꾼다.

캔버스에 메인 페이지가 통째로 들어왔다. 왼쪽 레이어 패널을 펼치면 상단 메뉴·배너·카드가 각각 요소로 나뉘어 있고, 요소를 클릭하면 오른쪽 패널에서 크기·색·글꼴 값이 보인다. 이 값이 6장 프롬프트의 근거가 된다.

3.3 – 서브페이지 가져오기 (팀원 각자)

같은 방법으로 팀원 네 명이 각자 담당 서브페이지를 가져온다. 담당자가 직접 가져와야 자기 화면의 구조를 눈으로 익히게 된다.

1. Chrome에서 https://www.kbinsure.co.kr/main.ec 에 접속한다.
2. 상단 메뉴에서 자기 담당 메뉴(예: 팀원 A는 보험상품)를 클릭해 그 페이지로 이동한다.
3. 주소창을 클릭하고 Ctrl+C 키로 그 페이지의 URL을 복사한다.
4. Figma 팀 파일로 돌아와 3.2의 1~6번을 반복하되, 4번에서 복사한 URL을 붙여 넣는다.
5. 생긴 프레임 이름을 분담표 규칙대로 바꾼다. 예: 02_product.
6. 프레임을 드래그해 01_main 오른쪽에 번호 순서로 나란히 놓는다.

다섯 프레임이 번호 순서로 늘어서면 팀의 디자인 소스가 완성된 것이다. 프레임 이름이 곧 담당 표시이므로, 파일만 열어도 누가 어느 화면을 맡았는지 보인다.

실습 코칭 프롬프트

화면을 가져오다 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움받는다.

아래는 Figma 플러그인 html.to.design으로 웹사이트를 Figma로 가져오다가 막혀 도움을 청하는 요청이다.
가져오려는 페이지 주소는 {페이지 주소}이고, 뷰포트는 {뷰포트}로 선택했다.
{진행한 단계}까지는 진행했고, 화면에 나온 메시지는 {화면 메시지}다.

답할 때 다음을 지켜 달라.
- 해결책을 한꺼번에 나열하지 말고, 원인이 될 만한 것을 하나씩 확인하게 이끌어 달라.
- 먼저 지금 증상으로 짐작되는 원인을 한 줄로 짚어 달라.
- 그다음 내가 확인할 것 한 가지만 알려 달라.
- 내가 확인한 결과를 말하면 그에 맞춰 다음 한 단계를 알려 달라.
- 무료 사용 횟수 한도나 로그인 상태처럼 놓치기 쉬운 조건이 있으면 짚어 달라.

1. {페이지 주소} — 가져오려는 페이지의 URL. 예시 값: https://www.kbinsure.co.kr/main.ec.
2. {뷰포트} — 플러그인에서 고른 화면 너비. 예시 값: Desktop.
3. {진행한 단계} — 어디까지 됐는지. 예시 값: 플러그인 실행과 URL 입력.
4. {화면 메시지} — 화면에 나온 문구. 없으면 증상을 적는다. 예시 값: Import 버튼을 누른 뒤 3분이 지나도 진행 표시가 그대로다.

변수를 채운 예시는 다음과 같다.

아래는 Figma 플러그인 html.to.design으로 웹사이트를 Figma로 가져오다가 막혀 도움을 청하는 요청이다.
가져오려는 페이지 주소는 https://www.kbinsure.co.kr/main.ec 이고, 뷰포트는 Desktop으로 선택했다.
플러그인 실행과 URL 입력까지는 진행했고, 화면에 나온 메시지는 Import 버튼을 누른 뒤 3분이 지나도 진행 표시가 그대로라는 것이다.

답할 때 다음을 지켜 달라.
- 해결책을 한꺼번에 나열하지 말고, 원인이 될 만한 것을 하나씩 확인하게 이끌어 달라.
- 먼저 지금 증상으로 짐작되는 원인을 한 줄로 짚어 달라.
- 그다음 내가 확인할 것 한 가지만 알려 달라.
- 내가 확인한 결과를 말하면 그에 맞춰 다음 한 단계를 알려 달라.
- 무료 사용 횟수 한도나 로그인 상태처럼 놓치기 쉬운 조건이 있으면 짚어 달라.

4 – Tailwind 디자인 시스템과 대조하기

가져온 화면의 색·간격은 참고 사이트의 원본 값이다. 이 값을 그대로 코드에 옮기면 2장에서 금지한 임의값투성이가 되므로, 팀 기준값으로 바꿔 읽는 단계가 필요하다. 기준으로는 Figma 커뮤니티에 공개된 "TailwindCSS v4.2.4 Design System" 파일을 쓴다. 디자인 시스템은 색·글자·간격 같은 디자인 기준값과 부품을 한곳에 모은 문서다.

4.1 – 커뮤니티 파일 복제하기 (팀장)

1. Chrome에서 https://www.figma.com/community/file/1052575036916494414 에 접속한다.
2. [Open in Figma] 버튼을 클릭한다. 파일 사본이 내 계정에 만들어져 열린다.
3. 화면 오른쪽 위 [Share] 버튼으로 팀원 네 명을 "can view"(보기 전용) 권한으로 초대한다.

이 파일은 Tailwind의 색 팔레트, 간격 단계, 글자 크기 단계를 Figma 변수(값에 이름을 붙여 재사용하는 기능)로 정리해 둔 자료다. 팀은 이 파일을 고치지 않고 기준값 사전으로만 쓰므로 보기 전용이면 충분하다.

4.2 – 팀 색을 확정해 규칙 파일에 반영하기

이제 3장에서 가져온 화면과 디자인 시스템을 나란히 놓고, 2.2에서 자리만 잡아 둔 @theme 값을 확정한다.

1. 팀 파일에서 01_main 프레임의 주요 버튼을 클릭하고, 오른쪽 패널의 Fill 색상값(예: #F2A900 같은 16진수)을 확인한다.
2. 디자인 시스템 파일의 색 팔레트 페이지를 열고, 그 색과 가장 가까운 Tailwind 색을 눈으로 찾는다.
3. 같은 방법으로 본문 글자색도 가까운 색을 찾는다.
4. 찾은 두 값을 CLAUDE.md 공통 뼈대의 @theme 블록에 적는다. 아래는 예시다.

@theme {
  --color-brand: #F2A900;
  --color-ink: #1F2937;
}

1. 팀 대화방에 확정한 두 값을 공유한다.

색 이름을 brand와 ink로 정해 두면, 다섯 명이 색 코드를 외우지 않고 bg-brand, text-ink만 쓰면 된다. 나중에 색을 바꿔야 할 때도 CLAUDE.md의 값 한 줄과 각 파일의 head 한 줄만 고치면 사이트 전체 색이 함께 바뀐다.

실습 코칭 프롬프트

색을 고르다 망설여지면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움받는다.

아래는 참고 사이트의 색을 팀 기준 색으로 바꿔 정하다가 막혀 도움을 청하는 요청이다.
우리 팀은 참고 화면의 색을 그대로 쓰지 않고, 가장 가까운 Tailwind 색을 골라 @theme에 이름을 붙여 쓴다.
참고 화면에서 읽은 색값은 {읽은 색값}이고, 후보로 고른 Tailwind 색은 {후보 색 이름}이다.
이 색을 쓸 자리는 {쓸 자리}이고, 망설이는 이유는 {망설이는 이유}다.

답할 때 다음을 지켜 달라.
- 정답 색을 바로 알려 주지 말고, 내가 고를 기준을 세우도록 도와 달라.
- 먼저 색을 고를 때 무엇을 먼저 봐야 하는지 기준 하나를 알려 달라.
- 그 기준으로 내 후보를 스스로 견줘 보게 질문을 던져 달라.
- 내가 고른 색 위에 흰 글자를 얹었을 때 읽기 어려워지지 않는지 확인하게 해 달라.
- 주 색을 넓은 배경에 칠하면 눈이 피로해지는 경우처럼 초보자가 놓치기 쉬운 점이 보이면 짚어 달라.

1. {읽은 색값} — Figma 오른쪽 패널에서 읽은 16진수 값. 예시 값: #F2A900.
2. {후보 색 이름} — 팔레트에서 고른 후보. 예시 값: amber-500과 yellow-500 중 고민 중.
3. {쓸 자리} — 그 색을 칠할 곳. 예시 값: 주요 버튼과 배너 배경.
4. {망설이는 이유} — 결정하지 못하는 까닭. 예시 값: 버튼에서는 amber가 맞아 보이는데 배너에 칠하면 너무 밝다.

변수를 채운 예시는 다음과 같다.

아래는 참고 사이트의 색을 팀 기준 색으로 바꿔 정하다가 막혀 도움을 청하는 요청이다.
우리 팀은 참고 화면의 색을 그대로 쓰지 않고, 가장 가까운 Tailwind 색을 골라 @theme에 이름을 붙여 쓴다.
참고 화면에서 읽은 색값은 #F2A900이고, 후보로 고른 Tailwind 색은 amber-500과 yellow-500 중 고민 중이다.
이 색을 쓸 자리는 주요 버튼과 배너 배경이고, 망설이는 이유는 버튼에서는 amber가 맞아 보이는데 배너에 칠하면 너무 밝다는 것이다.

답할 때 다음을 지켜 달라.
- 정답 색을 바로 알려 주지 말고, 내가 고를 기준을 세우도록 도와 달라.
- 먼저 색을 고를 때 무엇을 먼저 봐야 하는지 기준 하나를 알려 달라.
- 그 기준으로 내 후보를 스스로 견줘 보게 질문을 던져 달라.
- 내가 고른 색 위에 흰 글자를 얹었을 때 읽기 어려워지지 않는지 확인하게 해 달라.
- 주 색을 넓은 배경에 칠하면 눈이 피로해지는 경우처럼 초보자가 놓치기 쉬운 점이 보이면 짚어 달라.

5 – 작업 폴더 만들기와 Figma MCP 연결

디자인 소스와 규칙이 준비됐으니, 코드를 담을 폴더와 AI 연결을 만든다. 이 장에서 MCP라는 용어가 처음 나온다. MCP(Model Context Protocol)는 AI 도구가 다른 프로그램의 데이터를 읽고 쓰도록 연결하는 표준 통신 규약이다. Figma MCP 서버는 이 규약으로 Claude Code가 Figma 디자인을 읽게 하는 통로다.

5.1 – Claude Code 설치와 로그인 (팀원 모두)

1. Win+R 키를 누르고 powershell을 입력한 뒤 Enter 키를 눌러 PowerShell 창을 연다.
2. 다음 명령을 입력하고 Enter 키를 누른다.

irm https://claude.ai/install.ps1 | iex

1. 설치가 끝나면 PowerShell 창을 닫았다가 다시 연다.
2. claude를 입력하고 Enter 키를 누른다.
3. 처음 실행하면 로그인 안내가 나온다. 안내를 따라 브라우저에서 자기 Claude 계정으로 인증한다.
4. 터미널에 Claude Code 프롬프트(버전·모델·작업 폴더 표시)가 나타나면 성공이다. /exit를 입력해 일단 종료한다.

macOS와 Linux는 2번 명령 대신 터미널에서 다음을 쓴다.

curl -fsSL https://claude.ai/install.sh | bash

5.2 – 팀 폴더 만들어 나눠 갖기 (팀장 → 팀원)

MPA는 HTML 파일만 있으면 동작하므로 따로 설치할 개발 도구가 없다. 팀장이 빈 폴더와 규칙 파일만 준비해 나눠 주면 된다.

1. 팀장이 바탕화면에 kb_team_site 폴더를 만든다.
2. 그 폴더 안에 images 폴더를 만든다.
3. 2.3에서 만든 CLAUDE.md 파일을 kb_team_site 폴더 안으로 옮긴다.
4. kb_team_site 폴더에서 마우스 오른쪽 버튼을 클릭하고 [압축]을 선택해 압축 파일을 만든다.
5. 압축 파일을 팀 대화방이나 공유 드라이브에 올린다.
6. 팀원 네 명은 압축 파일을 내려받아 자기 바탕화면에 푼다.

이제 다섯 명의 컴퓨터에 똑같은 폴더와 똑같은 규칙 파일이 놓였다. 각자 이 폴더 안에 자기 담당 HTML 파일 하나만 만들면 되고, 마지막에 그 파일 하나만 팀장에게 보내면 된다.

5.3 – Figma MCP 연결하기 (팀원 모두)

이제 Claude Code가 Figma를 읽도록 연결한다. Figma MCP 서버는 원격 방식과 데스크톱 앱 방식이 있는데, 원격 방식은 모든 플랜과 시트에서 쓸 수 있으므로 무료 계정인 이 팀은 원격 방식을 쓴다.

1. PowerShell에서 cd ~/Desktop/kb_team_site를 입력해 팀 폴더로 이동한다.
2. 다음 명령을 입력하고 Enter 키를 누른다. Claude Code를 시작하기 전에 PowerShell에서 실행하는 명령이다.

claude plugin install figma@claude-plugins-official

1. 설치가 끝나면 claude를 입력해 Claude Code를 시작한다.
2. /plugin을 입력해 Installed 탭에서 figma가 보이는지 확인한다.
3. /mcp를 입력해 figma 서버가 connected 상태인지 확인한다. 처음에는 브라우저 인증 창이 열리므로, 팀 파일을 쓰는 자기 Figma 계정으로 승인한다.

연결 확인까지 끝나면 Claude Code가 Figma 프레임 링크를 읽을 수 있는 상태가 된다.

실습 코칭 프롬프트

설치나 연결에서 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움받는다.

아래는 Claude Code를 설치하고 Figma MCP 서버에 연결하다가 막혀 도움을 청하는 요청이다.
내 컴퓨터 운영체제는 {운영체제}이고, 실행한 명령은 {실행한 명령}이다.
지금 상태는 {지금 상태}이고, 화면에 나온 메시지는 {오류 메시지}다.

답할 때 다음을 지켜 달라.
- 명령을 여러 개 한꺼번에 주지 말고, 한 번에 하나씩 실행하게 이끌어 달라.
- 먼저 지금 메시지가 무슨 뜻인지 한 줄로 풀어 달라.
- 그다음 내가 실행할 명령 한 줄이나 확인할 항목 하나만 알려 달라.
- 내가 결과를 붙여 넣으면 그에 맞춰 다음 한 단계를 알려 달라.
- 인증에 쓴 계정이 팀 파일 계정과 다르거나 터미널을 다시 열지 않은 경우처럼 자주 나오는 원인이 있으면 짚어 달라.

1. {운영체제} — 쓰는 운영체제와 터미널. 예시 값: Windows 11, PowerShell.
2. {실행한 명령} — 마지막으로 실행한 명령. 예시 값: claude plugin install figma@claude-plugins-official.
3. {지금 상태} — 어디까지 됐는지. 예시 값: 설치는 끝났고 /mcp에서 figma가 connected로 안 바뀐다.
4. {오류 메시지} — 화면 문구를 그대로. 없으면 "메시지 없음"이라고 적는다. 예시 값: 메시지 없음.

변수를 채운 예시는 다음과 같다.

아래는 Claude Code를 설치하고 Figma MCP 서버에 연결하다가 막혀 도움을 청하는 요청이다.
내 컴퓨터 운영체제는 Windows 11, PowerShell이고, 실행한 명령은 claude plugin install figma@claude-plugins-official이다.
지금 상태는 설치는 끝났고 /mcp에서 figma가 connected로 안 바뀐다는 것이고, 화면에 나온 메시지는 메시지 없음이다.

답할 때 다음을 지켜 달라.
- 명령을 여러 개 한꺼번에 주지 말고, 한 번에 하나씩 실행하게 이끌어 달라.
- 먼저 지금 메시지가 무슨 뜻인지 한 줄로 풀어 달라.
- 그다음 내가 실행할 명령 한 줄이나 확인할 항목 하나만 알려 달라.
- 내가 결과를 붙여 넣으면 그에 맞춰 다음 한 단계를 알려 달라.
- 인증에 쓴 계정이 팀 파일 계정과 다르거나 터미널을 다시 열지 않은 경우처럼 자주 나오는 원인이 있으면 짚어 달라.

6 – 페이지 만들기와 움직임 넣기

준비가 모두 끝났다. 이 장은 팀장의 메인 페이지를 예로 한 바퀴를 돌고, 같은 흐름을 팀원 네 명이 자기 담당 페이지로 반복한다.

6.1 – 프레임 링크로 페이지 만들기

이제 바이브코딩 단계다. Figma 프레임 링크를 Claude Code에 주고, 공통 규칙에 따라 페이지를 만들게 한다.

1. Figma 팀 파일에서 자기 담당 프레임(팀장은 01_main)을 마우스 오른쪽 버튼으로 클릭한다.
2. [Copy link to selection]을 클릭해 프레임 링크를 복사한다.
3. PowerShell에서 팀 폴더로 이동해 claude를 시작한다.
4. 다음 프롬프트의 링크 자리에 복사한 링크를 붙여 넣어 입력한다.

아래 Figma 프레임의 디자인을 읽고 main.html 파일 하나를 만들어 줘.
[복사한 프레임 링크]
CLAUDE.md의 공통 규칙을 지켜 줘. head와 상단 메뉴는 규칙 파일의 공통 뼈대를 그대로 쓰고,
색은 brand와 ink만 쓰고, 대괄호 임의값은 쓰지 마.
사진은 넣지 말고 회색 상자로 자리만 잡아 줘.

1. Claude Code가 파일 생성 승인을 물으면 내용을 읽고 승인한다.
2. 작업이 끝나면 kb_team_site 폴더에서 main.html을 더블클릭해 Chrome으로 연다.
3. 디자인과 다른 곳은 이어서 지시해 다듬는다. 예: "카드 사이 간격을 gap-6으로 맞춰 줘."

이 프롬프트가 워크플로우 전체를 한 문장으로 잇는다. 링크는 3장에서 가져온 디자인을, "CLAUDE.md의 공통 규칙"은 2장과 4장에서 정한 약속을 가리킨다. 지시는 담당자가 각자 하지만 규칙이 하나이므로 결과물의 결이 맞는다.

프롬프트도 조각으로 나눠 보면 자기 것으로 바꾸기 쉽다. 첫 줄은 무엇을 만들지(파일 이름), 둘째 줄은 근거 디자인(링크), 셋째와 넷째 줄은 지킬 규칙, 다섯째 줄은 이미지 처리 방침이다. 팀원 B라면 첫 줄의 파일 이름만 claim.html로 바꾸면 된다.

6.2 – GSAP로 움직임 넣기

화면 배치가 끝났으니 움직임을 더한다. GSAP는 웹 화면의 요소를 움직이는 자바스크립트 애니메이션 라이브러리다. 요소가 스르르 나타나거나 위로 떠오르는 효과를 몇 줄로 만든다.

GSAP를 쓰는 자리는 두 곳이다. 페이지를 열자마자 실행되는 등장 효과와, 스크롤해서 그 자리에 닿으면 실행되는 효과다. 뒤쪽은 ScrollTrigger가 맡는다. ScrollTrigger는 화면을 스크롤해 특정 위치에 닿으면 애니메이션을 실행하는 GSAP 플러그인이다.

두 가지 도구는 2.2의 공통 뼈대 head에 이미 들어 있다. 코드는 </body> 바로 위에 적는다.

1. VS Code로 자기 HTML 파일을 연다.
2. 움직일 요소에 클래스를 붙인다. 예를 들어 카드마다 class="card ..."처럼 card를 더한다.
3. </body> 바로 위에 다음 코드를 입력한다.

<script>
  gsap.registerPlugin(ScrollTrigger);

  gsap.from("nav", { y: -30, opacity: 0, duration: 0.6 });

  gsap.from(".card", { y: 20, opacity: 0, duration: 0.5, stagger: 0.15 });

  gsap.from("#notice", {
    y: 40,
    opacity: 0,
    duration: 0.6,
    scrollTrigger: { trigger: "#notice", start: "top 80%" }
  });
</script>

1. Ctrl+S 키로 저장하고 Chrome에서 F5 키로 새로고침한다.

페이지를 열면 상단 메뉴가 위에서 내려오고, 카드가 0.15초 간격으로 하나씩 떠오른다. 아래로 스크롤하면 notice 요소가 나타난다.

코드를 조각으로 나눠 보면 바꿔 쓰기 쉽다. gsap.from은 "적은 상태에서 시작해 원래 모습으로 돌아온다"는 뜻이므로, opacity: 0은 투명한 상태에서 시작해 원래 불투명도로 나타난다는 의미다. y: 20은 20px 아래에서 제자리로 올라온다는 뜻이고, duration은 걸리는 시간(초), stagger는 여러 요소를 몇 초씩 차이 두고 실행할지 정한다. 자기 페이지에서는 첫 인자의 선택자("nav", ".card")만 자기 요소에 맞게 바꾸면 된다.

6.3 – 다섯 장을 한 폴더에 모으기 (팀장)

각자 페이지가 끝나면 팀장이 파일을 모아 사이트로 잇는다. MPA에서는 이 단계가 파일을 한 폴더에 넣는 일로 끝난다.

1. 팀원 네 명은 자기 HTML 파일 하나를 팀 대화방이나 공유 드라이브에 올린다. 이미지를 만들었으면 함께 올린다.
2. 팀장은 받은 파일 네 개를 자기 kb_team_site 폴더 안에 넣는다. 이미지는 images 폴더에 넣는다.
3. 폴더 안에 HTML 파일이 다섯 개인지, 이름이 규칙과 같은지 확인한다.
4. main.html을 더블클릭해 Chrome으로 연다.
5. 상단 메뉴의 링크를 하나씩 눌러 다섯 페이지를 모두 오간다.
6. 링크가 열리지 않으면 그 페이지의 파일 이름이 규칙과 다른지 확인하고, 파일 이름을 규칙대로 고친다.

메뉴 링크가 다섯 장을 모두 오가면 사이트가 완성된 것이다. 각자 만든 파일을 한 폴더에 넣기만 해도 하나로 이어지는 이유는, 2.2에서 상단 메뉴 코드와 파일 이름을 규칙으로 미리 맞춰 뒀기 때문이다.

배운 흐름만으로 다음 과제를 직접 해 본다.

1. 각자 담당 서브페이지를 6.1과 6.2 흐름으로 만들어 팀장에게 보낸다.
2. 지금 열려 있는 페이지의 메뉴 글자를 굵게 보이도록, 자기 파일의 상단 메뉴에서 자기 페이지 링크에만 font-bold 클래스를 더한다.

실습 코칭 프롬프트

페이지를 만들거나 움직임을 넣다 막히면 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini)에 붙여 넣어 한 단계씩 도움받는다.

아래는 Figma 디자인을 보고 만든 HTML 페이지에 GSAP 움직임을 넣다가 막혀 도움을 청하는 요청이다.
내가 맡은 페이지 파일은 {페이지 파일}이고, Tailwind는 Play CDN으로 불러오고 움직임은 GSAP로 넣는다.
지금까지 한 것은 {지금까지 한 것}이고, 안 되는 증상은 {안 되는 증상}이다.
문제가 있는 코드는 다음과 같다.
{문제 코드}

답할 때 다음을 지켜 달라.
- 고친 코드를 통째로 주지 말고, 어디를 왜 고쳐야 하는지 짚어 내가 직접 고치게 해 달라.
- 먼저 증상으로 짐작되는 원인을 한 줄로 짚어 달라.
- 그다음 내가 확인하거나 고칠 곳 한 군데만 알려 달라.
- 내가 고쳐 본 결과를 말하면 그에 맞춰 다음 한 단계를 알려 달라.
- 선택자 이름이 실제 요소와 다르거나 스크롤 대상 아래에 공간이 모자라 실행되지 않는 경우처럼 자주 나오는 실수가 보이면 짚어 달라.

1. {페이지 파일} — 자기 담당 파일 이름. 예시 값: claim.html.
2. {지금까지 한 것} — 어디까지 만들었는지. 예시 값: Figma 링크로 화면 배치까지 만들고 GSAP 코드를 body 끝에 넣었다.
3. {안 되는 증상} — 무엇이 기대와 다른지. 예시 값: 상단 메뉴는 움직이는데 카드는 처음부터 그대로 보인다.
4. {문제 코드} — 해당 부분 코드를 그대로. 예시 값: gsap.from(".card", { y: 20, opacity: 0, duration: 0.5, stagger: 0.15 });.

변수를 채운 예시는 다음과 같다.

아래는 Figma 디자인을 보고 만든 HTML 페이지에 GSAP 움직임을 넣다가 막혀 도움을 청하는 요청이다.
내가 맡은 페이지 파일은 claim.html이고, Tailwind는 Play CDN으로 불러오고 움직임은 GSAP로 넣는다.
지금까지 한 것은 Figma 링크로 화면 배치까지 만들고 GSAP 코드를 body 끝에 넣은 것이고,
안 되는 증상은 상단 메뉴는 움직이는데 카드는 처음부터 그대로 보인다는 것이다.
문제가 있는 코드는 다음과 같다.
gsap.from(".card", { y: 20, opacity: 0, duration: 0.5, stagger: 0.15 });

답할 때 다음을 지켜 달라.
- 고친 코드를 통째로 주지 말고, 어디를 왜 고쳐야 하는지 짚어 내가 직접 고치게 해 달라.
- 먼저 증상으로 짐작되는 원인을 한 줄로 짚어 달라.
- 그다음 내가 확인하거나 고칠 곳 한 군데만 알려 달라.
- 내가 고쳐 본 결과를 말하면 그에 맞춰 다음 한 단계를 알려 달라.
- 선택자 이름이 실제 요소와 다르거나 스크롤 대상 아래에 공간이 모자라 실행되지 않는 경우처럼 자주 나오는 실수가 보이면 짚어 달라.