# S-tier 데모를 만드는 팁들

> Clean Markdown view of GeekNews topic #30265. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=30265](https://news.hada.io/topic?id=30265)
- GeekNews Markdown: [https://news.hada.io/topic/30265.md](https://news.hada.io/topic/30265.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2026-06-08T09:37:02+09:00
- Updated: 2026-06-08T09:37:02+09:00
- Original source: [newsletter.posthog.com](https://newsletter.posthog.com/p/how-to-demo)
- Points: 6
- Comments: 1

## Topic Body

- 데모는 프로젝트의 출시 여부와 스타트업의 투자 성패를 가르는 **결정적 요소**이지만, 대부분의 개발자는 발표보다 제작을 선호해 데모 역량 향상에 투자하지 않음  
- 여러 데모를 관찰한 결과, **상위권 데모**에서 공통적으로 드러나는 패턴을 찾았고 이걸 **24가지 팁**으로 정리  
- 기억시킬 **단 하나의 핵심 메시지**를 정하고 모든 요소를 그것에 집중시키며, 제품 둘러보기가 아닌 **피치(pitch)** 로 접근하는 것이 기본 구조  
- 청중 모두가 공감하는 **공통의 불편함**으로 시작하고, "당신(you)" 화법과 기존 방식과의 **비교 시연**으로 몰입 유도  
- 에너지·실데이터·시각화·재미 요소를 활용해 **능동적 데모(active demo)** 로 완성하는 것이 핵심  
  
---  
  
### 기본 구조 (The basic structure)  
  
- **1.** 기억시킬 **하나의 핵심 메시지**를 정하고 데모의 모든 요소를 그 주위로 배치, 보통 해결하려는 문제와 그 해결 방식이 핵심  
- **2.** 핵심으로 **최대한 빨리** 진입, 아이디어 배경 설명은 불필요하며 맥락이 필요해도 1~2문장으로 제한  
- **3.** 데모를 제품 둘러보기가 아닌 **피치**로 다룰 것, 목표는 멋진 결과물 과시가 아니라 청중을 흥분시키는 것  
- **4.** 즉시 **행동 가능한 마무리**로 종료, QR 코드처럼 직접적이거나 기여자 모집·질문 유도 형태도 가능  
  - 메시징 앱으로 PostHog와 상호작용하는 시스템을 만든 팀은 마지막 슬라이드에 **전화번호**를 띄움  
  - MCP Analytics 팀은 프로젝트가 이미 **PostHog 사용자 25%에 배포**되었다고 발표, 데모 전에 출시(shipping)하면 큰 "wow" 효과 발생  
  
### 스토리텔링 전술 (Storytelling tactics)  
  
- **5.** 청중 모두가 이해하는 **공통의 불편함**으로 시작  
  - 일러스트를 자동 태깅·인덱싱하는 웹 앱을 만든 디자이너 팀은 혼란스러운 "Hoggies" Figma 파일에서 특정 고슴도치 찾기의 어려움을 질문, 전원이 손을 듦  
- **6.** **익숙한 개념**을 빌려 새 개념 설명, PostHog Code 안에 Claude Cowork를 구현한 팀은 프로젝트를 "PostHog Work"로 명명  
- **7.** 특히 개발 도구를 시연할 때 **별도의 데모 앱** 제작  
  - UI를 수동 테스트하는 에이전트를 배포하는 도구는 "OnlyHogs"라는 별도 데모 앱에서 보여줄 때 비로소 이해됨  
- **8.** **"you" 화법**으로 청중을 적절한 관점에 위치, "지원 티켓 관리 앱을 만들었다" 대신 "당신이 온콜 상태에서 6건의 장애를 동시에 해결하려 한다고 상상하라"로 표현  
- **9.** **대안과의 비교 시연**, 고통스러운 6단계 기존 워크플로와 1단계 버전을 나란히 제시해 비교 기준 제공  
- **10.** 작동 원리는 **나중을 위해 보류**, 마술사가 트릭을 공개하지 않듯 구현 방식은 앞에서 밝히지 않으며 설명 영상·블로그 링크는 좋은 마무리 CTA가 됨  
  
### 준비와 전달 (Setup and delivery)  
  
- **11.** **Steve Ballmer**처럼 강한 에너지 발산, 훌륭한 데모는 종종 에너지 넘치는 사람의 괜찮은 데모일 뿐  
- **12.** **사과 금지**, "아직 거칠어서 죄송하다"는 말은 보여주기 전부터 기대치를 낮추게 만들므로 그냥 시작  
- **13.** 끝났음을 **명확히** 표시, 박수 타이밍의 어색함을 막기 위해 마무리 문장·하강 억양·축하 시각자료로 종료  
- **14.** 데모 신(demo gods)을 위한 **데모 셋업 체크리스트** 활용  
  - 고객 데이터가 있는 실계정 대신 데모 프로젝트 사용  
  - 노트북 알림 비활성화 및 휴대폰 무음 설정  
  - 데모 URL은 즉석 입력 대신 북마크  
  - WiFi 장애 시 대비책 마련(백업용 스크린샷)  
  - 뒷줄에서도 읽히도록 브라우저를 125~150%로 확대  
  - 사람들이 오기 전에 프로젝터 테스트  
- **15.** 가능한 한 **실데이터** 사용, 명백한 가짜 데이터는 초라해 보임  
  - HogNet 팀은 해커톤-인-어-박스 대여 서비스 시연 시 가격·배송 물류가 담긴 웹사이트를 만들어 lorem ipsum보다 현실적으로 연출  
- **16.** 가능한 많은 부분을 **사전 로드·캐싱**, TV 요리사가 재료를 미리 준비하듯 처리하며 에이전트 응답·긴 쿼리·느린 빌드가 데드타임 제거 대상  
- **17.** 최소 한 번은 **소리 내어 연습**, 자신감을 키워 자연스럽게 전달되도록 함  
- **18.** **완벽주의**가 데모를 막지 않게 할 것, 해커톤에서는 진행 중인 작업도 모두 발표하며 데모는 원래 미완성 작업을 위한 것  
  
### 재미있게 만들기 (Make it fun)  
  
- **19.** **평범한 코드** 노출 회피, UI가 없어도 시각자료 생략은 변명이 안 되며 아키텍처 다이어그램은 수초 만에 생성 가능  
- **20.** **평범한 슬라이드**만 보여주는 것도 금지, 능동적 데모가 항상 승리하며 데모의 핵심은 직접 만들어 *보여주는* 것  
- **21.** 기본 화면 녹화 도구는 부실하므로 **Screen Studio** 같이 확대·애니메이션을 더하는 앱 활용  
- **22.** 시각자료가 **아름다울 필요는 없음**, 중요한 부분을 강조하기만 하면 되며 단순한 그래픽이라도 각 콜아웃이 유용한 정보 제공  
- **23.** **오디오**는 과소평가됨, 한 팀은 sea shanty 보이스오버를 생성했고 AI 사용자 리서치 통화 프로젝트는 데모를 완전 오디오 전용으로 제작  
- **24.** **더 기이하게(Do more weird)**, PostHog Code 모바일 앱 팀은 요청받지 않은 피냐 콜라다 영상을 배경에 넣었고 그 데모가 가장 기억에 남음

## Comments



### Comment 59107

- Author: aliveornot
- Created: 2026-06-08T11:23:08+09:00
- Points: 1

내용이 좋네요