id: 4081
slug: figma-%ec%97%90%ec%9d%b4%ec%a0%84%ed%8a%b8%eb%a1%9c-tailwind-v4-%eb%94%94%ec%9e%90%ec%9d%b8-%ec%8b%9c%ec%8a%a4%ed%85%9c-%eb%93%b1%eb%a1%9d%ed%95%98%ea%b8%b0
title: "Figma 에이전트로 Tailwind v4 디자인 시스템 등록하기"
status: publish
date: "2026-07-28 09:31:19"
categories: creative,creative-design,creative-figma
tags: %eb%b0%94%ec%9d%b4%eb%b8%8c%ec%bd%94%eb%94%a9,%ed%8c%80%ed%94%84%eb%a1%9c%ec%a0%9d%ed%8a%b8,%ed%94%bc%ea%b7%b8%eb%a7%88

Figma 에이전트로 Tailwind CSS v4 호환 디자인 시스템 등록하기

이 문서는 다섯 명이 한 팀이 되어 참고 사이트(KB손해보험)를 다시 만들어 보는 실습의 디자인 시스템 등록 단계를 다룬다. Figma Design 파일 안 에이전트로 변수·스타일·컴포넌트·베리언트를 등록하되, 이름과 값을 Tailwind CSS v4의 테마 변수 체계에 1:1로 맞추는 것이 목표다. 여기 적힌 값은 2026년 7월 기준 Tailwind CSS v4.3 공식 문서의 기본 테마 변수 목록에서 뽑았다.

끝까지 따라 하면 세 가지가 손에 남는다. 첫째는 색·간격·글자 크기를 담은 Figma 변수와 스타일 한 벌, 둘째는 Button·Card·NavBar 세 컴포넌트, 셋째는 그 셋을 쓰임새 설명과 함께 모아 둔 「스타일 가이드」 프레임이다. 이 셋이 다음 문서(「Figma와 Claude Code로 만드는 팀 바이브코딩 워크플로우」)에서 페이지를 만들 때 쓰는 재료가 된다.

Tailwind v4는 tailwind.config.js 대신 CSS 파일 안 @theme 블록에 디자인 토큰을 적고, 그 토큰 이름에서 유틸리티 클래스를 만들어 낸다. 예를 들어 --color-blue-500을 적으면 bg-blue-500·text-blue-500이 생긴다. 따라서 Figma 변수 이름을 Tailwind 토큰 이름과 같은 모양으로 지어 두면, 디자인의 값과 코드의 클래스가 서로 번역 없이 맞물린다. 이 문서의 목표가 그 맞물림이다.

시작하기 전에 Figma 계정으로 로그인하고, 팀에서 쓸 디자인 파일을 하나 연다. 파일 이름은 KB_디자인시스템처럼 무엇을 담은 파일인지 알아볼 수 있게 짓는다.

1 – 호환 규칙 정하기

값을 만들기 전에 이름·단위·색 공간 세 가지 규칙을 못 박는다. 이 세 가지가 어긋나면 나중에 코드로 내보낼 때 이름이 달라지거나 값이 틀어져서 손으로 다시 맞춰야 한다.

1.1 – 이름 대응 규칙

Figma 변수 이름은 /로 계층을 나누고, Tailwind 토큰 이름은 -로 나눈다. 둘을 글자 하나까지 같은 순서로 맞춘다.
아래 표대로 컬렉션과 이름을 정한다.

Figma 변수 이름	Tailwind 토큰	만들어지는 유틸리티
`color/blue/500`	`--color-blue-500`	`bg-blue-500`, `text-blue-500`
`color/bg/primary`	`--color-bg-primary`	`bg-bg-primary`
`spacing/4`	`--spacing` 의 4배	`p-4`, `gap-4`
`radius/md`	`--radius-md`	`rounded-md`
`text/sm`	`--text-sm`	`text-sm`
`font-weight/semibold`	`--font-weight-semibold`	`font-semibold`
`shadow/md`	`--shadow-md`	`shadow-md`

각 변수의 코드 신택스(Code syntax) Web 칸에 var(--color-blue-500) 형식으로 같은 이름을 적는다.

Tailwind v4의 토큰 이름 앞머리(namespace)는 정해져 있다. 공식 문서가 적어 둔 것 가운데 이 문서에서 쓰는 것은 --color-*, --spacing-*, --radius-*, --text-*, --font-weight-*, --leading-*, --tracking-*, --shadow-*다. 앞머리를 마음대로 지으면 유틸리티가 만들어지지 않으므로, 이름의 첫 칸은 반드시 이 목록에서 고른다.

1.2 – 단위 규칙

Tailwind 문서의 값은 rem, Figma 변수는 px다. 1rem = 16px으로 환산해 Figma에는 px 숫자만 넣는다.
Tailwind v4의 간격은 --spacing: 0.25rem 하나만 두고 유틸리티 숫자를 곱해서 쓴다. p-4는 0.25rem × 4 = 1rem = 16px이다.
Figma 변수는 곱셈을 못 하므로 자주 쓰는 배수만 실제 px 값으로 미리 등록한다. 이름의 숫자는 유틸리티 숫자와 같게 맞춘다.

Figma 변수	px	대응 클래스
`spacing/1`	4	`p-1`
`spacing/2`	8	`p-2`
`spacing/3`	12	`p-3`
`spacing/4`	16	`p-4`
`spacing/5`	20	`p-5`
`spacing/6`	24	`p-6`
`spacing/8`	32	`p-8`
`spacing/10`	40	`p-10`
`spacing/12`	48	`p-12`
`spacing/16`	64	`p-16`

이름을 sm·md 같은 낱말로 지으면 안 되는 까닭이 여기 있다. Tailwind 쪽 클래스는 p-4라는 숫자를 쓰므로, Figma에서 spacing/md = 16이라고 지어 두면 개발자가 p-md라는 없는 클래스를 찾게 된다. 간격만은 숫자 이름을 쓴다.

1.3 – 색 공간 규칙

Tailwind v4의 기본 색은 oklch() 형식으로 적혀 있고, Figma 색 변수는 sRGB 값(hex)을 담는다. 그러므로 oklch 값을 hex로 바꿔 넣는다.
아래 표의 hex를 그대로 쓴다. Tailwind v4.3 기본 팔레트의 oklch 값을 sRGB로 환산한 결과다.

