영상 정보
- 영상 URL: https://youtu.be/gpfk4Lk9J94?si=QLF7i0JhfztcZw6X
- 구분: 클로드
요약
한국·미국 테크업계에서 일한 프로덕트 디자이너가 클로드 디자인과 클로드 코드를 함께 사용해 브랜드 컨셉·로고부터 실제 작동하는 앱, 랜딩 페이지, 피칭덱, 카드뉴스까지 하나의 톤으로 전부 만드는 전 과정을 초심자 눈높이로 설명한 실습 영상.
핵심 개념 정리: 브랜드 가이드라인은 "어떤 집을 지을지"(미션·철학·타겟·포지셔닝), 디자인 시스템은 "인테리어 자재와 마감 규칙"(컬러 토큰·폰트·컴포넌트)에 비유한다. 순서상 가이드라인을 먼저 세우고 디자인 시스템을 만드는 것이 자연스럽다고 설명하며, PRD(제품 요구사항 문서)는 "설계도"에 해당한다고 정리한다.
실습 대상: 솔로프리너를 위한 칸반 보드 할일 관리 앱 "플로우덱". 클로드 코드에 세 가지 포지셔닝이 다른 브랜드 컨셉과 로고 시안을 HTML로 요청해 하나를 선택하고, "지금 가장 중요한 일에 집중"이라는 브랜드 철학을 담은 종합 가이드라인 문서를 만든다. 브랜드의 포지셔닝을 반대 방향(무엇을 하지 않는지)과 함께 제시하는 프레임워크가 특히 유용했다고 언급한다.
순서의 이유: 화면 정의서·PRD를 디자인 시스템보다 먼저 만드는 이유는, 어떤 화면에 어떤 버튼·카드가 필요한지 미리 파악해야 디자인 시스템에 담을 컴포넌트 종류를 정확히 정할 수 있기 때문이라고 설명한다.
제작 과정: 클로드 디자인에서 와이어프레임(손그림 스타일, 토큰 절약)으로 화면 구성을 먼저 검증한 뒤 하이파이 프로토타입으로 발전시키며, 드래그앤드롭·모바일 반응형·다크모드 등 세부 결함을 하나씩 지적하고 수정 요청하는 반복 과정을 상세히 보여준다. 최종 프로토타입에서 새로 생긴 컴포넌트는 디자인 시스템에 역으로 업데이트해 문서 간 버전을 일치시킨 뒤, 클로드 코드로 이전해 실제 작동하는 앱으로 구현하고 로컬 저장 처리 후 깃허브·버셀로 배포한다. 이후 같은 디자인 시스템을 기반으로 랜딩 페이지, 투자자용 피칭덱, SNS 카드뉴스(캐러셀)까지 순서대로 제작해 전부 같은 톤앤매너로 통일시킨다.
소감: 브랜드 가이드라인 하나가 뿌리가 되어 모든 산출물의 일관성을 만들어줬다는 점이 핵심 성과이나, 기획·초기 디자인 단계에서 AI가 의도를 완벽히 포착하지 못해 사람이 계속 검토·수정해야 하는 손이 많이 가는 지점도 분명히 있었다고 솔직하게 평가한다.
키워드
브랜드 가이드라인, 디자인 시스템, 클로드 디자인, PRD, 원스톱 브랜드 제작