The State of Vibe Coding
도대체 된다는거야 안 된다는거야?
Claude Code로 코딩한 지 한 석 달 정도 된 것 같다. 혼자서 참 많은 것들을 만들었다.
내 홈페이지, 프로젝트 관리도구, 이메일 관리도구(하다가 버려짐), 커뮤니티 정치 동향 모니터링 서비스, AI 기반 의사 결정 서비스, 우리 딸의 동화책 사이트, 옥소폴리틱스 2.0...
시작했다가 까먹어서 버려진 서비스도 많다. 한 주에 프로젝트가 한두 개씩 추가되어서 너무 혼란스러웠다. 그걸 정리하기 위해 프로젝트 관리를 위한 프로젝트를 또 만들었다. (좀 바보 같기도 하고..)
곧 production launch 할 만한 녀석도 나왔다. 이미 베타 서비스에 들어간 서비스도 있다. 그리고 너무 많은 것이 동시에 진행되다 보니 힘겨운 나머지 Product Engineer도 한 명 모셨다. 프로젝트 관리, 프로덕트 관리, 프로덕트 빌딩, 디자인까지 다 하는 Superhuman이다. 신방과 출신의 친구를 이틀간의 교육 끝에 product engineer로 만들었다.
데모와 프로덕션의 간극
요즘 AI 코딩 도구로 누구나 앱을 만들 수 있다고도 하고, Vibe Coding은 폭망했다는 이야기도 많다.
실제로 Claude Code를 쓰면 놀랍다. "Todo 앱 만들어줘"라고 하면 진짜로 작동하는 앱이 나온다.
그런데 대부분 중간에 포기한다. 왜일까?
문제는 간단하다. 데모(시연용)는 만들 수 있는데, 실제 사용자가 쓸 수 있는 프로덕션 앱으로 만들기가 어렵다.
"Todo 앱 만들어줘"라고 하면
만들어지는 것:
할일 추가, 삭제, 수정: 완벽하게 작동
Firebase 연동 코드: 문제없음
기본 UI: 깔끔하게 나옴
하지만 빠진 것들:
로딩 상태 처리: 데이터 가져오는 중에 하얀 화면만 보임
에러 핸들링: Firebase 연결 실패하면 앱이 크래시
Empty state: 할일이 없을 때 아무것도 안 보임
네트워크 오프라인 처리: 인터넷 끊기면 데이터 날아감
중복 제출 방지: 버튼 연타하면 같은 할일이 여러 개 생김
인증 토큰 갱신: 시간 지나면 갑자기 로그아웃됨
Production 수준의 디자인
이게 "단순 기본 기능(Happy Path)"와 "실제 세상"의 차이다.
진짜 Knowledge Gap은 무엇인가
1. 예외 상황을 예측하는 능력
초보: "기능이 작동하면 완성 아냐?"
경험자: "작동 안 할 때가 더 중요해"
네트워크가 느리면?
서버가 응답 안 하면?
사용자가 빠르게 클릭 여러 번 하면?
동시에 여러 사용자가 같은 데이터 수정하면?
이런 질문들을 할 줄 알아야 AI한테 물어볼 수 있다.
2. 상태 관리의 복잡성
초보: "데이터 저장하고 불러오면 되지"\
경험자: "클라이언트 상태와 서버 상태를 어떻게 동기화하지?"
서버에서 데이터 가져오는 중: 로딩 상태
가져온 데이터를 캐싱할지 말지
오래된 데이터는 언제 다시 가져올지
낙관적 업데이트(Optimistic Update)와 rollback
오프라인 상황에서의 로컬 큐 관리
이런 개념을 모르면 요청조차 못한다.
3. 보안 설계
초보: "Firebase 연결했으면 끝 아냐?"
경험자: "보안 규칙 안 쓰면 누구나 내 DB 다 볼 수 있어"
Firestore Security Rules 작성
환경 변수로 민감 정보 분리
Dev와 Production 환경 분리
API 키 노출 방지
"보안 규칙 작성해줘"라고 하면 AI가 70% 정도 해주지만, 이게 필요하다는 걸 모르면 아무것도 안 된다.
4. 성능 최적화
초보: "로컬에서 잘 되는데?"
경험자: "프로덕션에서 느린 건 이유가 있어"
이미지 최적화 (WebP, lazy loading)
번들 사이즈 관리
불필요한 리렌더링 방지
DB 쿼리 최적화와 인덱스 설정
"lighthouse 돌려서 성능 문제 찾아줘"라고 하면 AI가 찾아주지만, 이 명령어를 알아야 한다.
5. 사용자 경험의 디테일
초보: "기능 되면 됐지"
경험자: "사용자가 불안해하지 않게 만들어야지"
로딩이 200ms 이하면 스피너 안 보여주기 (깜빡임 방지)
버튼 클릭 후 disabled 처리
폼 제출 후 성공 메시지
에러를 사용자 친화적 언어로
핵심: AI는 시키는 것은 다 잘한다
Claude Code의 능력:
Git 명령어: 95% 자동화 (브랜치 개념만 알면 됨)
기본 CRUD 코드: 90% 자동화
Firebase 연동: 85% 자동화
보안 규칙: 70% 도움 (구체적으로 요청하면)
성능 진단: 60% 도움 ("lighthouse 돌려줘" 같은 명령어 필요)
문제는 무엇을 시켜야 하는지 모른다는 것이다.
실제 사용 예시를 보면:
"questions가 subcollection이면 안 될 것 같은데? questions는 나중에 forum이나 council에도 들어갈 수 있어"
이렇게 한국어로 자연스럽게 물어보면 AI가 데이터 구조를 잘 제안해준다. 하지만 "subcollection이 뭔지", "데이터 구조가 왜 중요한지" 알아야 이런 질문을 할 수 있다.
경험자가 필요한 진짜 이유
프로그래밍을 잘해서가 아니다. "체크리스트"가 머릿속에 있기 때문이다.
앱을 만들 때 자동으로 체크하는 것들:
로딩, 에러, Empty 상태 처리했나?
보안 규칙 설정했나?
Dev/Prod 환경 분리했나?
민감 정보 환경 변수로 뺐나?
.gitignore에 비밀키 제외했나?
에러 추적 도구(Sentry) 연동했나?
빌드 최적화 확인했나?
이 체크리스트를 알면, 각 항목마다 AI한테 시키면 된다. 모르면 시작조차 못한다.
비유로 이해하기
레스토랑을 연다고 생각해보자.
AI한테 시키면 잘 되는 것:
"테이블 10개 놓아줘": 완벽
"메뉴판 디자인해줘": 훌륭함
"주방 설비 배치해줘": 문제없음
하지만 실제로 식당을 오픈하려면:
운영 프로세스:
주문이 밀리면 어떻게 대응할지
재고가 떨어지면 어떻게 알릴지
손님이 동시에 몰리면 어떻게 처리할지
안전과 규정:
소화기, 비상구 표시
식품 위생 인증
영업 허가
고객 경험:
대기 시간 알려주기
주문 확인 피드백
문제 발생 시 안내
AI는 "소화기 놓아줘"라고 하면 완벽하게 놓는다. 근데 "소화기가 필요하다"는 걸 모르면 요청할 수 없다.
물론 AI에게 "레스토랑을 열도록 해줘"가 아니라 "레스토랑 운영과 최고의 고객 서비스를 위한 모든 디테일이 담긴 계획서를 만들어줘"라고 하면 상세한 계획이 나온다. 그걸 기반으로 레스토랑을 만들면 훨씬 좋은 레스토랑을 만들 수 있을 것이다.
앱 개발도 똑같다. Claude Code는 시키는 건 다 잘한다. 문제는 무엇을 시켜야 하는지 아는 것이다.
앞으로 어떻게 될까?
좋은 소식: AI는 빠르게 발전한다.
6개월 후 예상:
Edge case 자동 생성
기본 프로덕션 체크리스트
1년 후 예상:
보안 규칙 자동 생성
실시간 비용 예측
"이 버튼 누르면 API 호출하죠? 로딩 처리 추가할까요?" 같은 맥락 인식
2년 후 예상:
프로덕션 준비도 점수 (65%: 에러 핸들링 누락, 보안 규칙 미설정)
성능 문제 자동 탐지
하지만 여전히 사람이 결정할 것:
무엇을 만들지 (제품 비전)
왜 만드는지 (비즈니스 목표)
누구를 위한 건지 (사용자 페르소나)
핵심 경험이 무엇인지 (UX 전략)
시작하는 법
1. 기본 개념 학습
웹 개발 기초 강의 하나만 들어보자. 코딩을 배우는 게 아니라 "용어와 개념"을 익히기 위해서다.
알아야 할 핵심 개념:
State(상태)와 Props
동기/비동기 처리
클라이언트 vs 서버
인증과 권한
데이터베이스 구조 (NoSQL vs SQL)
2. 프로덕션 체크리스트 만들기
앱 만들 때마다 확인할 것:
기능 완성도:
로딩 상태 처리
에러 핸들링
Empty state UI
오프라인 대응
보안:
Firebase Security Rules
환경 변수 분리
API 키 보호
성능:
이미지 최적화
번들 사이즈
lighthouse 점수
배포 준비:
Dev/Prod 환경 분리
에러 트래킹 (Sentry)
Analytics
3. AI 활용법
좋은 프롬프트 패턴:
❌ 나쁜 예: "앱 만들어줘"
✅ 좋은 예: "Todo 앱 만들어줘. Firestore 사용, Optimistic update 구현, 로딩/에러/Empty state 처리, 오프라인 큐 관리"
❌ 나쁜 예: "보안 설정해줘"
✅ 좋은 예: "Firestore Security Rules 작성해줘. user는 자기 문서만 읽고 쓰기, admin은 모든 문서 접근 가능하게"
❌ 나쁜 예: "느려"
✅ 좋은 예: "lighthouse 돌려서 성능 병목 지점 찾아줘. LCP 2.5초 이하로 최적화해줘"
4. 실전 관찰
잘 만든 앱 써보면서:
로딩할 때 어떻게 표시하는지
에러 났을 때 어떻게 알려주는지
버튼 누르면 어떤 피드백이 있는지
Empty state가 어떻게 디자인됐는지
"왜 이게 좋지?"라고 질문하는 습관을 들이자.
결론
Claude Code는 혁명적인 도구다. 코드 작성은 80-95% 자동화할 수 있다.
하지만 "프로덕션 레디"까지는 아직 40-60% 수준이다. 나머지는 사람이 알아야 한다.
핵심은 "코딩 실력"이 아니라 "무엇이 필요한지 아는 것"이다.
Happy Path는 AI가 만든다.
Edge Case는 사람이 요청한다.
좋은 UX는 사람이 판단한다.
AI는 실행 속도를 100배로 만든다.
하지만 무엇을 실행할지는 여전히 사람이 정한다.
