내 서비스, 설명보다 데모를 먼저 보여 줘야 할까요?

처음 데모는 비용을 아끼려고 만들었어요

4월에 퍼플프린트 첫 웹앱을 만들 때였어요. 방문자가 올 때마다 AI를 부르면 호출 한도가 금방 찼어요. 그래서 미리 만들어 둔 대화를 실제 답처럼 흘려 보여 주고, 버튼을 누르면 다음 단계로 넘어가는 데모를 따로 만들었어요. 순전히 비용을 아끼려는 장치였어요.

그런데 만들고 보니 그게 서비스 소개 자료가 되어 있었어요. 퍼플프린트가 뭘 하는지 말로 설명할 때는 고개만 끄덕이던 분들이, 데모를 한 번 돌려 보고 나서는 "아, 이런 거구나" 하고 바로 자기 아이디어 얘기를 꺼냈어요. 빈 화면에서 시작해 대화만으로 문서가 하나씩 쌓이는 걸 보면, 설명이 따로 필요 없었어요.

그 데모는 따로 그린 그림이 아니라 실제 서비스 화면 위에서 돌았어요. 그래서 구경하다가 바로 자기 아이디어로 넘어갈 수 있었고, 소개 자료와 제품 체험이 나뉘지 않았어요. 좋은 데모는 제품을 설명하는 자료가 아니라, 제품이 만드는 변화를 바로 보여 주는 장면이라는 걸 그때 배웠어요.

데모가 오히려 사람을 돌려보낸 때도 있었어요

10월에 브라우저 웹 코치를 공개하면서 데모를 새로 만들었어요. 실제 웹 코치로 처음부터 끝까지 설계한 프로젝트 한 벌을 보기 전용으로 열었어요. 주제는 전세 계약 전에 위험을 확인하는 서비스였고, 창업자 쪽 답은 실제 개인정보 없이 가상의 창업자 역할로 했어요. 문서와 진행 표시가 다 찬 완성본 위에, 화면의 자리를 하나씩 짚어 주는 둘러보기 카드를 얹었어요.

숫자를 보니 가장 많이 빠지는 곳이 첫 화면이었어요. 다시 열어 보니 이유가 보였어요. 마지막 단계 대화가 열려 있고 문서 열몇 개가 다 차 있으니, 처음 보는 사람은 "이걸 다 해야 하나" 하는 압박부터 느껴요. 둘러보기 카드는 자리를 짚어 줄 뿐, 코치가 처음부터 묻고 정하고 문서를 키우는 흐름은 보여 주지 못했어요.

데모를 여러 번 고치며 배운 순서

1. 끝까지 보기 전에 가입을 요구하지 않아요

처음에는 "시작하기"를 누르면 바로 로그인 화면이 떴어요. 그런데 이 제품이 뭔지도 모른 채 가입하라는 건 기대를 깨는 일이었어요. 무언가를 적었는데 그다음에 로그인이 뜨면 더 그래요. 그래서 데모는 로그인 없이 끝까지 볼 수 있게 하고, 로그인은 "내 아이디어로 시작하기"를 누를 때만 나오게 바꿨어요.

2. 끝난 결과보다 과정을 먼저 보여 줘요

데모의 첫 화면을 빈 프로젝트로 바꿨어요. 보는 사람이 창업자 자리에 앉아 한 번 누를 때마다 한 턴씩 넘어가요. 창업자가 실제로 고른 답이 반짝이고, 그걸 누르면 코치 답이 흘러나오고, 문서가 그때 모습 그대로 옆에 생겨요. 단계가 끝나면 그 단계 문서가 생겼다는 한 줄이 떠요. 완성본 둘러보기는 버리지 않고 옆 자리에 두었어요.

3. 첫 화면에서는 저절로 돌게 해요

가장 많이 빠지는 건 첫 누름 전이었어요. 그래서 소개 페이지 첫 화면에서는 데모가 저절로 한 바퀴 돌아요. 화면에 보일 때만 돌고, 마우스를 올리면 멈추면서 "여기서부터 직접 해 보기"가 나와요. 녹화 영상을 쓰지 않은 건, 화면이 바뀔 때마다 영상이 낡고 보는 사람이 손으로 따라갈 수 없어서예요.

4. 점검 입구에서도 데모가 먼저예요

하이퍼 리뷰 소개 페이지는 원래 설명을 읽고 "지금 돌려보기"를 누르면 로그인으로 갔어요. 그러면 점검이 어떻게 도는지 한 번도 못 본 채 가입부터 해야 했어요. 지금은 제목 바로 아래에서 실제 점검이 도는 과정과 리포트를 먼저 보여 주고, 내 기획서로 점검받을 때만 로그인해요.

데모 주제는 쉬운 아이디어보다 어려운 문제로

처음에는 반찬 정기 배송처럼 누구나 떠올리는 아이디어를 생각했어요. 그런데 쉬운 아이디어를 잘 설계해 보여 줘도 "원래 다 아는 거네"가 되기 쉬워요. 일반인이 보기에 꽤 어려운 문제를 정의하고 푸는 모습이 보여야 "이걸 쓰면 이런 것도 되는구나"가 돼요.

그래서 기준을 이렇게 잡았어요. 문제는 10초 안에 공감되고, 어려워 보이는 건 푸는 쪽이어야 해요. 돈이 어떻게 오가는지가 분명해야 하고, 단계마다 좁히는 장면과 내가 정해야 하는 결정이 보여야 해요. 실존 회사나 인물, 너무 무거운 주제는 피했어요. 전세 계약 전 위험 확인이 그 기준에 맞았어요.

내 서비스 데모를 만들기 전에 확인할 다섯 가지

