디자인과 코드가 따로 관리되면, 스타일을 수동으로 맞추는 과정에서 지속적으로 오차가 발생한다.
이 문제를 해결하기 위해 디자인을 결과물이 아니라 '코드에 반영될 기준'으로 정의했다.
Tailwind 기반 디자인 파운데이션 설정
스타일링 라이브러리로 TailwindCSS를 선택했다.
이 프로젝트에서는 디자인 완성도보다
구현 속도와 반복 가능한 구조를 만드는 것이 더 중요했다.
Tailwind는 작은 단위를 조합해 UI를 빠르게 구성할 수 있기 때문에,
이러한 방향성과 잘 맞는다고 판단했다.
또한 디자인을 Figma에서 완성된 결과물로 만드는 것이 아니라,
코드에 바로 반영할 수 있는 기준으로 정의하는 것이 필요했다.
그래서 Tailwind의 theme 설정에 맞춰
디자인 파운데이션을 먼저 정리하는 방식으로 접근했다.
컬러
메인 컬러를 정의하고, 시스템 피드백(에러, 성공)에 사용할 색상을 함께 구성했다.
단일 색상만으로는 UI 전반에 일관성을 유지하기 어렵기 때문에,
명암 단계에 따른 컬러 팔레트를 함께 정의했다.
디자이너가 없는 상황이었기 때문에, tints.dev와 같은 도구를 활용하여 컬러 스케일을 생성했다.
타이포그래피
타이포그래피는 모든 스타일을 토큰화하기보다는 최소 단위만 유지하는 방향으로 설계했다.
Tailwind의 강점은 작은 단위를 조합해 빠르게 UI를 구성할 수 있다는 점이라고 판단했기 때문이다.
text-xs, text-base와 같은 크기 단위만 정의하고,
font-weight 레벨까지 하나의 토큰이나 클래스로 묶지는 않았다.
스타일을 고정된 조합으로 정의하기보다,
필요한 값을 조합해 사용하는 구조를 유지하는 것이 Tailwind의 장점을 살리는 방식이라고 판단했다.
각 요소를 개별 변수로 정의하고,
이를 조합한 스타일을 만들어 사용하는 방식으로 구성했다.
예를 들어 text-base는 font-size 16, line-height 20, weight 400으로 구성되는데,
각 값을 변수로 분리해 관리했다.
 메인화면 |  대시보드 |
|---|
이렇게 하면 스타일을 해제하더라도 각 값은 그대로 유지되며,
숫자 값이 아니라 base, lg와 같은 의미 단위로 남기 때문에 코드에서도 동일한 기준을 유지할 수 있다.
만들어진 토큰으로 컴포넌트 만들기
토큰이 정리되면 그 다음은 실제로 사용할 컴포넌트를 정의하는 단계다.
프론트 팀원 3명이 컴포넌트를 나눠 작업해야 했기 때문에,
각자 다른 기준으로 구현하지 않도록 공통 구조를 먼저 정의했다.
Button, Selection, Feedback, Input과 같이
서비스 전반에서 반복적으로 사용되는 요소를 중심으로
variant, size, state를 props 단위로 나눌 수 있도록 설계했다.
이렇게 Figma에서 정의한 구조를 React 컴포넌트의 props 구조로 이어지도록 설계했다.
AI에게 디자인 맡겨보기
UI 디자인 자체에 많은 시간을 쓰기보다는,
정의된 기준을 기반으로 빠르게 초안을 생성하는 방식으로 접근했다.
와이어프레임 작업 단계에서 Claude Code로 UI를 뽑았을 때 결과물이 만족스럽지 않았었는데,
이제 디자인에 필요한 기본 재료가 있으니 어떤 결과를 뽑아줄지 궁금해서 Claude Code로 다시 뽑아보기로 했다.
MCP로 Figma -> json 추출하기
먼저, 위와 같이 정리된 디자인 토큰의 파일 노드 ID를 ClaudeCode에게 전달 후
tailwind theme 설정에 바로 반영할 수 있는 json 파일로 뽑아줄 것을 부탁했다.
실제 개발 단계에서 사용할 tailwind 설정 파일이지만
컬러 토큰 구조화가 잘 되어있어서 Claude에게 요청할 때도 유용하게 사용할 수 있다.
ClaudeCode에게 재료 전달하기
각 컴포넌트의 Figma 노드 ID를 json으로 구조화 하여 전달 한 후
UI 디자인을 요청하려 했으나, figma 계정이 무료계정이라 API 호출에 제한이 걸렸다.
아쉽게도 캡쳐본을 전달하는 방식으로 변경해야했다.
와이어프레임 + 컴포넌트 스크린샷
클로드와 연결되어있는 프로젝트에 와이어프레임과 컴포넌트에 대한 캡쳐본을 아래와 같은 구조로 세팅했다.
MD파일 + 토큰 json
1차로 작성했던 요구사항 명세서를 클로드가 잘 읽을 수 있는 MD파일로 준비하고
json으로 추출한 토큰과 함께 프로젝트 폴더에 추가했다.
결과
같은 도구인데 인풋이 달라지니 결과물도 달라졌다. [ 이전 결과물 비교하기 ]
메인화면
 와이어프레임 |  디자인 시안 |
|---|
대시보드
 와이어프레임 |  디자인 시안 |
|---|
로그작성
 와이어프레임 |  디자인 시안 |
|---|
AI를 활용해서 더 빨리 실패하기
AI를 활용해 디자인 작업의 속도를 크게 끌어올릴 수 있었다.
와이어프레임과 디자인 시스템을 기준으로 초안을 생성하고 수정하는 방식으로 작업을 진행하면서,
디자인에 소요된 시간을 약 26시간 31분 수준으로 줄일 수 있었다.
 개인적으로 사용하는 시간관리 도구 |
|---|
예전 같았으면 어디서부터 시작해야 할지 몰라 시도조차 늦어졌을 작업들이,
이제는 빠르게 만들어보고 판단할 수 있게되었다.
또, 이 과정에서 정리한 디자인 토큰과 컴포넌트 구조는
앞으로 수행할 작은 실험들에 유용하게 쓰일 예정이다.
