바이브 코딩 실전 - Cline으로 할 일 앱 처음부터 끝까지 만들기 (11편)

바이브 코딩 실전 - Cline으로 할 일 앱 처음부터 끝까지 만들기 (11편)

정보 기준: 2026년 9월 / 메인 도구: Cline v3.8x / 언어: JavaScript (웹앱)

9편(.clinerules), 10편(MCP)까지 실무·고급 기능을 다뤘습니다. 이번 편은 지금까지 배운 모든 걸 종합한 실전 프로젝트입니다.

 

이론은 충분히 배웠으니, 이제 실제로 앱 하나를 완성해봅시다. 할 일 관리 앱(To-do App) 을 처음부터 끝까지 Cline과 함께 만듭니다. 코딩을 전혀 몰라도 따라올 수 있습니다. 이게 바로 "바이브 코딩"의 진짜 모습입니다.

• 오늘 만들 것 (기능 + 준비물)
• 1단계: Plan 모드로 설계
• 2단계: Act 모드로 뼈대 만들기
• 3단계: 대화하며 다듬기 (반복!)
• 4단계: 문제 생기면 이렇게
• 완성! 그리고 다음 단계

 

오늘 만들 것: 할 일 관리 앱

먼저 무엇을 만들지 정리합니다.

만들 기능

✔ 할 일 추가 / 삭제
✔ 완료 체크 (취소선)
✔ 브라우저에 자동 저장
✔ 예쁜 디자인

쓸 기술 (배운 것들!)

• Plan/Act 모드 (6편)
• 멀티파일 편집 (7편)
• .clinerules 규칙 (9편)
• 디버깅 (8편)

준비물은 VS Code + Cline 설치, 모델 연결 완료(1~4편)면 됩니다. 코딩을 몰라도 됩니다. 이번엔 웹앱이라 JavaScript를 쓰지만, 코드를 직접 쓸 일은 없습니다.

 

1단계: Plan 모드로 설계

6편에서 배운 대로, 바로 만들지 말고 먼저 계획부터 세웁니다.

Plan 모드에서 이렇게 요청합니다.

할 일 관리 웹앱을 만들 거야. 
추가/삭제/완료체크, localStorage 저장, 
모던한 디자인으로. 먼저 계획을 세워줘

Cline이 계획을 제시합니다. (검토하세요!)

"index.html(구조), style.css(디자인), app.js(로직) 
3개 파일로 만들고, localStorage로 데이터 저장할게요. 
이렇게 진행할까요?"

여기서 마음에 안 드는 부분이 있으면 "이 부분 바꿔줘" 라고 조율합니다. 예를 들어 "다크 모드도 넣어줘"라고 하면 계획에 반영됩니다. 이 단계에서 방향을 제대로 잡는 게 핵심입니다. 계획이 좋으면 결과도 좋습니다.

 

2단계: Act 모드로 뼈대 만들기

계획이 마음에 들면 Act 모드로 전환합니다. 이제 실제 코드가 생성됩니다.

Cline이 3개 파일을 만듭니다.

index.html → 화면 구조 (입력창, 목록, 버튼)
style.css  → 디자인 (색상, 레이아웃)
app.js     → 동작 로직 (추가/삭제/저장)

진행 방식: Cline이 파일을 하나씩 만들며 코드를 작성합니다. 각 단계마다 "이 파일 만들까요?"라고 승인을 요청하죠. 7편에서 배운 멀티파일 작업입니다.

 

완성되면 index.html을 브라우저로 열어서 확인합니다. Cline에게 "브라우저로 열어줘"라고 하면 그것도 해줍니다(10편 MCP/Computer Use).

 

코드를 몰라도 승인만 하면 앱이 만들어집니다. 이게 신기한 지점이죠. 화면에 할 일을 입력하고 추가 버튼을 누르면 목록에 뜨는, 진짜 작동하는 앱이 눈앞에 나타납니다.

 

3단계: 대화하며 다듬기 (반복!)

