랜딩페이지 만들기(feat. 대모산 개발단 랜딩페이지 챌린지 7기)

PoolFriends - AI 수영장 추천 서비스

유튜브를 통해 저렴한 비용으로 강의를 완주하면 환급을 해준다는 내용이였다. 3일간 하나씩 개방되는 영상을 따라 매일 과제를 수행하는 컨셉으로 진행됐다. 난이도가 높지 않아 1시간 정도 투자하면 충분히 완료 가능한 목표다.

 

상단의 링크를 통해 완성된 랜딩페이지를 확인할 수 있다.

🛠️ 사용 도구

도구	용도
ChatGPT	아이디어 구체화 및 화면 계획서 작성
v0	화면 계획서 바탕으로 UI 목업 제작.
Cursor	AI 도움을 받아 코드 수정
Notion	Notion API를 연결하여 데이터베이스 활용
Vercel	코드 배포

요청 제한에 도달했다면? Google CLI 써보자

반응형 화면을 만들던 중 햄버거 버튼 속 메뉴들의 배경이 투명했다. UI 수정을 부탁했지만 Cursor 무료 사용량을 모두 소모하여 진행이 불가하던 중 Google CLI로 Cursor를 대신할 수 있다는 것을 알게 되었다.

 

비용없이 Gemini Pro 버전으로 일일 1000회까지 요청 가능하여 부족함이 없었다. 덕분에 UI 수정과 제시간에 과제도 제출했다.

마무리

AI 도구로만 완성해보자는 목표로 코드를 직접 수정은 최소화했다. 프롬프트로 하여도 그럴듯한 결과가 이렇게 단시간에 나온다는 것이 놀라웠다. 단시간이라고 표현한 이유는 필자의 경우 Next.js, TypeScript를 모른다. 과거의 경우 구글링으로 하나씩 찾아보면서 여러 블로그에서 정보를 조합해 나의 상황에 맞는 해결점을 마련해야 했다. 그런 수고의 시간이 절약되고 완성을 시킨 결과가 꽤 그럴듯했기에 감탄스러웠다. 개발자가 아닌 사람도 이런 과정이 익숙해진다면 웹페이지 제작과 배포까지 최소한의 비용으로 홍보가 된다는 뜻이다.

 

이번 기회로 바이브 코딩과 vercel 배포를 해보며 강하게 드는 확신이 있다. 1인 서비스 개발이라는 분야에 접근하는 문턱이 낮아졌다는 것이다. 서비스 아이디어가 있다면 구체화하고 소스코드를 만들어 배포까지 AI의 도움으로 쉽게 된다는 것이다. 한계가 나타날 때마다 하나씩 학습하면 되는 것이니 결과물이 눈앞에 나타난다는 것이 의미있는 것 아니겠는가.