소개
처음에는 간단한 MVP를 작성하고 온보딩을 진행했습니다. 이후 사용자 정의 항목까지 직접 구현하며, 제품의 주요 흐름을 직접 사용자 입장에서 따라가며 개발해보고자 했습니다.
특히, 원하는 사이트의 분위기와 유사하게 만들기 위해 GPT와 Comet을 활용하여 디자인을 리버스 엔지니어링하고, 그 결과를 기반으로 디자인 가이드라인을 작성해 전체적인 방향성을 유지하려고 했습니다.
진행 방법
사용한 도구
🧠 GPT, Codex, Gemini: 개발 및 디자인 피드백
💻 Cursor: 코드 기반 작업과 GPT 협업
🎨 Comet: UI 분석 및 참고용 디자인 가이드 정리
진행 방식
우선 MVP로 기능 흐름을 구현하고, 사용자가 따라갈 수 있는 여정(User Journey)을 문서화했습니다.
이후 아래와 같은 방식으로 디자인 가이드를 설정했습니다:
GPT에게 "이 사이트의 디자인 특징을 분석해서 정리해줘"라고 요청
결과를 정리하여 폰트, 컬러, 여백, 인터랙션 등의 가이드라인으로 문서화
OAuth 로그인은 여러 차례 실패를 겪은 후 성공했으며, 이후 안정적으로 기능을 붙여나갔습니다.
"이 웹사이트의 디자인을 리버스 엔지니어링해서 주요 UI 요소의 특징을 요약해줘. 폰트, 색상, 버튼 스타일, 여백 등을 기준으로."
주요 결과
랜딩페이지
초대 링크 받기
로그인
온보딩 화면
대시보드
결과와 배운 점
🔐 OAuth 로그인에서 여러 번 실패하면서, 핵심 기능이 아닌 영역에 시간을 많이 쓰게 된 점을 반성하게 되었습니다.
이런 기능은 바이브 코딩 사이트의 연동 기능을 활용하는 게 더 효율적이라는 점을 느꼈습니다.
🎨 디자인 측면에서는 완전히 동일하지는 않지만, 유사한 분위기를 재현하는 수준으로 만족했습니다.
이후에는 애니메이션이나 영상 요소를 활용해서 더 생동감 있는 인터페이스를 시도해볼 계획입니다.
⚡ Codex 등의 도구를 사용하더라도, 실제 완성도 있는 결과물을 만들기 위해서는 기본적인 시간과 품질에 대한 투자는 여전히 중요하다는 걸 실감했습니다.
특히 "바이브 코딩"이라 하더라도, 일정 수준 이상의 완성도를 내려면 생각보다 손이 많이 갑니다.
도움 받은 글 (옵션)
(추가하고 싶은 레퍼런스나 글이 있다면 여기에 작성해주세요! 😊)
