Claude Design을 활용한 디자인 시스템 만들기 (1) — 계획 수립

들어가며

지금까지 업무를 하며 필요한 툴들을 만들다보니, 벌써 7개의 프로젝트를 만들고 활용 중이다.
외부에 드러나는 퍼블릭 홈페이지 하나, 그리고 나머지 여섯은 전부 내부에서 쓰는 툴. 백오피스 하나와 페이지 10장 안쪽의 작은 앱 다섯이다.

퍼블릭 홈페이지는 외주 디자이너와 오래 소통하며 하나하나 잡은 결과물이다.
반면 나머지 여섯은 "우리끼리 쓰는 건데 뭐" 하는 마음으로 AI에게 모든걸 위임해서 만들었다. 기능만 돌아가면 됐으니까.
그러다 보니 지금 이 일곱을 나란히 놓고 보면 같은 도메인 서비스라고 하기 민망한 수준이다.
색도 다르고, 버튼도 다르고, 간격도 폰트 크기도 제각각이다.

알고 있었지만 디자인을 건드리는건 최대한 미뤘다.
대부분이 내부에서 쓰는 툴이라 UI 통일이 우선순위에서 계속 밀렸다.
프로젝트마다 외부로 노출되는 퍼블릭 페이지가 한두 장씩 있긴 했지만, 그것도 그 프로젝트 맥락 안에서만 돌아가는 거라 전체 브랜드 관점에서 묶어 볼 일이 없었다.

Claude Design 출시

며칠 전 Anthropic이 Claude Design을 공개했다.
research preview라 아직 불안정한 부분은 있는데, 눈에 띈 건 코드베이스를 연결하면 그 위에서 새 화면을 만들어준다는 점이었다.

그냥 "AI가 UI 만들어주는 툴" 이면 별 감흥이 없었을 거다. 그런 건 많으니까. 실제로 몇번 써보고 실망하기도 했었고.
Claude Design은 기존 내 프로젝트 컨텍스트를 읽고 그 위에서 작업이 가능하다.
디자이너 없이 내부 툴을 개선해야 하는 입장에서는 이게 게임 체인저가 될 수도 있겠다 싶었다.

한번 써보자. 우선 쓰기 전에 먼저 홈페이지 코드부터 다시 열어봤다.

홈페이지 코드 확인

colors.css에는 Primary 3단계, Gray 7단계, Status 쌍이 정리돼 있다.
fonts.css는 Web/Mobile 타이포그래피가 분리된 상태로 H1부터 C2까지 위계가 잡혀 있다.
외주 디자이너와 소통하며 하나하나 정한 규칙들이고, 언젠가 디자인 시스템으로 묶을 걸 염두에 두고 작성한 코드다.

문제는 이 의도가 홈페이지 안에서만 살아있었다는 거다.
다른 프로젝트에 가져다 쓸 수 있는 형태로 패키지화하지 않았다.
그래서 내부 툴들은 이 토큰의 존재를 모른 채 각자 갈 길을 갔다.

이번에 할 일은 없던 디자인 시스템을 새로 만드는 게 아니다.
홈페이지 안에만 갇혀 있던 시스템을 꺼내서 다른 프로젝트도 쓸 수 있는 형태로 묶는 일이다.

작업 순서

여기서 좀 웃긴 딜레마가 있었다.

디자인 시스템의 소스는 홈페이지다. 디자이너가 잡아놓은 톤이 거기 있으니까.
근데 홈페이지는 외부 노출이라 가장 리스크 큰 곳이기도 하다. 건드리다 잘못되면 고객이 바로 본다. 소스이자 가장 건드리기 싫은 곳. 그래서 원칙을 하나 세웠다. 홈페이지는 맨 마지막에 건드린다.
시스템은 다른 프로젝트에서 먼저 검증한 다음에 돌아온다.
구체적으로 어느 프로젝트부터 어떤 순서로 이주할지는 시리즈 진행하면서 필요할 때 적어보겠다.

다음 작업

이제 이 코드베이스와 피그마 작업물을 Claude Design에 넘긴다.
AI가 내 토큰을 잘 이해할까? 놓친 건 없을까? 빠진 컴포넌트를 같은 톤으로 만들어낼 수 있을까?
결과물은 다음 편에서 하나씩 살펴보자.