* 시도하고자 했던 것과 그 이유를 알려주세요.
단순히 '할 일'만 체크하는 메마른 투두 리스트가 아니라,
나의 생체 리듬(바이오리듬)과 그날의 기분을 챙겨주는 '영혼의 대시보드'를 만들고 싶었습니다.
매일 아침 내 에너지 상태(바이오리듬 + 운세)를 확인하고, 내 기분에 맞는 노래와 차(Tea)를 추천받으며,
따뜻한 명언 한 구절로 하루를 시작할 수 있는 '나만을 위한 감성 공간'을
직접 코딩(Vibe Coding)으로 구현해 보고자 했습니다.
* 진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
Claude 3.5 Sonnet: 전체 앱의 로직 설계와 UI 코드를 작성하는 '메인 브레인'으로 활용했습니다.
Bikit (Cursor/Next.js 자동화 툴): 복잡한 터미널 설정 없이 Next.js 환경을 구축하고 필요한 라이브러리(canvas-confetti 등)를 설치하는 데 사용했습니다.
Next.js (App Router): 빠르고 현대적인 웹 앱 구조를 위해 선택했습니다.
💡 사용한 프롬프트 전문 (Master Prompt)
클로드에게 아래 프롬프트를 전달하여 전체 구조를 한 번에 잡았습니다.
프롬프트 복사하기:
"Next.js와 Tailwind CSS, Lucide React 아이콘을 사용하여 '나의 하루 대시보드' 앱을 만들고 싶어. 디자인은 감성적이고 미니멀한 '애플(Apple) 스타일' 혹은 '노션(Notion) 스타일'로 해줘.주요 기능:
홈 화면: 오늘 날짜와 사용자의 이름(사용자 설정 가능) 노출.
바이오리듬 & 오늘의 운세: 생년월일을 입력하면 신체/감성/지성 지수를 그래프로 보여주고, 오늘을 위한 짧은 응원 문구(운세) 출력.
기분 맞춤 추천: 현재 내 기분(행복함, 우울함, 피곤함, 집중하고 싶음 등)을 선택하면 그에 맞는 '오늘의 노래'와 '오늘의 차(Tea)'를 추천해주는 카드 섹션.
투두 리스트(Schedule): 간단하게 오늘 할 일을 추가하고 체크할 수 있는 기능.
미니 다이어리: 오늘 하루를 짧게 기록하고 저장할 수 있는 텍스트 영역.
우선 전체적인 레이아웃과 홈 화면 기능을 포함한 한 페이지짜리 프로토타입 코드를 짜줘. shadcn/ui 스타일의 깔끔한 컴포넌트를 사용해줘."
< 명언 선택 기준 >
<음악 선택 기준>
* 결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
통합의 묘미: 바이오리듬 수치와 운세를 따로 두지 않고 '통합 에너지 지수'로 합쳐서 원하는 이야기를 담을 수 있었습니다. 다만, 디자인이 너무 안이뻐서 계속 수정하는데 좀 오래 걸리는것 같습니다 (ing 중)
바이브 코딩의 힘: 예전 같으면 며칠 걸렸을 물리 엔진(폭죽 효과)이나 바이오리듬 계산 로직을 AI가 단 몇 초 만에 짜주는 것을 보며, 이제는 '구현'보다 '기획'이 더 중요하다는 걸 깨달았습니다. 그리고 조금 더 재미있는 아이디어들이 있어야 수많은 웹들 중에서 차별성이 있을것 같습니다.
과정 중에 어떤 시행착오를 겪었나요?
프로젝트 초기 설정 시 터미널에서 권한을 묻는 질문이 많아 당황했지만, AI가 추천하는 대로(Yes) 차근차근 진행하니 무사히 설치되었습니다. 특히 라이브러리(canvas-confetti) 설치를 잊지 않는 것이 중요했습니다. 처음에는 ask before edits를 해뒀는데 너무 많이 물어서.... auto로 해뒀는데.. 그래도 열심히 물어보네요.
도움이 필요한 부분이 있나요?
현재는 로컬 브라우저에만 데이터가 저장되는데, 나중에는 구글 로그인을 연동해서 모바일에서도 이어서 보고 싶습니다. 이 부분을 어떻게 쉽게 구현할지 고민 중입니다.
앞으로의 계획이 있다면 들려주세요.
열심히 지금도 수정하고 있지만.. 조금 더 발전시켜서 상용화를 한번 시켜보고 싶어집니다.
조금 더 할 일 목록 작성하고 추가 시키고 완료와 삭제 버튼 만들고
일기도 달력에 저장될 수 있도록 기능 추가 했습니다.
<vercel 배포 완료>
https://soulflow-seven.vercel.app/
