개발자로서 웹이나 앱 서비스를 개발할 때면 항상 디자인을 어떻게 할 것인지 고민이었습니다. 외주를 맡기자니 비용이 부담스러워 직접 화면을 그리거나, 부족한 디자인 감각으로 그럴듯한 템플릿을 어색하게 끼워 맞추는 경우가 많았죠. 그러던 와중에 ‘클로드 디자인(Claude Design)’이 새롭게 출시된 겁니다. 과연 디자인에 대한 고민을 해결해 줄 수 있을지, 직접 확인하기 위해 써봤습니다.

일전에 개발자를 위한 피그마 사용법과 활용 팁이라는 글에서 개발자가 디자이너와 협업할 때 피그마(Figma)를 어떻게 활용해야 하는지 정리한 적이 있었는데요. 당시에는 피그마가 대세였는데, 지금은 디자인 업계에 또 다른 변화가 일어나고 있는 것 같습니다. 이번 글에서는 개발자(비디자이너)인 제가 클로드 디자인으로 직접 프로젝트를 진행한 경험을 공유하면서, 어떤 점이 유용했고 어떤 점이 아쉬웠는지, 그리고 앞으로 디자이너의 역할이 어떻게 변할지에 대한 생각을 정리해 보았습니다.

미리 요점만 콕 집어보면?

클로드 디자인은 디자인 결과물과 동작 가능한 코드를 동시에 생성해주는 AI 도구로서 1인 개발 환경의 디자인 병목을 상당 부분 해소해 줄 것으로 기대됩니다.
디자인 시스템(Design System)이나 랜딩 페이지(Landing Page)처럼 패턴이 명확한 작업에서는 강력하지만, 복잡한 화면 구성이나 사용자 임팩트 측면에서는 여전히 사람의 판단이 필요합니다.
디자이너의 역할은 이제 직접 작업을 하는 '실행자'가 아니라 '큐레이터(Curator)' 또는 ‘판단자’의 역할로 변하게 될 것이며, 앞으로 개발과 디자인이 모두 가능한 프로덕트 메이커(Product Maker)가 다수 등장할 것으로 보입니다.

클로드 디자인은 무엇이고, 어떤 프로젝트에 적용했나?

클로드 디자인은 앤트로픽(Anthropic)에서 제공하는 AI 디자인 도구로서, 자연어로 요구사항을 설명하면 화면 디자인과 함께 그 화면을 구현한 리액트(React)와 넥스트.js(Next.js) 코드까지 동시에 생성해주는 특징이 있습니다. 즉, 일반적인 이미지 생성 AI가 정적인 시안을 뽑아주는 데 그친다면, 클로드 디자인은 프로덕션에 바로 쓸 수 있는 컴포넌트 코드까지 함께 제공한다는 점에서 차이가 있습니다.

저는 마침 개인적으로 운영 중인 코택스USA(KotaxUSA)라는 미국 세금 정보 포털을 새로 만들기 시작한 시점이었기 때문에 클로드 디자인을 테스트하기 좋은 기회였습니다. 참고로 코택스USA는 미주 한인을 대상으로 미국 세금 정보를 제공해 온 포털입니다. 기존에는 워드프레스 기반의 콘텐츠 사이트였는데요. 이번 리뉴얼에서는 사용자가 직접 본인의 세금을 보고, PDF를 업로드하면 AI가 내용을 분석해 놓친 크레딧이나 공제 항목을 점검해 주고, 그 결과를 바탕으로 적절한 미국 세무사와 연결해 주는 SaaS 형태로 완전히 피벗(Pivot)하기로 했습니다.

따라서 단순한 사이트 리뉴얼이 아니라 SaaS 프로덕트의 제로 투 원(Zero to One) 디자인이었기 때문에, 디자인 시스템부터 와이어프레임, 랜딩 페이지, 인터렉티브 프로토타입까지 다양한 영역을 적용해 볼 수 있었습니다.

클로드 디자인으로 만든 결과물

