클로드 코드 완벽 가이드: 한 영상으로 제로에서 프로까지 (2025)

Eric Tech 구독자 12,500명

요약

이 영상은 Claude Code를 로컬 머신과 VS Code에 설치해 바로 활용하는 과정을 단계별로 안내합니다. `/init` 명령으로 코드베이스를 자동 분석해 시스템 메시지 파일을 생성하고, 파일 참조·이미지 처리·모델 확인 등 핵심 기능 사용법을 소개합니다. 사용자 정의 명령어로 React 컴포넌트 단위 테스트를 자동화하고, 멀티 에이전트로 UI 디자인 변형을 병렬 생성하는 실전 팁을 제공합니다. 마지막으로 YOLO 모드를 통해 권한 요청을 건너뛰는 방법과 안전한 버전 관리 전략을 제안합니다.

주요 키워드

Claude Code 시스템 메시지(claw.md) 커스텀 명령어 멀티 에이전트 YOLO 모드 단위 테스트 파일 참조 프로젝트 초기화 버전 관리 CLI

하이라이트

🔑 설치 및 로그인: NodeJS 18 이상 환경에서 npm으로 Claude Code를 설치하고, 프로 플랜 구독을 통해 인증 절차를 완료합니다.
⚡️ 프로젝트 초기화: `/init` 명령으로 코드베이스 구조와 Readme, 아키텍처 등을 분석해 `claw.md` 시스템 메시지 파일을 자동 생성합니다.
🌟 파일 및 이미지 참조: 터미널 또는 VS Code에서 파일 경로 드래그·@기호 입력으로 소스 파일을, 클립보드 이미지를 붙여넣어 스크린샷까지 AI에게 전달할 수 있습니다.
🚀 사용자 정의 명령어: Markdown으로 작성한 프롬프트를 기반으로 React 컴포넌트 단위 테스트를 자동 생성하는 커맨드를 만들어 반복 워크플로우를 효율화합니다.
📌 멀티 에이전트 전략: UI 디자인 변형 커맨드 실행 시 여러 서브 에이전트를 병렬로 실행해 다양한 네이밍된 버전을 순식간에 생성합니다.
🎯 YOLO 모드: `--dangerously-skip-permissions` 옵션으로 매번 편집 승인 요청을 생략하되, Git 버전 관리로 안전하게 변경 사항을 추적합니다.

용어 설명

Claude Code

Anthropic의 대형 언어 모델 기반 코딩 도우미로, 터미널과 코드 에디터 환경에서 AI가 코드 분석·생성·자동화를 지원합니다.

/init

Claude Code의 초기화 명령어로, 프로젝트 파일을 읽어들여 `claw.md` 시스템 메시지 파일을 생성합니다.

/mod

현재 사용 중인 AI 모델 버전을 확인하거나 변경할 때 사용하는 Claude Code 명령어입니다.

시스템 메시지 파일(claw.md)

프로젝트의 핵심 정보(아키텍처, 기술 스택, DB 스키마 등)를 담아 매 세션마다 AI가 컨텍스트로 활용하는 파일입니다.

커스텀 명령어

개발 워크플로우에 맞춰 `.md`로 정의해 두면 Claude Code 내에서 재사용할 수 있는 사용자 정의 프롬프트입니다.

멀티 에이전트

여러 개의 서브 에이전트를 병렬로 실행해 작업을 분산 처리하고, 빠르게 다양한 결과물을 생성하는 기능입니다.

YOLO 모드

`--dangerously-skip-permissions` 옵션을 사용해 파일 편집 전 매번 승인 요청을 생략하는 실행 모드입니다.

NodeJS 18 이상을 준비한 뒤 npm으로 Claude Code를 설치합니다. 터미널에서 `cloud` 명령을 입력하고, 다크 모드 등 터미널 스타일을 선택합니다. 구독(plan) 로그인 방식을 통해 Pro 플랜(월 20달러)으로 인증을 완료합니다.

[00:00] Claude Code 설치 과정을 시작합니다. NodeJS 18 이상이 필요하며, npm 명령어를 사용해 로컬 머신에 설치하고 프로젝트로 이동해 Claude를 사용할 수 있습니다.

[00:17] 터미널에서 claude 명령어를 실행하고 다크 모드로 텍스트 스타일을 설정합니다. 월 20달러인 프로 플랜 구독이 있는 Claude Code 계정으로 로그인합니다.

[00:38] 인증 후 권장 설정을 사용하고 Claude Code가 폴더 내 파일을 읽을 수 있도록 권한을 부여합니다. 이제 터미널에서 Claude Code를 공식적으로 사용할 수 있습니다.

[00:55] Visual Studio Code나 Cursor에서도 Claude Code를 사용할 수 있습니다. VS Code에서 터미널을 열고 claude를 실행하면 됩니다.

[01:08] 새로운 코드베이스를 초기화하기 위해 /init 명령어를 사용합니다. Claude가 프로젝트 구조 탐색, readme 파일 분석, 메인 애플리케이션 아키텍처 분석, claude.md 파일 생성 등의 작업을 수행합니다.

