vibe-coding

1 개의 포스트

한 달짜리 과제, 바이브 코딩으로 5일 만에!(ChatGPT·Cursor) (새 탭에서 열림)

기존의 전통적인 개발 방식은 상세한 요구 사항 정의와 설계 단계에 많은 비용이 소모되어 급변하는 시장 트렌드에 대응하기 어렵습니다. 이 글은 생성형 AI를 활용해 '작동하는 데모'를 빠르게 만들고 이를 수정해 나가는 '바이브 코딩(Vibe Coding)' 전략을 통해, 한 달이 걸릴 과제를 단 5일 만에 해결한 과정을 담고 있습니다. 완벽한 정답보다는 충분히 괜찮은 해답을 빠르게 도출해 검증 루프를 돌리는 것이 핵심입니다. ### 요구 사항과 도메인의 간결한 정의 - 복잡한 메뉴 등록 시스템을 단순화하기 위해, 초기 요구 사항은 메모장에 한 줄 요약과 최우선순위 1~2가지만 정리하여 시작합니다. - 데이터 구조는 화면 구성의 기반이 되므로 가능한 사실에 가깝게 정의하되, 세부적인 내용은 AI의 창의적인 제안을 수용할 수 있도록 여백을 둡니다. - 처음부터 완벽한 명세서를 작성하려 하기보다, AI가 맥락을 파악할 수 있는 핵심 도메인 지식을 전달하는 데 집중합니다. ### 5가지 솔루션 후보 선정 및 구체화 - ChatGPT를 활용해 '스텝퍼형 마법사', '라이브 미리보기', '템플릿 복제', '채팅 입력', 'OCR 사진 촬영' 등 서로 다른 접근 방식의 솔루션 5가지를 도출합니다. - 각 솔루션의 장단점을 분석하여 실무 적용 가능성을 판단하고, 프롬프트를 미세 조정하며 원하는 수준의 답변이 나올 때까지 반복 요청합니다. - 이 과정에서 AI는 맥락을 축적하며 결과물의 품질을 높이며, 사용자는 여러 대안 중 최적의 사용자 경험(UX)을 선택할 수 있는 시야를 확보합니다. ### AI 기반의 와이어프레임 및 상세 설계 - 선정된 각 솔루션별로 필요한 화면 수, UI 요소, 공통 패턴(진행률 표시, 유효성 검사 등)을 AI가 상세히 설계하도록 유도합니다. - 예를 들어 '스텝퍼형'의 경우 8단계의 상세 화면 구성을 정의하고, 각 단계에서 입력받을 필드와 도움말 문구까지 구체화합니다. - 설계 과정에서 누락된 기능이나 우선순위 변경이 발견되면 프롬프트를 수정해 즉시 재설계하며, 물리적 설계 문서 작성의 부담을 최소화합니다. ### Cursor와 Flutter를 활용한 고속 구현 - AI 통합 개발 환경인 Cursor를 사용해 Flutter 기반의 모바일 앱 코드를 생성하며, 단일 코드베이스의 이점을 살려 실험 속도를 극대화합니다. - 먼저 5가지 솔루션의 진입점이 포함된 공통 뼈대(Main Screen)를 작성한 뒤, 각 솔루션을 개별 파일로 나누어 점진적으로 구현합니다. - 처음부터 상태 관리 라이브러리(Riverpod)나 데이터베이스(SQLite) 같은 기술 스택을 고민하지 않고, 기능 위주의 화면 데모를 먼저 만든 후 필요에 따라 스택을 추가하는 역순 방식을 취합니다. 이러한 방식은 '완성물이 최고의 디버거'라는 철학을 바탕으로 합니다. 문서 상의 논의에 시간을 쏟기보다 작동하는 앱을 빠르게 만들어 직접 만져보며 수정하는 것이 결과적으로 더 높은 품질의 제품을 더 빨리 만드는 길입니다. AI는 반복적인 재작업 요청에도 지치지 않으므로, 개발자는 이를 활용해 끊임없이 가설을 검증하고 정답에 가까워지는 '반복의 힘'을 믿어야 합니다.