러버블 홈페이지 제작기: 브랜드맵에서 CTA 연결까지

소개

러버블의 브랜드맵과 PRD를 바탕으로 웹사이트를 제작했고,

단순한 소개용 페이지를 넘어서 실질적인 마케팅 채널로 활용하기 위한 여정을 시작했습니다.

러버블 결제 한달만 결제하고 (다음날 결제 취소가 되니 꼭 잊지 않고 결제 취소 미리 해놓기)

수정의 대장정을 시작하였습니다.

주요 작업 내역

  • 홈페이지 히어로 섹션 개선

    • 중앙 정렬로 안정감 있게 배치

    • 시각적 효과 강화 (하지만 너무 튀어서 일부는 자진 삭제 😅)

    • 연보라색 배경 애니메이션 → 어울리지 않아 쿨하게 제거(러버블은 혜령님 사례에서도 보았듯이 디자인 수정을 하려고 하면 극단적으로 망치며 수정하는 경향이 있다)

  • CTA 버튼 수정& 연결

    • 각 프로그램에 눈에 띄는 상단/하단 CTA 버튼 추가

    • "일주일 무료체험" → Supabase로 연결된 내부 상담 신청 페이지로 연결

Supabase 연동

한국 문자 메시지의 스크린 샷
  • 폼에서 받은 데이터를 Supabase DB에 저장

    한국어 텍스트의 스크린 샷

이렇게 작성하고 나니 양식이 어떻게 나오는지 알 수가 없어서 제미나이로 양식을 만들어서 이렇게 해달라고 요청

한국어 문자 메시지의 스크린 샷
  • publish 후 에러

    한국 웹 사이트의 스크린 샷
한국 텍스트가 포함 된 이메일 스크린 샷

이건 바로 수정이 되진 않고 직접 해야 해서 제미나이로 오류 수정해달라고 이야기 해서 한 단계단계 따라하며 오류 수정하였습니다.

결과와 배운 점

  • Supabase를 연결하고 데이터베이스를 확인하는 과정을 전혀 몰랐는데 이 과정에서 Supabase에 DB를 확인하는 방법을 배움(table editor-consultation_reqests를 누르면 남긴 DB를 확인할수 있다)

    웹 브라우저에서 테이블의 스크린 샷

두둥! 결과물
https://eomma-gongbu-flow.lovable.app/

4
3개의 답글

뉴스레터 무료 구독