VS Code 터미널에서 `cloud /init`을 실행해 프로젝트 폴더 전체를 분석합니다. Readme, 아키텍처, DB 스키마, 인증 방식, 상태 관리 등 주요 정보를 파악해 `claw.md` 파일을 자동 생성합니다. 이 파일은 이후 모든 채팅 세션의 컨텍스트로 활용됩니다.

[01:26] Claude.md 파일이 생성되었습니다. 이 파일은 Claude Code와 새로운 채팅 세션을 시작할 때마다 시스템 메시지나 코드베이스에 대한 지침으로 사용됩니다.

[01:38] claude.md 파일에는 필수 명령어, 데이터베이스, 아키텍처, 기술 스택, 데이터베이스 스키마, 인증, 앱 구조, 상태 관리 등 AI가 프로젝트에 대해 알아야 할 모든 중요한 정보가 포함되어 있습니다.

[02:14] Claude Code의 핵심 기능인 프로젝트 초기화에 대해 설명합니다. MD 파일을 통해 AI가 프로젝트의 전체 구조와 맥락을 파악할 수 있도록 도와줍니다.

`/mod` 명령으로 AI 모델(Claude Sonnet 4) 버전을 확인하거나 변경할 수 있습니다. 파일은 드래그 앤 드롭 또는 @ 기호로 참조하고, 이미지 스크린샷을 드래그·붙여넣어 AI에게 내용을 파악하게 할 수 있습니다.

[02:29] 터미널에서 Claude Code 사용법을 시작하며, /mod 명령어로 AI 모델을 확인하고 변경하는 방법을 설명합니다. Pro 플랜과 Max 플랜에 따라 사용 가능한 모델이 다릅니다.

[02:45] 파일 참조하는 다양한 방법을 소개합니다. 드래그 앤 드롭 방식과 @기호를 사용한 방식으로 파일 경로를 쉽게 참조할 수 있습니다.

[03:18] 이미지와 스크린샷을 Claude Code에서 활용하는 방법을 설명합니다. 드래그 앤 드롭이나 클립보드 복사를 통해 이미지를 업로드하고 분석할 수 있습니다.

[03:57] 코드 선택을 통한 맥락 제공 기능을 보여줍니다. 특정 코드 라인을 선택하고 Claude Code에게 설명을 요청하면 선택된 코드에 대한 정확한 분석을 제공합니다.

[04:20] 터미널 외에 Command+Escape 단축키를 사용하여 더 빠르게 Claude Code에 접근하는 방법을 소개합니다.

[04:27] Claude 코드는 Command + Escape 단축키나 아이콘 클릭으로 코드 에디터 내에서 자동으로 세션을 시작할 수 있습니다. 매번 Claude라고 입력할 필요 없이 바로 여러 세션을 시작할 수 있어 편리합니다.

`.md`에 React 컴포넌트 단위 테스트 작성을 위한 프롬프트를 정의해 커스텀 명령어를 생성합니다. 선택한 컴포넌트 코드에 해당 명령어를 실행하면 해피 패스, 엣지 케이스, 접근성 검사 등을 포함한 테스트 스위트를 자동 생성하고 실행·수정까지 처리합니다.

[04:47] 슬래시 명령어를 통해 기본 명령어들을 확인할 수 있고, 개발 프로세스에 맞춘 커스텀 명령어를 만들 수 있습니다. 예를 들어 React 컴포넌트 유닛 테스트 작성용 명령어를 만들면 매번 같은 프롬프트를 입력하지 않아도 됩니다.

[05:25] Claude 코드에게 React 컴포넌트 유닛 테스트 커스텀 명령어 생성을 요청합니다. 이 테스트는 정상 경로, 엣지 케이스, 에러 처리 등을 모두 포함해야 하며, 프로젝트 내에서 재사용 가능해야 합니다.

[05:44] Claude는 체계적으로 작업을 진행합니다. 먼저 기존 명령어 구조를 확인하고, 프로젝트의 테스트 설정과 패턴을 분석합니다. 그리고 Jest 설정 파일과 package.json을 확인하여 올바른 패키지가 설치되어 있는지 검증합니다.

[06:12] 커스텀 명령어가 성공적으로 생성되었습니다. 명령어에는 제목과 테스트 작성 지침이 포함되어 있고, 파일 참조와 선택된 코드를 인수로 받을 수 있습니다. 이제 React 프로젝트의 로딩 컴포넌트 같은 코드를 선택하고 이 명령어를 사용할 수 있습니다.

[06:43] Claude에서 커스텀 명령어를 사용해 파일을 참조하는 방법을 보여줍니다. 슬래시 명령어를 통해 MD 파일에 정의한 명령어를 실행하고, 특정 컴포넌트에 대한 단위 테스트를 자동으로 생성하도록 요청합니다.

[07:04] Claude가 React 컴포넌트를 분석하고 포괄적인 테스트 스위트를 생성합니다. 해피 패스, 엣지 케이스, 컴포넌트 구조 테스트, 접근성 검사까지 포함한 상세한 테스트를 자동으로 작성합니다.

[07:37] 생성된 테스트를 실행하면서 Claude가 자동으로 오류를 발견하고 수정하는 과정을 보여줍니다. Jest 설정, TypeScript/JSX 처리, 누락된 패키지 설치 등의 문제를 스스로 해결합니다.

