클로드 디자인의 첫인상
솔직히 인정할 수밖에 없었습니다.
*원문을 번역한 글입니다.
*원문은 발행 이후 수정될 수 있으며, 본 번역은 발송 시점 기준으로 작성되었습니다.
구글 스티치(Google Stitch), 클로드 디자인(Claude Design), 피그마 메이크(Figma Make) 전격 비교
구글 스티치와 클로드 디자인 비교 분석입니다. 동일한 프롬프트를 사용했지만 클로드에서는 폰트와 피그마 파일을 입력값으로 활용할 수 있었습니다.오늘날 대부분의 디자인 시스템은 업계 표준인 피그마를 기반으로 구축됩니다. 컴포넌트나 스타일 그리고 패턴을 포함하는 UI 키트는 여전히 디자이너가 가장 신뢰하는 핵심 도구 중 하나입니다.
Input
구글 스티치는 브랜드 아이덴티티 형성에 필수적인 피그마 파일과 폰트 파일을 지원하지 않습니다.
반면 클로드 디자인은 피그마 파일을 수용할 뿐 아니라 깃허브 연동과 마크다운 입력을 지원하며 폰트나 SVG 에셋까지 세심하게 반영합니다. 양질의 데이터를 입력하면 그만큼 수준 높은 결과물을 만들어내는 방식입니다.
피그마 메이크는 임포트 과정이 매우 복잡합니다. 이전에는 라이브러리를 직접 사용할 수 있었지만 이제는 '디자인 시스템 키트'라는 명칭으로 바뀌면서 기존에 발행한 라이브러리를 찾기가 어려워졌습니다.
Output
구글 스티치는 속도는 빠르지만 퀄리티가 만족스럽지 않았습니다. 폰트 미지원은 물론 화면에 로고조차 반영되지 않았습니다. 입력 필드에 선 대신 그림자를 적용하거나 메인 버튼(CTA)에 기본 색상이 아닌 호버(Hover) 상태의 잘못된 빨간색을 사용하는 오류도 있었습니다. 결과물은 영어로만 제공되었습니다.
클로드 디자인은 폰트와 컴포넌트 그리고 로고까지 모든 요소를 정확하게 구현했습니다. 화면의 구성이 논리적이며 구글이나 애플 로그인 버튼의 디자인 완성도도 높습니다. 특히 테스트한 브랜드의 주력 시장이 오스트리아와 독일이라는 점을 파악해 독일어로 디자인을 생성해낼 만큼 매우 영리합니다.
반면 피그마 메이크는 현재까지도 출력되는 HTML에서 폰트 파일을 지원하지 않는데 이는 전문적인 작업물을 제작해야 하는 환경에서 치명적인 결함입니다.
클로드 디자인 시작하기
1. 클로드 디자인 접속
이 새로운 도구를 사용하려면 우선 프로(Pro), 맥스(Max), 팀(Team) 또는 엔터프라이즈(Enterprise) 중 하나 이상의 유료 플랜을 구독해야 합니다. 웹사이트(https://claude.ai/design)에 접속하거나 클로드 데스크톱 앱의 디자인 탭을 열면 여기서 설명하는 것과 동일한 화면을 확인할 수 있습니다.
클로드 디자인의 시작 화면입니다.메인 화면 왼쪽에는 결과물을 생성할 수 있는 카드가 보입니다. 그 바로 아래에는 '디자인 시스템 설정(Set up design system)' 버튼이 위치해 있습니다.
2. 디자인 시스템 설정하기
새로운 디자인 시스템을 추가하기 위해 워크플로우를 시작하면 다양한 옵션이 포함된 화면이 나타납니다. 저는 여기서 브랜드와 제품 유형 그리고 타겟 시장에 대한 간략한 정보를 입력했습니다.
저는 깃허브(Github)나 컴퓨터의 코드를 직접 활용하는 대신 피그마 파일의 로컬 복사본을 업로드했습니다. 그중에서 잘 정리된 컴포넌트들을 선별하여 등록하고 폰트를 몇 가지 추가했습니다. 로고와 아이콘 설정은 우선 제외하고 진행했습니다.
클로드 디자인을 활용하여 디자인 시스템을 생성할 때 가장 먼저 진행하는 단계입니다.3. 컴포넌트 선택하기 (선택 사항)
클로드 디자인의 디자인 시스템에 반영할 페이지를 직접 선택하는 화면입니다. 가급적 완성도가 높은 결과물 위주로 선택하는 것을 추천합니다.
완성도가 높은 페이지들만 선택할 수 있는 옵션이며 왼쪽 하단 버튼을 사용하면 모든 페이지를 한꺼번에 선택할 수도 있습니다.4. 대기 시간
클로드(Claude)는 약 5분 정도 소요될 것이라고 안내했지만 실제로는 9분 가량 걸렸습니다. 아마도 제가 사용 중인 인터넷 연결 속도가 느렸기 때문인 것 같습니다.
5. 진행 상황 표시
파일 작업을 진행하는 동안 클로드가 현재 처리된 내용을 실시간으로 보여주어 매우 편리했습니다.
6. 디자인 시스템의 지속적인 개선
클로드 디자인 내의 '디자인 시스템'은 클로드 스스로가 생성한 결과물이기 때문에 사용자가 이를 지속적으로 수정하고 발전시킬 수 있도록 지원합니다.
최상의 결과물을 생성할 수 있도록 돕는 '검토 필요(Needs review)' 섹션의 카드들입니다.클로드는 판단이 불확실한 항목들을 스스로 식별하여 사용자에게 확인을 요청합니다. 디자인이 마음에 든다면 '좋아요(Looks good)' 버튼을 눌러 바로 승인하거나 수정이 필요한 경우 피드백을 입력하여 '수정 필요(Needs work)' 버튼으로 보완을 요청할 수 있습니다.
버튼 변형(Variant)의 선(Stroke) 설정을 잘못 이해했을 때 이를 바로잡기 위해 입력하는 프롬프트 예시입니다.또한 최상의 결과물을 얻기 위해 누락된 에셋이 있다면 이를 별도로 안내합니다. 폴더 구조 내에서 필요한 에셋들을 확인하고 해당 위치에 즉시 업로드할 수 있습니다.
7. UI 생성하기
이 단계는 어떻게 진행해야 할지 판단하기가 다소 어려웠습니다. 안내가 명확하지 않았기 때문입니다.
홈 화면으로 돌아가 생성하려는 에셋(Artifact) 유형의 탭을 선택하세요. 저의 경우 모바일용 프로토타입을 선택했습니다. 이때 드롭다운 메뉴에서 이전에 생성한 디자인 시스템을 정확히 선택했는지 확인한 뒤 '만들기(Create)' 버튼을 누르면 됩니다.
3분이 채 되지 않아 매우 훌륭한 결과물을 얻을 수 있었습니다. 이 아티클의 서두에서 보셨던 바로 그 결과물입니다.
익명성을 보장하기 위해 검은색 사각형을 추가했지만 SVG 로고는 완벽하게 반영되었습니다. 클로드는 정말 영리합니다. 백그라운드에서 브랜드에 대해 직접 조사하여 모든 콘텐츠를 독일어로 작성해 주었기 때문입니다.
8. 결과물 편집하기
가장 큰 장점은 생성된 결과물을 직접 편집할 수 있을 뿐 아니라 HTML로 내보내어 프로토타입으로 활용하거나 피그마로 다시 가져갈 수도 있다는 점입니다.
결과물 편집하기. 우측 패널을 사용하여 텍스트 내용과 디자인을 직접 수정할 수 있습니다.내보내기(Export) 옵션
미리보기상으로는 버튼의 호버(Hover)나 프레스(Pressed) 이벤트가 제대로 작동하지 않았습니다. 클로드 디자인의 사용량 제한에 걸려 직접 HTML을 테스트해 보지는 못했으므로 추후 더 자세한 내용을 업데이트하겠습니다.
결론
앤스로픽(Anthropic)이 언급한 대로 이 도구는 연구용 툴로서 매우 훌륭한 첫걸음을 뗐습니다. UI 디자인과 미래의 디자인 시스템 활용 방식을 완전히 바꿔놓을 혁신적인 변화라고 생각합니다. 앞으로 클로드 디자인이 보여줄 업데이트가 매우 기대됩니다.
원문 출처 : https://www.designsystemscollective.com/first-look-at-claude-design-ce5d61ac8a3f
