STEP 05. Claude 인터랙션 - Artifacts 기반 실동작 프로토타이핑

 
이전 글에서 디자인 시스템은
팀이 같은 언어를 쓰게 만드는 구조라고 했고,
시스템이 잡히고 나면 프로토타입으로 넘어간다
 
프로토타입에는 두 가지가 있다.
피그마에서 화면 간 흐름만 연결한 클릭 프로토타입과,
실제로 코드가 돌아가는 실동작 프로토타입.
클릭 프로토타입은 흐름을 검증하는 데 충분하지만,
스크롤 애니메이션이 어떻게 느껴지는지,
FAQ 아코디언이 자연스러운지,
모바일에서 터치가 편한지는
코드가 돌아가야 알 수 있다.
예전에는 이걸 확인하려면
개발자가 직접 만들거나 했지만
지금은 Claude의 Artifacts로 기획 단계에서
바로 실동작 프로토타입을 뽑을 수 있다.
 
Artifacts에 랜딩페이지 만들어라고 하면
뻔한 게 나온다.
그럴듯해 보이지만 어디에도 쓸 수 없는 결과물이다.
AI한테 좋은 결과를 받으려면 좋은 입력이 필요하다.
그 입력이 기획이다.
수업에서는 디자인싱킹 과정을 먼저 하는데
학생들이 직접 정의해야 하는 것들이 있다.
브랜드와 서비스 이름이 뭔지,
어떤 사람을 위한 서비스인지,
우리만의 강점은 뭔지,
방문자에게 바라는 행동이 뭔지,
자주 묻는 질문과 답변은 뭔지.
이 기획서가 곧 프롬프트가 된다.
 
수업에서 학생들이 같은 기획 프레임으로
서로 다른 서비스를 만든다.
한 명은 마라톤 코칭 서비스를 기획했다.
타겟은 5K부터 풀마라톤까지 준비하는 러너들.
강점은 매번 다른 코스로 훈련한다는 것,
웰컴 패키지를 제공한다는 것,
레이스 당일까지 함께한다는 것.
CTA는 클래스 신청.
이 기획을 Claude Artifacts에 넣으면
히어로 섹션, 프로그램 안내, 후기, 프로세스,
FAQ 아코디언, CTA까지 전부 들어간
실동작 HTML이 나온다.
커스텀 커서, 스크롤 애니메이션,
반응형 레이아웃까지 포함돼 있다.
 
다른 한 명은 교통사고 전문 법률사무소를 기획했다.
타겟은 사고 후 합의가 처음이라 불안한 사람들.
강점은 교통사고 사건 집중, AI 사전 상담,
처음부터 끝까지 함께하는 구조.
CTA는 무료 상담 시작하기.
이 기획을 Claude Design에 넣으면
로펌 톤에 맞는 시안이 나온다.
 
업종이 완전히 다르다.
러닝 클래스와 법률사무소.
그런데 둘 다 같은 기획 프레임으로 만들었다.
브랜드명, 타겟, 강점, CTA, FAQ.
이 구조가 있으면 어떤 업종이든 결과물이 나온다.
AI 도구도 대단하지만
기획 구조가 잘 먹힌다고 생각한다.
 
Artifacts가 만들어준 결과물을
그대로 서비스에 쓸 수 있느냐.
쓸 수는 있지만 한계가 있다.
한 파일에 HTML, CSS, JavaScript가 전부 들어가 있어서 유지보수가 어렵다.
컴포넌트 구조도 없고, 디자인 토큰도 적용 안 돼 있다.
실서비스로 가려면 이 코드를 분리하고
구조화하는 작업이 필요하다.
그래서 Artifacts의 진짜 역할은
최종 산출물이 아니라 검증 도구다.
기획이 맞는지, 이 흐름이 사용자한테 자연스러운지, 이 레이아웃이 모바일에서 괜찮은지를 빠르게 확인하는 거다.
Step 01에서 사주 엔진과 AI의 역할을 나눈 것과 같은 구조다.
AI가 전부 해주는 게 아니라,
판단할 재료를 빠르게 만들어주는 거다.
수업에서는 이 과정을 거쳐서,
Artifacts로 검증한 다음에 실제 코드로 옮기는 단계를 따로 밟는다.
검증과 구현을 분리하는 게 핵심이다.
 
같은 Claude를 쓰더라도 기획이 사이트 만들어줘인 사람과, 타겟, 강점, CTA, FAQ까지 정리한 사람의 결과물은 완전히 다르다.
이건 Step 01에서 한 이야기와 같다.
AI한테 뭘 맡기고 뭘 맡기지 않을 것인가.
기획은 사람이 하고, 구현은 AI가 돕는다.
이 역할 분리를 이해하면 어떤 AI 도구가 나와도 쓸 수 있다.
 
아래 파일은 클로드디자인이 뽑아준 실제로 코드가 돌아가는 실동작 프로토타입이다

loop.html

0.05MB

 
 
프로토타입이 검증되면 다음은 실제 배포를 해야한다
다음 글에서는 Claude Code를 활용해서 프로토타입을 실서비스로 옮기고, 배포까지 가는 과정을 다뤄볼 예정
 
이 시리즈는 실제 운영 중인 서비스 찐망고 사주를 사례로 AI 서비스 기획부터 배포까지를 다루는 강의 노트입니다.
📌출강 및 커리큘럼 문의: spacejh72@gmail.com