저는 평소 디자인 때문에 항상 고민이 많았습니다. 디자인 감각이 너무 떨어지는 데다 색상을 어떻게 조합해야 할지도 몰라서, 직접 만든 애플리케이션이나 웹사이트의 품질이 늘 아쉬웠습니다. 사실 디자인이 안 되어서 개인 프로젝트도 거의 손을 놓고 있던 상태였는데요.

그런데 Claude Design을 사용해 보고 정말 깜짝 놀랐습니다. 이제 디자인 걱정은 하지 않아도 될 것 같습니다. 완전히 100% 마음에 드는 건 아니지만, 적어도 디자인 문제가 80% 정도는 해결된 느낌입니다.

이번 글에서는 코드만 짤 줄 알고 디자인은 막막했던 분들을 위해, Claude Design으로 내가 만든 코드나 웹사이트에 최고 품질의 디자인을 적용하는 방법을 단계별로 정리해 드리겠습니다.

Claude Design이란? AI가 만들어주는 디자인 시스템

Claude Design은 Anthropic Labs에서 제공하는 AI 기반 디자인 도구입니다. 회사명, 브랜드 컨셉, 참고 자료만 입력하면 AI가 알아서 색상 팔레트, 타이포그래피, 컴포넌트 스타일까지 포함된 완성된 디자인 시스템을 만들어 줍니다.

가장 큰 장점은 디자인 비전공자도 Spotify, IBM Carbon 같은 글로벌 기업 수준의 디자인을 손쉽게 적용할 수 있다는 점입니다. 만든 디자인 시스템은 코드에 바로 적용할 수 있는 형태로 추출되기 때문에, 기존 프로젝트의 UI 품질을 단숨에 끌어올릴 수 있습니다.

Claude Design 사용 전 알아둘 점

• 현재 Claude Design은 웹사이트 버전(claude.ai)에서만 사용할 수 있습니다.
• 모바일 앱이나 데스크톱 앱에서는 아직 지원되지 않습니다.
• 현재 Research Preview 단계로 제공되고 있습니다.

Claude Design 사용법 6단계

1단계: Claude 사이드바에서 ‘디자인’ 메뉴 진입

먼저 claude.ai에 접속한 뒤 좌측 사이드바를 확인합니다. ‘새 채팅’, ‘검색’, ‘채팅’, ‘프로젝트’, ‘코드’, ‘사용자 지정’ 메뉴 아래에 ‘디자인’ 메뉴가 보입니다. 이 메뉴를 클릭하면 Claude Design 화면으로 진입할 수 있습니다.

2단계: 새 프로토타입 생성 및 디자인 시스템 만들기 시작

Claude Design 화면에 들어가면 좌측에 ‘New prototype’ 영역이, 우측에는 ‘Design systems’ 영역이 보입니다.

좌측 ‘New prototype’ 입력란에 만들고 싶은 프로젝트 이름(예: Blog)을 입력합니다. 이때 Design system은 일단 ‘None’으로 두고, 우측의 ‘Create new design system’ 옆에 있는 ‘Create’ 버튼을 클릭해서 나만의 디자인 시스템부터 만드는 것이 핵심입니다.

3단계: awesome-design-md에서 참고할 디자인 시스템 다운로드

완전히 처음부터 만드는 것보다, 잘 만들어진 디자인 시스템을 참고 자료로 활용하면 훨씬 좋은 결과물이 나옵니다. 이때 유용한 사이트가 바로 GitHub에 공개된 awesome-design-md 저장소입니다.

awesome-design-md는 Spotify, Carbon(IBM) 등 유명 브랜드 스타일을 본뜬 큐레이션된 디자인 시스템을 한곳에 모아둔 컬렉션입니다. 저는 이 중에서 Spotify를 선택했습니다.

해당 폴더로 들어간 뒤 하단의 링크를 따라 Spotify 디자인 페이지로 이동하고, Preview 영역에서 DESIGN.md를 클릭해 내용을 전부 복사해 둡니다. 이 텍스트가 다음 단계에서 Claude Design에 붙여넣을 핵심 참고 자료가 됩니다.

