PAMONG

GEMVERSE

📌 Summary

AI 기반의 꿈 해몽 서비스를 제공

• REST API를 통한 AI 적용
• 꿈 일지 및 근처 복권 구입처 찾기 기능
• Supabase를 통한 SNS 로그인과 백엔드 기능 구현
• SEO 향상
• Cursor를 활용한 바이브 코딩

🔍 Meaning

서비스의 기획부터 오픈까지 혼자서 진행하며 AI 툴을 활용하는 방법을 익힐 수 있었고, supabase를 사용했지만 백엔드 영역으로 개발의 폭을 보다 더 넓힐 수 있었던 프로젝트입니다. 무엇보다, 그동안 개인 프로젝트를 만들다가 삭제한 순간들이 많았는데 처음으로 나만의 프로젝트를 가질 수 있어 뿌듯함이 생겼습니다.

REST API를 통한 AI 적용

꿈 해몽 서비스는 로그인 유무에 관계없이 제공하기 때문에 무료로 사용할 수 있는 모델이 필요했으며, 'openRouter AI' 라는 서비스에서 rest api 방식으로 제공하는 'gemma-3-4b-it' 모델을 사용했습니다. 그리고 로그인 한 유저들은 꿈 일지를 작성할 수 있는데 본인이 입력한 꿈 내용을 기반으로 이미지를 생성해 주는 기능을 구현했으며 해당 모델은 퀄리티를 보장하기 위해 직접 openAI에 결제하여 'dall-e-3'모델을 사용했습니다.

꿈 일지 및 근처 복권 구입처 찾기 기능

로그인한 사용자들이 자신의 꿈을 저장하고 이미지를 생성할 수 있으며 텍스트를 입력해 일기장처럼 활용할 수 있도록 했으며, '내 정보' 페이지에서 원하는 지역을 입력하면 해당 지역의 복권 구입처를 카카오맵을 활용 해 안내했습니다.

Supabase를 통한 SNS 로그인과 백엔드 기능 구현

아직 백엔드 개발에는 익숙하지 않기 떄문에 쉽고 빠르게 구현하기 위하여 Supabase를 사용해 꿈 일지의 CRUD 기능, 사용자 정보 조회, 그리고 카카오 및 구글 SNS 로그인 기능을 구현했습니다. 또한, AI 기반으로 생성된 꿈 이미지의 URL 유효시간이 1시간인 문제를 해결하기 위해 해당 URL을 png파일로 변환하여 Supabase의 bucket에 저장하고, 그 경로를 유저의 "꿈 일지" 테이블에 추가했습니다.

SEO 향상

Spaceship을 통해 도메인을 구입하고, Google과 Naver 콘솔에 도메인을 등록했습니다. Next.js의 기능을 활용하여 sitemap과 robot.txt를 추가하였으며, GA를 연동해 사용자 통계를 분석하여 SEO를 향상시켰습니다.

기술적 도전과 해결 과정

• 블로그는 sanity를 활용하여 간단한 DB조회기능만 구현했지만, 이번 프로젝트는 crud기능과 SNS로그인 기능이 필요했습니다. supabase를 도입하면서 아무래도 생소한 개념들이 많았는데 관련 영상과 문서를 보며 해당 기능을 구현할 수 있어 한단계 성장한 것 같고, 최근 Nest.js를 공부하고 있는데 백엔드 기능을 직접 구현해보고 싶은 생각이 더 크게 들었습니다.
• 카카오 맵을 통해 처음으로 지도관련 기능을 추가해봤는데 관련 라이브러리가 잘되어있어 생각보다 원활하게 구현할 수 있었습니다. 그러나 동작원리에 대해서는 아직 이해가 되지않은 것 같아 좀 더 스터디가 필요합니다.