"그거 최신 시안 맞아요?" — 5%의 디자이너가 95%의 개발자를 이기는 법

2일 전

4분 분량

Executive Summary

TecAce 직원의 5%는 디자이너이고, 나머지 95%는 개발자입니다. 디자이너 1명당 개발자가 20명인 셈입니다. 이런 비율에서 "모든 화면은 디자이너가 검수한다"는 원칙을 지키기란 현실적으로 쉽지 않았습니다.

그래서 저희는 꽤 오랫동안 '스크린샷의 나라'에서 지냈습니다. Figma에서 시안을 만들고, 개발자가 Dev Mode에서 값을 복사해 하드코딩하고, AI에게는 캡처를 붙여넣어 화면을 만들게 하고, 리뷰에서 "파란색이 조금 다른 것 같아요"라는 이야기를 듣고, 다시 처음으로 돌아가곤 했습니다. 화면 하나에 평균 3.5 영업일이 걸렸고, 1차 브랜드 리뷰 반려율은 34%였습니다.

2026년 6월, Anthropic이 Claude Design과 Claude Code를 /design-sync로 연결했습니다. 8월에는 /design 커맨드도 터미널 안에서 쓸 수 있게 됐습니다. AI 솔루션 회사인 만큼, 저희는 이 방식을 고객사에 제안하기 전에 내부에서 먼저 적용해봤습니다. AX Hub 디자인 시스템을 코드 저장소로 옮기고, 그 위에서 AI가 화면을 만들도록 했습니다.

8주 뒤의 변화는 이렇습니다. 화면 리드타임 3.5일 → 1일, 반려율 34% → 6%, 그리고 슬랙에서 가장 자주 오가던 "그거 최신 시안 맞아요?"라는 질문이 거의 사라졌습니다.

The Challenge

스크린샷의 나라에서 벌어지는 일들

파란색이 세 종류: 브랜드 블루는 #116DFF 하나입니다. 그런데 배포된 화면에는 세 가지 파란색이 함께 있었습니다. Figma Dev Mode는 정확한 값을 보여주지만, 그 값을 담아둘 곳이 코드에 없었던 것이 문제였습니다. 토큰이 없다 보니 개발자는 #116DFF를 직접 적어 넣었고, 디자이너가 Figma 변수를 한 번 바꾼 뒤에도 코드 속 파란색은 그대로 남았습니다. AI가 만든 화면은 Figma를 참조할 수 없었기 때문에 또 다른 파란색을 새로 만들어냈습니다.
진실이 두 개: 디자인 시스템은 Figma 라이브러리에, 컴포넌트는 shadcn/ui 코드 저장소에 나뉘어 있었습니다. 둘 다 "최신"이라고 이야기했지만, 실제로는 어느 쪽도 최신이 아니었습니다. 그런 상태가 6개월쯤 이어졌습니다.
모두가 디자이너: 저희 개발자는 고객사에 들어가는 FDE(현장 엔지니어)이기도 합니다. 그래서 제안서 화면도, 고객 대시보드 목업도 개발자가 Claude로 직접 만들었습니다. 속도는 분명 빨랐습니다. 다만 95%가 만든 화면들이 조금씩 다른 인상을 주기 시작했습니다. 시리즈 4편 "누가 이 AI 디자인을 승인했나?"에서 짚었던 문제가 저희 안에서도 나타나고 있었던 셈입니다.
탭 왕복 마라톤: 사람은 Dev Mode를 읽을 수 있지만, 당시 Claude Code는 그러지 못했습니다. AI에게 시안을 보여주려면 터미널 → Figma → 캡처 → 붙여넣기를 화면 하나당 4~6회 반복해야 했습니다. AI가 볼 수 있는 건 픽셀뿐이어서 컴포넌트 이름도 토큰도 알 수 없었고, 그래서 매번 버튼을 새로 만들곤 했습니다.
"그거 최신이에요?": 슬랙과 Figma 코멘트, PR 리뷰에 피드백이 흩어져 있었습니다. 무엇이 반영됐는지 파악하기 어렵다 보니, 모두가 같은 질문을 거의 매일 되풀이했습니다.

"툴이 부족한 게 아니었어요. 디자인이 코드가 되는 그 순간을 아무도 책임지지 않았던 거죠." — 디자인 리드, TecAce Software

The Solution

디자인 리드가 개발팀과 함께 원칙 하나를 세웠습니다.

"디자인 시스템을 파일이 아니라 코드로 만든다. AI가 어디서 화면을 만들든, 읽는 규칙은 하나여야 한다."

특별할 것은 없습니다. 4단계, 8주 과정이었습니다.

Phase 1: 디자인 시스템을 코드로 옮기다 (약 2주)

Figma에 있던 AX Hub 디자인 시스템을 GitHub 저장소로 옮겼습니다.

컬러·타이포·간격 → tokens.css
컴포넌트 규칙 → shadcn/ui 레지스트리 + DESIGN.md
하지 말아야 할 것("보조 컬러는 CTA에 쓰지 않기", "그라디언트 배경은 지양하기") → CLAUDE.md

Figma 변수는 Figma MCP로 뽑아 tokens.css에 매핑했습니다. 이제 기준은 하나이고, Figma는 그 기준을 그려내는 도구로 남았습니다. 하드코딩돼 있던 #116DFF는 전부 var(--brand-primary)로 바뀌었습니다.

Phase 2: Claude Design에 그 저장소를 물리다 (약 1주)

Claude Design의 디자인 시스템 임포트로 저장소를 연결했습니다. 이때부터 Claude Design은 새 화면을 저희 컴포넌트로 조립하고, 스스로 만든 결과를 디자인 시스템과 대조해 한 번 다듬은 뒤에 보여줍니다. 리뷰어가 한 명 더 생긴 셈입니다.

