{chDEV}
바이브코딩FigmaMake

[Vibe Coding] Momentum – 작은 습관이 모여 만드는 추진력

Chae-hyeon Kim
2025년 8월 13일
목차

프로젝트 소개

  1. 배포 주소

    https://flee-gut-06471481.figma.site/

구현 화면 및 기능

  • 메인 화면

    %E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2025-09-21_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_12.49.36.gif

프로젝트명

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 설계 방식에서 많은 인사이트를 얻었다.