Claude Code 실전 데모

원본 강의 설명

(설명이 간단한 단독 영상)

설명

Claude Code에는 파일 읽기, 코드 작성, 명령 실행, 디렉터리 관리 등 일반적인 개발 작업을 처리하는 포괄적인 기본 제공 도구 세트가 포함되어 있습니다. 하지만 Claude Code를 진정으로 강력하게 만드는 것은, 이러한 도구들을 지능적으로 조합해 복잡하고 여러 단계로 이루어진 문제를 해결한다는 점입니다.

자막 기반 자료

Claude는 도구(tool)를 다루는 데 능숙하며, Claude Code를 사용하면 쉽게 확장이 가능합니다. 이 주장엔 자연스럽게 약간의 의구심이 들텐데, 그래서 몇 가지 빠른 데모를 보겠습니다.

Claude Code의 기본 도구

표에는 Claude Code에서 기본으로 제공되는 도구들이 나열되어 있습니다. 파일 읽기, 파일 쓰기, 명령어 실행 등 Claude Code는 여러분이 기대할 만한 모든 기능을 갖추고 있습니다. 이제 Claude Code를 사용한 데모 몇 가지를 볼 텐데, 각 데모에서 Claude는 표에 있는 도구 세트를 매우 지능적인 방식으로 활용합니다. 그리고 그중 한 데모(데모 3)에서는 Claude Code에 MCP 서버를 연결해 브라우저 제어 같은 새 도구를 추가로 붙이는 모습도 함께 보여드립니다. Claude Code의 기본 도구 외에 외부 도구를 확장하는 것이 얼마나 쉬운지 확인하시게 될 겁니다.

그럼 지금부터 데모 및 사례를 통해 별다른 설정 없이도 Claude Code가 무엇을 할 수 있는지뿐만 아니라, 얼마나 쉽게 Claude Code에 새로운 기능을 확장할 수 있는지도 함께 살펴봅시다.

데모 1: Chalk 라이브러리 성능 최적화

첫 번째 작업입니다. Claude Code에게 chalk 라이브러리의 성능 이슈를 찾아 최적화해달라고 요청할 것입니다.

chalk 라이브러리는 자바스크립트 패키지입니다. 아주 작은 라이브러리로, 단 하나의 단순한 목적만 가지고 있습니다. 텍스트를 멋지게 포맷된 색상으로 출력해주는 것이 전부입니다. 텍스트에 색상, 배경, 서식 등을 입힐 수 있죠.

정말 단순하고 사소한 기능을 하는 패키지같아 보이지만, 사실은 이렇습니다. 이 패키지는 자바스크립트 생태계 전체에서 다섯 번째로 가장 많이 다운로드된 패키지입니다. 지난주에만 4억 2,900만 회 다운로드를 기록할 정도입니다. 매우 광범위하게 사용되는 패키지이죠. 이 패키지 내부의 무엇이라도 최적화할 방법을 찾을 수 있다면, 충분히 노력할 가치가 있을 것입니다. 그래서 저는 Claude에게 다음과 같이 요청할 것입니다.

벤치마크를 실행해. 가장 성능이 나쁜 케이스를 식별해. 프로파일링 도구로 왜 그 케이스들이 느린지 파악하고 수정해. Claude는 이 문제를 지능적으로 해결하기 위해 매우 다양한 도구를 사용하게 됩니다. 진행 상황을 추적할 To-Do 리스트를 작성하고, 명령어를 실행해 벤치마크를 돌리고, 특정 케이스에 집중하기 위한 파일을 작성하며, CPU 프로파일러를 사용해 해당 케이스가 왜 느린지 이해한 뒤, 개선 사항을 구현합니다.

결과적으로 이 라이브러리의 특정 작업에서 처리량이 3.9배 향상되는 결과를 얻게 됩니다.

데모 2: Jupyter Notebook으로 데이터 분석

다음은 Claude가 다양한 도구 호출을 엮어 복잡한 작업을 얼마나 잘 완수하는지 보여주는 또 다른 예시입니다.

CSV 파일 안에 데이터셋이 있는데, 이 안의 모든 데이터는 비디오 스트리밍 플랫폼의 다양한 사용자 정보를 담고 있습니다. Claude에게 일반적인 분석을 수행하고, 이 플랫폼의 이탈(churn) 원인을 식별해달라고 요청할 것입니다. 그리고 이 모든 분석은 Jupyter notebook 안에서 하라고 명령할 것입니다. 데이터셋은 이렇게 생겼습니다.

