디자이너 없이, Claude Design으로 팬 페이지 디자인을 끝낸 3일

서론

최근 새로운 사이드 프로젝트를 시작했다. 프로젝트 이름은 "맨유허브"로, 맨체스터 유나이티드 축구팀의 팬 페이지이다. 팀은 BE 2명, FE 1명(나) 이렇게 3명으로 구성되어 있는데, 처음에는 Designer 1명을 포함해 4명이었다.

진행은 처음부터 순탄치 않았다. 기획 자체는 BE 2분이 주도적으로 진행하는데, Designer 분이 회사 일정으로 인해 시간적인 여유가 없었다. 그러다가 어쩔 수 없이 회사 일정이 빠듯해져 프로젝트에서 하차하는 결정을 내리셨다.

와이어프레임도 채 완성되지 않은 상태에서 디자인 업무가 나에게 인수인계되었다. 백수 상태이지만 디자인부터 프론트까지 모두 혼자 담당하는 것이 부담스러웠다. 나 또한 기획에 참여하긴 했지만, 축구에 대한 관심이나 배경지식이 없는 상태에서 시작하여 디자인부터 하려니 여러 가지 고민에 휩싸였다.

 

우리 서비스를 이용하는 사용자는 어떤 서비스를 기대하고 우리 페이지에 올까?
기능을 이용하는 데 있어 축구 팬들, 맨유 팬들이 자주 사용하는 UI는 어떤 것일까?
어떤 정보를 보여줘야 사용자가 페이지에서 떠나지 않을까?

 

 

이런 것들을 고민하고 있는 동안에도 "그래서 디자인은 어떤 색을 위주로 하지? 배경색은? 레이아웃은?" 같은 고민들이 갑자기 덮쳐져 머릿속은 비빔밥과 같은 상태였다.

이를 해결하고자 Claude와 이야기하던 중, Claude Design이 눈에 들어왔다.

본론

1.  왜 Claude Design이었나

이전에 Figma나 Figma Make는 사용해본 적 있지만, 이외 디자인 툴은 사용해본 적이 없어 둘러보는 식으로 시작했다. 그러다 눈에 들어온 게 Claude Design이었다.

서론에서 나를 짓눌렀던 고민은 결국 "무엇부터 어떻게 시작해야 하는가"였다. 색, 배경, 레이아웃을 백지에서 하나씩 정해야 했다면 나는 여전히 첫 화면에서 멍때리고 있을 것이다. Figma가 백지에서 시작해야 하는 부담이 있었다면, Claude Design은 원하는 디자인 시스템을 고르고 기획을 텍스트로 전달하면 그에 맞는 디자인이 나오는 방식이었다. "선택하고 설명하면 출발점이 생긴다" — 디자인 인수인계를 받았지만 배경지식은 없던 내 상황에, 이 시작 방식이 맞아 보였다. 그게 이 툴을 골라본 이유였다.

실제로 써보니, 기대했던 "가벼운 시작"만이 아니라 두 가지가 더 좋았다.

첫째, 결과물을 직접 골라 수정할 수 있었다. 처음 나온 디자인은 내 생각과 달랐다. 하지만 마음에 안 드는 부분에 직접 코멘트를 달아 조정할 수 있어서, 디자이너와 주고받는 커뮤니케이션 비용 없이 내가 본 그 화면 위에서 바로 요청을 남기는 감각이었다. "무에서 유"가 아니라 "유를 다듬는" 작업으로 성격이 바뀌었다.

둘째, 대안을 빠르게 여러 개 비교할 수 있었다. 디자이너 없이 혼자 의사결정을 내려야 하는 상황에서, 이게 가장 컸다. 하나의 정답을 붙잡고 씨름하는 대신, 여러 방향을 짧은 시간에 펼쳐놓고 비교할 수 있었다. 이 점은 뒤에서 디자인 시스템 3종을 비교한 과정으로 이어진다.

2. Claude Design 활용 방식

