「부의 추월차선」 부록에 수록된 점수 기반 데일리 플래너를 보고,
종이 대신 디지털로 오래 사용할 수 있게 만들어보고 싶었다. 책에서
AI 활용법을 소개한 것은 아니다. 플래너를 직접 구현하는 방법을 찾던 중,
코딩 경험이 많지 않은 나도 AI의 도움을 받으면 원하는 기능의 작은
웹앱을 만들 수 있을지 시험해보기로 했다. 처음에는 노션으로 구조를
잡아보고, 이후 Claude에게 요구사항을 설명하며 HTML 웹앱으로
발전시킨 과정을 기록한다. (수정 2026-08-23)
- 코딩 지식이 부족해도 AI에게 사용 환경과 필요한 기능을 구체적으로 설명하면 작동하는 시제품부터 만들 수 있다
- 첫 결과가 마음에 들지 않을 때는 도구의 실패로 단정하기보다, 요구사항과 구현 방식 중 무엇이 맞지 않았는지 확인한다 (수정 2026-08-23)
- UI 수정 요청은 말보다 캔바·피그마 스크린샷 한 장이 훨씬 정확하다
- 기능은 v1을 완성한 다음에 늘린다 — 아이디어가 좋다고 다 지금 구현할 필요는 없다
목차
- 시도 1 — 노션으로 먼저 구조 잡기
- 시도 2 — AI에게 요구사항을 주고 웹앱 만들기
- 디자인 수정은 스크린샷으로
- 캐릭터 시스템 기획 — 그리고 스코프 크립
- AI 도구 분업 공식
- 핵심 요약
시도 1 — 노션으로 먼저 구조 잡기
책 페이지를 사진으로 찍어 Claude에게 붙여넣고
“노션으로 만들어줘”라고 했다. Claude는 바로 만들지
않고 노션 환경, 주 사용처, 비전 목표 관리 방식 세
가지를 먼저 물어봤다. 답하고 나니 메인 페이지,
Daily Planner DB, 날짜별 뷰, 점수
기준표까지 갖춘 대시보드가 나왔다.
팁 — “만들어줘”보다 Claude가 먼저 묻는 질문에 구체적으로 답하는 게 결과 품질을 크게 바꾼다. 특히 “어떤 환경에서 어떻게 쓸 건지”는 최대한 구체적으로 말할수록 좋다.
막상 써보니 문제가 보였다. 책의 2단 레이아웃(왼쪽 할
일, 오른쪽 비전 목표 고정)이 재현되지 않았고, 총점 당시 내가 만든 구조에서는 총점 연결을 제대로 설계하지 못해 수동으로 처리했다. 현재 노션 데이터베이스의 Formula 속성은 체크박스·숫자 등 다른 속성을 이용한 계산을 지원하므로, 점수 자동 합산 자체를 무료 플랜의 한계라고 단정하는 건 정확하지 않다. (수정 2026-08-23)
자동계산도 무료 플랜 Formula 한계로 수동이었다.
Claude에게 “디자인이 엉망인데”라고 하자, 노션은
레이아웃 자유도가 제한적이라 책의 2단 구조 재현이
어렵다고 솔직하게 인정하며 두 가지 옵션을 제시했다 —
노션 안에서 최대한 개선하거나, 웹앱으로 전환하거나.
웹앱을 골랐다.
지금 다시 노션으로 만든다면 — 이 글을 처음 작성했을 때보다 시작 방법이 쉬워졌다. 현재는 추천 템플릿뿐 아니라 Notion AI의 ‘Build with AI’로 원하는 데이터베이스의 초안을 설명해서 만들 수 있고, Formula로 체크박스·숫자 기반 점수를 계산할 수 있다. 데이터베이스 페이지 레이아웃을 정리하거나 차트·대시보드로 기록을 시각화하는 기능도 제공된다. 다만 AI 기능은 요금제나 워크스페이스 크레딧에 따라 이용 범위가 달라질 수 있고, 모바일에서는 데스크톱의 여러 열이 한 줄로 재배치된다. 이 글의 전환은 노션 자체의 실패라기보다, 당시 내가 원했던 화면과 상호작용을 구현하는 과정에서 내린 개인적인 선택이었다. (추가 2026-08-23)
시도 2 — AI에게 요구사항을 주고 웹앱 만들기
이번엔 조건을 명확히 줬다. 순수
HTML+CSS+JavaScript만 사용, 외부 서버
없이 브라우저에서 바로 동작, 날짜가 바뀌면 자동으로 새
날짜로 시작하고 이전 기록은 localStorage에
저장, 왼쪽엔 오늘의 할 일과 점수, 오른쪽엔 비전 목표
고정, 체크박스 선택 시 점수 자동 계산. Claude가
만든 v1은 초록 테마의 2컬럼 구조로, 최중요 과제
50점·1차 과제 9개×5점·2차 과제 5개×2점 체계에
등급바까지 갖췄다.
AI로 처음 웹앱을 만들 때 — 처음부터 완성형 서비스를 요구하기보다 ‘브라우저에서 파일 하나로 실행’, ‘체크하면 점수 합산’, ‘오늘 기록 저장’처럼 눈으로 확인할 수 있는 기능부터 요청하는 편이 좋다. 결과가 나오면 직접 눌러보고, 한 번에 한두 가지씩 고치면 코드를 몰라도 문제의 위치와 다음 요청을 설명하기 쉬워진다. localStorage 기록은 브라우저 데이터 삭제나 기기 변경 시 사라질 수 있으므로, 실제로 계속 사용할 앱이라면 내보내기·가져오기 기능을 다음 단계로 추가한다. (수정 2026-08-23)
디자인 수정은 스크린샷으로
완성된 웹앱을 보고 캘린더 연동, 하단 레이아웃, 날짜별
목록 표시 방식을 수정하고 싶었는데, 말로 설명하는 게 잘
안 됐다. 그래서 캔바로 원하는 레이아웃을 직접 그려
이미지로 만든 뒤 Claude에게 전달했더니 훨씬 정확하게
반영됐다.
팁 — 레이아웃·디자인 수정을 말로만 설명하면 오해가 생기기 쉽다. 캔바(무료), 피그마, 또는 macOS/iOS 마크업 기능으로 스크린샷에 직접 주석을 달아 보내면 훨씬 정확하게 전달된다.
캐릭터 시스템 기획 — 그리고 스코프 크립
캔바 이미지를 Claude에게 보여주고 수정 요청사항을
정리하던 중, 하단 영역에 캐릭터를 두자는 아이디어가
나왔다. 점수에 따라 표정이 바뀌고 꾸준히 쓰면 성장하는,
다마고치 같은 구조다. 이름은 패스티(Fasty) —
추월차선(Fastlane)에서 따왔다.
여기에 미접속 기간에 따라 캐릭터 상태가 바뀌는 “미접속
반란” 아이디어도 더해졌다. 당일엔 반가워하다가, 1일
산책을 나가고, 2일째 삐지고, 3일째 물건을 던지고,
4일 이상 미접속하면 캐릭터가 죽고 알에서 다시 시작하는
식이다.
시각 디자인은 GPT Free로 넘겼다. Claude
Pro는 주간 토큰이 한정적이라, 이미지 생성이 많이
필요한 작업은 분리하는 게 낫다고 판단했기 때문이다. 알
3종(질서·감정·야성) × 알-유생-성체 3단계로 시작해
9개 변종을 설계했는데, “GOOD/BAD 진화가 있으면
어때”, “성별을 나누면 어때”, “최종 진화 단계를
추가하면 어때”가 계속 붙으면서 최종 변종 수가
972개까지 불어났다.
스코프 크립 — 가장 흔한 함정 — 기능 추가는 v1을 완성한 다음에 한다. 아이디어가 좋다고 지금 당장 다 구현할 필요는 없다. 완성되지 않은 v0.5보다 실제로 쓸 수 있는 v1이 낫다. 캐릭터 972종은 다음으로 미뤘다.
캐릭터 구현, 미니게임, 캘린더 연동은 GPT 무료 플랜
사용량이 끝나면서 다음 편 작업으로 넘어갔다.
AI 도구 분업 공식
이번 작업에서 확인한 도구별 역할은 이렇다.
- Claude Pro — 구조 설계, 코드 작성, 이미지 분석, 기획 대화. 토큰이 소중하니 실행 단계에 집중.
- Canva Free — UI 수정 요청을 시각적으로 전달할 때. 텍스트로 설명하기 어려운 건 이걸로.
- GPT Free — 이미지 생성이 많이 필요한 시안 작업. 토큰 부담 없이 여러 번 뽑아볼 수 있다.
핵심 요약
목표는 AI를 활용해 내가 원하는 기능을 가진 작은 데일리 플래너
웹앱을 직접 만들어보는 것이었다. 노션 시제품으로 필요한 구조를
확인하고, Claude에게 사용 환경과 동작 조건을 구체적으로 전달해
HTML 웹앱 v1을 완성했다. 이후 캔바 이미지로 수정 방향을 보여주고,
캐릭터 아이디어까지 확장하면서 AI와 함께 만드는 과정에서 중요한 것은
코딩 지식보다 요구사항을 작게 나누고 실제 결과를 반복해서 확인하는 일이라는 점을 배웠다. (수정 2026-08-23)
