부의 추월차선 데일리 플래너 직접 만들기 EP.01 : 노션 실패부터 HTML 완성까지

 

#퀘스트로그#튜토리얼#부의추월차선#데일리플래너#Claude#Canva#GPT#HTML웹앱

DEFAULT CHARACTER  |  인벤토리: MacBook · iPad · iPhone  |  2026.05.13

QUEST LOG — EP.01

부의 추월차선 데일리 플래너 직접 만들기 EP.01 : 노션 실패부터 HTML 완성까지

!! 돌발 이벤트 발생

오늘도 할 일 목록만 길어지고 있었다. 기획할 것, 만들 것, 공부할 것, 정리할 것. 근데 막상 맥북을 열면 뭐부터 해야 할지 몰라서 그냥 유튜브를 켠다. 어제도 그랬고, 그제도 그랬다. 그때 책장에서 손이 갔다. 부의 추월차선. 사놓고 절반도 못 읽었던 책. 훑어보다가 부록에서 멈췄다. 데일리 플래너. 점수 기반 우선순위 시스템. 비전 목표는 항상 옆에 보이게. 종이에 프린트하긴 너무 귀찮고, 이걸 디지털로 만들면 평생 쓸 수 있지 않을까. 그리고 AI한테 시키면 되지 않을까. 그렇게 이 퀘스트가 시작됐다. 부의 추월차선 플래너를 AI로 직접 만들어보기로 했다.

[퀘스트]부의 추월차선 데일리 플래너 — 디지털 무한 재사용 버전 만들기
[보상]종이 없이 매일 쓸 수 있는 개인 플래너 + AI 활용 스킬 UP

// 연계 퀘스트
EP.02 패스티와 미니게임: 남은 기능 완성까지 🔒
EP.03 완성본 공개: 실제 하루 써보기 🔒

PLAY LOG
부의 추월차선 부록 플래너를 보자마자 Claude Pro 를 켰다. 책 페이지 사진 3장을 찍어서 붙여넣고, “노션으로 만들어줘”라고 했다. Claude는 바로 만들어주는 게 아니라 먼저 3가지를 물어봤다. 내 노션 환경이 어떻게 되는지, 주로 어디서 쓸 건지, 비전 목표는 어떻게 관리할 건지. 나름 합리적인 질문이었다. 답하고 나니 노션 대시보드가 나왔다. 그런데 막상 보니까 문제가 보였다. 책의 2단 레이아웃을 노션으로 재현하는 건 구조적으로 어렵고, 디자인도 내가 원하는 느낌이 아니었다. “디자인이 엉망인데”라고 했더니 Claude가 솔직하게 인정했다. 노션의 한계라고. 그러면서 웹앱 옵션을 제시했다. 망설임 없이 웹앱으로 방향을 틀었다. Claude가 만들어준 HTML 웹앱 v1은 생각보다 괜찮았다. 초록 테마에 2컬럼 레이아웃, 점수 자동계산, localStorage 저장까지. 근데 수정하고 싶은 부분들이 생겼는데, 말로 설명하기가 애매했다. 그래서 Canva 를 꺼냈다. 웹앱 스크린샷을 캔바에 올려서 직접 주석을 달았다. 이 위치에 이게 들어가야 한다, 이렇게 바뀌어야 한다. 그 이미지를 Claude에게 보내면서 “우선 자료를 파악해줘”라고 했다. Claude가 이미지를 분석하면서 수정 방향을 정리해줬고, 그러다 자연스럽게 “여기다 캐릭터를 넣으면 어떨까” 라는 이야기가 나왔다. 다마고치처럼. 점수가 쌓이면 성장하는 캐릭터. 그리고 그 아이디어 하나가 이 퀘스트를 EP.01로 만들어버렸다.

부의 추월차선 플래너 직접 만드는 법 — Claude · Canva · GPT 실전 가이드

QUEST GUIDE — STEP by STEP

