AI 기반 디자인 스프린트 워크플로우
Thoughtbot은 전통적으로 Figma나 Sketch를 사용하여 정적인 프로토타입을 제작해왔습니다. 그러나 AI의 발전과 함께 케빈 콴은 실제 코드 기반의 동적인 프로토타입을 더 빠르게 만들 수 있는 가능성을 탐색했습니다. 이는 과거 HTML/CSS 기반 프로토타입으로 회귀하는 것과 유사하지만, AI의 도움으로 훨씬 빠른 속도로 구현됩니다.
Claude Code 활용의 핵심 요소
-
프로젝트 컨텍스트 관리: Claude Code의 ‘프로젝트’ 기능은 모든 프롬프트와 문서를 체계적으로 정리하고, AI가 이 문서들을 참조하여 답변을 생성할 수 있게 합니다. 특히 ‘Claude MD’ 파일은 제품의 미션, 타겟 사용자, 핵심 방법론(예: Teledraft의 Signature Manuscript Method), 제품 원칙 등 스프린트를 통해 수집된 방대한 정보를 AI에게 제공하는 ‘두뇌’ 역할을 합니다. 이를 통해 AI는 일관되고 맥락에 맞는 코드와 텍스트를 생성할 수 있습니다.
-
디자인 영감 및 프롬프트 생성: 디자이너는 sasslandingpage.com과 같은 웹사이트에서 영감을 얻고, 선호하는 디자인의 스크린샷을 Claude에 제공합니다. Claude는 이를 분석하여 디자인 방향을 요약하고, 해당 디자인을 복제하기 위한 최적의 프롬프트를 생성하여 디자이너의 작업 부담을 줄여줍니다.
프로토타입 개발 과정
-
랜딩 페이지 생성: AI는 제공된 디자인 영감과 Claude MD 파일의 컨텍스트를 바탕으로 현대적이고 깔끔한 디자인의 랜딩 페이지를 생성합니다. 이때 AI가 생성한 문구(copy) 또한 프로젝트 컨텍스트에서 파생되어 제품의 메시지와 일관성을 유지합니다.
-
온보딩 플로우 구현: 로그인 화면을 건너뛰고 온보딩 플로우(책 목표, 책 의도, 책 구조 질문)를 직접 구현합니다. AI는 Claude MD의 정보를 활용하여 미리 정의된 목표들을 제시하고, 진행 상황 표시줄, 미묘한 호버 애니메이션 등 사용자 경험 요소를 포함한 화면을 생성합니다.
-
대시보드 설계 및 반복: 대시보드와 같은 복잡한 화면은 사이드바 내 챕터 개요, 작업 관리, 콘텐츠 라이브러리 등 구체적인 요소를 요구합니다. 디자이너는 ‘계획 모드’를 활용하여 AI가 코드 작성 전에 구현 계획을 제시하도록 하여, 요구사항이 제대로 반영되었는지 검토합니다. 대시보드와 같이 요소가 많은 페이지는 AI가 한 번에 완벽한 결과를 내기 어렵기 때문에, 세부 섹션별로 반복적인 개선 작업을 수행합니다.
AI 활용의 장점과 도전 과제
-
속도 및 효율성: AI는 극심한 시간 제약 속에서 디자이너가 아이디어를 빠르게 시각화하고 코드 기반 프로토타입을 구축할 수 있도록 합니다. 이는 고객 피드백 수집 및 투자 유치에 필요한 ‘실제 같은’ 경험을 제공하는 데 기여합니다.
-
일관성 유지: 초기 디자인 방향과 컨텍스트를 AI에 제공함으로써, 전체 프로토타입에 걸쳐 일관된 디자인 언어와 브랜딩을 유지할 수 있습니다.
-
인간 개입의 중요성: AI는 완벽하지 않으며, 이모지 남용, 깨진 아이콘, 레이아웃 오류, 잘못된 스타일 적용 등 예기치 않은 문제를 발생시킬 수 있습니다. 이때 디자이너는 스크린샷에 직접 주석을 달거나, 코드에 직접 들어가 수정하는 등 상세한 피드백과 수동 개입을 통해 문제를 해결해야 합니다. 때로는 AI가 ‘오류 상태(corrupted state)’에 빠져 새로운 대화를 시작해야 할 수도 있습니다.
-
협업 촉진: 디자이너가 AI를 통해 코드 베이스에 더 깊이 관여함으로써, 개발자와의 코드 리뷰를 통해 디자인 구현의 정확성을 높이고 전반적인 개발 속도를 가속화할 수 있습니다.