지난주에 중2 딸의 여름방학 수학 앱 "수학 원정대"를 발표했는데요 (v1 제작 → 듀오링고 역설계로 v2 리스킨), 두 가지 피드백을 받았습니다.
강사님 피드백: "색깔 토큰만 벤치마킹된 상태로, UX는 벤치마킹하지 않았다. 박스 배치·화면 구조도 고쳐볼 것. 원하는 UX는 앱 화면 모음 사이트에서 캡처해서 눈에 보이는 레퍼런스로 활용하면 좋을 듯."
실사용자(딸) 피드백: "엄마, 텍스트가 너무 많아." 통계정보도 넣어주면 좋겠어. 드레곤 해협 지도는 촌스러워서 그거 대신 캘린더 넣어줘.
전문가와 사용자가 같은 방향을 가리키고 있었습니다. 그래서 오늘 하루 동안 벤치마킹의 단위를 '색'에서 '화면 구조(IA)'로 바꿔 새로운 버전v4를 만들었습니다. 레퍼런스는 열품타(오늘 화면), 듀오링고(레슨 플로우), 토스(리스트 패턴)입니다.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
도구: Claude Code (앱 코드 수정·배포·QA 전 과정) + Vercel(배포) + Supabase(진도 동기화 DB) + git(롤백 안전망)
1) 써보면서 피드백 3연타 (이게 오늘의 핵심)
새롭게 배포된 버전(v4)를 직접 퀘스트 풀듯 써보면서, 불편한 걸 발견할 때마다 바로 말했습니다. 실제 프롬프트 전문입니다.
피드백 ① — 교재 정보가 너무 작다
퀘스트를 보면 의외로 오늘 해야할 일이 중요한데 어떤 부분을 해야하는지가너무 조그맣게 표시되어 있어. 교재 어디의 어떤 부분.. 이게 정말 중요해.
이걸 강조할 수 있는 방법 생각해서 적용해줘
→ 회색 12px 한 줄이던 "교재 · RPM 2-2 사각형의 성질"이 파란 강조 카드(교재명 크게 + 단원)로 승격됐습니다. 써보니 아이에게 제일 중요한 정보는 "오늘 뭘 펴야 하는지"더라고요.
피드백 ② — 용어가 불친절하다
이 부분도 메세지가 너무 축약되어 있어. 시동걸기가 뭔지.어제별표 1~2개가 무엇인지 설명이 필요
→ 퀘스트 유형 10종 전부에 "이렇게 하면 돼" 설명이 붙었습니다. "별표★ = 전에 틀렸던 문제" 같은 용어 풀이까지.
피드백 ③ — 그 설명도 글씨가 많다
이 부분도 글씨가 많아. 시각화할 수 있는 방법 제안해줘.레퍼런스 보고 아이디어 구축해서 네가 추천한 대로 보완해줘
→ Claude가 토스·챌린저스·Headspace의 공통 패턴("아이콘 원 + 한 줄 라벨 스텝")을 근거로 제안했고, 문단 설명이 아이콘 스텝 리스트로 바뀌었습니다.
📷 첨부 2 — 퀘스트 화면 진화 3단계 (교재 카드 → 용어 설명 → 스텝 시각화)
2) 폐루프 QA — 만들고 끝이 아니라, 찍어서 눈으로 보고 고치기
매 수정마다 이 루프를 돌렸습니다: 수정 → 375px 캡처 → 육안 검사 → 재수정 (최소 2회) → 배포 → 라이브 실측.
꿀팁 하나: 딸이 실제로 쓰는 앱이라, 클릭 테스트를 그냥 하면 실제 진도 데이터가 오염됩니다. 그래서 DB 주소만 무효화한 QA 전용 사본을 만들어 테스트했고, 테스트 흔적을 지우는 #reset 딥링크도 앱에 넣었습니다 (주소 뒤에 #reset만 붙이면 그 기기 기록 초기화).
/* 리셋 딥링크: 주소 뒤에 #reset — 이 기기의 로컬 진도만 삭제 */if(/(^|[#&])reset($|&)/.test(location.hash)){
try{ localStorage.removeItem("mq-state"); }catch(e){}
location.replace(location.pathname);
}
3) 보너스 — 비교 페이지
발표 시연용으로 v1·v2·v4를 나란히 보는 페이지도 만들었습니다. 같은 날짜로 고정해서 로드되고, 화면 높이에 맞춰 스크롤 없이 세 대가 다 보입니다.
📷 첨부 3 — 비교 페이지 (다크 배경에 폰 3대)
👉 직접 보기: yunseo-math-quest-v4.vercel.app/compare.html
결과와 배운 점
배운 점과 나만의 꿀팁 / 시행착오 / 도움이 필요한 부분 / 앞으로의 계획
배운 점
색을 베끼면 스킨이 바뀌고, 구조를 베끼면 경험이 바뀐다. v2는 색·버튼·그림자를 다 바꿨는데도 "같은 앱의 색놀이"였고, v4는 색을 거의 안 바꿨는데 다른 앱이 됐습니다. 벤치마킹의 단위가 문제였습니다.
레퍼런스는 형용사가 아니라 캡처로. "심플하게 해줘"는 AI 마음대로 되고, "열품타의 이 화면 구조로"는 정확히 됩니다. 캡처 수집처: Mobbin(mobbin.com), wwit.design(한국 앱), design.duolingo.com(공식 가이드), phosphoricons.com(무료 아이콘).
실사용자의 한 마디가 스펙이다. "텍스트 많아", "시동걸기가 뭔지 모르겠어" — 이런 말이 곧 백로그였습니다. 만 든 사람 눈에는 절대 안 보입니다.
핸드오프 문서의 힘. 세션이 끊겨도 문서 하나 읽히면 "가설대로 진행해줘" 두 마디로 이어집니다.
시행착오
첫 캡처 검증에서 퀘스트 화면 콘텐츠가 위로 쏠려 중앙이 텅 비는 문제 발견 → 세로 중앙 정렬로 수정 (캡처 안 찍었으면 그대로 출고됐을 결함)
실데이터 오염 이슈 — 테스트로 오늘 퀘스트를 다 깨버려서(...) 클라우드 DB를 SQL로 청소하고
#reset을 만들게 됐습니다. 실사용 서비스는 테스트 경로를 처음부터 분리해야 한다는 걸 몸으로 배웠습니다.
