1. 그림이 아니라 '작동하는' 화면

지금까지 만든 화면들은 사실 멈춰 있는 그림이 아니었습니다. 버튼을 누르면 반응하고, 입력칸에 글자가 써지는 작동하는 화면이었죠. 이번 장에서는 한 걸음 더 나아가, 여러 화면이 서로 연결되어 하나의 흐름을 이루는 인터랙티브 프로토타입을 만듭니다.

정적 시안과 인터랙티브 프로토타입의 차이는 결정적입니다.

2. 화면을 연결해 흐름 만들기

프로토타입의 핵심은 화면 사이의 연결입니다. 사용자가 거치는 여정을 그대로 만들어 봅시다.

간단한 할 일(To-do) 앱 프로토타입을 만들어줘.
화면 흐름은 이렇게:
1. 할 일 목록 화면 (+ 버튼)
2. + 버튼을 누르면 → 할 일 추가 화면
3. 저장하면 → 목록으로 돌아오고 새 항목이 추가됨
4. 항목을 누르면 → 완료 표시로 바뀜
실제로 눌러서 흐름이 이어지게 해줘.

이제 캔버스에서 직접 + 버튼을 누르고, 할 일을 추가하고, 완료 처리까지 손으로 따라가 볼 수 있습니다.

3. 상태에 따라 변하는 화면

좋은 프로토타입은 상황에 따라 다르게 보입니다. 같은 화면도 데이터가 있을 때와 없을 때가 달라야 합니다.

할 일 목록의 두 가지 상태를 보여줘.
- 비어 있을 때: "아직 할 일이 없어요" 안내와 일러스트
- 항목이 많을 때: 스크롤되는 긴 목록

이런 빈 상태(empty state), 로딩 상태, 오류 상태까지 챙기면 프로토타입이 훨씬 현실적이고, 실제 개발로 넘길 때도 빈틈이 줄어듭니다.

4. 인터랙션과 애니메이션 더하기

Claude Design은 단순한 화면 전환을 넘어, 다양한 인터랙션을 표현할 수 있습니다.

• 마이크로 인터랙션: 버튼을 누를 때 살짝 눌리는 느낌, 체크박스가 채워지는 애니메이션
• 전환 효과: 화면이 부드럽게 슬라이드되거나 페이드되며 바뀜
• 피드백: 저장 성공 시 토스트 메시지가 떴다 사라짐

할 일을 완료하면, 체크 표시가 부드럽게 채워지고
항목이 살짝 흐려지는 애니메이션을 넣어줘.
완료 시 화면 하단에 "완료했어요!" 토스트를 잠깐 띄워줘.

5. 프로토타입으로 검증하기

프로토타입의 진짜 가치는 만든 다음에 있습니다. 직접 써보고, 남에게 써보게 하면서 문제를 발견하는 것입니다.

• "추가 버튼이 어디 있는지 모르겠어" → 버튼을 더 눈에 띄게
• "저장했는지 알 수가 없어" → 성공 피드백 추가
• "단계가 너무 많아" → 흐름 단축

발견한 문제는 그 자리에서 대화로 고칠 수 있습니다. 만들고 → 써보고 → 고치는 사이클이 몇 분 안에 돕니다.

6. 직접 해보기

1. 화면이 세 개 이상 연결되는 작은 프로토타입을 만듭니다. (예: 로그인 → 홈 → 상세, 또는 상품 목록 → 장바구니 → 결제)
2. 각 화면의 빈 상태와 채워진 상태를 모두 만들어 봅니다.
3. 화면 전환에 부드러운 애니메이션과 성공 피드백(토스트) 을 더합니다.
4. 완성된 프로토타입을 직접 끝까지 써보고, 어색한 곳을 세 군데 찾아 수정합니다.

7. 정리하며

• 인터랙티브 프로토타입은 화면을 상상하지 않고 경험하게 한다.
• 핵심은 화면 사이의 연결로 사용자 여정을 그대로 만드는 것.
• 빈 상태·로딩·오류 같은 다양한 상태를 챙기면 현실적이 된다.
• 애니메이션과 피드백으로 생동감을 더한다(고급 표현은 프로토타입 수준).
• 진짜 가치는 만든 뒤 써보고 고치는 검증에 있다.

다음 장에서는 UI가 아닌 프레젠테이션 슬라이드와 원페이저를 만드는 법을 다룹니다.