바이브코딩FigmaMake
[Vibe Coding] Momentum – 작은 습관이 모여 만드는 추진력
Chae-hyeon Kim
2025년 8월 13일
목차
프로젝트 소개
구현 화면 및 기능
-
메인 화면
프로젝트명
Momentum – 작은 습관이 모여 만드는 추진력
Momentum은 일상 속 작은 습관들을 모아 더 큰 성과를 만들어가는 개인 생산성 관리 도구입니다.
오늘 해야 할 일부터, 한 달 단위의 목표 설정, 읽기 목록 관리, 그리고 음악과 함께하는 집중 타이머까지 — 다양한 기능을 한곳에서 경험할 수 있습니다.
사용 기술 및 기술 스택
사용 AI
- Figma Make
Frontend Framework
- React 18: 함수형 컴포넌트와 Hooks 기반 모던 리액트
- TypeScript: 타입 안정성과 개발 효율성 확보
스타일링 & UI
- Tailwind CSS v4.0: 유틸리티 퍼스트 CSS 프레임워크
- Shadcn/ui: 고품질 접근성 중심 컴포넌트 라이브러리
- 커스텀 CSS 변수: 다크/라이트 모드 완벽 지원
- 반응형 디자인: Mobile-first 접근법
아이콘 & 알림
- Lucide React: 모던하고 일관성 있는 아이콘 세트
- Sonner: 우아하고 접근성 좋은 토스트 알림 시스템
상태 관리 & 데이터
- React Hooks: useState, useEffect를 활용한 로컬 상태 관리
- localStorage API: 클라이언트 사이드 데이터 영속성
- 타입 안전성: TypeScript 인터페이스로 데이터 구조 정의
개발 경험
- 컴포넌트 기반 아키텍처: 재사용 가능한 모듈형 설계
- 커스텀 훅 패턴: 로직 분리와 재사용성 극대화
- 에러 핸들링: Try-catch와 사용자 친화적 에러 메시지
성능 최적화
- 조건부 렌더링: 데이터 로딩 상태에 따른 스켈레톤 UI
- 효율적 리렌더링: 적절한 의존성 배열로 성능 최적화
- 메모리 효율성: 불필요한 상태 업데이트 방지
주요 특징
📋 할 일 관리 시스템
- 이중 카테고리 관리: 월별 목표와 오늘의 할 일을 분리하여 체계적 관리
- 완전한 CRUD 기능: 추가, 수정, 삭제, 완료 표시
- 키보드 친화적 인터페이스: 엔터키로 빠른 할 일 추가
📚 읽기 링크 관리
- URL + 제목 관리: 읽어야 할 링크와 제목을 함께 저장
- 진행률 추적: 완료된 링크와 미완료 링크 시각적 구분
- 빠른 액세스: 원클릭으로 링크 열기 가능
🎵 통합 멀티미디어 시스템
- 유튜브 음악 플레이어: 유튜브 링크로 음악 재생
- 집중 타이머 연동: 타이머 시작/종료 시 음악 자동 제어
- 플레이리스트 관리: 여러 음악을 저장하고 관리
🕐 실시간 정보 표시
- 한국 시간대 기반: 실시간 날짜와 시간 표시
- 사용자 프로필: 프로필 이미지와 닉네임 커스터마이징
💾 데이터 영속성
- 로컬 스토리지 활용: 새로고침해도 모든 데이터 유지
- 실시간 토스트 알림: 모든 작업에 대한 시각적 피드백
- 데이터 복원 시스템: 앱 시작 시 저장된 데이터 자동 복원
🎨 사용자 경험
- 다크/라이트 모드: 시간대와 선호도에 따른 테마 전환
- 반응형 디자인: 데스크톱과 모바일 모두 최적화
- 2x2 그리드 레이아웃: 균형잡힌 컴포넌트 배치
- 터미널/개발자 테마: 깔끔하고 모던한 개발자 친화적 UI
개발 배경
이 프로젝트는 Figma 강의에서 강사님이 Figma Make를 활용해 바이브 코딩으로 다양한 서비스를 만드신 것을 보며 호기심이 생겨 시작하게 되었습니다. 기존의 단순한 To-Do List에서 확장하여, 타이머를 기반으로 한 시간 관리 기능을 추가하고 학습 과정에서 놓치지 않고 몰입할 수 있는 환경을 만들고자 했습니다. 이를 통해 보다 체계적이고 효율적인 학습 관리 서비스를 구현했습니다.
추가 참고사항
Figma Make 사용 후기
- 직관적이고 깔끔한 UI 제작에 강점이 있었다.
- 다만 백엔드 처리 측면에서는 한계가 있었다. 예를 들어, YouTube Downloader 프로젝트를 진행하며 Supabase와 연동을 시도했으나, 원활한 백엔드 통합에 어려움이 있었다.
- 여러 AI 툴을 사용해본 경험과 비교했을 때, 개인적으로는 Figma의 디자인 결과물이 가장 취향에 잘 맞았다.
- 한 달 유료 플랜을 사용하며 3~4개의 프로젝트를 바이브코딩해본 결과, 빠른 속도로 사용 한도에 도달해 약 열흘 만에 종료된 점은 아쉬움으로 남았다.
- 플랜 종료 시점 이후에는 웹 접속이 불안정해지는 경우가 있었다.
- 직관적인 인터페이스와 UX 설계 방식에서 많은 인사이트를 얻었다.