[시즌 3] 바이브 코딩으로 청첩장 서비스 만들기

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

바이브 코딩으로 청첩장 서비스를 만들려면 사진과 예식 정보를 준비하고 디자인 스킬·방명록·배포를 연결한 뒤, 실제 화면과 공유 미리보기까지 확인해야 한다.

📌 핵심 요점

1. 준비물은 청첩장 사진 4~5장과 신랑·신부 이름, 날짜, 장소, 주소, 계좌번호다. 실습에서는 가상 사진과 더미 정보를 사용하고, 스마트폰 세로 화면을 기준으로 제작한다.
2. Taste 스킬은 상투적인 AI 디자인을 줄이는 용도로, Scrollcraft는 스크롤에 반응하는 연출을 만드는 용도로 소개된다. 설치와 사용을 요청해도 기대한 효과가 바로 구현되는지는 별도로 확인해야 한다.
3. Supabase를 연결해 회원가입 없이 방명록과 참석 회신을 받도록 요청한다. 참석 인원과 식사 여부는 관리 화면에서 확인하는 방식으로 구현된다.
4. 카카오톡 공유 시 대표 사진·제목·날짜·장소가 보이도록 메타 정보를 요청하고, Vercel에 배포한다. 수정 후에는 푸시와 재빌드가 끝난 배포 화면을 확인해야 한다.
5. 초기 제작은 빠르게 진행됐지만 삭제 실수, 약한 스크롤 연출, 잘못된 이미지 경로가 발생했다. 영상은 연출 강화와 이미지 수정, 카카오톡 미리보기 확인까지 보여준다.

🧩 배경과 문제 정의

영상은 결혼을 준비하거나 주변 사람의 결혼을 기념하려는 사용자가 바이브 코딩으로 독특한 청첩장 서비스를 만드는 실습이다. 사진과 예식 정보를 바탕으로 모바일 화면을 만들고, 스크롤 연출과 방명록·참석 회신을 추가한 뒤 공유 가능한 주소로 배포하는 과정을 다룬다.

GitHub·Vercel·Supabase 계정과 CLI 준비를 전제로 하며, 이번 실습에는 Google 로그인을 넣지 않는다. 가상의 신랑·신부 사진과 더미 정보를 사용해 먼저 제작하고 나중에 실제 내용을 채우는 방식이다. 핵심 과제는 빠르게 생성한 결과에 원하는 디자인을 반영하고, 데이터 저장과 배포·공유 흐름까지 확인하는 것이다.

🕒 시간순 섹션별 상세정리

1. 제작 목적과 준비물

• 결혼을 준비하거나 기념하려는 사람을 위한 독특한 청첩장 서비스 아이디어를 보여준다. [00:19]
• GitHub·Vercel·Supabase 계정과 CLI 설치·로그인을 안내하고, Supabase 무료 계정의 사용 제한을 언급한다. [00:55]
• Google 로그인은 제외하고 사진 4~5장, 날짜, 장소, 주소, 신랑·신부 이름, 계좌번호를 준비한다. 실습용 더미값도 사용할 수 있다고 보여준다. [01:25]

2. 가상 웨딩 사진 생성

• Codex에 가상의 신랑·신부가 자연 배경에서 다양한 콘셉트로 촬영한 사진 다섯 장을 요청한다. [01:44]
• 연예인 같은 얼굴보다 자연스러운 한국인 느낌과 스튜디오 수준의 사진 처리를 요구하고, 생성 중에는 다음 설명을 이어간다. [02:12]

3. Taste와 Scrollcraft의 역할

• Taste는 사이트에서 흔히 나타나는 상투적인 AI 디자인을 줄이는 도구로 보여준다. [03:02]
• Scrollcraft는 스크롤에 따라 나타나는 인터랙티브 효과의 연출을 돕는 스킬로 보여준다. [03:17]
• 청첩장을 내려 보며 이벤트가 나타나는 흐름에 두 스킬을 함께 적용해 보겠다고 한다. [03:37]

4. Astra 실습과 이미지 폴더 구성

• 새 이미지 생성이 끝나기 전, 미리 만들어 둔 신혼부부 사진을 실습에 사용하기로 한다. [04:13]
• Astra로 작업을 진행하고 빈 프로젝트 폴더와 images 폴더를 준비한다. [04:54]
• 사진 압축을 풀어 확인한 뒤 images 폴더에 넣는다. 자연스러운 얼굴을 요청했지만 결과는 연예인처럼 나왔다고 평가한다. [05:21]

5. 예식 정보와 제작 프롬프트

• info.md에 신랑·신부 이름, 장소, 주소, 오시는 길, 소개, 계좌번호, 날짜를 가상으로 입력하고 나중에 채우도록 요청한다. [06:14]
• 스마트폰 세로 화면을 기준으로 만들고, 프로젝트 폴더에 두 스킬을 설치해 적극적으로 사용하도록 지시한다. [06:40]
• 각 스킬의 GitHub 주소를 전달해 설치와 제작을 시작한다. [07:19]

6. 방명록·공유 미리보기·배포 요청

• Supabase로 방명록과 참석 인원·식사 여부 저장을 요청한다. 회원가입 없이 입력할 수 있게 하고 반복 제출 같은 악용을 막도록 요구한다. [08:04]
• 카카오톡이나 문자로 링크를 보냈을 때 대표 사진, 결혼 안내 제목, 날짜, 장소가 보이도록 메타 정보를 채우게 한다. [08:54]
• Vercel 배포를 요청하고 Supabase 키가 공개되지 않도록 주의를 전달한다. [09:13]

7. 빠른 제작과 삭제 실수

