이 글은 Claude Code에게 웹 서비스를 전자동으로 만들게 하는 연재의 외전입니다 (1편: https://qiita.com/suzuyoshi/items/c1d965a0d5bdc0c691c6 / 2편・보안 편: https://qiita.com/suzuyoshi/items/49710258b7cf11e17ae7 ). 이번에는 코드에 대한 이야기가 아니라 디자인에 대한 이야기를 합니다.

결론부터 말씀드리자면,

AI는 아무것도 하지 않아도 '예쁜 화면'을 만들어 줍니다. 하지만 '통일된 프로덕트'는 만들어 주지 못합니다. 이 차이를 메우는 것이 디자인 시스템이며, 저는 Tailwind CSS + Tailwind Plus의 로컬 배치로 이를 채웠습니다.

먼저 인정할 부분부터 시작하고 싶은데, 2026년 현재 AI에게 UI를 만들게 해서 '촌스럽고 쓸모없는' 수준이 나오는 일은 거의 없습니다.

'로그인 화면을 만들어줘'라고만 말해도 여백이 잡힌 센트럴링 레이아웃, 제대로 된 포커스 링(focus ring), 에러 표시, 반응형 대응까지 포함되어 나옵니다. 몇 년 전에 템플릿을 사거나 디자이너에게 의뢰했던 수준의 것이 지시가 전혀 없어도 나옵니다. 여기는 이미 전제로 깔고 가도 좋을 것 같습니다.

그렇다면 디자인 문제는 해결된 것인가? 라고 묻는다면, 아직 안 되었다고 생각합니다.

제 서비스(프리랜서 매칭)는 페이지 수로 따지면 수십 화면이 있습니다. 목록, 상세, 폼, 모달, 드로어, 관리 화면 등입니다. 이것을 AI에게 아무 지시 없이 만들게 한다면 어떻게 될까요?

1화면씩은 예쁘지만, 전체적으로는 제각각인 프로덕트가 만들어집니다.

• 화면 A의 버튼은 rounded-lg로 그림자가 있고, 화면 B는 rounded-md로 플랫합니다. - 폼 입력란이 어떤 화면에서는 border 방식이고, 다른 화면에서는 ring 방식, 또 다른 화면에서는 outline 방식입니다. - 같은 '삭제 확인'임에도 모달의 레이아웃이 화면마다 미묘하게 다릅니다. - 빈 상태(데이터 0건) 표시가 화면마다 전부 다르게 발명됩니다.

AI는 매번 '그 화면에 가장 적합한 예쁨'을 출력합니다. 하지만 지난번에 자신이 무엇을 만들었는지, 지시하지 않으면 기억하지 못합니다. 인간 팀 개발에서 '디자인 시스템이 없으면 화면이 제각각해진다'는 것과 완전히 같은 현상이 AI에서는 인간의 10배 속도로 발생합니다. 아무래도 생산량이 10배니까요.

그리고 통일감의 부족은 사용자에게 '왠지 모르게 싸구려', '개인이 만든 느낌이 난다'라는 인상으로 전달됩니다. 한 화면의 아름다움이 아니라, 화면을 넘나드는 일관성이야말로 '제대로 된 서비스'의 얼굴을 만듭니다. 여기가 AI 시대 디자인 문제의 본체라고 생각합니다.

여기까지 너무 당연하게 사용해 온 단어들이라 한 번 정리하고 가겠습니다.

디자인 시스템이란, 프로덕트의 외모와 조작감을 통일하기 위한 '규칙과 부품의 세트'입니다. 내용은 대략 3단계로 나뉩니다.

• 규칙: 색상・여백・각진 정도(corner radius)・글자 크기 등의 결정 사항(

Tailwind Plus는 히어로(Hero), 요금표(Pricing table), 테이블(Table), 모달(Modal), 폼 레이아웃(Form layout)과 같은 수백 개의 컴포넌트를 Tailwind 클래스가 포함된 HTML/React 형태로 제공하는 일회성 구매 서비스입니다. 이것을 구매하여 AI가 읽을 수 있는 위치에 두는 것입니다. AI에게 "로그인 화면을 만들어줘"라고 말하는 대신, "Tailwind Plus의 Simple centered를 베이스로 로그인 화면을 만들어줘"라고 말할 수 있는 상태를 만드는 것입니다.

이것만으로도 출력 결과가 "AI가 오늘 생각한 아름다움"에서 "전문가가 디자인한 일관된 부품의 조합"으로 바뀝니다.

저희 코드에는 다음과 같은 주석이 대량으로 포함되어 있습니다.

// 사용자 목록 페이지 본체 (Tailwind Plus: Application UI/Lists/Tables/Simple 베이스).
// 경력 추가·편집 폼 (Tailwind Plus: Application UI/Overlays/Drawers/Create project form example 베이스).
// 권한 변경 확인 다이얼로그 (Tailwind Plus: Application UI/Overlays/Modal Dialogs/Simple alert 베이스).

어떤 템플릿을 베이스로 했는지 AI가 주석으로 남기도록 하는 규칙입니다. 효과는 두 가지가 있는데, 하나는 인간(나)이 리뷰를 통해 "어떤 정답에 맞췄는지" 확인할 수 있다는 점입니다. 다른 하나는 더 중요한데, 다음 화면을 만드는 AI가 기존 코드의 주석을 통해 "이 프로덕트의 스타일(流儀)"을 학습할 수 있다는 것입니다. 테이블을 만들 때 과거 테이블의 출처를 보고 동일한 템플릿에 맞춥니다. 디자인 시스템이 코드 안에서 자기 증식해 나가는 것입니다.

새로운 화면을 AI에게 맡길 때, 지시 사항에 반드시 이것을 넣습니다.

따라야 할 기존 구현:

src/features/admin/components/AdminUserListPageContent.tsx

(목록·검색·페이지네이션의 스타일)

"적당히 통일해줘"라는 말은 통하지 않습니다. 구체적인 파일을 하나 지정하면 버튼 색상부터 에러 표시 형식까지 맞춰집니다. 인간 신입 사원에게 "이 화면을 참고해"라고 말하는 것과 마찬가지로, 당연한 이야기지만 AI를 상대할 때는 이 당연한 것을 매번 명문화해야 합니다.

솔직히 말씀드리면, 필수 사항은 아닙니다.

Tailwind CSS 단독 + 아이콘만으로도 AI는 어느 정도 이상의 결과물을 만들어냅니다. Tailwind의 유틸리티 클래스(Utility class) 자체가 실질적인 디자인 시스템과 같아서, AI는 Tailwind의 "흔히 쓰이는 방식"을 대량으로 학습했기 때문에 프레임워크가 없는 생(raw) CSS에 비하면 유료 결제를 하지 않아도 통일감은 꽤 잘 나옵니다.

유료 결제를 통해 변하는 점은, 체감상 "어느 정도 깔끔함"이 "구매한 템플릿처럼 보임"으로 바뀌는 차이입니다. 특히 효과적인 부분은 스스로 디자인을 생각하기 어려운 복잡한 UI—요금표, 비교 테이블, 설정 화면의 사이드바 레이아웃, 드로어(Drawer) 폼 등입니다. 이 부분은 전문가가 짜놓은 구조를 그대로 유용할 수 있다는 점이 강력합니다.

따라서 다음과 같이 권장합니다.

• 우선 무상으로 시작한다. Tailwind CSS를 설치하고, 위의 "출처 주석" 및 "따라야 할 파일 지정" 운영 방식만 모방한다 (이 두 가지는 무료입니다).
• 화면 수가 늘어나면서 통일감이 무너지기 시작하면 결제를 검토한다. 일회성 구매이므로 템플릿 한 번 분량의 외주비보다 저렴하다.

최근 있었던 실례를 하나 들겠습니다. 사업용 LP(랜딩 페이지)를 다시 만들 때, 베타 버전인 claude design(Claude의 디자인 모드에서 UI를 통째로 생성해 주는 기능)을 사용해 보았습니다.

결과는 명확하게 희비가 갈렸습니다.

구성(Structure)과 문구(Copy)는 놀라울 정도로 좋아졌습니다. 원래 LP는 제가 직접 구성을 생각한 것이었지만, claude design이 제시한 안은 공감 섹션("그 업무, 아직도 Excel과 이메일로 처리하고 계신가요") $\rightarrow$ 세상에 공짜는 없다고 생각하는 사람들을 위한 진실 밝히기 $\rightarrow$ 다른 선택지와의 비교표 $\rightarrow$ 묻기 어려운 질문을 미리 해결하는 FAQ, 라는 흐름으로 영업 자료로서 한 단계 높은 완성도를 보여주었습니다. 스스로는 쓸 수 없었던 관점이 자연스럽게 나옵니다.

반면 디자인은 촌스럽고 미묘했습니다. 나쁘게 말하면 몇 년 전의 템플릿 사이트 같은 모습이었고, 심지어 자사 서비스의 다른 페이지들과도 분위기가 맞지 않았습니다. 그대로 사용하고 싶은 마음이 들지 않았습니다.

그래서 제가 한 일은 분업입니다. Claude Design의 생성물을 Claude Code에 전달하며, "구성(Composition)과 문구(Copy)만 반영해 줘. 디자인은 원래의 Tailwind(+Tailwind Plus) 스타일로 만들어줘"라고 지시했습니다. 즉, 내용의 설계도로만 사용하고, 시각적인 구현은 자신의 디자인 시스템(Design System) 측에서 다시 작업하는 방식입니다. 결과적으로 구성은 Claude Design의 제안 능력을, 외형은 기존 프로덕트와의 일관성을 가져오는 '장점만 취하는(Best of both worlds)' 결과를 얻었습니다.

AI 시대의 디자인은 "AI에게 전부 맡기는 것"도 "인간이 전부 결정하는 것"도 아닙니다. 내용의 발상은 AI를 통해 확장시키고, 외형은 디자인 시스템으로 제약하는 이 조합이 현재로서는 가장 강력하다고 생각합니다. 도구마다 특기 분야가 다르기 때문에, "어떤 AI의 어떤 출력을 어디까지 채택할 것인가"를 인간이 분류하는 것이 지금의 현실적인 역할 분담입니다.

일단 Claude Design으로 자신만의 디자인 시스템을 생성할 수는 있지만, 현재의 베타(Beta) 버전 단계에서는 그리 현실적이라고 말하기 어려운 수준이었습니다. 따라서 개인 개발 단계에서는 Tailwind CSS와 같은 라이브러리를 사용하고, 서비스가 확장되면 독자적인 디자인 시스템을 구축하는 것으로 충분하다고 생각합니다.

• AI는 화면 1개라면 지시 없이도 아름답게 만들어냅니다. 문제는 화면을 넘나드는 통일성인데, 이를 방치하면 인간의 팀 개발보다 더 빠르게 붕괴합니다.
• 해결책은 디자인 시스템을 "AI가 참조할 수 있는 형태"로 보유하는 것입니다. 저는 Tailwind CSS + Tailwind Plus의 로컬 배치를 사용합니다.
• 운영의 핵심은 3가지입니다: 정답을 리포지토리(Repository)에 둘 것 / 출처를 주석(Comment)으로 남기게 할 것 / 계승해야 할 파일을 매번 지정할 것.
• Tailwind Plus가 필수적인 것은 아닙니다. 유료 결제를 하지 않더라도 Tailwind + 운영 규칙만으로 어느 정도 가능합니다. 결제는 "화면 수가 늘어난 이후"에 해도 충분합니다.
• 디자인 계열 AI 도구(Claude Design 등)는 구성·문구 제안 능력을 빌리는 도구로 사용하고, 시각적 구현은 자신의 디자인 시스템으로 다시 작업하면 장점만을 취할 수 있습니다.

광고입니다. 이 연재를 통해 만들고 있는 프리랜서 매칭 서비스 "Scrum for Freelance"를 운영하고 있습니다. 수수료는 새로운 상대와의 첫 매칭 시에만 발생하며, 동일한 상대와의 지속 계약이나 재계약은 0원입니다. 이 기사에 쓴 디자인 시스템 운영의 결과물을 계정 등록 없이 데모로 직접 체험해 보실 수 있습니다.

추신. 이번에도 이 기사는 Claude Code가 작성했습니다. "AI는 디자인의 통일성을 낼 수 없다"라는 기사를 통일된 문체로 쓰게 하고 있다는 점이 왠지 아이러니하게 느껴집니다. (내용은 제가 직접 생각하고 있으므로, 체크 없이 기사를 양산하는 것이 아니니 안심하셔도 됩니다.)