[08:16] AI가 테스트 실행 중 발견한 React 공백 처리 문제를 자동으로 수정하고, 최종적으로 모든 테스트가 통과하는 것을 확인합니다. 개발자의 개입 없이 완전히 자동화된 디버깅 과정을 보여줍니다.

[08:37] 멀티 에이전트 기능을 소개하며, 여러 개의 동시 코딩 에이전트를 실행할 수 있다고 설명합니다. UI 디자인 변형이라는 새로운 커스텀 명령어를 통해 React 컴포넌트의 다양한 변형을 생성하는 예시를 제시합니다.

React 컴포넌트(예: NaviBar)를 입력으로, UI 디자인 변형 커맨드를 실행해 Glass·Corporate·Compact·Outline·Gradient 등 여러 버전 파일을 동시 생성합니다. 생성된 각 버전을 Git에 커밋해 버전 관리하며 원하는 디자인을 선택할 수 있습니다.

[08:57] Claude 코드에서 동시 작업 에이전트를 사용하여 React 컴포넌트의 여러 버전을 병렬로 생성하는 방법을 설명합니다. 이를 통해 UI 디자인 변형들을 효율적으로 만들 수 있습니다.

[09:18] 간단한 데이팅 애플리케이션을 예시로 들어 설명합니다. 이 앱은 매치 기능, 좋아요 기능, 필터 기능, 메시징 기능을 포함하고 있으며, 이전 YouTube 비디오에서 구축 과정을 다뤘다고 언급합니다.

[09:41] 네비게이션 바 컴포넌트를 재디자인하는 과정을 시연합니다. Claude 코드에서 파일을 참조하고 커스텀 명령을 실행하여 여러 디자인 변형을 생성하는 방법을 보여줍니다.

[10:05] 5개의 서로 다른 네비게이션 바 디자인(Glass, Corporate, Compact, Outline, Gradient)이 생성되었습니다. 각 디자인은 별도의 파일로 저장되며, 사용자가 원하는 디자인을 선택하여 적용할 수 있습니다.

[10:34] 생성된 디자인을 실제 프로젝트에 적용하는 과정을 보여줍니다. layout.tsx 파일에서 원래 네비게이션 바를 새로 생성된 디자인으로 교체하고, 다양한 스타일(compact, gradient 등)을 실시간으로 테스트해볼 수 있습니다.

[11:13] 멀티 에이전트 AI를 사용하여 원하는 버전을 선택하고 고정하는 방법을 설명합니다. 진행하기 전에 항상 버전 컨트롤을 사용해야 하는 중요성을 강조합니다.

[11:23] Git 컨트롤에서 클로드 코드가 생성하는 각 버전마다 변경사항을 상세하게 커밋하는 방법을 보여줍니다. 만족스러운 버전은 브랜치 트리에 추가합니다.

`cloud dangerously skip permissions` 옵션으로 편집 승인 프롬프트를 생략하고 작업 흐름을 가속화합니다. 대신 Git 버전 관리를 철저히 적용해 잘못된 변경이 생기면 언제든 이전 커밋으로 되돌릴 수 있도록 합니다.

[11:41] YOLO 모드 기능을 소개합니다. 이 모드는 파일 편집 시 권한 요청을 우회하는 기능으로, 'claude dangerously skip permissions' 명령으로 실행할 수 있습니다.

[12:05] YOLO 모드를 사용할 때 버전 컨트롤이 더욱 중요한 이유를 설명합니다. 클로드 코드가 의도하지 않은 작업을 수행할 경우 이전 버전으로 쉽게 되돌아갈 수 있기 때문입니다.

[12:38] 클로드 코드 시작 방법과 유용한 팁들을 정리하며 마무리합니다. 시청자들에게 좋아요와 구독을 요청하며 다음 비디오에서 만날 것을 약속합니다.

Claude Code의 주요 기능을 정리하고, 프롬프트 재사용·자동화·멀티 에이전트·버전 관리 등의 모범 사례를 강조합니다. 영상이 유용했다면 좋아요와 구독을 요청하며, 다음 영상 예고로 마무리합니다.

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

[00:00] 자, 시작하기 위해 먼저

[00:01] 로컬 머신에 Claude Code를 설치해보겠습니다.

[00:02] npm 명령어를 복사하겠습니다.

[00:04] NodeJS 18 이상이 설치되어 있는지 확인하세요.

[00:06] 이제 터미널에서 이 명령어를 실행하겠습니다.

[00:08] 설치가 완료되면

[00:10] 프로젝트로 이동해서

[00:12] Claude를 사용하기 시작하겠습니다.

[00:13] 터미널로 돌아가서

[00:15] 이미 프로젝트로 이동했으므로

[00:17] claude를 입력하기만 하면 됩니다.

[00:18] 여기서 텍스트의 터미널 스타일을 설정할 수 있습니다.

[00:21] 간단하게 다크 모드로 유지하겠습니다.

[00:22] 로그인 방법을 선택하라는 메시지가 나타납니다.

[00:24] 구독이 있는 Claude Code 계정을 선택하겠습니다.

[00:26] 프로 플랜은 월 20달러입니다.

[00:27] 이것을 사용해서 데모를 진행하겠습니다.