STEP 01Claude에게 책 사진 3장을 던지다
일단 Claude Pro 에게 상황을 설명했다. 부의 추월차선 데일리 플래너를 아는지 물어보고, 책 부록 사진 3장을 붙여넣었다. 전체 구조, 상단, 하단. Claude는 사진을 분석하고 플래너 구조를 정확하게 파악했다. 작업을 시작하기 전에 Claude가 3가지를 물어봤다. 바로 만들어주기 전에 먼저 내 상황을 파악하는 방식이었다. 처음엔 “그냥 만들어주면 되는데”라고 생각했는데, 답하고 나니까 왜 물어봤는지 알겠더라. 이 3가지 답변이 결과물의 방향을 완전히 결정했다.

// 실제 대화 — STEP 01
B3Mastego
우선 참고 자료다. 실제 부의 추월차선 데일리 플래너야. [사진 3장 첨부]노션으로 관리할 거야. 내가 생각하는 구성은 이런 형태야. 상단 왼쪽 — 당일의 플래너 / 상단 오른쪽 — 날짜별 플래너 목록 하단 — 주요 활동 누적 요약 뷰어 순수 구현을 먼저 보고 싶다. 작업하기 전 더 궁금한 사항은 없나?
Claude
몇 가지만 확인하고 바로 작업할게요!
B3Mastego
질문: 노션 사용 환경이 어떻게 되시나요? → 개인 무료 플랜 질문: 플래너를 주로 어디서 사용하실 건가요? → 둘 다 비슷하게 질문: 비전은 어떻게 관리하고 싶으신가요? → 내가 첨부해준 자료의 구조가 책으로 치면 한 페이지다. 따로 분리해서 생각하지 않는다.
부의 추월차선 플래너 만들기 — Claude 첫 번째 질문 노션 사용 환경

▲ 1번째 질문: 노션 사용 환경
부의 추월차선 플래너 만들기 — Claude 두 번째 질문 사용 기기

▲ 2번째 질문: 주로 어디서 사용?
부의 추월차선 플래너 만들기 — Claude 세 번째 질문 비전 관리

▲ 3번째 질문: 비전 목표 관리 방식

세 번째 질문이 제일 중요했다. 비전(주간/월간/1년/5년/10년 목표)을 어떻게 관리하고 싶냐는 건데, 나는 이렇게 답했다. “매일 플래너 옆에 항상 보이게. 따로 분리해서 생각하지 않는다.” 이 한 문장이 전체 레이아웃 구조를 결정했다.

💡 Claude한테 잘 시키는 첫 번째 방법

“만들어줘”보다 질문에 구체적으로 답하는 게 훨씬 결과가 좋다. Claude가 먼저 상황을 파악하려 할 때 대충 답하면 결과도 대충 나온다. 특히 “어떤 환경에서 어떻게 쓸 건지”는 최대한 구체적으로 말할수록 좋다.

STEP 02노션 대시보드 완성 — 그리고 “디자인이 엉망인데”
질문에 답하고 나자 Claude가 Notion 에 직접 대시보드를 만들었다. 메인 페이지, Daily Planner DB, 날짜별 뷰, 점수 기준표까지. 만들어졌다는 링크를 받고 열어봤다.

부의 추월차선 플래너 노션 대시보드 상단 레이아웃

▲ 노션 대시보드 상단
부의 추월차선 플래너 노션 대시보드 하단 레이아웃

▲ 노션 대시보드 하단

구조 자체는 나쁘지 않았다. 점수 기준표도 있고, DB도 만들어져 있고. 근데 막상 써보려고 하니까 느낌이 달랐다. 책의 2단 레이아웃이 재현이 안 됐다. 오른쪽 비전 목표가 항상 보여야 하는데, 노션에서는 그 구조 자체를 만들기가 어렵다. 총점 자동계산도 무료플랜 Formula 한계로 수동이었다. 한마디로 “디자인이 엉망인데”였다.