코택스USA를 리뉴얼하면서 클로드 디자인을 적용한 영역은 크게 네 가지입니다. 디자인 시스템, 와이어프레임, 랜딩 페이지, 인터렉티브 프로토타입 제작입니다. 각 영역마다 클로드 디자인의 강점과 더불어 한계도 어느 정도 있었던 것 같습니다.

1) 디자인 시스템 구축

가장 먼저 시작한 작업은 디자인 시스템 구축이었습니다. 클로드 디자인에서 Set up design system 버튼을 클릭하거나 Design Systems 탭을 이용하여 작업을 진행할 수 있었습니다. 클로드 디자인이 제시한 질문지에 프로젝트의 개요와 함께 몇 가지 정보를 입력하면, AI가 디자인 시스템에 필요한 컬러 팔레트(Color Palette), 타이포그래피(Typography), Shadcn/UI 기반의 공통 컴포넌트(버튼, 카드, 폼, 토스트, 모달 등) 등을 생성해 주었습니다.

다만 저는 전문 디자이너가 아니기 때문에 백지부터 디자인 시스템을 만드는 것이 어려웠는데요. 그래서 여러 유명 사이트의 디자인 시스템을 md 파일로 내려받을 수 있는 getdesign.md라는 사이트를 이용했습니다. 이 사이트에서 애플, BMW, 에어비앤비 등의 다양한 디자인 시스템을 찾아볼 수 있었죠.

이번 코택스USA 프로젝트에서는 블루 계열의 코인베이스 디자인 시스템을 활용하기로 했습니다. getdesign.md에서 코인베이스 디자인 시스템을 다운로드 받고, 다음 그림처럼 코택스USA 프로젝트 개요와 함께 노트 입력란에 그대로 붙여넣기를 했습니다.

이렇게 프로젝트 개요와 참고할 디자인 시스템을 넣어 코택스USA의 다지인 시스템을 만들어 달라고 요청했습니다. 그러면 클로드 디자인이 폰트, 컬러, 웹/앱 kit 등 디자인 작업에 필요한 요소들을 생성해 주었습니다.

다만 제가 사용한 코인베이스의 디자인 시스템에는 코인베이스 공식 폰트인 Coinbase Sans가 상업적 용도로 사용하는 것이 금지되어 있었습니다. 클로드 디자인은 이 부분을 경고하면서 다른 폰트를 적용하라고 했죠. 저는 Coinbase Sans와 유사하면서도 상업적 이용이 가능한 Inter(Google Fonts)를 별도로 업로드했습니다.

2) 와이어프레임 만들기

다음으로 각 화면의 와이어프레임(Wireframe)을 만들어 웹/앱 서비스의 전반적인 흐름을 점검했습니다. 클로드 디자인의 좌측 메뉴에서 앞서 구축한 디자인 시스템을 선택하고, 와이어프레임 제작을 선택하면 다음 그림과 같이 Q&A 세션이 나오게 됩니다.

와이어프레임에 대한 Q&A 세션에 답변을 입력하면, 다음 그림과 같이 와이어프레임이 생성됩니다. 사용자의 서비스 이용 흐름에 맞게 각 화면이 탭으로 구분되고, A/B 테스트가 가능하도록 세팅되었는데요. 덕분에 특정 화면에서 어떤 형태의 UI 구조를 잡는 것이 좋을지, 손쉽게 비교할 수 있었습니다.

비록 이번 리뉴얼 프로젝트 범위는 아니지만, 향후 앱 개발까지 고려해서 모바일 와이어프레임도 요청해 보았습니다. iOS 기반으로 와이어프레임을 만들었는데, 컴퍼넌트가 겹쳐서 표시되는 등 다소 미흡해 보이는 곳이 있었습니다. 이런 경우, Draw 기능을 이용해서 수정할 부분을 표시하고, 클로드에게 다시 고치라고 요청해야 했습니다.

3) High Fidelity 프로토타입 만들기

