Claude Code 입문 실습 — 할 일 관리 앱 만들며 배우는 설치·빌드·디버깅·리팩터링

핵심 메시지

• Claude Code는 코드 질문에 답만 하는 챗봇이 아니라, 프로젝트 폴더 안에서 파일을 읽고 만들고 수정하고 명령을 실행하는 코딩 파트너다.
• 기본 권한 흐름에서 Claude Code는 파일 편집·명령 실행·네트워크 요청 전에 사용자에게 승인을 구하므로 통제권은 개발자에게 있다.
• 결과 품질은 지시의 명확성에 크게 좌우된다. '앱 만들어줘' 같은 모호한 요청보다 기능을 구체적으로 적은 지시가 훨씬 좋은 결과를 낸다.
• 동작하는 코드를 얻은 뒤에도 파일을 열어 이해하고 테스트하며, 필요하면 동작을 바꾸지 않고 가독성만 높이는 리팩터링을 요청하는 습관이 중요하다.
• 버그는 '앱이 안 돼요' 대신 '작업 추가 후 입력창이 안 비워져요'처럼 구체적으로 설명해야 Claude가 정확한 파일과 원인을 짚어 준다.

쉽게 이해하기

강의는 개발 방식이 이미 바뀌었다는 통계로 시작한다. 스택오버플로 2025 개발자 설문에서 84%가 코딩 보조 도구를 쓰거나 쓸 계획이고 51%는 매일 사용한다고 답했다는 것이다. Claude Code는 앤스로픽의 도구로, 터미널과 코드 에디터 안에서 실제 프로젝트 파일과 직접 연결돼 아이디어를 동작하는 코드로 옮겨 준다.

발표자는 Claude Code의 진짜 가치가 '모든 걸 대신 해 준다'가 아니라 계획·작성·디버깅·개선·이해를 도우면서도 사용자가 통제권을 유지하게 해 주는 데 있다고 강조한다. 그래서 코딩은 한 줄씩 타이핑하는 일이 아니라, 올바른 도구를 안내하고 결과를 검토하며 로직을 이해해 아이디어를 자신 있게 완성하는 일로 바뀐다고 말한다.

실습 대상은 할 일 관리 앱이다. 작업 추가·완료·삭제와 브라우저 저장, 남은 작업 수를 보여 주는 카운터 기능을 갖는다. 프로젝트 폴더에는 구조를 담당하는 index.html, 디자인을 담당하는 style.css, 동작을 담당하는 script.js 세 파일이 들어간다. HTML은 구조, CSS는 디자인, JS는 동작이라는 웹의 기본 골격을 자연스럽게 익히도록 구성돼 있다.

강의는 먼저 코드를 달라고 하지 말고 '어떤 파일이 왜 필요한지 초보자 눈높이로 설명해 달라'고 물은 뒤, 구체적인 요구사항을 담은 프롬프트로 세 파일의 코드를 각각 생성한다. 생성된 코드는 VS Code에 같은 이름의 파일로 붙여 넣고 저장한 다음, 백엔드 없이 브라우저에서 index.html을 열어 작업 추가·완료 취소·새로고침 후 저장 유지까지 직접 테스트한다.

후반부는 이해와 개선에 집중한다. Claude에게 앱을 사용자 관점에서 설명하게 하고, 디자인만 손보는 요청으로 CSS를 개선한 뒤 동작이 깨지지 않았는지 다시 확인한다. 이어 '작업 추가 후 입력창이 비워지지 않는' 버그를 구체적으로 설명해 원인 줄을 찾아 고치고, 빈 공백만 입력한 작업을 막는 처리까지 확인한 뒤, 동작을 바꾸지 않고 함수 이름과 구조를 정리하는 리팩터링으로 마무리한다.

주요 인사이트

• 발표자는 Claude Code를 '학습의 대체물'이 아니라 '학습을 돕는 파트너'로 못박는다. 코드를 검토하고 로직을 이해하고 직접 테스트하는 과정을 사용자가 계속 맡아야 한다는 것이다.
• 버그를 고칠 때 단순히 수정만 받지 말고 '왜 이 문제가 생겼는지' 설명을 요청하라는 조언이 인상적이다. 그래야 오류를 고치는 동시에 그 뒤의 개념까지 배우게 된다.
• 입력창이 안 비워지는 버그의 원인을 input.value(값 읽기만 함)와 input.value = ''(값을 빈 문자열로 설정)의 차이로 짚어 주며, 작은 코드 한 줄이 동작을 어떻게 바꾸는지 구체적으로 보여 준다.
• localStorage로 작업을 저장하고 JSON.stringify로 텍스트화해 저장, JSON.parse로 다시 불러오는 흐름을 설명해, 새로고침 후에도 작업이 남는 이유를 초보자가 이해하도록 돕는다.
• 큰 프로젝트에서는 claude.md 파일에 프로젝트 목적·파일 구조·규칙·테스트 절차를 정의해 두라는 실무 팁을 제시하며, '작게 시작하고 명확히 지시하고 승인 전에 검토하고 단계마다 테스트'하라는 원칙으로 정리한다.

자주 묻는 질문

관련 AI 소식