먼저 Throwaway Prototype 만들기: Vibe Coding을 사용해 기술 부채를 피하는 방법
I’m happy to translate the article for you, but I’ll need the full text of the article (the content you’d like translated). Could you please paste the article’s body here? I’ll keep the source line exactly as you provided and translate the rest into Korean while preserving the original formatting.
TL;DR
Lovable을 계획 없이 뛰어들다 보니 첫 번째 빌드가 쓸 수 없는 엉망이 되었습니다.
해결책: 먼저 버려도 되는 프로토타입을 만들기.
이제는 몇 시간을 투자해 레이아웃, 흐름, 컴포넌트를 탐색하는 고수준 버전을 만든 뒤 본격적인 제작에 들어갑니다. 실제로 만들 준비가 되면 Lovable의 채팅을 이용해 배운 내용을 요약하고, 그 요약을 ChatGPT와 함께 기본 프롬프트로 다듬습니다. 그 결과 더 깔끔한 시작점과 부작용 감소를 얻을 수 있습니다.
기술 제품 관리자 역할
제 역할은 orchestrator(조정자)였습니다:
- Designers – 사용자 흐름을 정의합니다.
- Developers – 나중에 문제가 되지 않을 테이블 구조를 식별합니다.
- QA – 무언가가 기능인지 버그인지를 결정합니다.
- Customer Success – 릴리스를 위해 필요한 산출물을 제공합니다.
- Stakeholders – 로드맵 업데이트를 전달합니다.
이 일은 보람이 있지만, 시작부터 끝까지 진행하고 할 일 목록에서 체크하는 즐거움이 때때로 부족합니다.
Lovable.dev와 첫 시도
나는 사탕 가게에 간 아이처럼 머리부터 뛰어들었다:
- 빠르게 만들고 재미있었지만 불안정한 코드를 만들었다.
- 접근 방식을 계속 바꾸면서 예기치 않은 부작용이 발생했다.
- 한 페이지에서 무언가를 바꾸면 다른 페이지가 깨졌다.
사전 구축 단계: 버려지는 프로토타입
“프리‑빌드 단계에 들어갈 때, 결과물을 버릴 것이라는 이해를 가지고 접근하면 이 단계에서 가장 큰 가치를 얻을 수 있습니다.”
식별할 항목
- 구축하려는 고수준 흐름.
- 따르고자 하는 패턴.
- 소프트웨어 전반에 걸쳐 기능을 재사용할 수 있는 기회.
- 페이지 레이아웃 결정.
- 잠재적인 확장성 문제.
vibe coding의 강점은 개념을 빠르게 반복하고 테스트할 수 있으며, 준비가 되면 안정적인 기반 위에 깔끔하게 구축할 수 있다는 점입니다.
다중 버려지는 프로젝트
- “개념 X를 별도로 탐색하고 싶다”고 말해도 기분 나빠하지 마세요.
- 목표는 반복이며, 완벽함이 아닙니다.
- 하루 이틀 정도(보통 몇 시간)만 하는 짧은 연습이면 충분합니다.
나의 수정된 프로세스
- 첫 번째 복잡한 시도 후 몇 개의 사전 구축 임시 프로젝트를 만든다.
- 데이터를 하드코딩하고, 버튼이 자동으로 다음 단계로 진행하도록 만든다.
- 이러한 프로토타입을 사용해 사용자 경험에 대한 인사이트를 도출한다.
사례 연구: AssMan.ai
목표
제품이 Football Manager 게임 시리즈와 관련이 있다는 점을 즉시 명확히 하세요 (이름의 유래는 **[여기]**에서 확인할 수 있습니다).
또한 콜‑투‑액션(CTA) 을 눈에 띄게 하여 사용자가 고민 없이 바로 행동할 수 있도록 하세요.
프로토타입 개발
- 사전 구축 단계에서 며칠을 투자해 만졌습니다 (보통 몇 시간에 그치는 경우와 달리).
- 초기 “연기‑거울” 프로토타입은 **[여기]**에서 확인할 수 있습니다.
오늘 라이브 사이트에서 흐름을 실행하면 다음과 같은 핵심 구성 요소가 많이 보일 것입니다:
- 업로드 섹션 → 분석이 진행되는 동안 스피너 페이지로 전환됩니다.
- 분석 페이지 → 피드백을 표시하고 하단에 인터랙티브 챗봇을 제공합니다.
최종 디자인은 이러한 사전 구축 프로토타입에 크게 영향을 받았습니다.
최종 흐름 (데스크톱)
헤더
- 로고: 제품 이름이 들어간 전통적인 축구 스카프.
- 축구공 아이콘으로 즉각적인 시각적 단서 제공.
- 베타 태그: 투명성과 사용자 관용을 위해.
부제
“인터랙티브 피드백” – 도구의 가치를 즉시 보여줌 (AssMan.ai에 대한 제품 검증 기사 참고).
메인 박스 (세 가지 핵심 요소)
- 맥박이 뛰는 초록 버튼 – 명확하고 식별 가능한 CTA.
- 예시 전술 이미지 – 사용자가 정확히 어떤 스크린샷을 캡처해야 하는지 표시.
- 스크린샷 안내 – 프로세스에 익숙하지 않은 사용자의 마찰을 감소.
- UI는 사용자의 운영 체제에 맞춰 자동으로 적절한 스크린샷 방식을 선택합니다.
- 주요 CTA: “전술 스크린샷 업로드” (핵심 흐름).
- 보조 CTA: “클립보드에서 붙여넣기” (클립보드 전용 캡처용).
모든 정보는 스크롤 없이 표시되며, 이는 모바일 최적화 버전에서 매우 중요했습니다.
모바일 적용
주요 차이점
| Desktop | Mobile |
|---|---|
| CTA: “전술 스크린샷 업로드” | CTA: “사진 촬영” |
| Secondary: “클립보드에서 붙여넣기” | Secondary: “라이브러리에서 선택” (클립보드 옵션 대체) |
- 이 변경으로 모바일 사용자는 즉시 사진을 촬영하거나 라이브러리에서 기존 이미지를 선택할 수 있습니다.
- 저는 기기에 따라 업로드/저장 기능을 다른 위치로 옮기는 것을 고민했지만, 플레이어 기반이 PC 중심이기 때문에 대부분의 사용자는 휴대폰에 전술 사진이 없을 것이므로 이 구분이 타당하다고 판단했습니다.
레이아웃
- 모든 필수 정보가 스크롤 없이 한 화면에 표시됩니다.
Generating Tactic Feedback
The feedback component was built outside of Lovable using ChatGPT Playground, a tool that lets you test prompts and responses.
Takeaways
- Plan before you build: use throw‑away prototypes to explore ideas.
- Iterate quickly: vibe‑code concepts, then solidify a stable foundation.
- Separate device experiences when user behavior differs dramatically (desktop vs. mobile).
- Transparency (beta tags, clear CTAs) builds user goodwill.
By embracing a short, purposeful pre‑build phase, I turned a chaotic first attempt into a clean, user‑focused product.
AI와 함께하는 프로토타이핑에 대한 회고
나는 다양한 AI 모델과 설정을 API를 통해 실제로 동작하는 방식 그대로 비교했다. 도구를 사용해 프론트엔드에 채워질 출력을 찾을 때까지 반복했다. 최신 버전의 예시는 **여기**에서 확인할 수 있다.
실제 제품을 만들 때가 되자, 나는 Lovable’s chat feature에 각 프로토타입의 현재 상황에 대한 개요를 요청하고, 그 데이터를 ChatGPT에 입력한 뒤, 안정적인 기반을 마련할 수 있는 프롬프트를 찾을 때까지 반복했다.
내가 달성한 것
- 전체 레이아웃 정의: 페이지, 기능, 공통 컴포넌트, 핵심 흐름.
- 프로토타입은 청사진을 제공했다—이제 추측할 필요가 없다.
- 무엇을 범위에 포함하고, 무엇을 생략하며, 제품을 어떻게 구조화할지 알게 되었다.
권장 접근법
먼저 일회성 프로토타입을 만들자.
제품이 실제로 어떻게 작동해야 하는지를 몇 시간 동안 탐색해 보라. 그렇게 하면 가정을 수정하는 데 며칠이나 몇 주를 소비하지 않게 된다. 반복 횟수는 몇 시간으로 제한하고, 필요할 때만 며칠로 연장하라.
전망
구축 장벽은 계속 낮아지고 있다. 세 달 전만 해도 많은 노력이 필요했던 것이 이제는 더 쉬워졌으며, 그 격차는 계속 줄어들 것이다.