와이어프레임을 기반으로 High Fidelity 프로토타입도 제작했습니다. 실제로는 디자인 시스템과 와이어프레임 정도만으로도 충분히 클로드 코드 작업을 시작할 수 있습니다. 하지만 클라이언트나 다른 팀과의디자인 점검이 필요한 경우, High Fidelity 프로토타입을 유용하게 이용할 수 있기 때문에 같이 진행을 했습니다.

이렇게 와이어프레임을 기반으로 High Fidelity 프로토타입을 요청하면 인터랙티브 하게 동작하는 화면이 생성됩니다. 실제로 내비게이션 바의 메뉴를 클릭하면 다른 화면을 볼 수 있고, 간단한 인터렉티브 UI도 어떻게 동작하는지 살펴볼 수 있습니다.

4) 랜딩 페이지 만들기

마지막으로 작업한 것은 사이트의 랜딩 페이지(Landing Page)였습니다. "세금 자가 진단"이라는 핵심 키워드를 중심으로 히어로 섹션, 정보 및 신뢰 요소, 자주 묻는 질문(FAQ) 등을 한 페이지에 담는 것이 목표였죠. 사실 랜딩 페이지는 클로드 코드에서도 잘 나오기 때문에, 굳이 클로드 디자인을 사용하지 않아도 됩니다. 다만 클로드 디자인을 이용하면 전반적인 디자인 통일성을 유지하면서도, 각종 수정 기능을 활용할 수 있습니다.

최종적으로 완료된 디자인 결과물들은 핸드오프(Hand off) 기능을 통해 클로드 코드로 넘겼습니다. 클로드 디자인에 있는 핸드오프 기능을 이용하면, 각 프로젝트 URL을 받을 수 있습니다. 그리고 이 URL들을 이용해, 클로드 코드에게 디자인 결과물을 참고해서 코딩 작업을 진행하라고 지시할 수도 있죠.

직접 써보며 느낀 장/단점

1) 장점

먼저 가장 편리하게 느낀 부분은 전문 디자이너가 아니어도 어느 정도 디자인 시스템이나 와이어프레임을 빠르게 만들 수 있다는 점이었습니다. 예전 같으면 디자이너에게 시안을 의뢰하고, 몇몇 수정 라운드를 거쳐야 했을지도 모르는 작업을 클로드 디자인으로 해결할 수 있었습니다. 특히 디자인 시스템 구축처럼 패턴이 명확하고 레퍼런스가 풍부한 영역에서는 사람이 만든 1차 시안보다, 클로드 디자인의 결과물이 더 일관성을 유지할 수 있겠다는 생각이 들었습니다.

코드 작업과의 연결성도 큰 강점이었습니다. 일반적인 AI 이미지 생성 도구로 만든 시안은 결국 사람이 확인 하고 코드 작업으로 넘겨야 했습니다. 하지만, 클로드 디자인은 처음부터 리액트 컴포넌트와 테일윈드(Tailwind) 클래스로 결과물을 내놓기 때문에, 그대로 프로젝트에 가져다 붙일 수 있었습니다.

또한 Shadcn/UI 컨벤션(Convention)을 그대로 따라주기 때문에 버셀(Vercel), Next.js 환경과 거의 무손실로 통합되는 것도 인상적이었습니다. 그런 의미에서 클로드 디자인은 단순한 디자인 도구라기보다, '디자인 가능한 코드 생성기'에 가깝다는 느낌이 들었죠.

2) 단점

클로드 디자인이 일반적인 레이아웃을 무난하게 뽑아주긴 했지만, "이 정보가 사용자에게 임팩트를 주려면 무엇을 키우고 무엇을 줄여야 하는가"에 대한 판단까지 해주지는 못하는 것 같습니다. 결국 디자인으로 어떤 임팩트를 주기 위해서는 직접 사람 손으로 강조점을 조정해야 하는 파이널 터치가 필요한 것 같습니다.