Tailwind 토큰	hex	Tailwind 토큰	hex
`--color-gray-50`	`#F9FAFB`	`--color-gray-600`	`#4A5565`
`--color-gray-100`	`#F3F4F6`	`--color-gray-700`	`#364153`
`--color-gray-200`	`#E5E7EB`	`--color-gray-800`	`#1E2939`
`--color-gray-300`	`#D1D5DC`	`--color-gray-900`	`#101828`
`--color-gray-400`	`#99A1AF`	`--color-gray-950`	`#030712`
`--color-gray-500`	`#6A7282`	`--color-white`	`#FFFFFF`
`--color-blue-500`	`#2B7FFF`	`--color-red-500`	`#FB2C36`
`--color-blue-600`	`#155DFC`	`--color-red-600`	`#E7000B`
`--color-amber-400`	`#FFB900`	`--color-green-600`	`#00A63E`
`--color-amber-500`	`#FE9A00`	`--color-amber-600`	`#E17100`

[!WARNING] v3 시절 hex를 그대로 쓰면 색이 어긋난다. v3의 blue-500은 #3B82F6이었는데, v4의 blue-500은 oklch로 다시 조율돼 sRGB로 환산하면 #2B7FFF다. 눈으로도 구별되는 차이이므로, 기억에 있는 옛 hex를 넣지 말고 위 표를 쓴다. 그리고 oklch에는 sRGB로 정확히 표현되지 않는 색이 섞여 있어, 위 hex는 화면에서 보이는 값에 가장 가까운 근삿값이다. 색을 픽셀 단위로 대조하는 검수 공정이 있으면 이 차이를 미리 알려 둔다.

1.4 – 참고 사이트 색을 팀 강조색으로 정하기

참고 사이트의 색을 화면에서 읽은 그대로 쓰지 않는다. 읽은 값에 가장 가까운 Tailwind 색을 골라 쓰는 것이 이 실습의 규칙이다. 그래야 코드에서 대괄호 임의값(bg-[#F2A900]) 없이 팔레트 안에서 해결된다.

Chrome에서 참고 사이트를 열고 주요 버튼이나 로고 위에서 마우스 오른쪽 버튼을 눌러 [검사]를 클릭한다.
개발자 도구에서 그 요소의 배경색 hex를 읽는다.
1.3의 표에서 그 값과 가장 가까운 색을 고른다.
고른 색을 팀 강조색으로 삼고, 마우스를 올렸을 때 쓸 색은 같은 계열의 한 단계 진한 색으로 정한다.

이 문서는 아래처럼 정한 것으로 놓고 진행한다. 팀이 다른 참고 사이트를 골랐다면 같은 방법으로 자기 값을 정한다.

쓰임새	참고 사이트에서 읽은 값	고른 Tailwind 색	hex
강조색(버튼·배너)	`#F2A900`	`amber-500`	`#FE9A00`
강조색 마우스 올림	—	`amber-600`	`#E17100`
본문 글자·상단 메뉴 배경	`#1F2937`	`gray-800`	`#1E2939`

[!WARNING] 강조색 위에 흰 글자를 얹지 않는다. #FE9A00 배경에 흰 글자는 명도 대비가 2.13:1로, 웹 접근성 지침(WCAG 2.1)이 본문 글자에 요구하는 4.5:1에 크게 못 미친다. 같은 배경에 #1E2939(gray-800) 글자를 얹으면 6.87:1, #101828(gray-900) 글자면 8.31:1이 되어 둘 다 통과한다. 노란 계열을 강조색으로 쓸 때는 글자를 어두운 색으로 두는 것이 규칙이다. 이 값들은 WCAG 2.1의 상대 휘도 공식으로 계산한 결과다.

1.5 – 커뮤니티 자원 판단

Tailwind용 Figma 자원을 쓰면 원시 값 입력 시간을 줄일 수 있다. 검토한 두 자원의 판단은 다음과 같다.

자원	확인된 사양	판단
플러그인 `Layout - Tailwind CSS V4 Import & Export` (제작자 Dylan Loveday-Powell, 사용자 858명, 좋아요 26, 최신 버전 2 / 2025-03-17)	CSS 변수를 Figma 변수로 가져오기, Figma 변수를 Tailwind v4 테마 파일로 내보내기, Tailwind 색 팔레트 한 번에 넣기, 색·타이포·간격·그림자 처리, 가져오기 전 미리보기	원시 팔레트 입력과 코드 내보내기에는 쓴다. 별칭(시맨틱) 변수는 무시된다는 사용자 지적이 두 건 달려 있어, 의미 변수는 이 플러그인에 맡기지 않는다
커뮤니티 파일 `Tailwind CSS v4.1 Design System`	공식 Tailwind 사이트 기준으로 원시 변수(Primitives)와 시맨틱 토큰을 미리 넣어 둔 파일. UI 컴포넌트는 다음 버전에 넣겠다고 적혀 있음	변수 구조를 읽는 참고용으로는 쓴다. 다만 v4.1 기준이라 v4.3에서 늘어난 색 계열과 앞머리가 빠져 있으니, 그대로 쓰지 않고 대조한 뒤 쓴다

두 자원의 주소는 다음과 같다.

플러그인: https://www.figma.com/community/plugin/1482322139658592700/layout-tailwind-css-v4-import-export
커뮤니티 파일: https://www.figma.com/community/file/1523019774991666142/tailwind-css-v4-1-design-system

[!NOTE] 파일 이름의 v4.1과 현재 버전 v4.3의 차이는 실제로 있다. v4.3 기본 테마에는 mauve·olive·mist·taupe 색 계열과 --tab-size-*·--zoom-*·--text-shadow-* 앞머리가 들어 있다. v4.1 시점 파일에는 이것들이 없으므로, 그 파일을 가져다 쓸 때는 1.3의 표로 값을 대조하고 빠진 항목은 직접 채운다.

[!WARNING] 커뮤니티 플러그인은 Figma가 검수한 것이 아니다. 이 플러그인의 권한 표시는 "제한 없는 네트워크 접근"이며 라이선스는 Community Free Resource License다. 회사 라이브러리 파일에서 처음 실행하지 말고, 개인 Drafts에 만든 시험용 파일에서 한 번 돌려 결과를 확인한 뒤 본 파일에서 쓴다.

2 – 커뮤니티 자원으로 밑작업

이 묶음은 건너뛰어도 결과는 같다. 색 스무 개를 손으로 넣는 시간을 줄이려는 단계이므로, 결과가 이상하면 3장에서 에이전트로 직접 만들면 된다.

2.1 – 플러그인으로 Tailwind 팔레트 넣기

Figma 파일을 열고 왼쪽 도구 모음에서 [Actions] → [Plugins]를 누른다.
검색창에 Layout Tailwind를 입력해 Layout - Tailwind CSS V4 Import & Export를 고른 다음 [Run]을 누른다. 검색 결과에 뜨지 않으면 브라우저에서 https://www.figma.com/community/plugin/1482322139658592700/layout-tailwind-css-v4-import-export 에 접속해 [Open in Figma]를 누른다.
플러그인 창에서 Tailwind 색 팔레트를 한 번에 넣는 항목을 눌러 실행한다.
오른쪽 패널 [Local variables]를 눌러 색 변수가 들어왔는지 확인한다.
변수 이름의 계층이 color/blue/500 모양인지 확인한다. 다르면 3.1로 넘어가 에이전트로 다시 만든다.

플러그인이 만든 이름은 이 문서의 규칙과 다를 수 있다. 버전 기록에 내보낼 때 /를 -로 바꾸는 수정이 적혀 있으므로, 가져올 때의 이름 모양도 파일에 따라 달라질 수 있다. 이름이 어긋난 상태로 컴포넌트를 만들면 나중에 전부 다시 이어야 하니, 이름 확인을 먼저 한다.

2.2 – 커뮤니티 파일에서 변수 구조 살펴보기

브라우저에서 https://www.figma.com/community/file/1523019774991666142/tailwind-css-v4-1-design-system 에 접속한다.
[Open in Figma]를 눌러 파일 사본을 내 Drafts에 만든다. 커뮤니티 파일은 원본을 고치는 것이 아니라 사본이 만들어진다.
사본에서 오른쪽 패널 [Local variables]를 눌러 컬렉션 이름과 계층 구조를 본다. 원시 변수와 시맨틱 토큰이 어떻게 나뉘어 있는지만 확인한다.
이 파일의 변수를 작업 파일로 옮기려면, 사본 쪽에서 파일 오른쪽 위 [Publish]를 눌러 라이브러리로 발행한 다음, 작업 파일에서 [Add context] 또는 라이브러리 목록에서 그 라이브러리를 연결한다.
값이 v4.3 기준과 맞는지 1.3의 표로 대조한다. 다른 값이 있으면 옮기지 않고 3장에서 직접 만든다.

이 파일을 그대로 쓰지 않고 구조만 보는 데 쓰는 까닭은 두 가지다. 첫째, 이름 규칙이 이 문서의 규칙과 다르면 나중에 코드로 내보낼 때 토큰 이름이 어긋난다. 둘째, 파일 이름이 v4.1이라 현재 v4.3에서 늘어난 항목이 빠져 있다. 남의 파일을 통째로 들이는 편보다, 구조를 참고해 내 파일에 직접 등록하는 편이 뒤탈이 적다.

[!TIP] 커뮤니티 파일은 라이브러리로 발행하려면 유료 요금제와 편집 권한이 필요하다. 발행이 막히면 사본 파일과 작업 파일을 나란히 열어 두고, 사본에서 변수 이름과 값을 읽어 3장의 프롬프트에 옮겨 적는 방식으로 쓴다.

2.3 – 밑작업 결과를 에이전트로 감사

왼쪽 내비게이션에서 [Agents]를 눌러 채팅을 연다.
아래 문장을 입력한다.

이 파일의 색 변수 전체를 조사한다.
1) 이름이 color/색계열/단계 형태가 아닌 변수를 목록으로 알려준다.
2) 아래 값과 다른 변수가 있으면 이름과 현재 값을 표로 알려준다.
color/gray/100 = #F3F4F6
color/gray/800 = #1E2939
color/gray/900 = #101828
color/amber/500 = #FE9A00
color/amber/600 = #E17100
아직 고치지 마라. 차이만 보고해라.