// 실제 대화 — STEP 02
Claude
모두 완성됐습니다! 🎉 메인 대시보드, Daily Planner DB, 날짜별 뷰, 점수 기준표까지 구성했습니다. 사용해 보시고 불편한 점 있으면 말씀해 주세요!
B3Mastego
디자인이 엉망인데..
Claude
맞아요, 노션은 레이아웃 자유도가 많이 제한적이라 책의 2단 구조를 그대로 재현하기가 어렵습니다.옵션 A — 노션 안에서 최대한 개선 옵션 B — 웹앱으로 전환 (책 디자인 거의 그대로 재현 가능)
B3Mastego
옵션b로 해보자
Claude
좋아요, 바로 만들게요. 책 디자인 그대로 — 초록 테마, 2단 레이아웃, 점수 자동계산까지 전부 구현합니다.

Claude는 솔직하게 인정했다. 노션은 레이아웃 자유도가 제한적이라 책의 2단 구조 재현이 어렵다고. 그러면서 두 가지 옵션을 줬다. 노션 안에서 최대한 개선하거나, 웹앱으로 전환하거나. 나는 망설임 없이 옵션 B — 웹앱을 골랐다.

⚠️ 노션으로 완벽한 플래너를 만들려 한다면

노션은 정보 정리와 DB 관리에는 강하지만, 레이아웃 자유도는 낮다. 2단 레이아웃, 점수 자동계산, 조건부 색상 변경 같은 기능은 노션 기본으로 구현이 어렵다. “내가 원하는 디자인으로 만들고 싶다”면 처음부터 웹앱을 고려하는 게 낫다.

STEP 03Claude가 웹앱을 만들다 — HTML 버전 v1
이번엔 조건을 명확하게 줬다. 순수 HTML + CSS + JavaScript만 쓸 것. 외부 서버 없이 브라우저에서 바로 돌아갈 것. 날짜가 바뀌면 자동으로 새 날짜로 시작되고, 이전 날짜 기록은 localStorage에 남을 것. 왼쪽에 오늘의 할 일과 점수, 오른쪽에 비전 목표가 항상 고정. 점수 계산은 체크박스 선택 시 자동으로. Claude가 만들어준 웹앱 v1. 초록 테마에 딱 원했던 2컬럼 구조가 나왔다. 1번 최중요 과제 50점, 1차 과제 9개 × 5점, 2차 과제 5개 × 2점. 체크하면 점수가 자동으로 올라가고, 상단에 등급바가 활성화된다. 오른쪽엔 주간/월간/1년/5년/10년 목표가 고정.

부의 추월차선 플래너 Claude HTML 웹앱 v1 초록 테마 2컬럼

▲ Claude가 만든 웹앱 v1 — 초록 테마 · 2컬럼 · 점수 자동계산

결과물을 보니까 쓸 수 있겠다는 생각이 들었다. 근데 보다 보니 수정하고 싶은 부분들이 생겼다. 캘린더 연동, 하단 레이아웃, 날짜별 목록 표시 방식. 문제는 이걸 말로 설명하기가 어려웠다는 거다. “오른쪽 상단에 달력이 있고 거기서 날짜 선택하면…” 타이핑으로 전달하기엔 너무 복잡했다.

STEP 04텍스트로 설명이 안 될 때 — Canva 등장
말로 설명이 안 되는 것들이 있다. 특히 UI/레이아웃 수정 요청이 그렇다. 그때 쓸 수 있는 도구가 Canva 다. 캔바는 무료로 쓸 수 있는 디자인 도구인데, 이미지 위에 텍스트나 도형을 얹어서 주석을 달기가 아주 쉽다. 웹앱 스크린샷을 캔바에 올리고, “여기에 달력이 들어가야 한다”, “이 영역은 이렇게 바뀌어야 한다”, “하단에 캐릭터가 서있는 구조” 같은 주석을 직접 붙였다. 텍스트 수백 줄로 설명하는 것보다 이미지 하나가 훨씬 정확했다.

부의 추월차선 플래너 Canva 수정 참고 이미지 주석