세밀한 컨트롤도 아쉬운 지점이었습니다. 색감이나 여백을 미세하게 조정하고 싶을 때, 프롬프트(Prompt)로 "조금만 더 어둡게", "스페이싱을 조금 줄여달라"고 요청하면 의도와 다른 방향으로 결과가 바뀌는 경우가 종종 있었습니다. 앞서 말했듯이 결국 마지막 디테일은 사람이 직접 만져 다듬는 것이 더 빠르고 정확합니다. 아울러 베타 버전이라 시스템이 너무 불안정하다는 단점도 있었는데요. HTML 화면의 줌 확대 축소 시 버그가 있고, 클로드 디자인이 만든 와이어프레임이 정상적으로 동작하지 않기도 했습니다.

게다가 토큰 소모가 심하다는 점도 있습니다. 저는 현재 클로드 Max 플랜을 사용하고 있는데, 클로드 디자인 토큰이 별도로 계산되고 있었거든요. 토큰 소모도 너무 빨라 디자인 작업을 충분히 하기가 어려웠습니다. 추후 클로드에서 토큰 비용을 어떻게 처리할지 모르겠지만, 현재 상태로는 디자인 업무를 완전히 클로드에게 맡기기는 어려워 보였습니다.

클로드 디자인, 효과적으로 사용하려면?

1) 충분한 컨텍스트 제공과 단계적 접근

각 프롬프트 작성 시 결과물의 일관성을 위해, 컨텍스트(Context)를 충분히 깔아주는 것이 효과적이었습니다. 예를 들어, "코택스USA는 미국 세금 정보 포털 SaaS이고, 신뢰감 있는 다크 블루 톤을 메인으로 사용하며, Shadcn/UI 컨벤션을 따른다"는 식의 프로젝트 컨텍스트를 매번 앞단에 명시하면, 화면을 여러 개 만들어도 톤이 흩어지지 않았습니다. 반대로 새 세션의 프롬프트에 이런 컨텍스트를 붙이지 않고, 화면 단위 요청만 던지면 매번 불일치가 생기는 느낌이었습니다.

아울러 여러 단위로 나눠서 작업을 요청하는 것도 효과적이었습니다. 예를 들어, "사이트 전체를 디자인해줘"보다 "랜딩 페이지의 히어로 섹션만 만들어줘", "그 다음 화면의 섹션을 만들어줘"처럼 잘게 쪼개 의뢰하면, 결과물의 품질을 조금 더 올릴 수 있습니다. 아무래도 한꺼번에 많은 것을 시키면 클로드가 우선순위를 스스로 정하지 못해, 평균적인 결과로 수렴하는 경향을 보였습니다.

2) 피그마 활용과 기술 스택

이번에 클로드 디자인을 사용해보면서 피그마와의 워크플로우(Workflow)도 정리해 볼만한 지점이었는데요. 개인적으로는 클로드 디자인이 피그마를 완전히 대체하기보다는, 빠른 1차 시안을 받은 뒤 피그마로 미세 조정을 하거나, 디자이너에게 넘겨 마무리하는 하이브리드 방식이 아직 유효하다고 생각합니다. 만약 클로드 디자인이 앞서 얘기했던 단점들을 해결하지 못한다면, 저의 워크플로우에서 피그마 작업은 여전히 없어지지 않을 것 같고요.

마지막으로 이번에 적용한 기술 스택 역시 일전에 출시했던 해외송금 서비스(참고 글)와 동일하게 Next.js와 버셀, 슈파베이스(Supabase), 그리고 Shadcn/UI로 잡았는데요. 제가 생각할 때 이 조합 자체가 웹 서비스 개발 시 클로드 디자인이 가장 잘 다룰 수 있는 기술 스택인 것으로 보입니다.

개발자가 생각하는 디자이너의 미래는?

1) AI 개발, AI 디자인 시대

이번 작업을 마치며 든 생각은 앞으로 디자이너라는 직군 자체가 사라지는 것이 아니라, 디자이너의 역할이 빠르게 변할 것이라는 점이었습니다. 즉, 과거에 코드를 일일이 짰던 개발자와 마찬가지로 화면을 직접 그려냈던 '실행자'로서의 디자이너 역할이 AI에게 상당 부분 넘어갈 것으로 보여집니다. 적어도 전형적인 SaaS의 표준적 화면들과 패턴이 충분히 학습된 영역에서는 그렇게 되리라는 확신이 듭니다.

