바이브코딩FigmaMake
[Vibe Coding] 한 눈에 보는 북마크 관리 서비스(MyBookMarks)
Chae-hyeon Kim
2025년 8월 15일
목차
프로젝트 소개
구현 화면 및 기능
- 메인 화면
- 카테고리 관리&검색
프로젝트명
한 눈에 보는 북마크 관리 서비스(MyBookmarks - Smart Personal Bookmark Manager)
사용 기술 및 기술 스택
사용 AI
- Figma Make
Frontend
- React 18
- TypeScript
- Tailwind CSS v4
- Shadcn/ui
- Lucide React
상태 관리 및 데이터
- Custom Hooks
- LocalStorage API
- React State Management
개발 도구
- ES6+
- CSS Custom Properties
- Responsive Design
주요 특징
스마트 카테고리 시스템
- 사용자 정의 카테고리 생성 가능
- 각 카테고리별 고유 색상 지정으로 시각적 구분 명확
- 새로운 북마크 추가 시 “개발” 카테고리가 기본값으로 설정되어 개발자 친화적인 UX 제공
중요 사이트 우선 관리
- 자주 사용하는 사이트는 별표 표시로 상단 고정
- 고정된 북마크는 황금색 배경 영역에서 관리되어 일반 북마크와 명확히 구분
직관적인 원클릭 접근
- 북마크 카드 전체를 클릭 가능한 영역으로 설계
- 마우스 호버 시 카드가 확대되는 애니메이션으로 직관적 피드백 제공
실시간 검색 및 필터링
- 사이트명과 URL을 대상으로 한 실시간 검색 지원
- 카테고리별 필터링으로 원하는 북마크를 빠르게 탐색
- 검색 결과가 없을 때는 안내 메시지와 새로운 북마크 추가 버튼 제공
데이터 지속성 보장
- 모든 북마크와 카테고리 정보를 localStorage에 자동 저장
- 브라우저를 닫았다가 열어도 데이터 유지
- 회원가입 없이도 개인 맞춤형 북마크 환경 제공
반응형 디자인
- 다양한 화면 크기에 최적화된 그리드 레이아웃 적용
- 작은 화면에서는 세로 배치, 큰 화면에서는 최대 4개까지 가로 배치
- 화면 공간을 효율적으로 활용
개발 배경
인터넷을 사용하면서 필요한 사이트를 북마크해두지만, 시간이 지나면 원하는 정보를 빠르게 찾기 어렵고 관리가 복잡해지는 경우가 많습니다. 기본 브라우저 북마크는 단순한 폴더 구조에 의존하기 때문에, 직관적이지 않고 시각적으로 한눈에 파악하기도 어렵습니다.
이러한 불편을 해결하고자 사용자 친화적인 북마크 관리 서비스를 직접 개발하게 되었습니다. 단순히 링크를 저장하는 수준을 넘어,
- 스마트 카테고리 시스템으로 사이트를 체계적으로 분류하고,
- 중요 사이트 고정 기능으로 자주 사용하는 자원을 신속하게 접근하며,
- 실시간 검색과 반응형 UI로 언제 어디서든 편리하게 사용할 수 있도록 설계했습니다.
또한, 별도의 회원가입이나 서버 연동 없이도 개인 맞춤형 환경을 제공하기 위해 localStorage를 적극 활용하여 데이터 지속성을 확보했습니다. 이를 통해 사용자는 브라우저만 열면 언제든지 자신만의 북마크 시스템을 그대로 사용할 수 있습니다.
추가 참고사항
Figma Make 사용 후기
- 직관적이고 깔끔한 UI 제작에 강점이 있었다.
- 다만 백엔드 처리 측면에서는 한계가 있었다. 예를 들어, YouTube Downloader 프로젝트를 진행하며 Supabase와 연동을 시도했으나, 원활한 백엔드 통합에 어려움이 있었다.
- 여러 AI 툴을 사용해본 경험과 비교했을 때, 개인적으로는 Figma의 디자인 결과물이 가장 취향에 잘 맞았다.
- 한 달 유료 플랜을 사용하며 3~4개의 프로젝트를 바이브코딩해본 결과, 빠른 속도로 사용 한도에 도달해 약 열흘 만에 종료된 점은 아쉬움으로 남았다.
- 플랜 종료 시점 이후에는 웹 접속이 불안정해지는 경우가 있었다.
- 직관적인 인터페이스와 UX 설계 방식에서 많은 인사이트를 얻었다.