[00:29] 인증을 완료하면

[00:31] 터미널 설정을 시작할 수 있습니다.

[00:33] Claude Code의 권장 설정 사용에 대해

[00:34] 예라고 답하겠습니다.

[00:36] 이제 Claude Code가 이 폴더 안의 파일을 읽을 수 있도록

[00:38] 권한을 부여할 수 있습니다.

[00:40] 진행하기 위해 예라고 답하겠습니다.

[00:41] 이제 이 프로젝트에서 터미널을 통해

[00:43] Claude Code를 공식적으로 사용할 수 있습니다.

[00:45] 또한 Visual Studio Code나 Cursor에서도

[00:47] Claude Code를 사용할 수 있습니다.

[00:48] Visual Studio Code에서 터미널을 열고

[00:50] claude를 실행할 수 있습니다.

[00:52] 이제 VS Code 내에서

[00:54] Claude Code를 사용할 수 있습니다.

[00:56] 시작하기 위해 먼저

[00:57] 엔터를 눌러 계속 진행하겠습니다.

[00:59] 이것은 새로운 코드베이스이므로

[01:01] Claude를 사용해서 이 프로젝트를 초기화해야 합니다.

[01:03] 이 경우 /init 명령어를 사용하겠습니다.

[01:05] 이것은 Claude가 프로젝트 내의 모든 파일을 읽도록 해서

[01:07] 코드베이스를 초기화합니다.

[01:08] 이 명령어를 사용해서

[01:09] 프로젝트를 초기화해보겠습니다.

[01:11] 정말 멋진 점은

[01:13] 수행할 작업들을 나열해준다는 것입니다.

[01:15] 먼저 프로젝트 구조를 탐색하고

[01:16] readme 파일을 분석하고

[01:18] 메인 애플리케이션 아키텍처를 분석한 다음

[01:20] claude.md 파일을 생성하기 시작합니다.

[01:21] 이제 이 할일 목록에 대한 진행 상황을 볼 수 있습니다.

[01:23] 지금 claude.md를 편집할 권한을 요청하고 있습니다.

[01:26] 예라고 답하겠습니다.

[01:27] 이제 claude.md 파일이 생성된 것을 볼 수 있습니다.

[01:29] Claude Code와 새로운 채팅 세션을 시작할 때마다

[01:30] 이 파일을 시스템 메시지나

[01:32] 이 코드베이스에 대한 지침이나 메모리로 사용합니다.

[01:34] 여기서 코드베이스의 핵심적인 중요한 사항들을

[01:36] 볼 수 있습니다.

[01:38] 필수 명령어들, 데이터베이스,

[01:39] 아키텍처, 기술 스택,

[01:41] 데이터베이스 스키마, 인증,

[01:42] 앱 구조, 상태 관리에 대한 내용도 있습니다.

[01:45] 여기에 많은 세부사항들이 있습니다.

[01:47] 이것은 풀스택 애플리케이션이고

[01:48] AI가 이 프로젝트에 대해 알아야 할 모든 것들을

[01:50] 거의 다 나열해줍니다.

[01:52] 기본적으로 AI가 이 프로젝트에 대해

[01:54] 알아야 할 모든 것들을 나열합니다.

[01:56] 우리 코드베이스의 핵심 중요 사항들을

[01:58] 볼 수 있습니다.

[02:00] 필수 명령어, 데이터베이스,

[02:01] 아키텍처, 기술 스택,

[02:03] 데이터베이스 스키마, 인증,

[02:06] 앱 구조, 상태 관리에 대한 내용도 있습니다.

[02:08] 여기에 많은 세부사항들이 포함되어 있습니다.

[02:10] 이것은 정말 상세한 내용들입니다.

[02:12] 여기에 많은 세부사항들이 진행되고 있습니다.

[02:14] 풀스택 애플리케이션이에요. 기본적으로

[02:16] AI가 이 프로젝트에 대해 알아야 할

[02:18] 모든 것들을 나열해 놓습니다. 그래서 기본적으로

[02:19] 우리가 새로운 대화를 시작할 때마다

[02:21] 이 MD 파일을 대형 언어 모델에

[02:24] 입력하여 프로젝트에 대한

[02:25] 맥락을 제공할 수 있습니다.

[02:27] 좋습니다. 이제 터미널에서

[02:29] Claude Code를 사용해 봅시다.

[02:31] 첫 번째로 사용할 명령어는

[02:32] /mod인데, 이를 통해 Claude Code에서

[02:34] 사용하고 있는 AI 모델을 확인할 수 있습니다.

[02:36] 여기서 보시면 저는 Pro 플랜을 사용하고 있어서

[02:38] Sonnet 4만 사용하고 있습니다.

[02:40] 하지만 Max 플랜이나 다른 플랜을 사용하신다면

[02:42] 여기서 다른 모델로 실제로

[02:43] 변경할 수 있습니다. 자, 이제

[02:45] 다음 기본 사항으로 파일 참조에 대해

[02:46] 얘기해 보겠습니다.

[02:48] Claude Code 내에서 파일을 어떻게 참조할까요?

[02:49] 예를 들어 제가 readme 파일을

[02:51] 참조하고 싶다면

