소개
1편에서 ‘뽐뿌 핫딜 뷰어’ 웹서비스를 만들었다면,
이번엔 이 서비스를 로그인한 사용자만 접근할 수 있도록 고도화해봤습니다.
“인증”은 보통 복잡한 기능이라고 생각하기 쉬운데, 놀랍게도 저는 이걸 단 3번의 프롬프트 입력으로 구현했어요. Supabase + Lovable 조합이 너무 강력했거든요. 물론 중간에 약간의 시행착오는 있었지만, 결과는 대만족이었습니다 😎
👉 실제 결과: https://ppomppu-hotdeal-viewer.lovable.app/
흑백 로고가있는 흰색 화면
한국의 Google 로그인 페이지의 스크린 샷
진행 방법
1. 왜 로그인 기능을 붙였을까?
핫딜 정보가 아무나 볼 수 있도록 열려있는 것도 좋지만,
저는 특정 사용자(예: 구독자)만 사용할 수 있게 하고 싶었어요.
그래야 나중에 즐겨찾기 기능이나 개인화 기능을 추가할 수 있을 테니까요. 그래서 ‘로그인한 사용자만 볼 수 있는 웹서비스’라는 목표로 기능을 확장해봤습니다.
2. 프롬프트 3번이면 충분했다
아래는 실제로 Lovable에 입력한 프롬프트입니다:
1. Supabase를 연동하고
2. Google 로그인 기능을 추가해줘
3. 로그인한 사용자만 이 페이지에 접근할 수 있게 해줘
정말 이 세 줄로 끝났어요! 😳
Lovable은 Supabase의 auth 구조를 이미 알고 있는 듯했고, 자동으로 로그인 버튼, 세션 체크, 리디렉션 등을 구성해줬습니다.
3. Supabase 연동은 얼마나 쉬웠나
이건 정말 신기한 경험이었어요.
Google Cloud Console에서 Client ID, Secret만 미리 만들어두면,
Supabase에 붙이는 건 3분 안에 끝났습니다.
Lovable은 환경변수 설정 UI도 제공해서, Supabase 프로젝트 키와 도메인도 아주 쉽게 넣을 수 있었어요.
웹 브라우저에서 설 정 메뉴의 스크린 샷
AdBlock Plus의 AdBlock 설정 스크린 샷
👀 Supabase가 처음인 분들도 겁먹을 필요 없습니다. 진짜 설정 몇 개만으로 자동 인증까지 됩니다.
4. 순탄하지만은 않았던 여정 (프로젝트 2개 만들기 사건 🌀)
Boombuu 서버의 구성을 보여주는 화면
사실 처음엔 Supabase 연동이 잘 안 돼서, 프로젝트를 2개나 만들었어요 😂
원인은 Lovable 프로젝트 초기 세팅 중 API 키가 잘못 들어간 거였고,
중간에 리디렉션 주소도 빠진 게 있었죠. 하지만 이런 문제도 콘솔에서 금방 수정할 수 있었어요.
항목 목록을 보여주는 웹 페이지의 스크린 샷
느낀 점: Supabase는 정말 쉽지만, 처음부터 꼼꼼히 확인해야 합니다. (특히 환경변수!)
결과와 배운 점
로그인 기능도 이제는 AI에게 맡길 수 있다!
Supabase는 정말 ‘노력 대비 효과’가 큰 도구라는 걸 깨달았어요.
Lovable이 인증 UI와 세션 처리까지 자동화해준 게 인상적이었어요.
시행착오를 겪으며 환경변수와 GCP 설정에 대한 이해도도 높아졌고요.
앞으로는 이걸 바탕으로, ‘구독한 사람만 볼 수 있는 서비스’도 만들어볼 예정입니다. 예를 들어, 즐겨찾기 핫딜만 따로 저장해 보여주는 마이페이지 같은 것!
도움 받은 글 (옵션)
한 마디 ✨
💬 Supabase 진짜 쉽다. Lovable이 다 해준다. 근데… n8n 도 짱이다!
노코드 도구들이 너무 좋아진 요즘,
이제는 개발보다 ‘구성하고 상상하는 능력’이 더 중요하다 는 걸 느낍니다.
꼭 도전해보세요! 누구나 할 수 있어요 🚀