응답을 읽고 고칠 항목이 적으면 이어서 고치라고 지시한다. 어긋난 항목이 절반을 넘으면 색 변수를 모두 지우고 3.1부터 새로 만든다.

감사를 사람 눈이 아니라 에이전트에게 맡기는 까닭은 색 변수가 백 개를 넘으면 눈으로 대조하기 어렵기 때문이다. 다만 판단은 사람이 한다. 어긋난 항목이 많을 때는 고치는 편보다 지우고 다시 만드는 편이 빠르다.

3 – 디자인 스타일 등록

밑작업을 건너뛰었거나 결과를 지웠으면 여기서부터 시작한다. 순서는 원시 값 → 의미 값 → 간격 → 반경 → 텍스트 → 그림자다.

3.1 – 원시 색 등록

채팅 입력 상자에 아래 문장을 입력한다.

변수 컬렉션 Primitives 를 만들고 모드는 Value 하나만 둔다.
아래 색 변수를 만든다. 이름과 hex 를 글자 그대로 쓴다.
color/white = #FFFFFF
color/gray/50 = #F9FAFB
color/gray/100 = #F3F4F6
color/gray/200 = #E5E7EB
color/gray/300 = #D1D5DC
color/gray/400 = #99A1AF
color/gray/500 = #6A7282
color/gray/600 = #4A5565
color/gray/700 = #364153
color/gray/800 = #1E2939
color/gray/900 = #101828
color/gray/950 = #030712
color/amber/400 = #FFB900
color/amber/500 = #FE9A00
color/amber/600 = #E17100
color/blue/500 = #2B7FFF
color/blue/600 = #155DFC
color/red/500 = #FB2C36
color/red/600 = #E7000B
color/green/600 = #00A63E
각 변수의 코드 신택스 Web 칸에 var(--color-gray-100) 형식으로 이름을 적는다.
모든 변수의 스코프는 비워 둔다.

[Local variables]에서 색 스무 개가 들어왔는지 확인한다.

원시 색의 스코프를 비우는 까닭은 디자이너가 색을 고를 때 원시 색이 목록에 뜨지 않게 하기 위해서다. 화면 작업에서 고르는 것은 다음 항목의 의미 변수다.

3.2 – 의미 색과 Light·Dark 모드 등록

채팅 입력 상자에 아래 문장을 입력한다.

변수 컬렉션 Theme 를 만들고 모드는 Light 와 Dark 두 개를 둔다.
아래 변수를 만들고 값은 Primitives 컬렉션 변수를 가리키는 별칭으로 지정한다. hex 를 직접 넣지 마라.
color/bg/base : Light 는 color/white, Dark 는 color/gray/950
color/bg/subtle : Light 는 color/gray/100, Dark 는 color/gray/800
color/text/base : Light 는 color/gray/900, Dark 는 color/gray/100
color/text/muted : Light 는 color/gray/500, Dark 는 color/gray/400
color/border/base : Light 는 color/gray/200, Dark 는 color/gray/700
color/brand : Light 와 Dark 모두 color/amber/500
color/brand/hover : Light 는 color/amber/600, Dark 는 color/amber/400
color/ink : Light 는 color/gray/800, Dark 는 color/gray/900
color/danger : Light 는 color/red/600, Dark 는 color/red/500
스코프는 bg 로 시작하는 변수에 프레임 채우기와 도형 채우기,
text 로 시작하는 변수에 글자 채우기,
border 로 시작하는 변수에 선 색을 지정한다.
코드 신택스 Web 칸에 var(--color-bg-base) 형식으로 적는다.