[02:52] 여기로 드래그하면 됩니다. 그러면

[02:54] 기본적으로 파일 경로를 채팅에

[02:56] 붙여넣기 해줍니다. 그래서 Claude Code 내에서

[02:58] 이 파일을 참조할 수 있습니다.

[03:00] 이렇게 하기 싫다면

[03:01] 다른 방법도 있는데

[03:03] @기호를 사용해서

[03:05] 파일을 훨씬 쉽게 참조할 수 있습니다.

[03:06] 예를 들어, source 파일을

[03:08] 참조할 수도 있고

[03:10] 해당 디렉터리 내의 파일도

[03:11] 참조할 수 있습니다. 예를 들어

[03:13] /lib 폴더/schema와 같이

[03:16] 여기서 다른 파일들을 참조할 수 있습니다.

[03:18] 하지만 여러분이 궁금해할 수 있는 것은

[03:19] 스크린샷을 찍어서 그 이미지를

[03:21] Claude Code에서 사용하고 싶다면 어떻게 할까요?

[03:22] 제가 이것의 사진을 찍는다면

[03:25] 여기로 드래그하면 됩니다.

[03:27] 보시면 기본적으로 스크린샷의

[03:29] 경로를 붙여넣기 해주고

[03:31] '이게 뭔가요?'라고 물어볼 수 있습니다.

[03:33] 그러면 여기서 파일을 읽을 수 있도록

[03:35] 액세스를 허용하고

[03:36] 스크린샷을 읽어서 정확히 무엇인지

[03:38] 알려줄 것입니다. 그리고 이미지를 복사하는 경우에도

[03:40] 작동합니다. 제가 이 이미지를

[03:41] 클립보드에 복사하고

[03:43] Mac에서 Command+V 대신

[03:45] Ctrl+V를 사용하면

[03:47] 클립보드의 이미지를 채팅 입력창에

[03:49] 붙여넣기 할 수 있습니다.

[03:50] 여기서 '이게 뭔가요?'라고 물어보면

[03:53] Claude에게 물어볼 수 있고

[03:55] Claude가 답변을 해주는 것을 볼 수 있습니다.

[03:57] Claude 로고라고 말이죠. 이제 코드를 선택해서

[03:58] Claude Code와 상호작용할 때

[04:00] 맥락으로 사용할 수도 있습니다.

[04:02] 예를 들어, 제가 이 라인을 선택하고

[04:03] Claude Code에게 이 명령어가

[04:05] 무엇을 하는지 설명해 달라고 하면

[04:07] 여기서 한 줄이 선택된 것을 볼 수 있습니다.

[04:08] 그래서 'package.json에서 이것이

[04:11] 무슨 의미인가요?'라고 물어보면

[04:13] Claude Code는 우리가 선택한 것을

[04:15] 정확히 알고 있습니다. 그리고 여기서

[04:16] 우리가 선택한 코드에서

[04:18] 각 명령어가 무엇을 하는지에 대한

[04:19] 설명을 제공합니다. 이제 Claude Code에

[04:21] 접근하는 방법은 물론 터미널에서

[04:22] 할 수 있습니다. 하지만 다른 방법으로는

[04:24] Command+Escape를 사용하는 것입니다.

[04:26] 이렇게 하면 자동으로

[04:27] 자동으로 Claude 세션을 시작합니다

[04:29] 코드 에디터 내부에서 말이죠. 그리고 이제

[04:31] 우리가 Claude라고 입력할 필요 없이

[04:33] 기본적으로 Claude 세션을

[04:35] 에디터 내부에서 시작해줍니다. 그래서 우리가

[04:37] 해야 할 일은 단축키를 사용하는 것뿐입니다

[04:39] Command + Escape를 사용하거나 여기

[04:41] Claude 아이콘을 클릭하면 됩니다. 그러면

[04:42] 기본적으로 여러 Claude 코드

[04:44] 세션을 코드 에디터 내부에서 시작할 수 있습니다.

[04:46] 좋습니다. 이제 다음으로 이야기할 것은

[04:47] Claude 코드의 커스텀 명령어입니다.

[04:49] 여기서 슬래시를 입력하면 사용할 수 있는

[04:50] 모든 명령어들을 볼 수 있습니다. 하지만

[04:52] 우리는 실제로 우리만의 커스텀

[04:54] 명령어를 만들 수 있습니다

[04:55] 개발 프로세스에 맞춰서 말이죠.

[04:57] 예를 들어, Claude 코드가

[04:58] React 컴포넌트용 유닛 테스트를 작성하도록 하고 싶다면

[05:00] 매번 같은 프롬프트를 저장해서

[05:03] 재사용하는 대신에

[05:04] 우리는 실제로 그 프롬프트를

[05:06] MD 파일에 넣고

[05:08] Claude가 우리가 만든 명령어를 사용하여

[05:11] 매번 유닛 테스트를

[05:13] 생성하도록 지시할 수 있습니다.

[05:14] 예를 들어, 먼저 여기서 Claude에게

[05:17] 커스텀 명령어를 만들어달라고 요청하겠습니다.

[05:18] 이 명령어는 React 컴포넌트용

[05:20] 유닛 테스트를 만드는 데

