Claude Code 소개

채널 아이콘
Anthropic 구독자 70,600명

요약

이 영상은 Claude Code라는 연구 미리보기(agentic coding tool)를 소개하며, Claude Code가 터미널에서 직접 코드베이스를 분석하고 수정을 돕는 과정을 시연합니다. Boris(엔지니어)와 Cat(제품 관리자)가 등장하여 Claude Code를 활용해 Next.js 앱의 채팅 관련 기능을 수정, 테스트, 빌드, 그리고 GitHub에 커밋하는 전 과정을 보여줍니다. 영상은 Claude Code의 자동 파일 탐색, 코드 변경 제안, 실행 테스트, 빌드 오류 수정 등 주요 기능을 강조하며, 실제 개발 환경에서의 사용 가능성을 설명합니다. 전반적으로 Claude Code가 개발자들의 작업 효율성을 크게 향상시킬 수 있음을 전달합니다.

주요 키워드

Claude Code 에이전트형 코딩 터미널 Next.js 코드 분석 테스트 빌드 오류 GitHub 연구 미리보기

하이라이트

  • 🔑 Claude Code가 연구 미리보기 형태로 출시되어, 터미널 내에서 코드 수정 프로세스를 자동화하는 모습을 보여줍니다.
  • ⚡️ 개발자 Boris와 제품 관리자 Cat이 등장하여, Next.js 앱을 대상으로 Claude Code를 활용한 작업 진행 과정을 시연합니다.
  • 📌 Claude Code는 파일 탐색, 코드 분석, 문제 해결 및 변경 제안을 자동으로 수행하여 코드베이스 이해를 돕습니다.
  • 🚀 테스트와 빌드 과정을 자동화하여, 기능 추가 후 발생할 수 있는 오류들을 신속히 수정하는 점을 강조합니다.
  • 🌟 최종적으로 변경 사항을 GitHub에 커밋 및 푸시하는 전체 프로세스를 통해, 실제 개발 워크플로우에의 통합 가능성을 보여줍니다.

용어 설명

Claude Code

터미널 내에서 작동하며, 코드 파일을 자동으로 탐색, 분석, 수정 및 테스트하는 에이전트형(agentic) 코딩 도구입니다.

Next.js

React 기반의 프레임워크로, 서버 사이드 렌더링 및 정적 사이트 생성을 지원하여 효율적인 웹 애플리케이션 개발을 돕습니다.

연구 미리보기 (Research Preview)

정식 출시 전, 제한된 기능과 대상 사용자에게 테스트 및 피드백을 받기 위한 초기 버전을 의미합니다.

[00:00:00] 소개 및 팀 소개

대화 시작과 함께 Boris와 Cat이 자기소개하며 Claude Code에 대해 간략히 언급합니다.

보리스와 캣이 자신을 소개하고, Claude로 코딩하는 것에 대한 즐거움을 표현합니다.
[00:00:17] Claude Code 출시 및 기능 개요

Claude Code가 연구 미리보기로 출시되며, 터미널에서 직접 작동하는 에이전트형 코딩 도구임을 설명합니다.

Claude Code를 연구 프리뷰로 출시한다고 발표하며, 이는 터미널에서 직접 Claude와 작업할 수 있는 에이전트 기반 코딩 도구입니다.
Next.js 앱 프로젝트를 Claude Code로 열어 코드베이스를 분석하고 설명받습니다.
[00:00:41] 코드 베이스 탐색 및 분석

Next.js 앱의 코드베이스를 Claude Code가 자동으로 읽고 분석하여, 구성 요소와 기능을 파악하는 과정을 보여줍니다.

타임라인 정보가 없습니다.

[00:01:15] 코드 수정 및 기능 추가

Claude Code가 사이드바 변경 및 새로운 채팅 버튼 추가 요청을 받아 파일을 자동으로 찾아 업데이트하는 작업을 시연합니다.

왼쪽 사이드바를 채팅 히스토리로 교체하고 새 채팅 버튼을 추가하는 작업을 Claude에게 요청합니다.
Claude가 변경사항을 적용하고 네비게이션 바를 업데이트하며, 저장 기능을 구현합니다.
[00:02:27] 테스트 실행 및 빌드 과정

추가된 기능에 대한 테스트를 진행하고, 빌드 오류를 수정하는 과정을 통해 Claude Code의 자동화 능력을 보여줍니다.