[Local variables]에서 Theme 컬렉션을 열고, 값 칸에 색 견본이 아니라 변수 이름이 적혀 있는지 확인한다.
화면 위쪽 모드 선택 칸에서 Dark를 골라 색이 바뀌는지 확인한다.

이름을 brand와 ink로 지은 까닭은 팀원이 색 코드를 외우지 않게 하기 위해서다. 코드에서도 bg-brand, text-ink만 쓰면 되고, 나중에 강조색을 바꿔야 할 때 이 변수 하나와 @theme 한 줄만 고치면 사이트 전체가 함께 바뀐다.

Figma의 두 모드는 코드에서 이렇게 대응된다. Tailwind v4의 dark: 변형은 기본적으로 운영체제 설정(prefers-color-scheme)을 따르고, 사용자가 누르는 전환 단추로 바꾸려면 CSS에 @custom-variant dark (&:where(.dark, .dark *)); 한 줄을 적어 .dark 클래스로 바꾸게 만든다. Figma의 모드 두 개가 이 두 상태와 짝을 이룬다.

3.3 – 간격과 반경 등록

채팅 입력 상자에 아래 문장을 입력한다.

변수 컬렉션 Scale 을 만들고 모드는 Value 하나를 둔다.
숫자 변수로 아래 값을 만든다.
spacing/1 = 4, spacing/2 = 8, spacing/3 = 12, spacing/4 = 16, spacing/5 = 20,
spacing/6 = 24, spacing/8 = 32, spacing/10 = 40, spacing/12 = 48, spacing/16 = 64
radius/xs = 2, radius/sm = 4, radius/md = 6, radius/lg = 8,
radius/xl = 12, radius/2xl = 16, radius/3xl = 24, radius/4xl = 32
spacing 변수의 스코프는 간격과 크기, radius 변수의 스코프는 모서리 반경으로 지정한다.
코드 신택스 Web 칸은 spacing 은 calc(var(--spacing) * 4) 형식, radius 는 var(--radius-md) 형식으로 적는다.

[Local variables]에서 숫자 변수 열여덟 개가 들어왔는지 확인한다.

반경 값이 2·4·6·8처럼 어중간해 보이지만 이것이 Tailwind 기본값이다. rounded-md는 0.375rem, 곧 6px이다. 8px로 만들어 두면 코드에서는 rounded-lg가 되므로, 시안과 클래스가 어긋난다.

3.4 – 텍스트 스타일 등록

채팅 입력 상자에 아래 문장을 입력한다.

아래 텍스트 스타일을 만든다. 글꼴은 Inter 를 쓰고, 스타일 이름은 그대로 쓴다.
text/xs : 크기 12, 행간 16
text/sm : 크기 14, 행간 20
text/base : 크기 16, 행간 24
text/lg : 크기 18, 행간 28
text/xl : 크기 20, 행간 28
text/2xl : 크기 24, 행간 32
text/3xl : 크기 30, 행간 36
굵기는 모두 Regular 로 두고, 아래 굵기 변형을 따로 만든다.
text/sm/medium : 크기 14, 행간 20, Medium
text/base/semibold : 크기 16, 행간 24, Semi Bold
text/xl/bold : 크기 20, 행간 28, Bold
글꼴 스타일 이름을 먼저 확인해서 Semi Bold 표기가 맞는지 검사한 뒤 만들어라.

오른쪽 패널 [Text styles]에서 열 개가 들어왔는지 확인한다.

행간 값은 Tailwind가 크기마다 정해 둔 기본 행간을 px로 환산한 것이다. text-base는 크기 1rem에 행간 1.5rem이므로 16px/24px이 된다. 굵기 이름은 --font-weight-medium: 500, --font-weight-semibold: 600, --font-weight-bold: 700에 맞춰 medium·semibold·bold로 적는다. 마지막 text/xl/bold는 4.4에서 상단 메뉴 로고에 쓴다.

[!NOTE] 실제 사이트를 한글로 만들 것이므로 화면에서는 한글이 나온다. Inter에는 한글 글자가 없어 브라우저가 대신 시스템 글꼴로 그리는데, 이 문서는 크기·행간 값을 Tailwind 기준에 맞추는 것이 목적이므로 글꼴 이름은 Inter로 통일해 둔다. 한글 글꼴을 쓰기로 팀이 정했다면 프롬프트의 Inter 자리에 그 이름을 넣고, 대신 크기와 행간 숫자는 표 그대로 둔다.

3.5 – 그림자 스타일 등록

채팅 입력 상자에 아래 문장을 입력한다.

아래 이펙트 스타일을 만든다. 이름을 그대로 쓴다.
shadow/xs : 드롭 섀도 한 겹. X 0, Y 1, 흐림 2, 퍼짐 0, 검정 5%
shadow/sm : 드롭 섀도 두 겹.
  첫째 X 0, Y 1, 흐림 3, 퍼짐 0, 검정 10%
  둘째 X 0, Y 1, 흐림 2, 퍼짐 -1, 검정 10%
shadow/md : 드롭 섀도 두 겹.
  첫째 X 0, Y 4, 흐림 6, 퍼짐 -1, 검정 10%
  둘째 X 0, Y 2, 흐림 4, 퍼짐 -2, 검정 10%
shadow/lg : 드롭 섀도 두 겹.
  첫째 X 0, Y 10, 흐림 15, 퍼짐 -3, 검정 10%
  둘째 X 0, Y 4, 흐림 6, 퍼짐 -4, 검정 10%

오른쪽 패널 [Effects]에서 네 개가 들어왔는지 확인한다.

Tailwind의 그림자는 대부분 두 겹이다. shadow-md는 0 4px 6px -1px와 0 2px 4px -2px를 겹쳐 만든 값이므로, Figma에서도 드롭 섀도를 두 개 쌓아야 같은 모양이 된다. 한 겹만 넣으면 시안이 코드보다 흐릿하게 보인다.

3.6 – 등록 결과 검증

채팅 입력 상자에 아래 문장을 입력한다.

