iOS 메모앱으로 위장한 마술앱을 만들었다 — WonderNote 개발기 1부
관객이 그린 그림을 몰래 캡처하는 마술앱. iOS Notes를 완벽히 위장한 UX, 비밀 Peek Zone, 그리고 Claude Code로 하루 만에 MVP를 찍은 이야기.
마술사에게 가장 중요한 건 뭘까. 손 기술? 말빨? 아니다. 관객이 눈치채지 못하는 것이다.
나는 클로즈업 마술을 취미로 한다. 그중에 “관객이 그린 그림을 맞추는” 트릭이 있는데, 핵심은 관객이 그린 걸 몰래 보는 거다. 업계에서는 이걸 Peek(피크)이라고 부른다.
전통적인 방법은 물리적 소품을 쓴다. Peek Wallet이라는 지갑에 종이를 넣으면 뒷면에 작은 창이 있어서 몰래 볼 수 있다. 문제는 — 이게 개당 5~20만 원이고, 고수가 보면 바로 눈치챈다.
그래서 생각했다. 스마트폰으로 할 수 없을까?
아이디어: 메모앱으로 위장하자
컨셉은 단순하다.
- 관객에게 “여기에 그림 그려주세요”라고 아이폰을 건넨다
- 관객은 메모앱에서 그림을 그린다
- 그림을 완성하면 “지워주세요”라고 한다
- 관객이 쓰레기통 버튼을 누르는 순간, 삭제 직전에 몰래 스크린샷을 찍는다
- 나중에 마술사가 몰래 확인한다
핵심은 관객이 진짜 메모앱이라고 믿어야 한다는 거다. 조금이라도 수상하면 마술은 끝난다.
그래서 타겟은 명확했다. iOS의 기본 메모앱(Notes)을 완벽히 베끼자.
기술 스택: 왜 React Native + Expo인가
네이티브 Swift로 가면 iOS 위장이 더 완벽할 수 있다. 하지만 두 가지 이유로 React Native를 선택했다.
첫째, 속도. 사이드 프로젝트에서 가장 중요한 건 빨리 만들어서 빨리 테스트하는 거다. Expo의 managed workflow면 빌드 설정에 시간 안 쓰고 바로 기능 개발로 들어갈 수 있다.
둘째, 확장성. 나중에 Android 버전이나 Apple Watch 연동까지 고려하면 크로스플랫폼이 유리하다. (결과적으로 Watch 연동까지 갔다. 이건 3부에서.)
최종 스택은 이렇다:
| 구성요소 | 기술 | 선택 이유 |
|---|---|---|
| 프레임워크 | Expo 54 + RN 0.81 | Managed workflow, 빠른 빌드 |
| 라우팅 | expo-router | 파일 기반, 직관적 |
| 드로잉 | react-native-svg | SVG Path 기반, 55 FPS |
| 캡처 | react-native-view-shot | captureRef로 View → 이미지 |
| 저장 | AsyncStorage + expo-file-system | 이미지 로컬 저장 |
| 아이콘 | lucide-react-native | iOS 스타일 아이콘 세트 |
| i18n | 커스텀 구현 | 한영 전환, 런타임 반영 |
iOS Notes 위장: 디테일이 생명이다
마술앱에서 가장 공을 들인 부분은 위장 UX다. 진짜 메모앱과 똑같아 보여야 한다.
더미 메모 리스트
앱을 열면 iOS Notes와 동일한 메모 리스트가 보인다. “장보기 목록”, “회의 메모”, “아이디어” 같은 가짜 메모들이 있다.
1
2
3
4
5
const FAKE_NOTES_KO = [
{ id: '1', title: '장보기 목록', preview: '우유, 계란, 빵, 사과...', date: '어제' },
{ id: '2', title: '회의 메모', preview: '다음 주 월요일 10시 팀 미팅', date: '2일 전' },
{ id: '3', title: '아이디어', preview: '새로운 앱 기획안 정리', date: '1주 전' },
];
물론 이 메모들을 탭해도 아무 일도 안 일어난다. 중요한 건 리스트 화면 자체가 진짜처럼 보이는 것이다. 검색바, 노란 액센트 컬러(#FFD60A), 다크모드까지 — iOS의 시각적 언어를 그대로 가져왔다.
비밀 캡처 메커니즘
관객이 그림을 그리고 쓰레기통 버튼을 누르면, 이런 일이 순서대로 벌어진다:
1
2
3
4
1. 쓰레기통 탭 → captureRef()로 캔버스 캡처
2. 캡처 완료 → iOS 스타일 "메모를 삭제하시겠습니까?" 대화상자 표시
3. 관객이 "삭제" 탭 → 캔버스 클리어
4. 캡처된 이미지는 히스토리에 저장
핵심은 캡처가 대화상자보다 먼저 일어난다는 거다. 관객이 “삭제하시겠습니까?”를 읽고 있는 사이에 이미 이미지는 저장돼 있다.
Peek Zone: 마술사만 아는 비밀 영역
캡처한 그림을 어떻게 몰래 확인할까. 화면 좌상단에 100x100px 크기의 투명한 터치 영역을 만들었다.
1
const MAGIC_ZONE_SIZE = 100;
이 영역은 눈에 보이지 않는다. 하지만 마술사가 이 영역을 터치하면 마지막으로 캡처된 그림이 잠깐 나타났다가 사라진다. 관객은 마술사가 뭘 했는지 전혀 모른다.
두 가지 모드를 지원한다:
- Once 모드: 한 번 터치하면 이미지가 잠깐 보이고 자동으로 사라진다
- Always 모드: 터치하고 있는 동안 계속 보인다
공연 상황에 따라 선택할 수 있다. 테이블 마술이면 Once가 안전하고, 스테이지라면 Always가 편하다.
그리고 이미지가 나타날 때 30ms 햅틱 진동이 한 번 울린다. 화면을 안 봐도 “지금 이미지가 떴구나”를 손끝으로 알 수 있다.
Claude Code로 하루 만에 MVP
여기서 솔직히 고백하자면 — 이 앱의 V1.0은 Claude Code가 거의 다 짰다.
1월 20일에 Expo 프로젝트를 초기화하고, 2월 6일에 MVP가 완성됐다. 기간만 보면 17일인데, 실제로 집중해서 작업한 건 하루 정도다. 나머지는 아이디어를 다듬고 공연에서 써보면서 피드백을 모은 시간이다.
첫 커밋에서 MVP까지 변경된 코드량:
1
16 files changed, 3,338 insertions(+), 305 deletions(-)
3천 줄이 넘는 코드가 하루 만에 나왔다. 물론 Claude Code가 생성한 코드를 그대로 쓴 건 아니다. SVG 드로잉의 터치 반응, 캡처 타이밍, iOS 위장 디테일 같은 건 직접 테스트하면서 조정했다.
MVP에서 구현된 기능을 정리하면:
| 기능 | 품질 | 비고 |
|---|---|---|
| SVG 드로잉 캔버스 | A | 터치 반응 좋음, 55 FPS |
| 펜/지우개 전환 | B+ | 지우개 커서 미리보기 없음 |
| 비밀 캡처 | A | 핵심 메커니즘 완벽 작동 |
| 히스토리 갤러리 | A | 썸네일 그리드, 삭제 가능 |
| 한영 전환 (i18n) | A | 실시간 반영 |
| 온보딩 튜토리얼 | B | 5단계, 약간 김 |
MVP 점수로 따지면 제품 강도 8/10, 실행 품질 6/10 정도. 핵심 메커니즘은 우수하지만, 공연에서 실제로 쓰려면 다듬어야 할 부분이 많았다.
실전 테스트: 마술 공연에서 써봤다
MVP를 들고 친구들 앞에서 마술을 했다. 결과는 — 반은 성공, 반은 아슬아슬.
잘 된 것:
- 위장 UX가 완벽했다. 아무도 마술앱인 줄 몰랐다
- 캡처 메커니즘이 안정적이었다. 한 번도 실패 안 함
- 햅틱 피드백 덕에 화면을 안 봐도 Peek 타이밍을 잡을 수 있었다
위험했던 것:
- 삭제 시 확인 대화상자가 없었다. iOS Notes는 항상 “삭제하시겠습니까?”가 뜨는데, 내 앱은 바로 삭제됐다. 이거 하나 때문에 눈치 빠른 사람은 “어? 이상한데?” 할 수 있다
- Peek Zone(좌상단 100px)의 위치를 실수로 잘못 터치할 뻔했다. 공연 중 긴장하면 손이 떨린다
이 피드백이 V1.1과 V2.0 개발의 원동력이 됐다. 삭제 대화상자는 치명적 UX 버그로 분류하고 즉시 수정 대상에 올렸다.
경쟁 분석: 왜 WonderNote인가
마술용 디지털 Peek 도구는 이미 몇 개 있다.
| 방법 | 가격 | 장점 | 단점 |
|---|---|---|---|
| Peek Wallet (물리) | 5~20만 원 | 검증된 방법 | 소품 필요, 고수에게 들킴 |
| PeekSmith (하드웨어) | ~$250 | 극도로 은밀 | 별도 디바이스 필요 |
| 기존 마술앱들 | $5~20 | 다양한 트릭 | 위장 UI가 조잡 |
| WonderNote | 무료 | iOS 위장 최고 수준 | 아직 MVP 단계 |
WonderNote의 차별화 포인트는 세 가지다:
- 무료 — 소품 구매 없이 아이폰만 있으면 된다
- 하드웨어 불필요 — 별도 장비 없이 소프트웨어만으로 해결
- iOS 위장 최고 수준 — 관객이 진짜 메모앱이라고 믿는다
1부를 마치며: MVP의 교훈
WonderNote V1.0을 만들면서 배운 것은 명확하다.
사이드 프로젝트는 “일단 만들고 공연에서 써보는 것”이 답이다. 기획서를 아무리 잘 써도 실전에서 부딪히면 전혀 다른 문제가 나온다. 삭제 대화상자가 없다는 건 코드 리뷰에서는 절대 발견할 수 없다. 관객 앞에서 “어? 이상한데?”라는 표정을 봐야 알 수 있다.
그리고 Claude Code 덕에 아이디어에서 테스트 가능한 제품까지의 거리가 극적으로 짧아졌다. 예전이었으면 주말 프로젝트로 2~3주 걸렸을 작업이 하루로 압축됐다. AI가 코드를 짜는 시대에 개발자의 역할은 “뭘 만들지”를 결정하고 “실제로 써보면서 피드백을 모으는 것”으로 옮겨가고 있다.
다음 편에서는 이 MVP를 어떻게 68MB에서 4.55MB로 다이어트시켰는지, 그리고 인앱결제(IAP)와 OCR, Premium 모델을 설계한 이야기를 다룬다.
📌 WonderNote 개발기 시리즈
- 1부: iOS 메모앱으로 위장한 마술앱을 만들었다 ← 지금 읽는 글
- 2부: 68MB에서 4.55MB로
- 3부: 애플 워치에 마술을 올리기까지