클로드코드 입문: 바이브코딩 초보자를 위한 50분 할 일 앱 실습

클로드코드 입문은 자연어로 작은 할 일 앱을 하나 만들고, 실행 화면에서 기능을 확인한 다음 수정과 복구까지 해 보는 것으로 시작하길 권합니다. "코드를 생성했습니다"라는 답변만으로는 잘 됐는지 알기 어려워요. 그보다 추가 버튼이 실제로 작동하는지, 빈 입력이 목록에 들어가지 않는지를 먼저 보세요. 초보자도 결과를 직접 판단할 수 있는 기준이거든요.

50분은 단계별로 나눠 본 실습 배분안이에요. 설치나 오류 수정에 시간이 더 걸리면 충분히 확인하고 넘어가도 됩니다. 이 실습에서 챙길 건 속도가 아니라, 원하는 동작과 실제 결과를 비교해 보는 습관입니다.

0~10분: 어떤 방식으로 쓰고, 어느 폴더에서 작업할지 정하기

Claude Code는 프로젝트 파일을 읽고 수정하며 명령까지 실행하는 코딩 도구입니다. 선택한 프로젝트 안에서 작업하기 때문에, 첫 단계는 AI가 손댈 폴더를 정확히 고르는 일이에요.

처음이라면 CLI를 따로 설치하지 않아도 되는 데스크톱 앱의 Code 탭이 가장 부담이 적습니다. 이 경로는 유료 구독이 있어야 쓸 수 있으니, 이용 가능한 플랜은 공식 가격표에서 확인해 두세요.

과금 구조는 처음에 헷갈리기 쉬운 부분입니다. Claude와 Claude Code는 구독 이용 한도를 함께 쓰고, API 인증을 쓰는 경로에는 별도 과금이 붙어요. 기존 개발 환경에 ANTHROPIC_API_KEY가 설정돼 있다면 로그인할 때 어떤 인증 방식이 쓰이는지 꼭 확인하세요.

1. 데스크톱 앱에 로그인하고 Code 탭을 엽니다.
2. 실습용 폴더를 따로 준비해 작업 대상으로 선택합니다.
3. 현재 권한 모드에서 파일 수정과 명령 실행을 어디까지 허용하는지 확인합니다.

승인창도 오해가 잦은 지점이에요. 수정할 때마다 매번 승인창이 뜰 거라고 생각하기 쉽지만, 승인 방식은 권한 모드와 설정에 따라 달라집니다. 터미널이 익숙하다면 공식 시작 안내에 나온 설치 경로를 골라도 괜찮습니다.

10~43분: 완료 조건부터 말하고, 앱을 띄워 직접 눌러 보기

10~18분에는 디자인보다 완료 조건을 먼저 정하세요. 범위는 외부 서비스 없이 작동하는 작은 웹 화면 하나면 충분합니다. 새로고침 후에도 목록을 남기려면 따로 구현해야 하니, 이번에는 새로고침하면 초기화된다고 아예 적어 두는 편이 깔끔해요.

선택한 실습 폴더에 할 일 목록 웹 앱을 만들어 주세요. 할 일 추가·완료 표시·삭제 기능이 필요합니다. 아무것도 입력하지 않거나 공백만 입력하면 항목이 추가되지 않게 해 주세요. 새로고침하면 목록은 초기화되도록 하고, 외부 서비스 연결 없이 로컬에서 작동하게 해 주세요. 구현 후에는 화면을 여는 방법과 각 기능을 확인하는 방법을 알려 주세요.

원하는 기능만이 아니라 무엇을 실패로 볼지까지 함께 알려 주는 게 이 요청의 핵심입니다.

18~33분에는 구현 결과를 로컬, 즉 내 컴퓨터에서 실행해 화면을 확인합니다. 안내받은 실행 방법을 따르면 되는데, 명령 실행 승인이 요청되면 대상 폴더와 실행 목적만큼은 읽고 넘어가세요. 방법이 불분명할 때는 현재 환경에서 필요한 순서를 다시 설명해 달라고 하면 돼요.

화면이 열렸다면 33~43분은 직접 조작하는 시간입니다. 아래 순서대로 확인하면 기능끼리 서로 영향을 주는 문제도 함께 살피기 좋아요.

1. 할 일을 입력하고 추가했을 때 목록에 표시되는지 확인합니다.
2. 완료 기능을 눌러 해당 항목의 상태가 바뀌는지 봅니다.
3. 삭제 기능으로 선택한 항목이 사라지는지 살펴봅니다.
4. 빈 입력과 공백만 있는 입력으로는 항목이 생기지 않는지 확인합니다.
5. 항목을 추가한 뒤 새로고침해 목록이 초기화되는지 봅니다.

문제가 생겼을 때 "안 돼요"에서 멈추지 마세요. 재현 순서, 기대 결과, 실제 결과를 함께 전달해야 합니다. 어떤 입력을 넣고 무엇을 눌렀는지 알려 줘야 어디를 고칠지가 분명해지거든요. 수정이 끝나면 실패했던 조건과 함께 추가·완료·삭제도 다시 눌러 보고, 다른 동작에 영향이 없는지 살펴보세요.

43~50분: 되돌리는 법을 익히고, 다시 여는 법을 남기기

마지막에는 변경된 파일 목록과 각 파일의 역할을 짧게 설명해 달라고 요청합니다. 코드를 전부 이해하려고 애쓸 필요는 없어요. 화면과 동작에 관련된 파일이 어디 있는지 파악하는 정도면 충분합니다.

복구 연습은 화면 제목처럼 작은 수정 하나로 하는 게 좋습니다. Claude Code에 파일 편집으로 제목을 바꿔 달라고 요청한 뒤, /rewind에서 수정 전 시점을 골라 파일 변경을 되돌리세요. 화면을 다시 열어 제목이 원래대로 돌아왔는지 보면 복구 결과도 직접 판단할 수 있어요.

여기서 한 가지는 알아 두셔야 합니다. 이 기능은 추적된 변경을 대상으로 하기 때문에, Bash 명령으로 생긴 미추적 변경까지 되돌리지는 못해요. 복구 범위와 선택 항목은 공식 체크포인트 안내에서 확인하세요.

끝으로 실습 폴더 위치와 앱 실행 방법을 짧은 문서로 남겨 달라고 요청합니다. 운영체제, 설치 방식, 버전까지 적어 두면 다음에 환경 차이를 살피기가 한결 수월하고요. 안내대로 앱을 다시 열어 보고 실제로 걸린 시간을 기록해 두면, 다음 실습을 어디서부터 이어갈지도 분명해집니다.