비개발자가 Claude Code로 Flutter 앱 3개 만든 과정 (바이브 코딩)

바이브 코딩이란? — AI로 코딩하는 새로운 방식

"바이브 코딩(Vibe Coding)"이라는 말이 있다. AI에게 자연어로 지시해서 코드를 생성하는 방식이다. Andrej Karpathy가 처음 쓴 표현인데, 요즘은 하나의 개발 방법론이 됐다.

나는 이걸 매일 한다. 코딩 경험 없이, Claude Code와 대화하며 Flutter 앱 3개를 동시에 만들고 있다.

노코드 툴(FlutterFlow, Bubble 등)도 써봤다. 빠르지만 한계가 명확했다.

결정적으로, GentleDo의 모멘텀 감쇠 알고리즘이나 에너지 기반 태스크 필터링 같은 커스텀 로직은 노코드에서 구현이 불가능했다.

나는 회사에서 기획을 한다. 코드를 읽을 줄은 알지만, 빈 파일에서 앱을 만들어본 적은 없었다.

비개발자의 Claude Code 바이브 코딩 워크플로우 — 6단계

실제 작업 흐름은 이렇다.

한 마디로, 설계는 내가 하고, 구현은 Claude가 한다.

GentleLab이라는 브랜드 아래 3개 앱을 만들고 있다. 전부 Flutter 기반이고, 같은 디자인 철학(빨간색 금지, 모멘텀 시스템, 에너지 체크인)을 공유한다.

GentleDo 기준으로, Claude Code와 함께 만든 기능들이다.

테스트 케이스 158개. 전부 통과한다.

바이브 코딩을 시작하려는 사람에게 하나만 조언한다면 이거다. 내가 쓰는 CLAUDE.md에는 이런 것들이 들어있다.

이 문서가 있으면 Claude가 맥락을 이해한 상태로 일한다. 없으면 매번 처음부터 설명해야 한다.

반복 작업이 빠르다. 한국어 ARB 파일에 문자열 50개를 추가하고, 영어 번역까지 만들고, 코드에서 참조하는 작업 — 사람이 하면 2시간, Claude는 3분이다.

테스트를 잘 쓴다. "이 provider에 대한 테스트를 작성해줘"라고 하면 정상 케이스, 경계 케이스, 에러 케이스를 다 커버하는 테스트를 만든다.

복잡한 UI 레이아웃에서 삽질한다. "타임라인 뷰에서 드래그하면 시간이 바뀌는데, 동시에 스크롤도 되어야 해" 같은 요구사항은 한 번에 안 된다. 3~4번 수정을 거친다.

전체 아키텍처를 미리 잡아야 한다. Claude는 시키는 것은 잘 하지만, 앱 전체 구조는 내가 결정해야 한다. 설계 없이 기능만 요청하면 나중에 전부 엎어야 한다. 실제로 두 번 엎었다.

바이브 코딩이 만능은 아니다.

바이브 코딩이 나은 경우:

노코드가 나은 경우:

나는 "앱 3개를 장기적으로 운영할 것"이기 때문에 코드 소유권이 중요했다. 그래서 바이브 코딩을 선택했다.

개발자가 아니어도 앱은 만들 수 있다. 다만, 설계자는 되어야 한다. 무엇을 만들지, 왜 만드는지, 어떤 규칙으로 만들지 — 이건 아직 사람의 몫이다.

블로그도 직접 만들었다. 그 이야기는 이전 글에서 썼다.

다음 글에서는 GentleDo의 아이콘을 7번 바꾼 이야기 — Concept A에서 D까지의 디자인 과정을 공유할 예정이다.