일하는 ai

32. 클로드 디자인 결국 디자인까지 정복해버린

13 min read

-

Claude Design은 디자인 시스템, 와이어프레임, 프로토타입, 슬라이드덱을 한 흐름으로 묶습니다. 코드팩토리는 이걸 클로드 코드 앞단을 메우는 도구로 봅니다.

flowchart LR
A[디자인 시스템 입력] --> B[와이어프레임 탐색]
B --> C[프로토타입·슬라이드덱 생성]
C --> D[Claude Code로 핸드오프]

핵심 요약

  • Claude Design은 회사 정보, GitHub 링크, 소스 코드, 피그마 파일 등을 넣어 디자인 시스템을 먼저 세팅하는 구조다
  • 작업 모드는 크게 프로토타이핑 툴과 슬라이드덱 두 갈래로 나뉘고, 템플릿 생성과 재사용도 가능하다
  • 데모에서는 SNS 서비스를 예시로 잡아 와이어프레임을 만들고, 질문형 입력을 통해 타깃, 플랫폼, 시안 개수, 변형 기준 등을 정한다
  • 선택한 와이어프레임 옵션을 바탕으로 실제 동작하는 프로토타입을 만들고, 같은 디자인 자산으로 프레젠테이션 덱까지 자동 생성한다
  • 마지막 단계에서는 Claude Code handoff 기능으로 디자인 참조를 복사해 구현 단계로 바로 넘길 수 있다

왜 지금 중요한가

클로드 코드는 구현 능력은 강했지만, 그 앞단의 와이어프레임이나 디자인 정리는 다른 툴로 넘겨야 했습니다. 이 영상이 흥미로운 이유는 그 앞단이 같은 생태계 안으로 들어왔기 때문이에요. 개발팀 입장에서는 컨텍스트가 끊기지 않는다는 점이 크고, PM이나 디자이너와 개발자 사이 핸드오프 비용도 줄어들 가능성이 보입니다.

주요 내용

시작점은 디자인 시스템이다

영상 초반에 코드팩토리는 Claude Design을 스티치, 페이퍼, 펜슬 계열과 비슷해 보일 수 있지만, 앤트로픽 방식의 주관이 더 많이 들어간 도구라고 설명합니다. 그래서 오히려 마음에 드는 부분이 있다고 하죠.

가장 먼저 할 수 있는 건 디자인 시스템 셋업입니다. 회사 정보, GitHub 링크, 소스 코드, 피그마 파일 등을 넣으면 엑센트 컬러, 아바타, 배지 같은 디자인 요소를 뽑아 냅니다. 그리고 왼쪽 채팅을 통해 이 요소들을 계속 수정할 수 있습니다. New design system을 누르면 이 시스템을 그대로 재사용해 다음 디자인 작업으로 이어 갈 수 있고, 이 흐름은 스티치에서 디자인 시스템을 먼저 만든 뒤 컴포넌트가 생기는 구조와 비슷하다고 설명합니다.

와이어프레임 생성은 질문 기반 브리핑에 가깝다

실전 데모는 SNS 서비스 디자인입니다. 제목을 SNS로 잡고, 와이어프레임부터 고른 다음 실제 디자인과 프레젠테이션 덱까지 한 번에 만들어 보겠다고 합니다.

흥미로운 부분은 입력 방식입니다. 그냥 “SNS 만들어 줘”에서 끝나지 않고, 클로드가 어떤 디자인을 하고 싶은지 다시 질문합니다. 코드팩토리는 사진 이미지 중심, 웹 플랫폼, 타깃은 20대 대학생으로 답하고, 화면은 피드, 게시물 상세, 프로필 세 가지만 고릅니다.

또 시안을 몇 개 만들지, 어떤 차이를 줄지까지 물어봅니다. 예시로는 피드백 형태, 레이아웃 구조 차이, 내비게이션 방식, 소셜 그래프 구조 같은 변수를 고릅니다. 톤 앤 매너는 밝고 친근함, 러프한 스케치, 피드 레이아웃, 컬러 테마, 콘텐츠 밀도까지 조절합니다. 즉, 이 단계는 단순 생성이라기보다 브리프를 구조화하는 입력 레이어에 가깝습니다.

결과물은 옵션 탐색과 실제 동작 프로토타입으로 이어진다

와이어프레임이 완성되면 여러 옵션이 보입니다. 예를 들어 플로우 그리드를 고르면 이미지 그리드형 피드가 나오고, 게시물 상세와 프로필도 각각 따로 확인할 수 있습니다. 100% 배율로 보면 정리가 꽤 잘 되어 있다고 평가합니다.

여기서 끝이 아닙니다. 다크 모드로 바꾸거나, 더 콤팩트하게 하거나, 4열 또는 2열 그리드로 조정하거나, 피드 레이아웃을 울퉁불퉁하게 혹은 깔끔하게 바꾸는 식의 변형을 바로 적용할 수 있습니다. 처음 질문 단계에서 정했던 변수들이 실제 옵션으로 살아 있다는 얘기죠.