이는 효과적인 도구 사용이 정말 중요한 좋은 예시입니다. 단순히 Claude에게 Jupyter notebook에 코드를 작성하게 하는 것만으로는 목표를 달성하기 충분하지 않습니다. Claude는 이 과정에서 서로 다른 cell을 열어 코드를 실행하고 그 실행 결과를 보면서 목표를 달성합니다. 즉, Claude는 Jupyter notebook에서 데이터를 처음 살펴본 뒤, 다양한 cell들을 각기 맞춤화하여 세부 사항을 좁혀가며 목표 달성을 위한 분석을 수행할 수 있다는 의미입니다.

데모 3: Playwright MCP로 UI 스타일링 개선

이번에는 Claude Code에 새로운 도구 세트에 대한 접근 권한을 부여해 기능을 확장하는 작업의 예시를 보여드리겠습니다.

이 앱은 화면 왼쪽 채팅창에 설명을 입력하면, 설명을 기반으로 UI 컴포넌트를 생성해줍니다. 생성된 컴포넌트는 오른쪽에 표시됩니다. 초기 앱은 멋진 컴포넌트를 꽤 쉽게 생성하지만, 왼쪽의 채팅 인터페이스와 상단의 헤더는 그다지 보기 좋지 않습니다. 그래서 Claude Code를 사용해 채팅 인터페이스 스타일을 개선하려 합니다. 단순히 채팅 인터페이스와 헤더의 스타일링을 고쳐달라고 요청해도 Claude는 잘 해낼 것입니다. 하지만 목표는 Claude Code에 기능을 얼마나 쉽게 추가할 수 있는지 보여드리는 것입니다.

목표 달성을 위해 Claude Code에 스타일링 작업을 할당함과 동시에 Playwright MCP 서버가 제공하는 새로운 도구 세트에 대한 접근 권한도 부여할 것입니다. (Playwright MCP에 대해서는 나중에 자세히 다룹니다.) Playwright MCP는 Claude가 직접 브라우저를 열고 제어할 수 있게 해줍니다. 이 과정이 실제로 어떻게 보이는지 살펴보겠습니다. Claude에게 앱의 스타일링을 개선해달라고 요청하면서 브라우저를 활용하라고 합시다.

그러면 Claude는 화면 오른쪽에 브라우저를 열고, 앱으로 이동한 뒤, 현재 스타일링을 보기 위해 스크린샷을 찍고, 스타일링을 업데이트합니다.

작업이 완료되면 Claude에게 페이지의 스크린샷을 다시 찍어달라고 요청해 디자인을 몇 차례 반복 개선해서 정말 인상적인 디자인을 만들 수도 있습니다. 그리고 머지않아 꽤 괜찮아 보이는 결과물을 얻게 됩니다.

데모 4: GitHub 통합과 자동 PR 리뷰

마지막으로 보여드리고 싶은 데모가 있습니다. 조금 전에 말씀드린 내용을 기억해주세요. Claude가 도구를 매우 잘 활용할 수 있다는 점이, 앞으로 Claude Code가 여러분과 여러분의 팀과 함께 성장할 수 있게 해주는 핵심입니다. Claude는 GitHub와 매우 밀접하게 통합되어 있습니다. Claude Code를 GitHub Action 안에서 실행되도록 설정할 수 있는데, 이 경우 Claude Code는 풀 리퀘스트 생성이나 이슈 내에서 직접 멘션되었을 때와 같은 특정 이벤트에 따라 자동으로 실행됩니다.

Claude Code가 GitHub 위에서 실행될 때는 여러분의 코드를 보고 실행할 수 있을 뿐 아니라, GitHub와 상호작용할 수 있는 새로운 도구 세트(코멘트 작성, 커밋 생성, 풀 리퀘스트 생성 등)에 접근할 수 있습니다. 이 점을 활용하면 풀 리퀘스트를 자동으로 리뷰할 수 있습니다.

시나리오: PII(개인 식별 정보) 노출 방지