지금까지 만든 변수와 스타일을 조사해 표로 보여준다.
1) 컬렉션 이름, 모드 개수, 변수 개수
2) Theme 컬렉션에서 별칭이 아니라 hex 가 직접 들어간 변수
3) 코드 신택스 Web 칸이 비어 있는 변수
4) 이름에 대문자나 공백이 섞인 변수와 스타일

컬렉션 세 개(Primitives·Theme·Scale)와 변수 마흔일곱 개가 맞는지 센다. 원시 색 스무 개, 의미 색 아홉 개, 숫자 변수 열여덟 개다.
이름에 대문자나 공백이 섞인 것이 있으면 소문자와 /만 쓰도록 고치라고 지시한다.

이름에 대문자와 공백을 금지하는 까닭은 CSS 변수 이름에 그대로 옮길 수 없기 때문이다. Tailwind 토큰은 --color-bg-base처럼 소문자와 하이픈만 쓴다.

4 – 컴포넌트와 베리언트 등록

이제 부품을 만든다. 컴포넌트는 여러 화면에서 재사용하는 공통 UI 부품이다. 원본 하나를 고치면 화면에 놓인 사본이 함께 바뀌며, 원본을 메인 컴포넌트, 사본을 인스턴스라 한다.

만들 부품은 세 가지다. 버튼, 카드, 상단 메뉴다. 이 셋을 고른 까닭은 다섯 페이지에 모두 되풀이해 나오기 때문이다. 값은 모두 3장에서 만든 변수를 가리키게 하고, 각 값이 어느 Tailwind 클래스에 해당하는지 컴포넌트 설명에 함께 적는다. 그러면 개발자가 시안을 보고 클래스를 짐작하지 않아도 된다.

4.1 – Button 기본 컴포넌트

페이지 목록에서 [+]를 눌러 페이지를 만들고 이름을 Components로 바꾼 다음 그 페이지로 이동한다.
채팅 입력 상자에 아래 문장을 입력한다.

이 페이지에 Button 컴포넌트를 만든다.
- 가로 방향 오토 레이아웃 프레임으로 만들고 컴포넌트로 바꾼다. 이름은 Button 이다.
- 안쪽 여백은 좌우 spacing/4, 위아래 spacing/2 를 연결한다.
- 자식 간격은 spacing/2 를 연결한다.
- 배경색은 color/brand 를 연결한다.
- 모서리 반경은 radius/md 를 연결한다.
- 그림자는 shadow/xs 스타일을 적용한다.
- 안에 텍스트 레이어를 하나 넣고 글자는 자세히 보기 로 한다.
- 텍스트에는 text/sm/medium 스타일을 적용하고 글자색은 color/ink 를 연결한다.
- 프레임 크기는 가로세로 모두 내용에 맞춰 줄어들게 설정한다.
색·간격·반경에 고정값을 쓰지 말고 반드시 변수를 연결해라.

만들어진 버튼을 누르고 오른쪽 패널에서 여백·색·반경 칸에 변수 이름이 표시되는지 확인한다. 왼쪽 레이어 목록에서 이름 앞에 다이아몬드(◇) 아이콘이 붙었으면 컴포넌트 등록에 성공한 것이다.

이 조합은 코드에서 px-4 py-2 gap-2 rounded-md shadow-xs bg-brand text-ink text-sm font-medium에 해당한다. 값 하나하나가 클래스 하나와 짝을 이루므로, 시안을 보고 코드를 쓸 때 숫자를 다시 재지 않아도 된다.

글자색에 흰색이 아니라 color/ink를 연결한 것은 1.4에서 확인한 대비 때문이다. 노란 배경 위 흰 글자는 2.13:1로 읽기 어렵고, color/ink가 가리키는 #1E2939는 6.87:1로 통과한다.

4.2 – Button 베리언트 등록

베리언트는 같은 부품의 상태별 변형을 한 벌로 묶은 것이다. 버튼은 크기 두 가지와 상태 세 가지를 갖는다.

캔버스에서 Button 컴포넌트를 선택한다.
채팅 입력 상자에 아래 문장을 입력한다.

선택한 Button 컴포넌트를 베리언트 세트로 만든다.
속성은 두 개다. Size 는 sm 과 md, State 는 default 와 hover 와 disabled 다.
조합 여섯 개를 만들고 이름은 Size=sm, State=default 형식으로 정확히 붙인다.
차이는 이렇게 준다.
- Size=sm : 좌우 여백 spacing/3, 위아래 spacing/1, 텍스트 스타일 text/xs
- Size=md : 좌우 여백 spacing/4, 위아래 spacing/2, 텍스트 스타일 text/sm/medium
- State=default : 배경 color/brand
- State=hover : 배경 color/brand/hover
- State=disabled : 배경 color/bg/subtle, 글자색 color/text/muted, 그림자 없음
여섯 개를 하나의 컴포넌트 세트로 묶고, 가로는 State 순서, 세로는 Size 순서로 격자 배치한다.
세트 이름은 Button 으로 한다.

여섯 개가 2행 3열로 놓였는지 확인하고, 베리언트 하나를 눌러 오른쪽 패널에 Size와 State 두 줄이 보이는지 확인한다.

disabled 상태의 회색 배경과 흐린 글자는 대비가 4.39:1로 4.5:1에 못 미친다. 이것은 의도한 것이다. WCAG 2.1의 명도 대비 항목(1.4.3)은 비활성 상태인 UI 요소의 글자를 요건에서 제외한다. 누를 수 없는 단추라는 것을 흐린 색으로 알리는 쪽이 맞다.

베리언트 값 이름을 sm·md·hover·disabled처럼 소문자로 적는 까닭은 코드의 이름과 맞추기 위해서다. hover는 hover:bg-brand-hover, disabled는 disabled:bg-bg-subtle로 그대로 옮겨진다. Small·Hover 같은 표기를 쓰면 옮길 때 한 번 더 번역해야 한다.

[!INFO] 버튼 합격 기준 네 가지 가운데 세 개 이상이면 다음으로 넘어간다. (1) Button 이름 앞에 다이아몬드 아이콘이 있다. (2) 배경이 color/brand 변수에 연결됐다. (3) 글자가 배경 위에서 또렷이 읽힌다. (4) State에 default·hover·disabled 세 값이 있다.

4.3 – Card 컴포넌트

카드는 보험상품 목록이나 소식 목록처럼 같은 모양이 여러 번 되풀이되는 자리에 쓴다.

채팅 입력 상자에 아래 문장을 입력한다.

