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까지 정리한 사람의 결과물은 완전히 다르다.

AI 도구의 성능이 아니라 입력의 품질이 결과를 결정한다.

이건 Step 01에서 한 이야기와 같다. AI한테 뭘 맡기고 뭘 맡기지 않을 것인가.

기획은 사람이 하고, 구현은 AI가 돕는다.

이 역할 분리를 이해하면 어떤 AI 도구가 나와도 쓸 수 있다.

 

아래 파일은 클로드디자인이 뽑아준 실제로 코드가 돌아가는 실동작 프로토타입이다

loop.html

0.05MB

 

 

프로토타입이 검증되면 다음은 실제 배포를 해야한다

다음 글에서는 Claude Code를 활용해서 프로토타입을 실서비스로 옮기고, 배포까지 가는 과정을 다뤄볼 예정

 

이 시리즈는 실제 운영 중인 서비스 찐망고 사주를 사례로 AI 서비스 기획부터 배포까지를 다루는 강의 노트입니다.
📌출강 및 커리큘럼 문의: spacejh72@gmail.com