예시를 보여드리기 전에 작은 시나리오를 설정해보겠습니다. AWS에 인프라를 구축하고 있고, 모든 인프라가 GitHub에 커밋되어 저장된 Terraform 파일 세트 안에 정의되어 있다고 상상해봅시다. 모든 인프라가 Terraform 파일에 정의되어 있기 때문에, Claude Code는 우리 인프라를 통해 정보가 어떻게 흐르는지 매우 잘 이해할 수 있습니다. 이 설정에서 DynamoDB 테이블이 하나 있다고 가정해봅시다. (모르신다면, DynamoDB는 일반적인 데이터베이스 테이블과 비슷한 것입니다.) 그 안에 사용자에 대한 다양한 정보(가령 시청한 콘텐츠와 가입일 등)를 저장하고 있습니다.

그리고 어떤 이유로 그 시청 콘텐츠와 가입일 정보만을 내부 마케팅 팀과 외부 마케팅 팀 양쪽에 공유해야 하는 경우가 생겼다고 합시다. 즉, 다른 회사에게 버킷에 있는 데이터에 접근할 수 있게 해야 한다는 뜻입니다. 그러므로 시간이 지나면서 그 버킷에 어떤 정보가 쓰이는지 항상 인지하는 것이 매우 중요합니다. 매일 밤 Lambda 함수가 테이블에 추가된 모든 사용자를 가져와 시청 콘텐츠와 가입일만 추출한 뒤, 내부 및 외부 마케팅 팀이 접근할 수 있도록 S3 버킷에 저장합니다. 이제 몇 달 뒤, 내부 마케팅 팀이 이 S3 버킷에 이메일도 함께 저장해달라고 요청한다고 가정해봅시다.

그래서 우리는 Lambda 함수에 사용자의 이메일을 가져와 버킷에 저장하는 단 한 줄의 코드를 추가합니다. 그런데 몇 달 뒤이다 보니, 이 S3 버킷이 외부 마케팅 파트너와 공유되고 있다는 사실을 까맣게 잊었을 수도 있습니다. 그렇다면 이 시점에서 우리는 외부 회사가 접근 가능한 버킷에 개인 식별 정보(PII, Personally Identifiable Information)를 넣고 있는 셈입니다. 이건 절대 해서는 안 될 일이지만, 동시에 이런 실수는 실제로 일어나며, 이 S3 버킷에 정확히 무슨 일이 일어나는지 잘 파악하지 못한다면 잡아내기가 꽤 어렵습니다. 그런데 Claude Code는 풀 리퀘스트 안에서 이런 종류의 시나리오를 꽤 쉽게 잡아낼 수 있습니다. 특히 우리의 모든 인프라가 Terraform 파일 안에 정의되어 있기 때문입니다.

실제 예시

방금 다이어그램에서 보여드린 프로젝트를 실제로 구축한 뒤, Lambda 함수 안에 사용자의 이메일을 추가하는 풀 리퀘스트를 만들었습니다. 변경한 코드는 단 한 줄로, 모든 사용자의 이메일을 가져와 버킷에도 추가하라는 내용입니다.

Claude는 현재 인프라를 매우 잘 이해하고 있어서, 자동화된 리뷰 안에서 이 풀 리퀘스트의 모든 변경 사항을 살펴보고, 인프라가 정확히 어떻게 동작하는지 파악한 뒤, 제출된 PR이 PII를 파트너에게 노출하고 있다는 점을 식별해냈습니다.

데이터 흐름과 발생하는 정확한 단계들을 나열하고, 이 버킷이 어떻게 외부 파트너와 공유되는지에 대해 자세히 설명해주었습니다. 이런 종류의 이슈를 변경 사항을 배포한 후가 아니라 개발 단계에서 잡아낼 수 있다는 점은 Claude Code의 GitHub 통합을 사용함으로써 얻는 놀라운 이점입니다. 나중에 이런 흐름을 정확히 어떻게 설정하는지 자세히 보여드릴 예정입니다.

마무리

이제 Claude Code가 도구를 활용하는 뛰어난 능력 덕분에 무엇을 할 수 있는지 잘 이해하셨으리라 생각합니다.

기억해주세요. Claude Code를 유연한 어시스턴트로 생각하셔야 합니다. 시간이 지남에 따라 여러분의 팀의 필요에 맞게 커스터마이징되고, 성장하고, 변화할 수 있는 어시스턴트로 말이죠.