이 페이지에 Card 컴포넌트를 만든다.
- 세로 방향 오토 레이아웃 프레임으로 만들고 컴포넌트로 바꾼다. 이름은 Card 다.
- 안쪽 여백은 네 방향 모두 spacing/4 를 연결한다.
- 자식 간격은 spacing/2 를 연결한다.
- 배경색은 color/bg/base, 테두리 색은 color/border/base, 테두리 두께는 1 로 한다.
- 모서리 반경은 radius/lg 를 연결한다.
- 그림자는 shadow/sm 스타일을 적용한다.
- 맨 위에 가로로 긴 사각형을 넣어 이미지 자리로 삼는다. 높이는 160, 채우기는 color/bg/subtle,
  모서리 반경은 radius/md 를 연결하고, 가로는 부모 너비에 맞춰 늘어나게 한다.
- 그 아래 제목 텍스트를 넣고 글자는 운전자보험 으로 한다.
  text/base/semibold 스타일을 적용하고 글자색은 color/text/base 를 연결한다.
- 그 아래 설명 텍스트를 넣고 글자는 사고 때 필요한 보장을 한 번에 확인합니다 로 한다.
  text/sm 스타일을 적용하고 글자색은 color/text/muted 를 연결한다.
- 프레임 너비는 320 으로 고정하고 높이는 내용에 맞춰 줄어들게 설정한다.
색·간격·반경에 고정값을 쓰지 말고 반드시 변수를 연결해라.

만들어진 카드를 Ctrl+C, Ctrl+V로 복사한다.
원본 카드의 배경색을 잠깐 다른 변수로 바꿔 본다. 사본도 함께 바뀌면 컴포넌트로 제대로 연결된 것이다. 확인한 뒤 원래 값으로 되돌린다.

이 조합은 코드에서 p-4 gap-2 rounded-lg shadow-sm bg-bg-base border border-border-base에 해당한다. 이미지 자리를 회색 사각형으로 두는 것은 참고 사이트의 사진과 로고가 그 회사의 저작물이기 때문이다. 연습 결과물에는 내려받은 사진을 넣지 않고 색 블록으로 자리만 잡는다.

[!INFO] 카드 합격 기준 네 가지 가운데 세 개 이상이면 다음으로 넘어간다. (1) Card 이름 앞에 다이아몬드 아이콘이 있다. (2) 이미지 자리·제목·설명이 세로로 쌓여 있다. (3) 세 요소에 텍스트 스타일과 색 변수가 연결됐다. (4) 원본 색을 바꾸면 사본도 함께 바뀐다.

4.4 – NavBar 컴포넌트

상단 메뉴는 모든 페이지에 글자 하나 다르지 않게 똑같이 들어가는 부품이다. 메뉴 항목은 팀이 만들기로 정한 서브페이지와 같은 순서로 둔다.

만들 페이지 수는 팀 인원 수와 같다. 한 사람이 한 페이지를 맡고, 메인은 팀장이 맡기 때문이다. 아래 프롬프트는 5인 팀을 예시로 서브페이지 네 개를 넣는다. 팀이 세 명이면 메뉴를 두 개, 네 명이면 세 개 넣는 식으로 프롬프트의 이름 목록만 줄이거나 늘린다.

채팅 입력 상자에 아래 문장을 입력한다.

이 페이지에 NavBar 컴포넌트를 만든다.
- 가로 방향 오토 레이아웃 프레임으로 만들고 컴포넌트로 바꾼다. 이름은 NavBar 다.
- 너비는 1440 으로 고정하고 높이는 내용에 맞춰 줄어들게 한다.
- 안쪽 여백은 좌우 spacing/8, 위아래 spacing/4 를 연결한다.
- 배경색은 color/ink 를 연결한다.
- 왼쪽에 로고 자리 텍스트를 넣고 글자는 KB 리디자인 연습 으로 한다.
  text/xl/bold 스타일을 적용하고 글자색은 color/white 를 연결한다.
- 오른쪽에 가로 방향 오토 레이아웃 프레임을 하나 더 넣고 자식 간격은 spacing/6 을 연결한다.
  그 안에 텍스트를 넣고 글자는 차례로 보험상품, 청구·접수, 고객지원, 상담 으로 한다.
  텍스트 모두 text/sm 스타일을 적용하고 글자색은 color/white 를 연결한다.
- 바깥 프레임의 정렬은 양 끝 정렬로 두어 로고는 왼쪽 끝, 메뉴 묶음은 오른쪽 끝에 놓이게 한다.
색·간격에 고정값을 쓰지 말고 반드시 변수를 연결해라.

로고가 왼쪽 끝, 메뉴가 오른쪽 끝에 놓였는지 확인한다.
왼쪽 레이어 목록에서 NavBar 이름 앞에 다이아몬드 아이콘이 붙었는지 확인한다.

이 조합은 코드에서 flex items-center justify-between bg-ink text-white px-8 py-4에 해당한다. 로고 글자를 클릭하면 메인으로 가야 하므로, 코드로 옮길 때 이 텍스트는 main.html을 가리키는 링크가 된다.

[!INFO] 메뉴 합격 기준 세 가지를 모두 만족해야 다음으로 넘어간다. (1) NavBar 이름 앞에 다이아몬드 아이콘이 있다. (2) 메뉴 개수와 순서가 팀이 정한 서브페이지 목록과 같다. (3) 로고는 왼쪽, 메뉴는 오른쪽에 있다.

4.5 – 컴포넌트 속성과 설명 채우기

컴포넌트 속성은 사본마다 다르게 바꿀 수 있는 값을 미리 지정해 두는 기능이다. 버튼 글자를 사본마다 고칠 수 있게 만들어 둔다.

캔버스에서 Button 컴포넌트 세트를 선택한다.
채팅 입력 상자에 아래 문장을 입력한다.

선택한 Button 컴포넌트 세트에 컴포넌트 속성을 추가한다.
1) 텍스트 속성 Label, 기본값 자세히 보기. 여섯 베리언트의 텍스트 레이어를 모두 연결한다.
2) 참·거짓 속성 Show icon, 기본값 꺼짐. 텍스트 왼쪽에 16x16 사각형을 아이콘 자리로 넣고 표시 여부를 연결한다.
이어서 컴포넌트 설명 칸에 아래 내용을 넣는다.
- 각 베리언트에 해당하는 Tailwind 클래스 조합
- 어느 상황에 어느 State 를 쓰는지 사용 지침

오른쪽 패널에서 Label·Show icon 항목과 설명 칸의 글을 확인한다.
같은 방법으로 Card에도 텍스트 속성 두 개(Title·Body)를 추가한다. 아래 문장을 입력한다.