▲ Canva로 직접 주석을 단 수정 참고 이미지 — 텍스트로 설명 안 되는 건 이렇게
💡 AI에게 UI 수정 요청할 때 꿀팁

레이아웃이나 디자인 수정을 말로만 설명하려 하면 오해가 생기기 쉽다. 캔바(무료), 피그마, 또는 iOS/macOS의 마크업 기능으로 스크린샷에 직접 주석을 달아서 보내면 훨씬 정확하게 전달된다. “이 부분을 이렇게 바꿔줘”가 이미지 하나로 해결된다.

STEP 05캔바 이미지를 Claude에게 — 그리고 캐릭터 기획이 시작됐다
완성한 캔바 이미지를 Claude Pro 에게 붙여넣고 “우선 자료를 파악해줘”라고 했다. Claude가 이미지를 분석하면서 수정 요청사항들을 하나씩 정리해줬다. 캘린더 연동, 날짜별 목록, 하단 레이아웃.

// 실제 대화 — STEP 05 (1/2)
B3Mastego
우선 자료를 파악해줘. [캔바 이미지 첨부]
Claude
스크린샷을 분석했습니다. 현재 웹앱에서 추가/변경 요청사항을 정리할게요.① 우측 상단 — 미니 캘린더 추가, 날짜 선택 가능 ② 좌측 하단 — 날짜별 기록 목록 표시 ③ 하단 영역 — 캐릭터가 서있는 공간으로 구성 작업 순서를 어떻게 하면 될까요?

그러다 자연스럽게 하단 영역 이야기가 나왔다. 하단에 캐릭터를 놓자는 아이디어였다. 단순히 점수를 표시하는 게 아니라, 점수에 따라 캐릭터 표정이 바뀌고 꾸준히 쓰면 캐릭터가 성장하는 구조. 다마고치처럼. Claude와 캐릭터 시스템을 기획하기 시작했다. 이름은 패스티(Fasty) — 추월차선(Fastlane)에서 따온 이름. 성장은 누적 점수와 활동 패턴에 따라 분기. 그리고 가장 재미있는 기획 — 미접속 반란 시스템.

미접속 기간 패스티 상태 클릭하면
당일 달력 위에 서있음. 점수에 따라 표정 변화 반가워함 💚
1일 화면 산책 중 🚶 힐끗 보고 계속 걸어감
2일 입력란에 낙서 + 삐짐 ✏️😤 토라진 반응, 외면
3일 발자국 + 쓰레기 투척 🗑️ 쓰레기 더 던지고 도망
4일+ 💀 사망. 묘비 등장 알에서 다시 시작. 전생 기록 보관
// 실제 대화 — STEP 05 (2/2)
B3Mastego
정확한 자료나 컨셉이 없어서 설명하긴 어렵지만, 캐릭터의 형태는 이런 활동에 따라 성장하는 형태가 달라지는 컨셉의 캐릭터인데. 재미 요소로 밥주기/놀아주기 같은 요소도 있으면 좋겠다.
Claude
이름 후보: 패스티 (Fasty) — 추월차선(Fastlane)에서 따온 이름이에요.성장 분기: 질서의 알 · 감정의 알 · 야성의 알 루틴 패턴에 따라 어떤 알에서 시작할지 결정됩니다. 미접속 반란 시스템도 넣을게요 — 오래 안 들어오면 패스티가 토라지고, 4일 이상이면 묘비 등장. 알에서 다시 시작.
B3Mastego
아직 만들지마. 캐릭터 시안도 정해야 되니까.
Claude
완벽해요! 다음 단계 — 캐릭터 시안. 시안이 정해지면 그걸 기반으로 구현할게요.

시스템은 기획됐지만 외형이 없었다. 다음 단계로 넘어갈 때가 됐다.