[05:21] 도움이 될 것입니다. 여기가

[05:24] 기본적으로 프롬프트입니다.

[05:25] 기본적으로 Claude 코드가

[05:26] React 컴포넌트 유닛 테스트를 만드는

[05:28] 커스텀 명령어를 만들기를 원합니다. 그리고

[05:30] 이 유닛 테스트는 정상적인 경로,

[05:32] 엣지 케이스, 에러 처리

[05:34] 등을 다룰 수 있어야 합니다.

[05:37] 이제 이것을 입력하고 Claude 코드가

[05:39] 커스텀 명령어를 만들도록 하여

[05:40] 프로젝트 내에서 재사용할 수 있도록

[05:42] 하겠습니다. 여기서 보시면

[05:44] 할 일 목록을 작성하기 시작하고 첫 번째는

[05:45] dot claude/commands 구조를 살펴보는 것입니다

[05:48] 어떤 명령어들이 있는지 확인하기 위해서요

[05:50] 그리고 테스트를 위한 프로젝트 설정과

[05:52] 패턴들을 분석할 것입니다. 패턴을 찾고

[05:54] 프로젝트 내에 있는

[05:55] 테스트 파일을 읽어서

[05:57] 우리가 어떻게 테스트를 작성하는지

[05:59] 확인하는 것이죠.

[06:01] 그리고 Jest용 설정 파일을 찾고

[06:02] 또한 package.json을 확인해서

[06:04] 프로젝트에 올바른 패키지가

[06:06] 설치되어 있는지 확인합니다.

[06:08] 그리고 마지막 단계는

[06:10] 기본적으로 커스텀 명령어를 만드는 것입니다.

[06:12] 여기서 보시면 이것을 만들었고

[06:13] 이것이 기본적으로 이 명령어의 제목입니다.

[06:15] 그리고 이제 여기서 테스트를

[06:17] 만들 때 주의해야 할 사항들에 대한

[06:18] 지침들을 볼 수 있습니다.

[06:20] 그리고 여기 하단에서

[06:21] 인수들도 있는 것을 볼 수 있습니다.

[06:22] 이것은 우리의 파일 참조와

[06:24] 선택된 코드가 될 것입니다.

[06:26] 유닛 테스트를 작성하고 싶은

[06:28] 모든 것을 여기에 전달할 것입니다.

[06:30] 맞죠? 이것이 인수가 될 것입니다.

[06:31] 이제 이것을 그 폴더에 저장하면

[06:33] 우리의 명령어가 여기에 있습니다.

[06:35] 이제 코드를 선택하면, 예를 들어

[06:37] React 프로젝트의 로딩 컴포넌트를

[06:39] 선택하면 이제 우리가 할 수 있는 것은

[06:42] 이것을 사용할 수 있다는 것입니다

[06:43] 이것을 참조할 수 있습니다. 슬래시를 입력하면

[06:45] 우리가 만든 명령어를 볼 수 있습니다

[06:47] 이것은 MD 파일에 입력했던

[06:48] 제목과 동일하게 표시됩니다

[06:52] 여기서 이 명령어를 사용해서

[06:54] 파일을 참조할 수 있습니다

[06:55] 이것이 파일 참조로

[06:57] 해당 파일의 위치를 나타냅니다

[06:59] Claude가 이 컴포넌트에 대한

[07:01] 단위 테스트를 작성하게 하고 싶습니다

[07:02] 이제 실행해보면

[07:04] 여기 이 컴포넌트를 읽기 시작하고

[07:05] package.json과 jest 설정을 찾습니다

[07:07] 이제 로딩 컴포넌트를 위한

[07:09] 포괄적인 테스트 스위트를 만들기 시작합니다

[07:10] 꽤 멋지네요

[07:12] 이제 테스트가 생성되었고

[07:13] 전체 화면으로 드래그할 수 있습니다

[07:15] 이 테스트를 한번 살펴보겠습니다

[07:17] 먼저 컴포넌트를 불러오는 것을 볼 수 있습니다

[07:18] React 컴포넌트를 테스트하기 위해

[07:20] React 테스팅 라이브러리를 사용합니다

[07:22] 여기서 해피 패스를 볼 수 있고

[07:24] 엣지 케이스도 있습니다

[07:26] 매우 상세하게 작성되어 있고

[07:28] 컴포넌트 구조 테스트도 있습니다

[07:29] 접근성 검사도 포함되어 있어서

[07:31] 정말 멋집니다

[07:32] 이제 이것을 저장해보겠습니다

[07:34] 테스트 폴더 안에 테스트가 저장되는 것을 볼 수 있습니다

[07:37] 이제 테스트를 실행할 수 있습니다

[07:38] 정확히 우리에게 요청하는 것은

[07:40] 변경사항을 확인하기 위해

[07:41] 테스트를 실행하는 것입니다

[07:43] 실행해서 무슨 일이 일어나는지 봅시다

[07:45] 테스트 실행을 시작하고

[07:47] 아래로 스크롤하면 오류가 발생했습니다

[07:49] Jest 설정이 TypeScript와

[07:50] JSX를 처리하지 못한다는 것을 발견했습니다

[07:52] 그래서 Jest 설정 파일을