캔버스의 Card 컴포넌트에 텍스트 속성 두 개를 추가한다.
Title 은 기본값 운전자보험, 제목 텍스트 레이어에 연결한다.
Body 는 기본값 사고 때 필요한 보장을 한 번에 확인합니다, 설명 텍스트 레이어에 연결한다.
컴포넌트 설명 칸에 이 카드를 어느 자리에 쓰는지 한 줄로 적는다.

컴포넌트 설명에 클래스를 적어 두면 개발자와 에이전트가 같은 자리를 읽는다. 다음 문서에서 에이전트에게 화면을 만들라고 지시할 때도 이 설명을 근거로 올바른 상태를 고른다.

5 – 스타일 가이드로 정리하고 코드로 내보내기

부품이 다 만들어졌다. 이제 흩어져 있는 변수·스타일·컴포넌트를 한 프레임에 모아 팀이 함께 보는 문서로 만들고, 같은 내용을 코드가 읽을 수 있는 @theme 블록으로 내보낸다. 사람이 보는 쪽과 코드가 읽는 쪽을 같은 값에서 뽑아내는 것이 이 장의 목적이다.

5.1 – 스타일 가이드 프레임 만들기

스타일 가이드는 색·글꼴·간격·컴포넌트 규칙을 한곳에 모은 문서다. 팀원이 "그 노란색이 뭐였지"를 묻지 않게 하는 것이 이 프레임의 쓸모다.

페이지 목록에서 [+]를 눌러 페이지를 만들고 이름을 스타일 가이드로 바꾼다.
채팅 입력 상자에 아래 문장을 입력한다.

이 페이지에 스타일 가이드 프레임을 만든다. 이름은 스타일 가이드 다.
세로 방향 오토 레이아웃으로 만들고 자식 간격은 spacing/12, 안쪽 여백은 spacing/16 을 연결한다.
배경은 color/bg/base 를 연결한다.
아래 네 구역을 위에서 아래 순서로 넣고, 각 구역 맨 위에 text/2xl 스타일의 제목 텍스트를 둔다.
1) 색 : Theme 컬렉션의 의미 색 변수마다 색 견본 사각형 하나와
   변수 이름, 연결된 원시 색 이름, hex 를 한 줄로 적는다.
2) 글자 : 등록한 텍스트 스타일마다 그 스타일을 적용한 예시 문장 한 줄과 스타일 이름을 적는다.
3) 간격과 반경 : spacing 변수와 radius 변수마다 크기를 눈으로 견줄 수 있는 사각형과 이름, px 값을 적는다.
4) 컴포넌트 : Components 페이지의 Button 세트, Card, NavBar 인스턴스를 가로로 나란히 놓는다.
색과 간격에 고정값을 쓰지 말고 변수를 연결해라.

컴포넌트 구역의 각 부품 옆에 어디에 쓰는 부품인지 한 줄로 적는다. 텍스트 도구(T)로 직접 적어도 되고, 에이전트에게 시켜도 된다. 예를 들면 이렇게 적는다.
- Button — 상세 보기, 내려받기처럼 다음 화면으로 넘기는 자리
- Card — 보험상품 목록, 소식 목록처럼 같은 모양이 되풀이되는 자리
- NavBar — 다섯 페이지 맨 위에 모두 같은 모양으로 들어가는 상단 메뉴

부품 옆에 쓰임새를 적는 까닭은 다음 단계에서 다섯 명이 각자 다른 페이지를 만들기 때문이다. 쓰임새가 적혀 있지 않으면 누구는 카드로 만들고 누구는 그냥 네모로 만들어, 한 사이트인데 다섯 모양이 나온다.

5.2 – AI로 색 대비 점검하기

색을 눈으로만 고르면 화면에서 읽히는지 알 수 없다. 아래 프롬프트를 대화형 AI(ChatGPT·Claude·Gemini 가운데 하나)에 붙여 넣고 [대괄호]만 우리 값으로 바꾼다.

[!NOTE] 실습에 쓰던 대화창이 아니라 새 대화창에 붙여 넣는다. 실습 대화창에는 앞서 시킨 다른 지시의 응답이 남아 있어, 그 위에 얹으면 답이 뒤섞인다.

웹사이트 버튼의 평소 배경색 [HEX]와 마우스를 올린 배경색 [HEX]를 비교하라.
두 상태가 눈으로 구분되는지, 글자색 [HEX]가 두 배경에서 모두 읽히는지 평가하라.
WCAG 2.1 기준 명도 대비값을 함께 알려주고, 4.5:1에 못 미치면 어떤 색을 어떻게 바꿀지 한 줄로 제안하라.

[대괄호]에 넣을 값은 3.2에서 정한 세 가지다. 평소 배경은 color/brand가 가리키는 #FE9A00, 마우스 올림은 color/brand/hover가 가리키는 #E17100, 글자색은 버튼에 연결한 color/ink가 가리키는 #1E2939다.

직접 계산한 값은 다음과 같다. 평소 배경 #FE9A00 위 #1E2939 글자는 6.87:1, 마우스 올림 배경 #E17100 위 같은 글자는 4.59:1이다. 두 상태 모두 4.5:1을 넘으므로 이 조합은 그대로 쓴다.

AI가 알려 준 대비값은 그대로 믿지 말고, 위 값과 견줘 본다. 1.4의 값은 WCAG 2.1의 상대 휘도 공식으로 직접 계산한 것이다. AI가 크게 다른 숫자를 말하면 AI 쪽이 틀린 것이다. 색을 바꾸기로 정했다면 바꾼 hex를 Figma에 넣어 눈으로 확인한 뒤에만 반영한다. 색은 화면에서 봐야 안다.

[!WARNING] AI에게 색을 물을 때 회사 이름이나 실제 브랜드 가이드 문서를 붙여 넣지 않는다. 이 실습은 학습용이므로 hex 값과 쓰임새만 적으면 충분하다.

5.3 – 코드로 내보내기

오른쪽 패널의 [Local variables]에서 값이 모두 채워졌는지 다시 확인한다.
[Actions] → [Plugins]에서 Layout - Tailwind CSS V4 Import & Export를 실행한다. 2장을 건너뛰어 이 플러그인을 아직 넣지 않았으면 https://www.figma.com/community/plugin/1482322139658592700/layout-tailwind-css-v4-import-export 에서 먼저 추가한다.
내보내기 항목을 눌러 Tailwind v4 테마 파일을 만들고 결과 글을 복사한다.
복사한 글에서 원시 색과 숫자 값이 제대로 나왔는지 확인한다.
별칭으로 만든 Theme 컬렉션 값이 빠져 있으면 아래 형식으로 직접 적는다.

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-white: #FFFFFF;
  --color-gray-100: #F3F4F6;
  --color-gray-200: #E5E7EB;
  --color-gray-400: #99A1AF;
  --color-gray-500: #6A7282;
  --color-gray-700: #364153;
  --color-gray-800: #1E2939;
  --color-gray-900: #101828;
  --color-gray-950: #030712;
  --color-amber-400: #FFB900;
  --color-amber-500: #FE9A00;
  --color-amber-600: #E17100;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