STEP 06GPT 업데이트 소식 — 시안 작업은 GPT로
마침 그즈음 GPT 업데이트 소식이 있었다. 잠깐 살펴봤다가, 캐릭터 시각 디자인 작업은 GPT Free 로 해보기로 했다. Claude Pro는 주간 토큰이 한정적이라서, 이미지 생성이 많이 필요한 작업은 분리하는 게 낫다는 판단이었다. Claude에서 기획한 패스티 컨셉을 GPT에게 전달하고 시안을 요청했다. 알의 종류는 세 가지 — 질서의 알 · 감정의 알 · 야성의 알. 각 알의 성격이 외모에서 드러나야 하고, 픽셀 아트 스타일로.

부의 추월차선 플래너 패스티 캐릭터 첫 시안 GPT

▲ GPT가 만든 첫 시안 — 기사형(질서) · 감정·날개형 · 야성형

첫 시안이 나왔다. 귀엽긴 한데 이걸 기반으로 진화 구조를 짜기 시작했다. 알 → 유생 → 성체, 3단계. 3가지 유형이니까 9가지 변종. 단순하고 관리하기 좋다고 생각했다.

부의 추월차선 플래너 패스티 3단계 진화 구조

▲ 3단계 진화 구조 — 알 × 유생 × 성체, 3유형 = 9개 변종

STEP 07스코프 크립 — 9개에서 972개로
9개에서 멈출 수가 없었다. “GOOD 진화랑 BAD 진화가 있으면 어때?” → 18개. “성별을 나누면 더 개성이 살지 않을까?” → 36개. “성체 이후에 최종 진화 단계가 있으면 더 오래 플레이하지 않을까?” 계속 더해지다 보니 최종 변종 수가 972개가 됐다.

부의 추월차선 플래너 패스티 최종 진화 트리 972개

▲ 최종 진화 트리 — 알 3종 × 부화형 3종 × 성별 2종 × 진화 7단계 × GOOD/BAD = 총 972개 변종

이걸 보면서 잠깐 멈췄다. 나는 데일리 플래너 만들러 왔는데, 지금 포켓몬 도감을 만들고 있는 거 아닌가. 그리고 바로 그 순간, GPT Free 플랜이 종료됐다.

⚠️ 스코프 크립 — 가장 흔한 함정

기능 추가는 v1을 완성한 다음에. 아이디어가 좋다고 해서 전부 지금 당장 구현할 필요는 없다. 완성되지 않은 v0.5보다 실제로 쓸 수 있는 v1이 낫다. 캐릭터 972개는 — 나중에.

STEP 08🔒 미니게임 · 캘린더 연동 · 캐릭터 구현 — EP.02로 계속
GPT Free 플랜 종료. 이 퀘스트는 EP.02에서 이어집니다.


💡 AI 도구 분업 공식 — 이번에 써보니까

Claude Pro — 구조 설계, 코드 작성, 이미지 분석, 기획 대화. 토큰이 소중하니 실행 단계에 집중.

Canva Free — UI 수정 요청을 시각적으로 전달할 때. 텍스트로 설명 안 되는 건 이걸로.

GPT Free — 이미지 생성이 많이 필요한 시안 작업. 토큰 부담 없이 여러 번 뽑아볼 수 있음.

// 오늘의 로그

목표는 부의 추월차선 플래너를 디지털로 직접 만드는 것이었다. 결과는 — 노션 실패, HTML 웹앱 v1 완성, 캐릭터 시스템 기획 완료, 시안 6종 이상, 진화 트리 972종 설계. 플래너는 지금 당장 쓸 수 있다. 캐릭터는 아직 그림이다. 노션으로 시작해서 HTML로 방향을 튼 건 좋은 선택이었고, 캔바로 시각화해서 전달한 것도 생각보다 효과적이었다. 스코프가 폭발한 건… 처음부터 예상했어야 했는데. 연계 퀘스트 잠금 해제 → EP.02: 패스티 구현 + 미니게임 + 캘린더 연동

▶ 다음 퀘스트 예고 — 주간 토큰이 리셋되면, 972개 중 일단 9개만 살려보겠다.

 

Leave a Reply

Your email address will not be published. Required fields are marked *