• •보는 사람이 10초 안에 공감할 문제로 시작하나요
• •빈 화면에서 시작해, 결정 하나가 결과가 되는 장면이 있나요
• •가입하지 않고도 끝까지 볼 수 있나요
• •따로 그린 그림이 아니라 실제 제품 화면인가요
• •다 보고 난 뒤 할 일이 하나로 보이나요

다섯 가지 중 마지막이 가장 자주 빠져요. 데모가 끝났는데 버튼이 여러 개면, 보는 사람은 고르다가 그냥 창을 닫아요. 데모의 끝은 "내 것으로 해 보기" 하나면 충분해요.

데모에 넣을 데이터도 미리 정해 두세요. 실제 고객의 이름이나 연락처, 주문 내역을 그대로 쓰면 안 돼요. 가상의 인물과 상황으로 만들되, 보는 사람이 "내 고객도 이래" 하고 느낄 만큼 구체적으로 써요.

데모에서 접어 둘 것과 펼쳐 둘 것

실제로 끝까지 진행한 기록을 그대로 쓰면 데모가 길어져요. 우리 데모도 처음부터 끝까지 다 누르면 70번 남짓이었어요. 그래서 단계를 누르면 그 단계 처음으로 건너뛰고, "이 단계 끝까지"로 한 번에 넘길 수 있게 했어요. 보는 사람이 궁금한 단계만 골라 볼 수 있어야 끝까지 가요.

반대로 접으면 안 되는 것도 있어요. 코치가 점검에서 나온 지적을 하나씩 고치는 대화는 길지만, 퍼플프린트가 다른 도구와 가장 다른 장면이라 그대로 두었어요. 내 서비스 데모도 같아요. 경쟁 제품에도 있는 화면은 빠르게 넘기고, 내 서비스에만 있는 장면은 천천히 보여 주세요.

데모를 만든 뒤에는 어디서 멈추는지 봐요

데모는 한 번 만들고 끝나는 게 아니에요. 열어 본 사람이 어디까지 갔는지 숫자로 보면 다음에 고칠 곳이 보여요. 우리는 데모를 연 수, 따라가기를 시작한 수, 몇 단계까지 닿았는지, 끝까지 본 수, 그다음 시작하기를 누른 수를 날마다 세요. 누가 봤는지는 남기지 않고 숫자만 남겨요.

첫 화면에서 많이 빠지면 첫 화면이 무겁다는 뜻이고, 중간에서 빠지면 그 단계가 길거나 지루하다는 뜻이에요. 끝까지 봤는데 시작하기가 적다면 데모 끝의 다음 행동이 흐린 거예요. 표본이 작을 때는 비율보다 원래 건수를 같이 보세요. 열 명 중 한 명과 천 명 중 백 명은 다른 이야기예요.

데모가 하나뿐이면 생기는 오해

데모가 하나뿐이면 "그 주제라서 잘 된 거 아니야?"라는 의심이 생기기 쉬워요. 결이 다른 문제 두 개를 같은 순서로 풀어 서로 다른 결론에 닿는 걸 보여 주면, 틀을 채운 게 아니라 문제에서 거꾸로 따져 왔다는 게 드러나요. 보는 사람도 자기와 가까운 쪽을 골라 볼 수 있고요. 생활 속 문제 하나와 업무나 AI 서비스 쪽 문제 하나처럼 나누는 게 좋아요.

데모가 대신하지 못하는 것

데모는 "이 제품이 어떻게 돌아가는지"를 빠르게 보여 줘요. 하지만 "내 상황에도 맞는지"는 직접 써 봐야 알아요. 데모를 끝까지 본 사람이 많다고 해서 그 사람들이 돈을 낼 거라는 뜻도 아니에요. 데모는 첫 관심을 여는 문이고, 써 볼 이유와 돈 낼 이유는 그 뒤에 따로 확인해야 해요.

그래서 데모를 보고 난 다음 길을 짧게 만들어 두는 게 중요해요. 퍼플프린트는 데모 끝에 시작, 정리, 이어가기 세 가지 사용법을 보여 주고, 바로 내 아이디어로 새 프로젝트를 열 수 있게 했어요.

지금 퍼플프린트 데모는 어디서 보나요

• •소개 페이지 첫 화면: 설계 코치 데모가 저절로 한 바퀴 돌아요
• •공개 데모 링크: 처음부터 따라가기와 완성본 둘러보기를 오가며 볼 수 있어요
• •하이퍼 리뷰 페이지: 점검이 도는 과정과 리포트를 먼저 보여 줘요

데모 안의 대화 칸은 보기 전용이에요. 직접 입력해 보고 싶다면 "내 아이디어로 시작하기"로 새 프로젝트를 열면 돼요. 공개 데모는 이 링크에서 바로 열려요.

완성본 둘러보기에서는 일곱 자리를 차례로 짚어요. 코치가 후보와 추천, 이유를 먼저 말하는 대화, 고르기만 하면 되는 결정 카드, 단계마다 자라는 문서, 지금 어디까지 왔는지 보여 주는 진행 표시, 직접 눌러 볼 수 있는 화면 시안, 설계를 점검한 하이퍼 리뷰, 그리고 내가 빌더로 얼마나 자랐는지 보여 주는 성장 기록이에요. 다 볼 필요는 없어요. 궁금한 자리만 열어 보세요.

데모를 만들 때 자주 하는 실수

• •기능을 전부 보여 주려다 데모가 길어져, 정작 내 서비스만의 장면이 묻힌다
• •가입한 뒤에야 데모를 볼 수 있게 해서, 궁금한 사람까지 돌려보낸다
• •데모와 실제 제품이 달라서, 써 본 사람이 "데모랑 다르네" 하고 실망한다
• •끝에 버튼을 여러 개 두어, 보는 사람이 무엇을 할지 고르다 창을 닫는다