Team 플랜의 관리자 잠금으로 승인된 시스템 하나만 조직 표준으로 고정했습니다. 이제는 95% 중 누가 만들더라도 파란색은 하나로 유지됩니다.

Phase 3: 터미널 안에서 디자인하다 — /design (약 3주)

`/design`은 이런 커맨드입니다: Claude Design의 아트보드 워크플로우를 Claude Code 안으로 옮겨온 기능입니다(2026년 8월 리서치 프리뷰).

새 워크플로우는 세 줄로 정리됩니다.

`/design-sync`: 세션 시작. AX Hub 디자인 시스템 로드.
`/design`: 아트보드 3~4개 받기 → 하나 선택 → 캔버스에서 수정 → "구현해."
디자이너가 Claude Design에서 만든 화면은 스크린샷이 아니라 프로젝트 형태로 넘어옵니다. Claude Code는 처음부터 다시 만들지 않고 이어서 작업합니다.

실제 사례 하나: 고객 제안용 AX Diagnostic 결과 대시보드가 급하게 필요했던 적이 있습니다. 담당 개발자가 /design a few options for an AX diagnostic result page를 입력했습니다. 아트보드 3개 중 두 번째를 골라 카드 간격만 조정한 뒤 구현을 요청했습니다. 브랜드 리뷰를 통과하기까지 2시간이 걸렸습니다. 예전 같으면 3일 정도 걸렸을 일이고, 캡처는 한 장도 필요하지 않았습니다.

Phase 4: 사람이 마지막에 도장을 찍다 (약 2주)

빨라졌다고 해서 리뷰를 없애지는 않았습니다. AXKH 때 세운 원칙을 그대로 지켰습니다. AI가 제안하고, 사람이 승인합니다.

브랜드 리뷰 스킬: 토큰 준수, 접근성 대비, 카피 톤 체크리스트를 Claude Code 스킬로 만들어 PR 생성 시 자동으로 실행되게 했습니다. 사람은 결과를 보고 승인·수정·반려를 결정합니다.
시스템 변경은 디자이너가 맡습니다: 토큰·컴포넌트 저장소는 디자인 리드의 승인 없이는 머지되지 않습니다. AI는 규칙을 따를 뿐, 규칙을 바꾸지는 않습니다.
토큰 예산 룰: /design은 아트보드를 여러 개 만들기 때문에 컨텍스트를 많이 사용합니다. 새 화면을 시작할 때만 쓰고, 버튼 하나를 옮기는 작업에는 쓰지 않습니다.

The Results

8주 후, 숫자보다 먼저 달라진 것은 슬랙의 분위기였습니다.

속도

화면 리드타임 3.5일 → 1일 (약 70% 단축). 아이디어에서 리뷰 통과 구현까지.
대부분의 화면이 터미널 세션 하나에서 마무리됩니다. 캡처 폴더도 한결 한산해졌습니다.
같은 인원으로 제안용 프로토타입 2배 이상.

브랜드

1차 리뷰 반려율 34% → 6%. 남은 6%의 반려 사유는 대부분 '카피 톤'입니다. 파란색에 대한 이야기는 거의 나오지 않습니다.
컴포넌트 재사용률 2배 이상. 화면마다 새로 만들어지던 버튼·카드·테이블이 눈에 띄게 줄었습니다.
95%의 개발자가 만든 화면이 5%의 디자이너가 만든 것과 같은 기준을 통과합니다. 누가 만들었는지 구분하기 어려울 정도인데, 저희가 바라던 모습입니다.

사람

"그거 최신 시안 맞아요?" — 0건. 기준이 하나뿐이니 굳이 물어볼 일이 없어졌습니다.
5%의 디자이너는 이제 95%의 산출물을 하나씩 검수하는 대신, 95%가 따르는 규칙을 설계합니다. 시리즈 1편에서 이야기한 'Maker에서 System Designer로'가 슬로건을 넘어 실제 업무가 된 셈입니다.

돌아보면 /design 자체가 특별했다기보다, /design이 읽어 들인 tokens.css와 DESIGN.md가 큰 역할을 했습니다. 디자인 시스템이 코드에 없으면, AI가 브랜드를 대신 지켜주기는 어렵습니다. 8주 동안 저희가 배운 건 결국 이 한 가지였습니다.

이 워크플로우는 툴 연동에서 시작했지만, 디자이너가 표준을 세우고 AI와 사람이 함께 그 표준을 따르는 브랜드 운영 체계로 자리 잡았습니다.

Next Steps

고객사에도 같은 과정을 제공합니다: 브랜드 가이드라인 PDF를 토큰·컴포넌트·DESIGN.md로 코드화해 Claude Design·Claude Code에 연결하는 패키지를 AX Pro 컨설팅 메뉴로 정식화.
AI Supervision 연동: 브랜드 리뷰 스킬을 AI Supervision의 실시간 검증 레이어에 붙여, 접근성·브랜드 준수·민감정보 노출을 배포 전에 자동 점검.
Claude Enterprise 온보딩: Enterprise 플랜에서는 Claude Design이 기본적으로 꺼져 있고 조직 내 공유만 가능합니다. Claude Enterprise 파트너로서 관리자 설정, 디자인 시스템 잠금, 스킬 배포까지 함께 도와드립니다.
`/design` 프리뷰 추적: 임포트된 디자인 시스템이 어디까지 자동 반영되는지 확정되는 대로 룰 갱신.

혹시 회사의 브랜드 가이드라인이 아직 PDF 안에만 머물러 있지는 않나요? AI가 그대로 참고하기에는 어려운 형식입니다. 코드로 옮기는 첫 단계부터, TecAce와 편하게 이야기 나눠보시면 좋겠습니다.