[사이드 프로젝트] 나를 발견하는 가장 달콤한 3분, 'FancyTime' 개발 중간 점검!
안녕하세요! 최근 제가 푹 빠져서 개발하고 있는 새로운 웹서비스, **'FancyTime(팬시타임)'**의 제작 과정을 제 블로그에 살짝 공개해 보려고 합니다.
1. 어떤 웹사이트인가요?
FancyTime은 10대부터 40대까지 누구나 가볍게 즐길 수 있는 스낵 콘텐츠 플랫폼입니다. 메인 카피는 **"지루한 일상 속, 나를 위한 가장 달콤한 3분! 공감 100% 이야기와 기분 좋은 예감으로 오늘 하루에 반짝이는 재미를 더해보세요."**로 정했습니다. 바쁜 일상 속에서 커피 한 잔 마시는 동안 심리 테스트나 오늘의 운세를 보며 기분 전환을 할 수 있는 힐링 놀이터를 만드는 것이 목표입니다.
2. 기획 및 카테고리 구성
처음엔 타겟 연령대별로 메뉴를 나눌까 고민했지만, 사용자 목적에 맞춰 훨씬 직관적인 4개의 탭(Tab)으로 사이트 구조를 확정했습니다.
- Fancy Day: 매일매일 확인하는 오늘의 운세와 행운 지수
- 심리/성격: 나의 공간 테스트, 스트레스 유형, MBTI 기반 분석, 자취방 감성 찾기
- 커리어/라이프: 직장 부캐 찾기, 오피스 생존 유형, 소비 습관 동물, 운동/건강 추천
- 킬링타임: 유행어 테스트, 덕질 유형, 추억의 테스트, 네일아트 추천
3. 디자인 및 UI 작업기
디자인 과정에서는 최신 AI 툴의 도움을 아주 톡톡히 받았습니다! 먼저 Coolors 사이트에서 색상 잠금(Lock) 기능을 활용해 FancyTime만의 메인 브랜드 컬러와 어울리는 팔레트를 추출했어요. 그 후 Stitch by Google의 변형 생성(3x) 기능을 써서 10대부터 40대까지 모두 아우를 수 있는 다양한 레이아웃과 카드 스타일 시안을 빠르게 뽑아보며 전체적인 감성을 잡아나갔습니다.
프론트엔드 UI는 빠르고 깔끔한 반응형 웹을 위해 npm으로 Bootstrap을 설치해 구현했습니다. 덕분에 모바일과 PC 모두에서 예쁘게 보이는 네비게이션과 콘텐츠 카드를 뚝딱 만들 수 있었죠.
4. 개발 환경: 파이어베이스 스튜디오 & AI CLI
현재 메인 개발은 파이어베이스 스튜디오 환경에서 진행 중입니다. 특히 터미널에 제미나이(Gemini) CLI를 연동해서 코딩 어시스턴트로 아주 알차게 써먹고 있습니다. 처음엔 제미나이가 시스템 명령어를 실행할 때마다 계속 권한을 물어봐서 흐름이 끊겼는데, 단축키 Ctrl + Y로 **YOLO 모드(자동 수락 모드)**를 켜고 나니 알아서 터미널 명령과 코드 작성을 척척 진행해 줘서 작업 속도에 날개가 달렸습니다.
5. 앞으로의 계획
현재 메인 페이지(https://fancytime.today/)의의) 기본 뼈대는 완성되었고, 하단에는 '지금 가장 사랑받는 이야기들(Romance, Discovery, Life, Fun)'을 카드형으로 예쁘게 배치해 두었습니다.
중간중간 구글 애드센스 광고가 들어갈 'Skyscraper AD', 'Mid-Feed Advertisement' 영역도 미리 디자인해 두며 수익화 준비도 차근차근 진행 중입니다. (애드센스 가입할 때 핀(PIN) 번호를 무사히 받기 위해 한글 주소를 아주 꼼꼼하게 입력하는 것도 잊지 않았죠!)
앞으로는 개별 심리 테스트와 운세 콘텐츠들을 하나씩 채워 넣고, 'SEO Site Checkup' 같은 툴을 활용해 검색 엔진 최적화 점수도 끌어올릴 예정입니다. 모두에게 달콤한 3분을 선사할 FancyTime의 정식 오픈, 많이 기대해 주세요! ✨