[07:53] 여기에 생성하기 시작합니다

[07:55] 파일이 생성되면

[07:58] 테스트를 다시 실행하기 시작합니다

[08:00] 여기서 또 다른 문제를 발견했습니다

[08:02] Jest 환경 jsdom이

[08:03] 누락되었다는 것입니다

[08:05] 이 패키지를 설치하고

[08:08] 우리가 아무것도 하지 않아도

[08:09] 테스트를 다시 실행합니다

[08:12] 그리고 여기서 React가

[08:14] 공백을 잘못 처리한다는 또 다른 문제를 발견했습니다

[08:16] 스스로 이것을 수정하고

[08:18] 테스트를 다시 실행합니다

[08:20] 이제 모든 테스트가 통과하는 것을 볼 수 있습니다

[08:23] 아래에서 각 테스트에 대한

[08:25] 요약을 제공합니다

[08:27] 저도 이 변경사항을 직접 확인했습니다

[08:29] 터미널에서 npm run test를 실행하면

[08:31] 모든 테스트가 통과한 것을 볼 수 있습니다

[08:33] 이제 다음으로 이야기할 것은

[08:35] 멀티 에이전트입니다

[08:37] 작업을 수행하기 위해

[08:38] 여러 개의 동시 코딩 에이전트를

[08:39] 실행할 수 있습니다

[08:41] 여기서 UI 디자인 변형이라는

[08:43] 또 다른 커스텀 명령어를 만들었습니다

[08:45] 이것을 보면

[08:46] 기본적으로 UI 디자인의

[08:48] 다양한 유형의 변형을

[08:49] 생성하려고 합니다

[08:51] React 컴포넌트를 제공하면

[08:53] 여러 가지 변형을 생성할 것입니다

[08:57] 이 컴포넌트에 대해 여러 가지 다른 버전들을 생성해드립니다.

[08:59] 하지만 가장 중요한 것은 이것에게 동시 작업 에이전트를 사용하도록 지시했다는 점입니다.

[09:00] 모든 변형들을 병렬로 생성하기 위해서 말이죠.

[09:03] 그래서 여기서는 여러 서브 에이전트들이 동시에 실행됩니다.

[09:05] 한 작업을 위해 여러 서브 에이전트들이 동시에 실행되는 거죠.

[09:07] 그래서 여기 Claude 코드에서는 이 커스텀 명령을 사용할 거예요.

[09:09] 여기서 UI 디자인 변형들을 사용할 거예요.

[09:13] 여기서 컴포넌트를 찾아보겠습니다.

[09:14] 프로젝트로 돌아가서요.

[09:16] 간단히 보여드리고 싶은 것은

[09:18] 이것이 간단한 데이팅 애플리케이션이라는 점입니다.

[09:20] 사용자들이 이 플랫폼을 통해

[09:21] 이상적인 매치를 찾을 수 있고,

[09:23] 매치 기능, 좋아요 기능을 사용할 수 있습니다.

[09:25] 필터 기능도 있고, 사람들에게 메시지를 보낼 수도 있어요.

[09:27] 정말 간단한 데이팅 애플리케이션이죠.

[09:29] 만약 이 애플리케이션을 어떻게 만들었는지 궁금하다면,

[09:30] 이 비디오를 확인해보세요.

[09:32] 제 YouTube 채널에서

[09:34] 이런 데이팅 앱을 만드는 방법에 대한

[09:35] 전체 비디오를 올렸거든요.

[09:37] 하지만 이제 그만 얘기하고,

[09:39] 이 네비게이션 바를 어떻게 다시 디자인할 수 있는지 살펴보겠습니다.

[09:41] Claude 코드로 돌아가서요.

[09:43] 위치를 지정하겠습니다.

[09:45] 이 경우에는 컴포넌트 자체가

[09:47] 네비게이션 바에서 온 것이고,

[09:48] 여기에 top navbar라는 컴포넌트가 있습니다.

[09:51] 여기서 파일을 참조해보겠습니다.

[09:53] 이것을 실행해서 어떻게 작동하는지 보겠습니다.

[09:54] 알겠습니다. 먼저 이 파일을 읽을 거예요.

[09:56] 그 다음에 할 일 목록을 만들기 시작합니다.

[09:58] 그 다음에 멀티태스크 에이전트를 실행시키기 시작해요.

[10:00] 동시에 디자인을 생성하기 위해서 말이죠.

[10:01] 좋아요. 이제 5개의 디자인을 모두 생성했고

[10:03] 각 디자인에는 이름이 있습니다.

[10:05] Glass, Corporate, Compact, Outline, Gradient가 있는데,

[10:08] 정말 멋지네요.

[10:10] 여기서 파일을 작성하기 위한 권한을 요청하는 것을 볼 수 있습니다.

[10:13] 이것에 대해 예라고 답하겠습니다.

[10:15] 그러면 여기서 navbar 폴더 안에

[10:17] 각각의 파일들을 작성할 거예요.

[10:20] 여기서 navbar 안에 5개의 네비게이션 바가 있는 것을 볼 수 있습니다.

[10:22] 맞죠? 이제 할 수 있는 것은

[10:24] 원래 네비게이션 바를 사용하는 곳을