여기가 바이브 코딩의 핵심입니다. 한 번에 완벽하게 안 나와도 괜찮습니다. 대화하며 다듬어갑니다.

이렇게 하나씩 요청합니다.

"완료된 항목은 회색에 취소선 그어줘"     → 바로 수정!
"할 일 개수를 상단에 표시해줘"           → 기능 추가!
"버튼 색을 좀 더 예쁘게, 둥근 모서리로"   → 디자인 개선!
"엔터 키로도 추가되게 해줘"             → 편의 개선!

이렇게 하나씩 말하면서 내가 원하는 앱으로 완성해갑니다. 마치 디자이너에게 "여기 색 바꿔주세요", "이 기능 넣어주세요"라고 하는 것처럼요.

 

팁: 한 번에 여러 개를 요청하기보다, 하나씩 요청하고 확인하는 게 좋습니다. 그래야 뭐가 바뀌었는지 명확하고, 문제가 생겨도 원인을 찾기 쉽습니다.

 

4단계: 문제 생기면 이렇게

만들다 보면 버그가 생기거나 막힐 수 있습니다. 8편(디버깅)에서 배운 대로 대처합니다.

버그가 생겼을 때

"삭제 버튼이 안 눌려요. @app.js 확인하고 고쳐줘"

엉뚱하게 갔을 때

체크포인트로 되돌리고 더 구체적으로 다시 요청

이해 안 될 때

"이 코드가 뭘 하는지 초보도 알게 설명해줘"

안전장치

중간중간 git 커밋! 잘못돼도 되돌릴 수 있어요

특히 마지막 git 커밋이 중요합니다. 앱이 잘 작동하는 지점마다 커밋해두면, 나중에 뭔가 망가져도 그 지점으로 돌아갈 수 있습니다. "잘 되던 버전"을 저장해두는 안전벨트죠.

 

막히는 걸 두려워하지 마세요. AI 코딩은 원래 대화하며 문제를 풀어가는 과정입니다.

 

완성! 그리고 다음 단계

축하합니다! 첫 앱을 만들었습니다. 여기서 더 나아가는 방법입니다.

기능 더 추가

마감일, 우선순위, 카테고리, 검색 기능 등 (다 대화로!)

인터넷에 올리기

"이 앱을 GitHub Pages로 배포하는 법 알려줘"

만든 앱을 실제 인터넷에 올려서 다른 사람과 공유할 수 있습니다. Cline이 배포 방법도 단계별로 안내합니다.

다른 앱 도전

계산기, 메모장, 가계부... 같은 방식으로 뭐든!

핵심 깨달음: 코드를 몰라도 아이디어만 있으면 앱을 만들 수 있다! 이게 이 시리즈가 전하고 싶었던 메시지입니다. 완벽한 코드가 아니어도, 내가 원하는 걸 대화로 설명하면 Cline이 만들어줍니다.

 

마무리

이번 실전 프로젝트의 핵심입니다.

1. Plan으로 설계 먼저 — 방향을 제대로
2. Act로 뼈대 생성 — 승인만 하면 앱 완성
3. 대화하며 다듬기 — 한 번에 완벽 안 나와도 OK
4. 막히면 디버깅 — @파일, 되돌리기, git 커밋
5. 코드 몰라도 앱 완성 — 아이디어가 핵심

지금까지 배운 모든 기능(Plan/Act, 멀티파일, .clinerules, 디버깅)이 이 하나의 프로젝트에 다 들어갔습니다. 이제 여러분은 Cursor 없이도, 무료로, VS Code에서 진짜 앱을 만들 수 있습니다.

 

다음 편은 이 시리즈의 마지막입니다. 고급 워크플로우와 비용 최적화를 다루며, 전문가처럼 Cline을 효율적으로 쓰는 법으로 시리즈를 마무리합니다.

 

여러분이 만든 첫 앱이나, 만들고 싶은 앱 아이디어가 있으면 댓글로 공유해주세요!