다만, "사용자가 이 화면에서 무엇을 느껴야 하는가", "어떤 정보를 강조하고 어떤 정보를 숨겨야 하는가", "이 흐름이 정말 자연스러운가"에 대한 판단은 여전히 사람의 몫이라고 생각합니다. 따라서 AI가 만든 시안을 보고 좋은지 나쁜지를 판별하고, 사용자 맥락에 맞게 큐레이션하고, 브랜드와 비즈니스 목표에 디자인을 정렬시키는 일은 앞으로 더욱 중요해질 것입니다.

당연하게도 이러한 변화는 개발자에게도 똑같이 적용되고 있는데요. 직접 코드를 짜는 일이 줄어들수록 어떤 시스템을 만들어야 하는지 정의하고, AI의 결과를 평가하고 판단할 수 있는 능력이 더욱 중요해지고 있습니다. 그런 의미에서 클로드 코드와 클로드 디자인 같은 AI 도구의 등장은 디자이너와 개발자 모두를 '실행자'에서 '판단자'로 끌어올리는 압력으로 작동하고 있습니다.

2) 프로덕트 메이커에게 주는 의미

프로덕트 메이커 입장에서 보면 디자이너의 가치는 더 이상 '피그마를 잘 다루는 사람'이 아니라, '판단력과 방향성을 가진 디자인 디렉터(Design Director)'에 있을 것입니다. 개발자의 가치 역시 단순히 파이썬 함수를 잘 짜는 것이 아니라 프로젝트의 기술적 총괄 능력에 있는 것처럼 말이죠.

이러한 변화는 1인 또는 소규모 팀에서 새로운 프로덕트를 만들려는 메이커들에게 더욱 큰 기회가 될 것입니다. 과거에는 디자이너 채용이 어렵거나, 외주 비용이 부담스러워 시작조차 못 했던 프로젝트들이 이제는 한 사람이 클로드 코드와 클로드 디자인 같은 도구를 이용하여 디자인 시스템부터 MVP 화면, 랜딩페이지까지 빠르게 만들 수 있게 되었죠. 코택스USA 같은 경우도, 워드프레스 사이트에서 SaaS로 피벗하는 큰 의사결정을 내릴 때 이러한 점들이 반영되었습니다.

마치며

지금까지 개발자가 클로드 디자인을 직접 써보고 느낀 장단점과 효과적인 사용 팁, 그리고 AI 디자인 시대 디자이너의 미래에 대해 살펴봤습니다. 앞서 말했듯이 클로드 디자인은 디자이너를 완전히 대체하기보다는 디자인의 진입 장벽을 낮추는 역할을 하는 도구라고 생각합니다. 만약 팀에 디자이너가 있다면 1차 시안 생성을 가속하고, 디자이너가 없다면 개발자가 제로 투 원 단계를 넘어갈 수 있도록 도와주는 역할을 할 겁니다. 어느 쪽이든 결과적으로 더 많은 사람이 더 빠르게 자기 프로덕트를 세상에 내보일 수 있게 됐죠.

다만 클로드 디자인을 직접 써보면서 깨달은 것은 아직 모든 화면을 클로드에게 무지성으로 맡기기는 어렵다는 점이었습니다. 디자인 패턴이 명확한 영역에서는 강력한 효율을 보이지만, 복잡한 사용자 흐름이나 미묘한 정보 위계, 브랜드 고유의 감각이 필요한 영역에서는 여전히 사람의 조정과 판단이 개입되어야 합니다.

이러한 맥락에서 프로덕트 메이커로서 당장 가져갈 액션 아이템은 분명한 것 같습니다. 만약 디자이너 채용이나 외주를 기다리느라 미뤄둔 프로젝트가 있다면, 한 번쯤 클로드 디자인으로 제로 투 원 단계를 직접 시도해 보면 좋겠습니다. 그 과정에서 디자인이 무엇이고, 디자이너가 어떤 가치를 만들어내는지 새롭게 정의할 수 있지 않을까요?