[10:27] 우리가 생성한 새로운 네비게이션 바로 변경하는 거예요.

[10:29] 그런 경우에는 top nav로 가서

[10:32] 이것이 어디에 사용되는지 찾아보겠습니다.

[10:34] layout.tsx에서 사용되고 있네요.

[10:36] layout.tsx 안에서

[10:38] 파일을 선택할 수 있습니다.

[10:42] 이 경우에는 topnavglass.tsx를 선택하겠습니다.

[10:43] 여기서 소스를 topnav에서 topnav glass로 변경하겠습니다.

[10:45] 좋습니다. 이제 웹 앱으로 돌아가면

[10:47] 이렇게 생겼습니다.

[10:48] 여기서 다른 탭들로 변경할 수 있고,

[10:51] 이게 어떻게 생겼는지 보실 수 있습니다.

[10:52] 여기서 compact 버전을 시도해보겠습니다.

[10:53] 새로고침을 하면...

[10:54] 오케이. 이것이 compact 버전입니다.

[10:56] 다른 것도 시도해보겠습니다.

[10:58] gradient 버전으로 해보겠습니다.

[10:59] 이것을 저장하면

[11:01] 이제 gradient 버전을 볼 수 있습니다.

[11:03] 기본적으로 볼 수 있는 것은

[11:05] Claude 코드 안에서 서브 에이전트를 사용해서

[11:06] 작업들을 동시에 실행할 수 있다는 점입니다.

[11:09] Claude 코드 안에서 말이죠.

[11:11] 작업들을 동시에 실행할 수 있다는 점입니다.

[11:13] 우리가 원하는 걸 만들기 위해 달성할 수 있습니다. 그리고

[11:14] 마지막에는 원하는 버전을 선택해서

[11:16] 그걸로 고정하면 됩니다. 그리고 진행하기 전에

[11:17] 항상 강조하고 싶은 한 가지는

[11:19] 반드시 버전 컨트롤을 사용해서

[11:21] 가지고 있는 버전들을 저장하는 것입니다. 이제

[11:23] 제 Git 컨트롤을 보시면

[11:24] 생성되는 각 버전마다

[11:26] 기본적으로 해당 변경사항들을 하나씩

[11:27] 커밋하면서 클로드 코드가 만든

[11:29] 각 변경사항에 대해 상세한

[11:31] 커밋을 남기도록 하고 있습니다. 그리고 해당

[11:33] 버전이 만족스럽다면 기본적으로

[11:35] 브랜치 트리에 추가하겠습니다. 좋습니다. 이제

[11:36] 변경사항들을 커밋한 것을 볼 수 있습니다. 그리고

[11:38] 다음 단계로 넘어가겠습니다. 좋습니다.

[11:39] 이 비디오에서 마지막으로 다룰 내용은

[11:40] 욜로 모드입니다. 우리가 무언가를

[11:42] 실행하려고 할 때마다 종종 편집 작업에 대한

[11:45] 권한 요청을 받게 됩니다. 만약

[11:47] 대신 욜로 모드를 사용하고 싶다면

[11:49] 파일을 편집할 때마다 권한을

[11:50] 요청하지 않는다는 의미입니다.

[11:52] 이 경우에 할 수 있는 것은 만약

[11:54] 클로드 세션을 중단하고

[11:55] 단순히 'claude dangerously skip

[11:57] permissions'를 실행하면 됩니다. 그리고 이것이 실행되면

[11:59] 권한 모드를 우회해서

[12:00] 변경사항을 커밋하기 전에

[12:02] 승인을 요청하지 않을 것입니다. 그래서

[12:05] 제가 드린 마지막 팁인

[12:06] 버전 컨트롤 사용이

[12:08] 매우 중요한 이유입니다. 클로드

[12:09] 코드가 변경을 할 때마다 예를 들어

[12:11] 의도하지 않은 작업을 수행한다면

[12:13] 언제든지 이전 작동 버전으로

[12:14] 되돌아갈 수 있고

[12:15] 그곳에서 클로드 코드

[12:17] 세션을 계속할 수 있습니다. 항상

[12:19] 클로드 코드를 다룰 때는

[12:21] 버전 컨트롤을 사용하도록 하세요.

[12:22] 이 부분에서 권한 우회

[12:24] 모드를 사용하고 싶다면

[12:26] 예, 수락하면 됩니다. 그리고 이제

[12:27] 무엇인가 요청한다면 여기 하단에

[12:30] 권한 우회 중이라고 표시되는 것을

[12:31] 볼 수 있습니다. 그래서 클로드 코드에게

[12:32] 무언가를 요청할 때마다

[12:34] 더 이상 권한을 요청하지 않을 것입니다.

[12:36] 좋습니다. 이것이 기본적으로

[12:38] 클로드 코드를 시작하는 방법과

[12:39] 제가 클로드 코드 사용을 위해 쓰는

[12:41] 팁들입니다. 만약 이 비디오에서

[12:43] 가치를 찾으셨다면 이 비디오에

[12:44] 좋아요를 누르시고 이런 콘텐츠를 더 받아보시려면

[12:46] 구독을 고려해 주세요.

[12:48] 하지만 그것으로

[12:49] 다음 비디오에서 뵙겠습니다.