25.09.29 / JUN
바이브코딩으로 세계 평화를 가져올 뭔가 엄청난 소프트웨어를 만들 수 있지만
일단은 예전 향수를 살려 ‘틴더’같은 데이트 커플 매칭앱을 만들고 싶다면,
이번 포스트와 영상이 그 소원을 이루는 데 도움이 될 수 있습니다.
바이브코딩 기법으로 데이트 커플 매칭앱 ‘핀다(Finda)’ 만들기
이번에 실험적으로 만들어볼 ‘핀다’는 2105년에 등장해서 글로벌 히트작으로 기록된 데이트 매칭 앱 ‘틴더’의 바이브코딩 실험 버전입니다.
—
0. 크롬 브라우저, 구글 로그인
- Cursor 가입, 다운로드, 설치, 열기
- Github 가입, 빈 리포지토리 생성 [vibe-250928-finda-v1]
- Base44 가입, 브라우저에서 열기
—
1. GPT, Claude 등에서 해당 분야의 대표 앱을 분석
- 출시 당시 선풍적인 인기를 끌었던 ‘틴더’ 선택
Claude > 데이트 커플 매칭앱 ‘틴더’에 대해 설명해줘
https://tinder.com/
—
2. GPT, Claude 등에서 앱 구현 프롬프트 생성
- 핵심 목표 기능, 디자인 스타일, 개발 언어 (스택)
Claude > 데이트 커플 매칭앱 ‘틴더’ 스타일의 웹앱을 구현하는 프롬프트를 생성해줘
- 앱 이름은 ‘Finda’
- 데이트 커플 매칭앱 ‘틴더’의 핵심 기능, 로직 구현
- 바이브코딩 입문자가 쉽게 이해할 수 있는 코드 사용
- HTML, CSS, JS 코드로 작성
- 디자인 스타일은 최신 iOS UI 디자인 스타일과 표준 라이브러리를 반영
- 데이트 커플 목록에 표시할 남녀 사진은 공개 사진 저장소 또는 AI 생성 이미지를 사용
—
3. Cursor 또는 Base44 등 바이브코딩 도구의 프롬프트 창에 앱 구현 프롬프트 입력
- 먼저 내 컴 화면에 빈 프로젝트 폴더 생성 [vibe-250928-finda-v1]
- 빌드 절차 정의 후 순차적으로 코드 생성, 보통 15~20분내 완성
Cursor > [2단계에서 생성된 프롬프트 입력]
Base44 > [2단계에서 생성된 프롬프트 입력]
—
4. 미리보기 화면에서 앱 실행, 주요 기능 정상 작동 확인 후 배포
Cursor에서 만든 앱의 배포
- Cursor에서 빌드한 파일을
- Github 해당 리포지토리에 추가
- Nelify에 Github 연결하여 배포 링크 생성, 공유
Base44에서 만든 앱의 배포
- Base44는 그 자체가 서버리스여서
- 완성 직후 바로 배포 가능 >> 링크 공유
개발 후속 작업
- 이후 프롬프트를 통해 점진적 개선, 완성
첫 포스팅: 25.09.29 / 포스트 문의: JUN (naebon@naver.com)