그 다음에는 마음에 든 옵션을 골라 프로토타입으로 넘깁니다. 예시로는 친구 카드 옵션, 라이트 모드, 기본 밀도, 3열 피드 레이아웃, 깔끔한 스케치를 선택하고, 완전한 프로토타입을 만들어 달라고 요청합니다. 그러면 클로드 코드에서 보던 것과 비슷한 태스크 리스트가 뜨고, 각 단계가 체크되며 작업이 진행됩니다.

완성된 결과물은 실제 버튼이 눌리고, 업로드 다이얼로그가 뜨고, 2배열, 3배열, 4배열, 콤팩트, 민트 같은 옵션 전환도 동작하는 수준입니다. 에디트 모드에서는 특정 요소의 너비나 아웃라인을 조정할 수 있고, 코멘트를 달아 특정 부분만 변경하도록 프롬프트를 남길 수도 있습니다.

슬라이드덱과 Claude Code handoff가 생태계를 닫아 준다

코드팩토리는 여기서 한 걸음 더 갑니다. 웹 디자인만 하는 게 아니라, “디자인한 웹사이트를 소개하는 슬라이드덱을 만들어 줘”라고 요청해 프레젠테이션까지 생성합니다. 생성된 슬라이드는 같은 디자인 파일 폴더 안에 들어가고, 기존 웹 디자인과 비슷한 시각적 냄새를 유지한 채 정리됩니다.

슬라이드도 에디트와 코멘트가 가능해서 특정 부분만 다시 수정할 수 있습니다. 그리고 마지막이 중요합니다. Export 버튼을 누르면 다운로드, PDF, PPTX, Canva 전송뿐 아니라 Claude Code handoff가 나옵니다.

이 기능을 누르면 참조를 복사하는 커맨드가 생성되고, 그걸 Claude Code에 붙여 넣으면 디자인 시스템을 알아서 가져와 구현 단계로 이어 갈 수 있다고 설명합니다. 즉, 디자인 생성이 구현과 끊어지지 않고 같은 앤트로픽 생태계 안에서 이어지는 구조입니다.

코드팩토리의 결론은 꽤 분명합니다. 지금은 리서치 프리뷰라서 탭을 벗어나면 스트림을 다시 못 받는 버그 같은 불편도 있지만, 이 앞단이 붙는 순간 풀스택 개발 생태계 자체가 흔들릴 수 있다는 겁니다.

원문 발화 하이라이트

  • [00:20] “스티치라든가 페이퍼라든가 펜슬에서 하던 기능들을 엔트로픽에서 생각하는 방식대로 구현이 됐다라고 보시면 될 거 같아요.”
  • [00:41] “회사에 대한 정보를 넣거나 기텀 링크를 넣거나 아니면 소스 코드를 넣거나 아니면 피그마 파일 같은 걸 넣게 되면요.”
  • [02:17] “여기서도 마찬가지로 어떤 류의 디자인을 하고 싶은지 우리한테 질문하는 걸로 볼 수가 있어요.”
  • [05:02] “이 왼쪽에 보면 디자인 파일이라는 파일 시스템이 존재해요.”
  • [06:43] “웹 디자인만 하는 게 아니라 슬라이드덱도 만들 수가 있어요.”
  • [07:42] “클로드 코드로 이렇게 핸드오프를 할 수도 있어요.”

바로 실행해 보기

  • 새 기능이나 신규 서비스 화면을 잡을 때 바로 피그마부터 열지 말고, 먼저 디자인 시스템 입력에 회사 정보나 기존 소스, 피그마 파일 중 하나를 넣어 보세요. 그다음 타깃 사용자, 플랫폼, 핵심 화면 3개 정도만 정해서 와이어프레임을 여러 시안으로 받아 보면 초기 방향을 훨씬 빨리 좁힐 수 있습니다
  • 와이어프레임 단계에서는 결과 하나만 고르지 말고, 영상처럼 피드백 형태, 레이아웃 구조, 내비게이션 방식 같은 변수를 일부러 나눠 보세요. 그래야 나중에 “이건 왜 이런 구조가 됐지”가 아니라 “우리는 이 변수 조합을 선택했다”로 대화가 정리됩니다
  • 마음에 드는 시안이 나오면 프로토타입만 보고 끝내지 말고 슬라이드덱까지 같이 뽑아 보세요. 같은 디자인 자산으로 설명 자료를 먼저 만든 뒤, 마지막에 Claude Code handoff로 넘기면 기획 설명, 디자인 공유, 구현 착수가 한 흐름으로 이어집니다

참고

영상 메타

수집 품질

  • 자막 세그먼트: 288개
  • 자막 문자수: 5262자
  • 챕터 추출: 0개
  • 콘텐츠 생성: Subagent 기반

AI 생성 도구를 활용해 초안을 구성했고, 원영상 발화와 공개 자료를 교차 확인해 정리했습니다.

그래프 뷰

백링크