이전 작업에서는 어떤 목적으로, 어떤 기능을 개발할지에 대한 정의와 MVP 기획안을 작성하고,
작성된 기획안을 기반으로 v0.app을 이용하여 디자인 초안을 잡았습니다.
아직 여전히 디자인이 마음에 들지 않는 상태인데, v0.app을 무료로 활용하다보니 무료 크레딧 5달러가 소진이 완료되어버렸더라구요.
그래도 초안으로 쓰기엔 적당한 수준의 디자인이라고 생각해서, 여기서부터는 커서AI를 활용해서 작업을 진행하였습니다.
제 경우에는 커서를 사용할 때 docs 폴더에 기획, 디자인 가이드, 컨벤션 등을 마크다운 파일로 먼저 생성하고, 그걸 기반으로 어떤 역할로써 개발을 진행할지를 정의하는 커서 룰(mdc)를 만듭니다.
여기서 초기에 작성하는 기획, 디자인 가이드는 기존에 이야기 나누었던 제미나이에게 '커서에 제공할 기획을 마크다운으로 생성해줘.' 와 같은 프롬프트로 입력하여 나온 결과물을 일부 수정하여 활용합니다.
이렇게 기획, 디자인, 컨벤션 등의 마크다운이 생성되었다면, 커서 내에서 해당 파일들을 참조한 뒤, 아래와 같은 프롬프트로 커서룰 파일을 만듭니다.
너는 Next.js를 전문적으로 작업을 하는 시니어 개발자야.
아래의 내용을 기반으로 역할을 프롬프트로 작성하고, developer.md 파일로 작성해줘.
@docs/director.md와 @docs/design.md, @docs/convention.md, @docs/change.md 를 기반으로 사용자가 요청한 수정작업을 진행하고, 업데이트 된 내용은 @docs/change.md 파일에 수정사항을 간략하게 작성해야해 (추후 맥락을 확인할 수 있도록)
이렇게 작성된 md 파일을 커서 룰(mdc 파일)로 변경한 뒤, 매 프롬프트 세션 시작 시 활용합니다.
그리고 그렇게 조금씩 수정해나간 결과물입니다.
초반에 비해 디자인이나 기능이 많이 추가되었습니다.
초반에는 커서에서 Claude Sonnet 4.5 모델을 이용했지만, 금방 사용량이 만료되어 90% 이상 Auto 모드로 작업했던 것 같습니다.
예전에 비해 Auto 모드의 성능이 많이 올라가서, 무제한으로 사용할 수 있다는 점에서 굉장히 메리트 있다고 생각합니다.
이렇게 "마트에서 달걍 구매하기"라고 이야기하면, '장보기' 탭에 '달걀 구매하기' 라는 할일로 저장됩니다.
아래는 해당 서비스의 README.md 입니다.
아직 구현되지 않은 동작은 취소선을 그어두었습니다 :)
SayDo.me
말하고 바로 실행한다 - 초스피드 음성 캡처 및 AI 자동 분류를 통한 할일 관리 PWA
📖 프로젝트 소개
SayDo.me는 바쁜 사람들을 위한 음성 기반 할일 관리 애플리케이션입니다. Context Switching을 최소화하고, 음성으로 빠르게 할일을 캡처하고 AI가 자동으로 분류 및 처리합니다.
핵심 가치
- 초스피드 캡처: 음성으로 즉시 할일 기록
- AI 자동 분류: 음성 인식 결과를 AI가 분석하여 카테고리,
우선순위(예정),예상 소요 시간(예정) 등 자동 추출 - 업무 흐름 방해 최소화: 플로팅 버튼으로 언제 어디서나 빠른 접근
✨ 주요 기능
🎤 음성 인식
- 실시간 전사: 녹음 중 실시간으로 텍스트 확인 가능
- 브라우저 네이티브: Web Speech API를 활용한 빠른 음성 인식
자동 폴백: 동작 환경에 따라 자동으로 최적의 음성 인식 방식 선택(서버 작업 예정)
🤖 AI 자동 처리
- 자동 분류: 음성 내용 기반 분류 자동 할당
메타데이터 추출:우선순위예상 소요 시간마감 시간태그
- 자연어 처리: "마트에서 계란 구매하기" 같은 자연스러운 음성 입력 지원
📱 PWA (Progressive Web App)
- 홈 화면 추가: 모바일에서 앱처럼 설치 가능
- 모바일 우선 디자인: 모든 기기에서 모바일 앱과 같은 경험 제공
🎮 게이미피케이션
- 보상 시스템:
- 환영 선물(AI 사용량 30회)
- 시간 보너스 (3~4시간 간격, AI 사용량 3~10회)
- PWA 설치 보너스(AI 사용량 20회)
- 사용량 표시: 헤더에 AI 사용량 실시간 표시
📂 분류 관리
- 탭 기반 필터링: 전체, 장보기, 집안일, 업무 등 분류별 할일 관리
- 드래그 앤 드롭: 분류 순서 변경
- 커스텀 분류: 사용자 정의 분류 생성
🔍 검색 기능
- 실시간 검색: 할일 내용을 빠르게 검색
🚀 시작하기
첫 사용하기
- 로그인: Google 계정으로 간편 로그인
- 음성 녹음: 우측 하단의 녹음 버튼(🎤)을 눌러 할일을 말하기
- 자동 분류: AI가 자동으로 분류와 메타데이터를 추출하여 할일 생성
📱 사용 방법
할일 추가하기
- 우측 하단의 녹음 버튼(🎤) 클릭
- 할일을 자연스럽게 말하기 (예: "마트에서 계란 구매하기", "설거지하기")
- 녹음 중 실시간으로 보여지는 텍스트 확인
- 녹음 완료 후 자동으로 할일이 생성됨
할일 관리하기
- 완료 처리: 할일 왼쪽의 체크박스 클릭
- 수정하기: 할일 오른쪽의 수정 버튼 클릭하여 내용 수정
- 분류 변경: 수정 모달에서 분류 선택
- 검색: 상단 검색바에서 할일 검색
분류 관리하기
- 탭 전환: 상단 탭을 클릭하여 분류별 할일 필터링
- 분류 순서 변경: 설정 페이지에서 드래그 앤 드롭으로 순서 변경
- 새 분류 추가: 설정 페이지에서 커스텀 분류 생성
보상 받기
- 환영 선물: 최초 환영 선물 제공
- 시간 보너스: 3~4시간 간격으로 선물 상자(🎁) 아이콘 활성화
- PWA 설치 보너스: 앱 설치 시 추가 보너스 제공
- 사용량 확인: 헤더의 로봇 아이콘(🤖)으로 남은 사용량 확인
🎨 디자인 컨셉
SayDo.me는 미니멀리즘을 추구합니다.
- 깔끔한 흰색 배경: 집중력을 높이는 미니멀한 디자인
- 단일 포인트 컬러: 초록색으로만 강조하여 시각적 집중도 향상
- 명확한 위계: 굵은 텍스트로 정보의 중요도 구분
- 부드러운 모서리: 16px 라운드로 현대적이고 부드러운 느낌
❓ 자주 묻는 질문 (FAQ)
Q. 어떤 브라우저를 사용해야 하나요?
A. Chrome 또는 Edge, Safari 등의 브라우저를 권장합니다. Web Speech API를 완전히 지원하는 브라우저에서 최적의 경험을 제공합니다.
Q. 사용량이 부족하면?
A. 시간 보너스(3~4시간 간격)와 PWA 설치 보너스를 받을 수 있습니다. 또한 피드백을 보내주시면 추가적인 사용량을 제공해드릴 수 있습니다.
🛠 기술 스택
SayDo.me는 아래와 같은 기술로 구축되었습니다:
- Frontend: Next.js 16, React 19, TypeScript
- UI: Tailwind CSS, Radix UI
- 인증: NextAuth.js (Google OAuth)
- AI: Google Gemini
- Storage: Cloudflare R2
📝 피드백 및 문의
SayDo.me는 지속적으로 개선되고 있습니다.
- 피드백 제출: 앱 내 설정 페이지에서 피드백(버그 신고, 기능 제안)을 보내주세요.
'프로젝트 > SayDo.me 개발' 카테고리의 다른 글
| SayDo.me 개발 1 - 음성 입력 할일 관리 앱 개발 시작 (0) | 2025.11.26 |
|---|