새로 추가된 기능들에 대한 테스트를 작성하고 실행하여 모든 테스트가 통과하는지 확인합니다.
앱을 컴파일하고 빌드 에러를 수정한 후, 변경사항을 GitHub에 커밋하고 푸시합니다.
[00:03:27] 커밋 및 GitHub 푸시

최종적으로 변경 사항을 요약, 커밋하고 GitHub에 푸시하는 과정을 통해 전체 플로우를 마무리합니다.

타임라인 정보가 없습니다.

우리 활짝 웃어야 하나요?
- 아니, 지금 하시는 대로- - 활짝 웃으면 좀 으스스해요.
그래서 제가 말하는 거예요.
저는 보리스고, 엔지니어입니다.
저는 캣이고, 제품 관리자입니다.
사람들이 Claude로 만드는 것들을 보는 게 즐거운데,
특히 코딩 분야에서요.
우리는 Claude를 모든 사람들을 위해 더 나은 코딩 도구로 만들고 싶습니다.
우리가 만든 도구들 중 하나를 오늘 공개하려고 합니다.
Claude Code를 연구 프리뷰로 출시합니다.
Claude Code는 에이전트 기반 코딩 도구로
터미널에서 직접 Claude와 작업할 수 있게 해줍니다.
실제 동작하는 예시를 보여드리겠습니다.
여기 Next.js 앱 프로젝트가 있습니다.
Claude Code 인스턴스에서 열어보겠습니다.
이제 Claude Code가
이 저장소의 모든 파일에 접근할 수 있습니다.
이 코드베이스에 대해 잘 모르는 상태인데,
고객 지원 상담원과 채팅하는
앱인 것 같네요.
Claude에게 이 코드베이스를 설명해달라고 해보겠습니다.
Claude가 먼저 상위 레벨 파일들을 읽고
더 깊이 파고들고 있습니다.
지금은 프로젝트의 모든 컴포넌트를 살펴보고 있어요.
좋아요, 여기 최종 분석이 나왔네요.
이제 왼쪽 사이드바를 채팅 히스토리로 교체하고
채팅 히스토리로 바꾸고,
새로운 채팅 버튼도 추가하려고 합니다.
Claude에게 도움을 요청해보겠습니다.
우리가 특정 파일이나 경로를 지정하지 않았는데도
Claude가 이미
스스로 업데이트할 파일들을 찾고 있습니다.
Claude는 자신의 사고 과정도 보여줄 수 있어서
이 문제를 어떻게 해결하기로 결정했는지 볼 수 있습니다.
Claude가 이 변경사항들을 수락할지 물어보네요.
네라고 하겠습니다.
이제 Claude가 네비게이션 바를 업데이트하고,
버튼과 아이콘도 추가하고 있습니다.
다음으로는 로직을 업데이트해서
저장 상태가 제대로 작동하도록 확인하고 있습니다.
잠시 후에 Claude가 작업을 완료했습니다.
수행한 작업의 요약입니다.
앱을 한번 살펴볼까요.
새로운 채팅 버튼과
왼쪽의 새로운 채팅 히스토리 섹션이 보이네요.
이전 채팅을 저장한 상태에서
새로운 채팅을 시작할 수 있는지 확인해보겠습니다.
새 채팅 버튼도 테스트해보죠.
좋아요, 모두 잘 작동하네요.
이제 Claude에게 테스트를 추가해달라고 해서
우리가 추가한 기능들이 제대로 작동하는지 확인해보겠습니다.
Claude가 명령어 실행 권한을 요청하네요.
허용하겠습니다.
Claude가 테스트를 실행하기 위해 변경사항을 만들고 있습니다.
결과를 받아본 후에,
모든 테스트가 통과할 때까지 계획을 계속 진행합니다.
몇 분 후에, 모든 게 잘 된 것 같네요.
이제 Claude에게 앱을 컴파일하고
빌드 에러가 있는지 확인해달라고 하겠습니다.
어떤 걸 찾는지 보죠.
Claude가 빌드 에러를 찾아내고 지금 수정하고 있습니다.
그리고 다시 빌드를 시도합니다.
잘 될 때까지 계속할 거예요.
이제 마무리를 해볼까요.
Claude에게 변경사항을 커밋하고
GitHub에 푸시하라고 하겠습니다.
Claude가 우리의 변경사항에 대한 요약과 설명을 만듭니다.
그리고 GitHub에 변경사항을 푸시할 거예요.
자, 이게 Claude Code가 할 수 있는 것의 예시였습니다.
사람들이 이걸로 무엇을 만들어낼지 정말 기대됩니다.