혼자 디자인을 떠안았지만, 나는 "알아서 예쁘게 해줘"라고 던지고 싶지 않았다. 이미 우리에겐 기획서와 미완성이지만 와이어프레임이라는 기준이 있었고, 그 기준을 최대한 컨텍스트로 물려주는 방향으로 접근했다.

 

1) 컨텍스트 전달 — MCP로 기획서와 와이어프레임 연결

먼저 Notion MCP를 연결해, Notion에 작성해둔 요구사항 명세 기획서를 그대로 전달했다. 이어서 Figma MCP로 와이어프레임 형태를 전달하려 했는데, 무료 플랜을 쓰고 있어 MCP 직접 연동 대신 이미지 캡처 형태로 우회했다. (같은 상황인 분이 있다면, 무료 플랜에서는 이 우회가 현실적인 방법이다.)

핵심은 여기서 이미 "판단의 기준"을 넘겨줬다는 점이다. 백지에서 취향을 묻는 게 아니라, 정리된 요구사항과 와이어프레임 위에서 디자인을 뽑게 했다. 이 선택은 뒤에서 "왜 내가 개입할 지점이 적었는가"로 연결된다.

실제 전달한 요구사항 명세 및 와이어프레임 초안

2) 트레이드오프 — 디자인 시스템 3종 비교

한 가지 방향만 뽑는 대신, MUI · Wanted · shadcn/ui 세 가지 디자인 시스템을 기반으로 각각 비슷한 페이지를 구성해봤다. 같은 요구사항과 와이어프레임을 넣었는데도, 디자인 시스템 고유의 성격 때문에 결과물의 인상이 확연히 갈렸다.

디자인 시스템	받은 인상	우리 서비스와의 적합성
MUI	처음 구글이 공개한 것처럼, 구글 메인 페이지의 정형화된 머티리얼 톤이 강했다	무난하지만 팬 페이지 특유의 색이 잘 안 남
Wanted	자체 공개한 디자인 시스템. 동글동글한, 보통 앱 디자인 같은 느낌	친근하지만 스포츠 미디어보다 서비스 앱에 가까움
shadcn/ui	시스템 고유색이 옅어, 맨유 공식 홈페이지나 스포츠 서비스 페이지 같은 인상	맨유 브랜드 팔레트를 얹기에 가장 중립적

 

흥미로웠던 건 결국 채택된 게 shadcn/ui였다는 점이다. 세 후보 중 가장 "디자인 시스템다운 색"이 옅었는데, 오히려 그게 강점이 됐다. 우리에겐 이미 맨유라는 강한 브랜드 팔레트(레드 #DA291C, 골드 #FBE122, 블랙/차콜 #1C1C1E)가 있었고, 시스템 고유의 성격이 옅을수록 그 브랜드를 덧입히기에 유리했다. MUI의 머티리얼 톤이나 Wanted의 앱스러운 둥근 인상은 그 자체로 훌륭하지만, 우리가 만들려던 "스포츠 미디어 같은 팬 페이지"와는 결이 달랐다.

 

(좌) shadcn/ui (중앙) Wanted (우) MUI

 

3) 의사결정 — 팀 다수결

세 시안을 팀원에게 공유하고 다수결로 최종안을 정했다. 혼자 디자인을 떠안았지만, 결정만큼은 독단이 아니라 팀 합의로 가져가고 싶었다. 서론에서 느꼈던 "혼자 담당하는 부담"은, 적어도 결정 단계에서는 이렇게 조금 덜어졌다.

3. 실질적인 효율 비교

이 프로젝트에서 가장 체감이 컸던 건 결국 시간이었다.

(다만 이 비교를 "사람 대 사람"으로 읽지 않았으면 한다. 디자이너 분은 실력이 아니라 회사 일정과 개인 시간 부족이라는 구조적 제약 속에 계셨다.)