참고로 awesome-design-md는 공식 Spotify 디자인 시스템이 아니라, Spotify 스타일을 본떠 큐레이션한 시작점입니다. 음악·미디어 플랫폼이나 다크 테마 UI를 만들 때 특히 잘 어울립니다.

4단계: 디자인 시스템 정보 입력 및 자료 첨부

다시 Claude Design 화면으로 돌아오면 ‘Set up your design system’ 페이지가 나타납니다. 다음 항목을 입력합니다.

• Company name and blurb: 회사명 또는 디자인 시스템 이름 입력 (예: Blog)
• Link code on GitHub: 참고할 GitHub 저장소 URL (선택사항)
• Link code from your computer: 내 컴퓨터의 코드 폴더 첨부 (선택사항)
• Upload a .fig file: Figma 파일 업로드 (선택사항, 브라우저에서만 처리되어 업로드되지 않음)
• Add fonts, logos and assets: 폰트·로고·이미지 등 자산 첨부 (선택사항)
• Any other notes: 추가 설명. 3단계에서 복사해 둔 DESIGN.md 내용을 여기에 붙여넣는 것이 핵심입니다.

이렇게 참고 자료를 충분히 넣어주면, AI가 일반적인 결과물이 아니라 의도한 분위기와 스타일에 맞춘 디자인 시스템을 만들어 줍니다.

5단계: Continue to generation 클릭

모든 항목 입력이 끝났다면 하단의 ‘Continue to generation →’ 버튼을 클릭합니다.

6단계: Generate 버튼으로 디자인 시스템 생성 (약 5분 소요)

마지막 단계에서 ‘Generate’ 버튼을 누르면 디자인 시스템 생성이 시작됩니다. 약 5분 정도 소요되며, 이 시간 동안 다른 작업을 해도 무방합니다. 다만 탭은 백그라운드에서 계속 열어두어야 합니다.

이제 왼쪽 아래 프롬프트 입력창에 원하는 내용을 입력하세요. 예를들면 “이 디자인을 블로그 글쓰기에 적용해줘”

지금 읽고 계신 글이 Spotify 디자인을 적용해서 적성한 글입니다.

Claude Design을 더 잘 활용하는 팁

참고 자료를 풍부하게 넣을수록 결과가 좋아진다

제가 직접 써보면서 느낀 것은, ‘참고 자료를 얼마나 잘 넣느냐’에 따라 결과물이 크게 달라진다는 점입니다. 회사명만 적고 넘어가면 평범한 결과가 나오지만, awesome-design-md에서 복사해 둔 DESIGN.md 가이드를 ‘Any other notes’에 충분히 넣어주면 훨씬 완성도 높은 결과물이 나옵니다.

여러 디자인 시스템을 만들어두고 비교하기

Spotify 스타일, IBM Carbon 스타일 등 여러 디자인 시스템을 만들어두면 프로젝트 성격에 따라 골라 쓸 수 있습니다. 한 번 만들어두면 ‘Make default’로 기본값 설정도 가능하고, 토글로 손쉽게 활성화할 수 있습니다.

Wireframe 모드와 High fidelity 모드 구분

프로토타입 생성 시 Wireframe(저충실도)과 High fidelity(고충실도) 중 선택할 수 있습니다. 초기 구조를 빠르게 잡고 싶다면 Wireframe을, 실제 서비스에 가까운 결과물을 보고 싶다면 High fidelity를 선택하면 됩니다.

마치며 — 디자인이 막막했던 개발자들에게

저처럼 코드는 짤 줄 알지만 디자인이 늘 발목을 잡았던 분들에게 Claude Design은 정말 큰 도움이 됩니다. 100% 완벽하지는 않아도 80% 정도의 디자인 고민을 덜어주는 것만으로도, 미뤄두었던 사이드 프로젝트를 다시 시작할 동기가 충분히 생깁니다.

아직 Research Preview 단계이지만, 앞으로 모바일과 데스크톱 앱까지 확장된다면 더 많은 사람이 자신의 아이디어를 실제 제품으로 만들 수 있을 것 같습니다. 디자인 때문에 망설이고 계셨다면, 오늘 한번 직접 사용해 보시기를 추천드립니다.