:root {
  --bg-base: var(--color-white);
  --bg-subtle: var(--color-gray-100);
  --text-base-color: var(--color-gray-900);
  --text-muted: var(--color-gray-500);
  --border-base: var(--color-gray-200);
  --brand: var(--color-amber-500);
  --brand-hover: var(--color-amber-600);
  --ink: var(--color-gray-800);
}

.dark {
  --bg-base: var(--color-gray-950);
  --bg-subtle: var(--color-gray-800);
  --text-base-color: var(--color-gray-100);
  --text-muted: var(--color-gray-400);
  --border-base: var(--color-gray-700);
  --brand: var(--color-amber-500);
  --brand-hover: var(--color-amber-400);
  --ink: var(--color-gray-900);
}

@theme inline {
  --color-bg-base: var(--bg-base);
  --color-bg-subtle: var(--bg-subtle);
  --color-text-base: var(--text-base-color);
  --color-text-muted: var(--text-muted);
  --color-border-base: var(--border-base);
  --color-brand: var(--brand);
  --color-brand-hover: var(--brand-hover);
  --color-ink: var(--ink);
}

완성한 글을 팀 대화방에 올린다. 다음 문서에서 팀 규칙 파일을 만들 때 이 블록을 그대로 가져다 쓴다.

@theme inline을 쓴 까닭은 다른 변수를 가리키는 토큰을 만들 때 공식 문서가 이 방식을 안내하기 때문이다. inline 없이 적으면 유틸리티가 토큰을 다시 참조하는 구조가 되어, 값이 정의된 자리와 쓰이는 자리가 달라질 때 예상과 다른 색이 나온다. 모드별 값은 :root와 .dark에 두고, @theme inline이 그것을 가리키게 하는 구조가 Figma의 두 모드와 그대로 맞물린다.

이 블록이 만들어지면 코드에서 bg-brand, text-ink, bg-bg-subtle 같은 클래스를 쓸 수 있다. Figma에서 color/brand를 연결한 자리가 코드에서 bg-brand가 되므로, 시안과 코드가 같은 이름을 부른다.

[!WARNING] 이 플러그인의 내보내기는 별칭 변수를 건너뛴다는 사용자 지적이 달려 있다. 원시 값만 자동으로 나오고 의미 토큰은 빠질 수 있으므로, 내보낸 결과를 그대로 믿지 말고 Theme 컬렉션 변수 개수와 코드의 줄 수를 세어 대조한다. 빠진 부분은 위 예제 형식으로 손으로 채운다.

5.4 – 마무리 점검

캔버스에서 Button 컴포넌트 세트를 선택한다.
채팅 입력 상자에 아래 문장을 차례로 하나씩 입력한다.

이 컴포넌트 세트를 검토한다. 빠진 상태나 베리언트가 있으면 알려줘.

이 파일의 Button, Card, NavBar 세 컴포넌트에서 변수에 연결되지 않고
고정값으로 남은 색·간격·반경 속성을 표로 알려줘.

이 파일의 변수와 스타일 이름 가운데 Tailwind 토큰 이름으로 옮길 수 없는 것이 있으면 알려줘.
대문자, 공백, 특수문자가 섞인 이름을 찾아라.

응답에서 고칠 항목이 나오면 그 항목만 지정해 고치라고 지시한다.

이름 검사를 마지막에 한 번 더 두는 까닭은, 베리언트를 만드는 동안 새로 생긴 레이어와 속성에 기본 이름이 붙기 때문이다. 이름이 규칙에 맞으면 이 파일 하나로 시안과 @theme 블록을 함께 관리할 수 있다.

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

참고 사이트에서 아직 부품으로 만들지 않은 되풀이 요소를 하나 찾아, 4.3의 프롬프트 형식을 본떠 컴포넌트로 만든다. 예를 들어 페이지 맨 아래에 들어가는 하단 영역이나, 목록 위에 놓이는 페이지 제목 묶음이 있다.
만든 부품을 5.1의 컴포넌트 구역에 놓고 쓰임새를 한 줄 적는다.

[!INFO] 오늘 결과를 여섯 가지로 확인한다. 다섯 개 이상 맞으면 다음 문서로 넘어가도 된다. (1) 컬렉션 세 개와 변수 마흔일곱 개가 등록됐다. (2) Theme 컬렉션의 값이 hex가 아니라 별칭으로 들어가 있다. (3) Button·Card·NavBar 세 부품이 모두 컴포넌트다. (4) 세 부품의 색·간격·반경이 고정값 없이 변수에 연결됐다. (5) 「스타일 가이드」 프레임에 색·글자·간격·컴포넌트 네 구역이 있고 부품마다 쓰임새가 적혀 있다. (6) 5.3의 @theme 블록을 팀 대화방에 올렸다.

[!TIP] 다음 세션에서 이어서 작업할 때는 새 대화창에 이렇게 입력한다. "이 파일의 변수 컬렉션·스타일·컴포넌트 세트를 조사해 표로 알려줘. 그다음 이름이 Tailwind 토큰 규칙(소문자와 슬래시만)에서 벗어난 항목을 알려줘." 에이전트는 이전 대화를 기억하지 못하므로, 파일을 다시 읽게 하는 편이 정확하다.

[!NOTE] 이 문서의 색 값은 Tailwind CSS v4.3 공식 문서(https://tailwindcss.com/docs/colors)에 실린 oklch 값을 sRGB로 환산한 것이며, 2026-07-29에 확인했다. 공식 문서는 hex를 싣지 않고 oklch만 싣는다. 명도 대비값은 WCAG 2.1의 상대 휘도 공식으로 계산했다. 플러그인과 커뮤니티 파일의 사양·라이선스는 2026-07-28에 각 커뮤니티 페이지에서 확인한 값이다. 도구가 업데이트되면 메뉴 이름과 값이 바뀔 수 있으므로, 다르게 동작하면 해당 공식 문서를 먼저 확인한다.

바이브코딩 팀프로젝트 피그마

07. Figma 에이전트로 Tailwind v4 디자인 시스템 등록하기