• 발표자는 바이브 코딩에서 준비물과 필요한 스킬을 잘 갖추면 제작 자체는 어렵지 않다고 보여준다. [09:38]
• 삭제되면 안 되는 대상을 언급한 뒤 이미 작업이 완료됐다는 응답을 받고 복구하러 가겠다고 한다. 정확한 삭제 대상은 설명하지 않는다. [09:59]
• 설명 시간을 제외하면 약 5~6분 작업했다고 드러낸다. 배포 결과가 계속 비슷하게 느껴져 두 스킬을 모두 사용했는지 다시 묻는다. [11:42]

8. 초기 기능과 참석 정보 확인

• 초기 청첩장에서 결혼 날짜와 달력, 네이버지도·카카오맵, 확대 가능한 사진과 이전·다음 탐색, 계좌번호를 확인한다. [12:11]
• 참석·식사 관련 입력과 축하 메시지를 시험하고 방명록에 메시지가 남는 것을 확인한다. 참석 정보를 어디서 조회하는지는 추가로 질문한다. [12:42]
• 스킬 전용 엔진을 사용하지 않았다는 응답에 연출 강화를 요청한다. 참석 인원과 식사 여부는 Supabase 관리 화면에서 조회하는 방식임을 확인한다. [13:24]

9. 스크롤 연출 강화와 재배포

• 약한 기존 연출을 사진 앨범이 손끝에서 한 장씩 쌓이는 청첩장으로 바꾸겠다는 제안을 확인한다. [13:53]
• 현재 보는 주소는 Vercel 배포본이므로 코드 푸시 후 재빌드가 진행되고 적용될 때까지 기다려야 한다고 보여준다. [14:28]
• 브라우저에서 수정된 연출을 테스트하는 과정을 보고 푸시를 요청하며, 업로드가 끝났다는 안내를 받는다. [15:38]

10. 깨진 이미지의 원인과 수정

• 스크롤 효과는 추가됐지만 상단을 비롯한 사진이 깨져 보이는 문제를 발견한다. [16:02]
• 사진이 보이지 않는다고 전달하자 웹용 사진 경로가 잘못됐다는 응답이 나오고, 수정 후 다시 빌드되기를 기다린다. [16:36]
• 이미지가 다시 표시되고 스크롤에 따라 사진이 나타나는 효과를 확인하며 Scrollcraft로 연출을 추가했다고 정리한다. [17:02]

11. 카카오톡 공유 확인과 마무리

• 완성한 청첩장 링크를 카카오톡에 올려 앞서 요청한 미리보기가 나타나는 것을 확인한다. [17:18]
• 테스트용 링크임을 안내하고, 다음 영상에서도 유용한 바이브 코딩 팁을 소개하겠다고 마무리한다. [17:41]

🧾 결론

• 청첩장 제작의 출발점은 복잡한 프롬프트보다 사진, 예식 정보, 모바일 화면 기준을 명확히 준비하는 것이다.
• 스킬을 지정하는 것만으로 원하는 디자인이 보장되지는 않는다. 첫 결과를 보고 사용 여부와 연출 방향을 다시 요청하는 과정이 필요했다.
• 배포 주소가 나온 뒤에도 이미지, 방명록, 참석 정보 확인 방식, 공유 미리보기를 점검해야 서비스의 실제 사용 흐름을 확인할 수 있다.

📈 투자·시사 포인트

• 실무 관점에서 AI 코딩 도구는 청첩장처럼 목적과 입력 정보가 뚜렷한 웹서비스의 초기 제작 시간을 줄일 가능성을 보여준다. 영상의 작업 시간은 발표자의 사례다.
• 디자인 스킬의 가치는 설치 자체보다 결과 화면에 반영되는 정도에 달려 있다. 기본 기능 구현 이후에도 연출을 구체적으로 조정할 여지가 남았다.
• 서비스 제작에서는 화면 생성뿐 아니라 데이터 저장, 운영자의 조회 방식, 배포 상태, 공유 미리보기까지 연결하는 역량이 필요하다.
• 영상은 제작 실습이며 매출, 운영 비용, 유료 전환이나 투자 수익을 제시하지 않는다. 사업성은 이 사례만으로 판단하기 어렵다.

⚠️ 불확실하거나 확인이 필요한 부분

• 발표자는 Supabase 무료 계정에서 데이터베이스를 두 개만 사용할 수 있다고 설명하지만, 적용 시점과 정확한 제한 단위는 영상에서 확인되지 않는다.
• 기존 프로젝트 삭제를 요청한 뒤 삭제되면 안 되는 대상과 복구를 언급한다. 정확히 무엇이 삭제됐는지, 복구가 완료됐는지는 분명하지 않다.
• 회원가입 없는 입력과 반복 제출 방지를 요청하지만, 실제 접근 권한과 악용 방지 장치가 충분한지는 영상만으로 확인할 수 없다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 사진 4~5장과 예식 정보를 준비하고, 더미로 만든 이름·날짜·장소·계좌번호를 실제 정보로 교체한다.
• 스마트폰 세로 화면에서 사진, 달력, 지도 연결, 계좌번호, 방명록을 직접 확인한다.
• Taste와 Scrollcraft의 적용 여부를 확인하고, 원하는 스크롤 연출을 구체적인 장면으로 요청한다.
• 기존 Supabase 프로젝트를 삭제하기 전 대상과 보존할 데이터를 확인한다.

❓ 열린 질문

• 스킬을 설치하고 사용하도록 요청했는데도 초기 결과가 익숙한 청첩장 디자인으로 나온 이유는 무엇인가?
• 참석 회신을 Supabase 관리 화면에서 조회하는 방식이 실제 운영자에게 충분히 편리한가?
• 회원가입 없는 방명록에서 반복 제출와 데이터 접근을 어떤 방식으로 제한했는가?