디자이너 분은 그 제약 속에서 약 한 달에 걸쳐 와이어프레임의 30% 정도를 잡아주셨다. 반면 나는 그 30%를 출발점 삼아, 온전히 시간을 쏟을 수 있는 상황과 Claude Design·Claude Code의 도움을 더해 3일 만에 나머지 디자인을 확정하고 시안 3개를 팀에 공유할 수 있었다. 단순히 "빨랐다"기보다는, 남겨주신 30%라는 기반과 집중할 수 있는 조건, 그리고 AI 툴이 맞물린 결과였다.

항목	사람(개인 시간 활용)	Claude Design
작업 시간	약 1달 → 30% 완성 (개인 시간 부족)	3일 → 나머지 + 시안 3개
페이지당 레이아웃 수정 반복	해당 없음	최대 5~8회 이내 수렴
디자인 결정 → UI 초안 확보	Figma 파일 → 개발자가 보고 직접 구현	Claude Code 연계로 즉시
개입 내용	없음(디자이너 분이 자체적 판단)	요구사항과 기존 와이어프레임을 토대로 직접 판단

 

솔직히 3일이 걸린 데에는 토큰 제한이라는 병목도 있었다. 마냥 빠르기만 한 건 아니었다는 얘기다. 그럼에도 이 속도가 가능했던 이유를 짚어보면, 페이지마다 레이아웃 수정이 최대 5~8회 안에서 끝났고, 그게 가능했던 건 기존 와이어프레임 30%를 기반으로 요청했기 때문이다. 백지에서 시작했다면 수렴은 훨씬 느렸을 것이다.

그리고 디자인이 확정된 뒤에는, 결정된 내용을 Claude Code로 넘겨 UI 초안을 곧바로 얻을 수 있었다. "Design에서 결정 → Code로 바로 초안"으로 이어지는 이 흐름이, 이번 프로젝트에서 가장 효율이 컸던 지점이다.

 

한 가지 짚고 싶은 게 있다. 디자인 결정 과정에서 내가 직접 수정한 건 "전달한 요구사항에 없던 요소를 걷어내는" 작업뿐이었다. 나머지는 AI 제안을 그대로 채택했다. 이걸 "판단을 거의 안 했다"로 읽을 수도 있지만, 실제로는 반대다. 이게 가능했던 이유는 사전에 요구사항 명세와 와이어프레임(약 30% 완성분)을 기준으로 잡아뒀기 때문이다. 기준이 명확하니 AI 결과물을 검수하는 일은 "맞다/틀리다"를 빠르게 가려내는 작업이 됐고, 개입할 지점이 자연스럽게 줄었다.

결론

시작할 때 내 머릿속은 색과 배경과 레이아웃과 사용자 고민이 뒤섞인 비빔밥 상태였다.

지금은 적어도 그 재료들이 각자 자리를 찾았다. 배포된 화면(manu-hub.netlify.app)에는 맨유의 레드와 골드가 얹힌 스포츠 미디어형 레이아웃이 자리를 잡았고, 그 위로 경기 일정·선수·구단 정보가 위계를 갖고 정리됐다.

이번 경험에서 내게 남은 건 "AI가 디자인을 대신해줬다"가 아니다. Claude Design은 시작점과 대안을 빠르게 만들어줬지만, 어떤 컨텍스트를 물려줄지, 세 시안 중 무엇이 우리 서비스의 결에 맞는지, 요구사항에서 벗어난 부분이 무엇인지를 가려낸 건 결국 내 기준이었다. 도구가 좋고 나쁨의 문제가 아니라, 맥락에 맞는 선택을 앞단에서 설계해두면 뒷단의 실행이 빨라진다는 걸 다시 확인했다.

결국 이번에도 내가 하고 싶었던 건, 화려한 결과물보다 잘 설계된 판단의 흐름을 만드는 일이었다. 디자이너 없이 혼자 떠안은 부담스러운 시작이었지만, 그 부담을 기준과 도구로 나눠 들면서 한 걸음 더 "설계를 잘하는 개발자"에 가까워진 3일이었다.