00:00여러분, 최근에 커서에서 클로드 코드로 갈아타고 있는 개발자들이 점점 더 많아지고 있는 거 같은데요
00:00저 역시 최근에는 커서보다 클러드 코드를 훨씬 더 많이 활용하고 있는 거 같습니다
00:07그리고 구독자분들께서도 클로드 코드 관련된 영상을 올려 달라고 많이 요청을 주셨었는데요
00:13그래서 이번 영상에서는 클로드 코드의 기본적인 설정 방법부터 효율적인 워크플로우 그리고 최근에 추가된 클로드 코드의 신규 기능까지 말씀드려 보도록 하겠습니다
00:19어, 클로드 코드의 설치 방법은 굉장히 간단한데요
00:19여기 있는이 명령을 복사해 가지고 그대로 이제 터미널에다가 어 설치를 진행을 해 주시면은 되고요
00:25클로드라고 입력하게 되면 이제 클로드 코드를 활성화를 시켜 줄 수가 있습니다
00:31그리고 보통은 이제 특정 프로젝트에서 클로드 코드를 활성화시켜 주고 나서는 이제 프로젝트를 한번 전체적으로 싹 분석을 해 가지고 클로드 코드를 초기화시켜 주는 과정이 필요한데요
00:37여기서 이제 클로드.md라고 MD라고 하는 이런 파일 하나 생성을 해서 해당 프로젝트에 대한 전체적인 구조나 그리고 설명 같은 것들을 적어 주면 됩니다
00:49그런데 이제 클로드에서는 어 이니시라고 하는이 슬래시 명령어가 있습니다
00:49그래서이 이니시라는 명령어를 입력하게 되면은 클로드 코드가 자체적으로 현재 프로젝트에 대한이 코드베이스 구조를 분석하고 거기에서 그 구조를 바탕으로 클로드.닷m라고 MD라고 하는 파일을 생성을 해 주게 됩니다
01:01그래서 여러분들도 클로드 코드를 일단 처음 활용한다라고 하시면은 슬인입 명령어 활용해서 초기화를 시켜 주는 것을 제가 추천을 드리고요
01:12생성된 클로드.닷, MD 파일을 보게 되면 이런 이런 식으로 프로젝트 오버뷰에 대한 부분도 클로드 코드가 자체적으로 잘 생성을 해 주었고요
01:18어떤 프레임워크를 사용하고 있는지 라우팅은 어떤 방식인지 푸시 알림 이런 것들에 대해서 어떤 기술 스택으로 되어 있는지를 이렇게 전체적으로 파악을 해 주었습니다
01:23그리고 핵심 아키텍처에 대한 부분도 클로드 코드가 전체적인 프로젝트 구조를 분석해 가지고이 클로드.m파일에다가 MD 파일에다가 저장을 시켜 주었고요
01:30패키지 관리는 어떻게 진행을 하고 있는지 이런 것들에 대해서도 전체적으로 다 이렇게 클로드 코드가 클로드.md 파일에다가 저장을 해 주게 되었습니다
01:42그래서이 클로드.닷m 파일에다가는 이렇게 클로드 코드가 만들어 준 것을 기본적인 구조로 가지고 가시면 되는데 여기다가 이제 추가적으로 어 자주 사용하는 명령어나 아니면 코딩 스타일이나 네이밍 규칙 이런 것들을 추가해 주셔도 좋고요
01:53그리고 프로젝트 아키텍처 패턴 같은 것들을이 클로드.닷m MD 파일에다가 저장을 잘 해 주고 사용하면은 클로드의 시스템 프롬프트 최상단에 항상이 클로드닷 MD 파일이 먼저 들어가서 프롬프트가 요청이 가기 때문에 해당 프로젝트에 대한 크로드 코드의 이해도를 굉장히 많이 올려 줄 수가 있습니다
02:10약간 이제 커서에서는 커서 룰즈와 같은 그런 비슷한 파일이라고 보시면 될 거 같고요
02:15그리고 클로드 코드에서는 당연하게 MCP 서버도 연동이 가능한데요
02:15MCP 서버를 클로드 코드에 연동하는 방식을 보여 드리기 전에 MCP 관련된 도서를 하나 소개해 드리려고 합니다
02:20바로 길법 출반사에서 나온 나만의 MCP 서버 만들기 위드 커서라는 도서이고요.이 책은 마이크로소프트에서 현식으로 활동하고 있는 AI 스페셜리스트가 지필를 했고요
02:32MCP에 대한 기본 개념부터 실제로 여러 가지 MCP를 연동시켜 보고 나만의 MCP를 만들어서 구축해 볼 수 있는 그런 실습까지 담겨져 있습니다
02:44그래서 MCP가 뭔지 궁금하다
02:44구조랑 구현 방식을 직접 구현해 보고 싶다라고 하시는 분들께 추천드리겠습니다
02:50그리고 길법 출판사에서 개발동생 구독자분들을 위한 해당 도서에 대한 전자책 증정 이벤트도 준비를 했다고 합니다
02:55참여 방법은 제가 설명란이나 고정 댓글에다가 적어 둘테니까 많은 참여 부탁드리겠습니다
03:00어, 그리고 이제 클로드 코드에서 MCP 서버를 연동하는 방식은 크게 로컬 스코프로 연동하는 방식, 그리고 프로젝트 스코프, 마지막으로는 이제 유저 스코프 이렇게 세 가지의 스코프 방식으로 연동이 가능하게 되어 있습니다
03:12프로젝트 스코프로 연동하는 방식을 한번 보여 드리면은 뭐 예를 들어서 이런 식으로 MCP 서버 추가 명령을 입력해 입력하고 엔터를 눌러 주게 되면은 이런 식으로 프로젝트 스코프로 MCP 서버가 추가가 완료가 되게 되었고요
03:23제가 이제 조금 전에 추가한 MCP 서버는 이렇게 프로젝트 루트 경로에 MCP.j선이라고 하는 파일에 이제 추가가 되게 됩니다
03:30이렇게네 번째 MCP 서버가 이렇게 추가가 되게 되었고요
03:36그래서 프로젝트 단위로 이제 MCP 서버를 추가하고 싶다라고 했을 때는 프로젝트 루트 경로에 이런 식으로 mcp.j 제이슨 파일을 추가해 주면 되고요
03:42해당 MCP
03:42제이슨 파일 내부에다가 이런 식으로 제이썬 구조의 MCP 서버 명령어를 직접 넣어 주거나 아니면 아까 전에 보여 드린 것처럼 이렇게 클로드 MCP 애드 명령어를 통해서 MCP 서버를 추가할 수가 있습니다
03:53그리고 현재 클로드 코드에서 연동된 MCP 서버의 상태를 보기 위해서는 클로드 MC스트라고 하는 명령을 입력해 주게 되면은 클로드 코드에 연동된 MCP 서버의 상태를 이렇게 체크해 줄 수가 있습니다
04:05그래서 세 가지의 MCP 서버는 이렇게 어 잘 연결이 되었다고 나오게 되었는데 조금 전에 이제 추가한 MCP 서버는 어 패스가 이제 정확하지 않기 때문에 이렇게 실패가 된 것을 확인할 수가 있게 되었고요
04:17이렇게 MCP 서버를 한번 연동해 두고 나서는 그 이외에는 기존에 커서에서 사용하던 것과 동일하게 MCP 서버를 활용을 할 수가 있습니다
04:28이런 식으로 이제 클로드 코드를 활성화시켜서 여기서도 이제 MCP라는 슬래시 명령을 입력하게 되면 현재 연동된 MCP 서버에 대해서 확인을 할 수가 있게 되어 있고요
04:33그리고 논문 하나를 소개해 드리려고 하는데 해당 논문은 대규모 MCP툴 환경에서 LLM 에이전트의 실제 작업 수행 능력을 평가하는 최초의 벤치마크라고 합니다
04:40그래서 여기서는 95개의 일상 과제와 527개의 MCP 도구들을 활용해 가지고 실제 문제를 얼마나 잘 해결하는지를 이제 평가한 그런 지표인데요
04:53굉장히 여러 가지 LN 모델들을 전체적으로 다 평가를 했는데 그중에서 이제 클로드 쏘넷 4 모델이 78.95%의 95%의 성공률로 가장 뛰어난 성능을 보였다고 합니다
05:05그래서 MCP 서버를 연동하데 있어서 특히 이제 클로드 쏘네 4 모델이 굉장히 좋은 성능을 보인다라고 하니까 어 기존에 다른 L 모델을 활용해서 MCP를 활용할 때보다 클로드 코드를 활용할 때 MCP의 성능이 더 많이 올라가는 것을 여러분들도 느껴 볼 수가 있을 것 같습니다
05:17어 그리고 이제 클로드 코드에서 이제 시프트 탭 키를 누르게 되면 이렇게 모드를 변 변화를 시켜 줄 수가 있는데요
05:27엑셉트 모드가 있고 그다음에 시프트 탭 한 번 더 누르면 이렇게 플랜 모드가 변경이 되게 됩니다
05:27그래서 저는 먼저 이런 식으로 플랫 모드를 통해서 계획을 먼저 세워 주고 나서 그 계획이 완료가 되게 되면은 다음에 엑셉트 에디트 모드를 통해서 실제 코드 변경을 하도록 그렇게 만들어 주고 있고요
05:39그리고 이제 슬래시 명령어에 컨피그를 입력해 보게 되면은 기본적인 클로드 코드의 세팅값들을 정해 줄 수가 있는데 그런데 여기서 이제 유즈 투드 리스트를 활성화시켜 주면 굉장히 좋고요
05:51그렇게 되면은 크로드 코드가 어떤 작업을 할당을 받았을 때 해당 작업이 복잡한 작업이라고 판단이 되면은 어 자체적으로 이제 투드 리스트를 만들어서 투 리스트를 하나씩 하나씩 체크해 나가면서 작은 단위로 작업 이제 진행을 해 줄 수가 있게 그렇게 만들 수가 있습니다
06:03그리고 최근에 클로드 코드에 추가된 기능 중에 하나인데 이렇게 아웃풋 스타일을 정해 줄 수가 있게 되었습니다
06:08그래서 슬래시 명령을 통해서 아웃풋 스타일이라고 입력해 주게 되면은 이런 식으로 크게는 이렇게 세 가지의 아웃풋 스타일이 제공이 되게 됩니다
06:19첫 번째는 이제 디폴트 모드인데 여기서는 이제 코딩 작업을 효율적으로 완료할 수 있게 간결한 응답을 가진 그런 기본적인 응답 스타일이 이제 디폴트 스타일이고 두 번째는 이제 첫 번째이 디폴트 스타일보다는 어 훨씬 더 설명이 조금 부연 설명이 추가된 그런 응답 스타일이라고 볼 수가 있습니다
06:37그리고 세 번째는 이번에 추가된 학습 스타일인데요
06:37클로드 코드와 이제 코딩을 하는 동안에 이제 통찰력을 제공할뿐만 아니고 협업이나 이제 실습을 통해서 사용자가 이제 학습을 할 수 있도록 도와주는 학습 모드가 이번에 추가가 되게 되었습니다
06:48그래서 이제 사용자가 어 특정 코드 구현에 대한 핸 프랙스를 할 수 있도록 작은 조각들에 대한 코드를 이제 작성할 수 있도록 만들어 주게 되고요
06:54그래서 아직은 개발이 익숙하지 않은 개발자가 클로드 코드를 통해서 개발 학습을 하고 싶다라고 하는 분들께서는 학습 모드를 활용하면 굉장히 많이 도움이 될 거 같습니다
07:06그리고 이렇게 기본적으로 제공이 되는이 세 가지의 아웃풋 스타일 이외에 사용자 지정 출력 스타일을 만들 수도 있는데요
07:12이런 식으로 아웃풋 스타일의 어 뉴라고 하는 명령어를 추가적으로 입력하면은 여러분들만의 아웃풋 스타일을 추가할 수가 있습니다
07:18예를 들어서 이렇게 아웃풋 스타일 뉴라는 명령어 뒤에다가 여러분들이 원하는 응답 스타일에 대해서 설명을 해 주게 되면은 해당 설명에 대한 응답 스타일을 클로드 코드가 알아서 이제 자체적으로 인스트럭션을 만들어 주게 되고요
07:29이렇게 아웃풋 스타일 생성이 완료가 되었는데 이렇게 생성된 아웃풋 스타일에 대해서는 닷클로드라고 하는 경로에 이제 위치하게 되는데요
07:35로드라고 하는 프로젝트 경로에 들어와 주게 되면 이런 식으로 여러 가지의 클로드 관련된 설정들이 다 위치하고 있습니다
07:42거기서 이제 아웃풋 스타일이라고 하는 이제 디렉토리 내부에 우리가 생성한 아웃풋 스타일이 정의가 되어 있게 되고요
07:47그래서 제가 요청한 펀앤 위티라고 하는 아웃풋 스타일이 생성이 되었고요
07:52이렇게 디스크립션도 들어가 있고 말투와 톤 그다음 유머 스타일 상황별 농담 이런 식으로 여러 가지의 출력 스타일에 대한 그런 스타일 프롬프트가 다 작성이 완료가 되게 되었고요
08:03이런 식으로 아웃풋 스타일 슬래시 명령을 통해서 들어가 보게 되면은 조금 전에 추가한 앤 위티라고 하는 아웃풋 스타일이 추가가 된 것을 확인할 수가 있고요
08:15여기서 이제 해당 아웃풋 스타일을 선택을 해 가지고 그럼 이런 식으로 기존의 클로드의 응답 스타일과는 조금 다르게 뭔가 이모지도 굉장히 많이 쓰고 재밌고 위트 있는지는 잘 모르겠지만 어쨌든 이런 식으로 여러분들만의 아웃프 스타일 출력 스타일을 설정을 할 수가 있습니다
08:26그리고 해당 아웃풋 스타일은 이런 식으로 유저스코프의 아웃풋 스타일로 정해 줄 수 있지만 여러분들의 프로젝트별로의 아웃풋 스타일로또 정해 줄 수가 있거든요
08:38이제 프로젝트 루트 경로에 이렇게 다 클로드 내부에다가 아웃풋 스타일이라고 하는 폴더를 추가해 주고 해당 폴더 내부에 이런 식으로 아웃풋 스타일에 대한 마크다운 파일을 추가해 주시면은 이제 프로젝트별로의 아웃풋 스타일도 정의를 시켜 줄 수가 있습니다
08:52어 그리고 클로드 코드에서는이 서브 에이전트라고 하는 것도 활용을 할 수가 있는데요.이 이 서버 에이전트라고 하는 것은 각 분야의 특화된 에이전트를 여러 개를 만들어서 그런 페르소나를 여러 개를 가지고 개발을 시킬 수가 있는 그런 에이전트 방식을 의미를 합니다
09:04제가 이전 영상에서 자세하게 한번 다른 적 있으니까 해당 영상을 참고해 주시면 될 거 같고요
09:10그리고 서브 에이전트와 같이 활용할 수 있는 부분은 이제 클로드 코드의 에이전트를 이제 병렬로 병렬 처리를 가능하게 만들 수가 있거든요
09:16예를 들어서 여러 가지의 서브 에이전트를 만들고 이제 여러 개를 한 번에 돌리면서 개발을 하도록 만들 수가 있습니다
09:23서버 에이전트를 만드는 방식은 굉장히 간단한데요
09:29이제 로드라고 하는 폴더 내부에 에이전트라고 하는 폴더 내 폴더 안에다가 각각의 작업에 특화된 에이전트에 대한 마크탄 파일을 이렇게 여러 가지를 생성해 주면 됩니다
09:35그래서 이런 식으로 추가한 서브 에이전트를 클로드 코드 내부에서도 슬래시 명령어의 에이전트라고 하는 명령을 입력하게 되면은 현재 사용 가능한 에이전트가 어떤 것들이 있는지 확인할 수가 있고 여기서도 이제 새로운 에이전트를 추가하기 위해서 이제 크리에이트 뉴 에이전트를 누르게 되면은 어 프로젝트 단위로 아니면은 여러분들의 어 유저 단위로 이제 추가할 수 있는 그런 옵션이 있고 첫 번째로 이제 클로드를 통해서 에이전트를 초안을 작성해 달라고 요청을 하면 됩니다
09:58예를 들어서 제가 이런 식으로 샤드 CN UI 컴포넌트 추가에 특화된 서브 에이전트 만들고 싶어
10:05이런 식으로 요청해 보게 되면은 이제 클로드 코드가 자체적으로 해당 서브 에이전트에 대한 기본적인 구조 같은 것들을 만들어 주게 되거든요
10:17그리고 해당 에이전트에서 어떤 도구를 사용하게 할 건지를 여기서 이렇게 선택을 해 줄 수도 있고요
10:17그리고 어떤 모델을 활용하게 할 건지 특정 에이전트를 시각적으로 구분할 수 있게 만들기 위해서 에이전트의 색깔을 정해 줄 수가 있습니다
10:29그럼 이런 식으로 클러드 코드가 만들어 준 서브 에이전트가 이렇게 만들어지게 되고요
10:35여기서 여러분들의 스타일에 맞게 에이전트를 서브 에이전트를 조금 더 추정을 해 가지고 서브 에이전트를 활용해 볼 수가 있습니다
10:40서브 에이전트를 이제 호출하는 방식은 굉장히 간단한데요
10:40여기서 이제 호출하고 싶은 서브 에이전트의 이름을 통해서 또 어떤 작업을 해 달라고 요청을 하면 됩니다
10:46예를 들어서 현재 프로젝트 현재 프로젝트의 컴포넌트를 샤드시 CN 컴포넌트로 대체해 줘
10:53이런 식으로 하면은 컴포넌트 대체 작업을 해당 서브 에이전트를 통해서 시킬 수가 있고요
10:59해당 서브 에이전트의 색상인 파란색을 통해서 서브 에이전트가 동작하는 것을 확인을 할 수가 있고요
11:05기존에 이렇게네 가지의 컴포넌트를 샤드시엔 컴포넌트로 이제 변경하는 과정을 이제 서브 에이전트를 총네 개를 띄어서 한 번에 요청하게 되면은 작업 속도가네 배가 빨라지게 될 거거든요
11:18그래서 그것도 한번 어떻게 서브 에이전트를 병렬 처리를 통해서 요청할 수 있는지를 한번 보여 드리도록 할 건데요
11:24저는 이런 식으로 프롬프트를 한번 작성해 봤습니다
11:24이렇게 차드 CN UI 컴포넌트 에더라고 하는이 서버에트를 총네 개를 띄워서 병렬 처리로 작업하게 해 줘라고 요청을 해 봤고요.네 개의 에이전트를 병렬로 띄워서 각각 다른 컴포넌트를 담당하게 이렇게 서브 에이전트를 여러 개를 띄워서 담당하게 만들 수가 있습니다
11:44첫 번째 서브 에이전트가 이렇게 뜨게 되었고요
11:44해당 서브 에이전트는 메모 폼에 대한 마이그레이션을 하고 두 번째 서브에트는 메모 아이템에 대한 마이그레이션을 진행을 하고 세 번째 서브에트는 이렇게 메모 리스트에 대한 마이그레이션 진행하고 마지막 서브 에이전트는 이런 식으로 메인 페이지에 대한 마이그레이션을 진행하게 만들어 주었거든요
12:02그래서 하나의 서버 에이전트를 통해 작업하는 것이 아니라 이렇게 여러 개의 서버 에이전트를 통해서 한 번에 여러 가지의 작업을 시킬 수가 있기 때문에 기존에 하나의 에이전트가 만들었던 것보다 개발 속도를 굉장히 빨리 만들 수가 있을 것 같습니다
12:14그리고 이렇게 만들어진 각각의 서브 에이전트들은 그 서브 에이전트마다의 컨텍스트를 또 새로 부여를 받게 되거든요
12:20그래서 기존에 이런 서브 에이전트 기능을 활용하지 않고 그냥 병렬로 처리했을 때보다 이렇게 서브 에이전트를 활용해서 병렬로 처리하게 되면은 각각의 서버 에이전트마다의 컨텍스트 최적화가 잘 일어날 수가 있게 됩니다
12:32다음으로는 이제 클로드 코드에 훅스라는 기능을 소개해 드리려고 하는데요.이 훅스라는 기능도 굉장히 유용한 기능 중에 하나입니다.이 클로드 코드의 혹수는 특정 이벤트에 자동으로 실행되는 쉘 명령어를 등록할 수가 있는 기능이고요
12:47그래서 클로드 코드의 훅스라는 기능을 통해서 사용자가 셀 명령을 등록하게 되면은 클로드 코드가 이제 동작하는 과정 중에서 다양한 시점에 원하는 작업을 자동으로 실행해 줄 수 있게 만들어 주는 그런 기능 중에 하나입니다
12:59그래서 예를 들어서 클로드 코드가 이제 작업이 완료가 되게 되었을 때 이제 알림을 보내주게 만들 수도 있고요
13:04코드 포메터가 자동으로 동작하게 만들 수도 있고요
13:10특정 작업 완료나 이제 어떤 에러가 발생했을 때 자동으로 이제 로깅을 로깅을 남기도록 만들어 줄 수도 있습니다
13:15이런 식으로 굉장히 여러 가지로 클로드 코드의 훅를 활용이 가능한데요
13:15클로드 코드에 이제 훅을 등록할 수 있는 이벤트는 이렇게 여러 가지의 단계별로 이벤트가 등록이 가능합니다
13:21클로드 코드의 훅스는 이렇게 유저 세팅, 그다음에 프로젝트 세팅, 그다음에 로컬 프로젝트 세팅 이렇게 세 가지의 경로에다가 클로드코드 흑수를 등록을 시켜 줄 수가 있습니다
13:33내부적으로 이제 클로드 코드의 흑수를 추가하는 그 구조는 비슷하기 때문에 제가 로컬 프로젝트 세팅 기준으로 해서 말씀드려 보도록 할 건데요
13:38세팅스
13:38제이썬 파일 내부에다가 이런 식으로 쿡스라는 것을 정의해 주면 되고 그 내부에다가 이렇게 어떤 이벤트에서 쿡스가 등 동동작하게 할 것인지를 적어 주고 그 안에다가 그런 구현 사항들을 적어 주면 됩니다
13:51예를 들어서 간단하게 클로드 코드가 어떤 응답을 생성하거나 이런 과정이 이제 중단이 되었을 때 개발 동생님 요청하신 작업이 연료가 되었습니다라고 이제 오디오를 재생할 수 있도록 그렇게 제가 이제 커맨드를 작성을 해 보았고요
14:03예를 들어서 제가 이런 식으로 어떤 작업을 요청했다라고 가정을 해 보면은 이제 그 작업이 완료가 되게 되면은 이제 오디오를 재생해 주게 될 거거든요
14:15개발동생님 요청하신 작업이 완료가 되었습니다
14:15이런 식으로 제가 클로드 코드 훅스에다가 이제 스톱이라는 이벤트가 발생했을 때 이런 훅스에 있는 커맨드를 이제 실행해라라고 요청을 해 놨기 때문에 작업이 연료가 되었을 때 이런 식으로 개발 동생님 요청하신 작업이 완료가 되었습니다라고 오디오를 재생해 줄 수가 있게 되었습니다.이 이외에도 굉장히 여러 가지로 활용이 가능한데요
14:34예를 들어서 제가 이런 식으로 도구 호출이 완료된 이후에 동작할 수 있는 후글 두 개 두 가지를 이제 등록을 해 줬는데요
14:39첫 첫 번째는 이제 도구 추출이 완료가 되었을 때 여러 가지 확장자별로 이제 적절한 포메터를 알아서 실행해 줄 수 있게 만들 수 있는 그런 쿠스를 하나 추가해 줬고요
14:47그래서 그래서 이런 식으로 자바스크립트나 CSS HTML 관련된 확장자가 있다고 하면은 프리티어로 포매팅을 한번 실행해 주고 그다음에 파이썬은 이제 블랙 포메터로 포매팅을 한번 실행해 주고 나머지 고나 러스트 PHP에 대해서도 각각의 언어에 맞는 포메터로 알아서 이제 코드 작업이 연료가 되면 한번 포매팅을 해 주기 만들 수 있는 그런 훅를 추가해서 활용을 할 수도 있을 것 같고요
15:11어 그럼 이제 두 번째 훅스를 추가해 보도록 할 건데요
15:11두 번째 흡수는 굉장히 간단하게 특정 도구 사용 이후에 이제 동작하는 훅을 만들어 볼 건데 예를 들어서 이런 식으로 파일이 생성된 도구가 사용된 이후에 여기에 있는이 커맨드가 실행이 되도록 만들어 보도록 할 겁니다
15:27그러면은 특정 파일을 생성하고 나서 자체적으로 이제 기존에 있는이 변경 사항에 대한 부분을 로컬로 있는 거를 이제 스테이징으로 올려 줄 수 있는 명령어를 이제 실행하도록 만들어 주었는데요
15:33해당 혹스가 정상적으로 동착하는지를 한번 테스트를 해 보도록 하겠습니다
15:39예를 들어서 제가 이런 식으로 간단한 강의 플랜폼 랜딩 페이지 단일 HTML도 생성해 달라고 요청해 보도록 하고요
15:44그럼 해당 HTML 페이지가 생성되고 난 뒤로 여기 있는이 기에라고 하는 훅수가 실행이 되어서 지금 로컬에 있는 변경 사항을 이제 스테이징으로 올려 줄 수 있는 그게 실행이 되는지를 보도록 하면 될 거 같은데요
15:55이런 식으로 지금 이제 HTML 파일을 생성할 건지를 이제 물어보게 되는데 여기서 이제 예를 눌렀을 때 지금 변경 사항이이 위쪽으로 이제 스테이징으로 올라가는지를 확인해 보면 될 거 같습니다
16:06한번 예스를 눌러 보도록 하면은 이런 식으로 지금 스테이징으로 변경 사항이 올라간 것을 확인할 수가 있고요.이 아래 있는 변경 사항이 이제 스테이징 변경상으로 이제 정상적으로 올라가는 것을 확인할 수가 있고 그리고 이제 클로드 코드에서 컨트롤 R을 눌러 보게 되면은 이렇게 디버깅 로그가 포함된 것까지 이제 확인할 수가 있거든요
16:24여기서 이제 보게 되면은 두 가지의 클로드 코드 훅수가 호출이 된 것을 확인할 수가 있습니다
16:30첫 번째 도구는 이제 특정 코드에 대한 파일 포매팅을 하는 그런 도구가 호출이 되었고 두 번째가 이제 제가 이제 추가했던 기 애드라고 하는 스테이징으로 변경상항을 올려주는 그런 도구가 호출이 되어 가지고 이제 라이트 도구가 사용이 되었을 때 그 도구 사용 이후에 이렇게 호출이 된 것을 확인할 수가 있습니다
16:48이런 식으로 클로드 커드의 흑수기는 기존에 이런 클로드.닷, md 파일과는 다르게 여기서 클로드.md MD 파일에서는 여기 있는 이런 규칙을 LM이 대신 수행하도록 할 수 있는 그런 방식에 대한 규칙을 정의해 주는 그런 메모리 파일인데 그런데 이제 클로드 코드에 훅스를 활용하게 되면은 특정 상황에서의 무조건 발생시켜야 되는 그런 커맨드나 쉘 명령어를 조합을 시킬 수가 있기 때문에 LLM의 응답과는 별개로 특정 동작이나 명령어 수행을 보장을 할 수가 있습니다
17:15다음으로는 클로드 코드의 슬래시 명령어에 대해서 말씀드려 보도록 할 건데요
17:15아까 전에 이제 몇 가지 슬래시 명령어를 이제 보여 드리긴 했지만 그 이외에도 클로드 코드에서 기본적으로 이제 구축해 둔 슬래시 명령어가 굉장히 많이 있습니다
17:27여기서 이제 서버 에이전트를 이제 관리할 수 있는 그런 슬래시 명령어도 있었고 그다음에 대화 기록 지우기이 대화 기록 지우기도 굉장히 잘 활용하는 것이 중요한데요
17:34예를 들어서 클로드 코드의 하나의 세션에서 계속해서 대화를 쌓아가면서 개발을 진행하다 보면은이 컨텍스트가 점점 더 차오르게 되거든요
17:39그런데 이제 LLM 모델은 컨텍스트 윈도우 사이즈가 한정돼 있기 때문에 하나의 대화창 내부에서 계속해서 여러 가지 개발 시키다 보면은 예전에 있던 컨텍스트와 최근에 진행하던 콘텍스트가 이제 섞이고 기존에 있던 컨텍스트에 대한 내용을 LM 모델이 까먹게 되어서 결과적으로는 하나의 세션 내부에서 계속해서 채팅을 오래하게 되면은 점점 더 LM 모델의 성능이 나빠지게 됩니다
18:02그래서 저는 보통은 하나의 세션 내부에서는 하나의 기능만 개발하도록 해 주고 있는데요
18:09예를 들어서 이런 식으로 하나의 기능 개발이 완료가 됐다라고 하면은 여기서 이런 식으로이어서 프롬프트를 작성하는 것이 아니고 새로운 기능을 개발한다라고 했을 때는 이렇게 슬래시 명령어에 클리어를 입력하게 되면은 이제 세션 히스토리가 초기화가 되게 되거든요
18:19새로운 기능 개발에 대해서는 이렇게 완벽히 초기화된 콘텍스트 창을 통해서 개발을 진행을 해 주고 있습니다
18:25그런데 이런 식으로 클리어 슬래시 명령어를 통해서 컨텍스트를 완전히 초기를 시켜 주었는데 예전에 세션 내역을 한번 불러오고 싶다라고 했을 때도 불러올 수 있는 방법이 있거든요
18:37여기서 이제 슬래시 명령어에 리즘이라고 하는 명령어를 입력해 주게 되면은 기존에 있던 대화 내역을 불러올 수가 있습니다
18:43이런 식으로 리즘을 입력하게 되면 기존 대화 내역에 대한 히스토리를 이렇게 다 볼 수가 있게 되어 있고요
18:48이런 식으로 기존에 있던 대화 내역을 전체적으로 다 불러와서 확인을 할 수가 있고 여기서 특정 대화 내역을 선택하게 되면은 해당 대화 내역에 대한 이런 히스토리들을 전체적으로 다 확인을 할 수가 있게 만들 수가 있습니다
19:01그리고 특정 세션에 대해서 이렇게 클로드 코드에서 작업하는게 아니고 이번엔 이제 커서로 가져가서 작업을 해 하고 싶다라고 했을 때도 방법이 있는데요
19:13예를 들어서 지금 이렇게 클로드 코드에서 작업한 이런 세션 대화 내역을 전체적으로 다 익스포트해서 가져올 수 있는 방법이 있는데 슬래시 명령어 중에서 익스포트라고 하는 명령어를 이렇게 입력하고 엔터를 눌러 주게 되면 이렇게 이런 식으로 클립보드로 가져오거나 특정 파일로 내보내기를 할 수 있는 그런 기능이 있습니다
19:31예를 들어서 이런 식으로 클립보드로 복사를 해 보게 되면은 클로드 코드에서 이렇게 만들었던 이런 컨텍스트들이 다 복사가 된 것을 이런 식으로 붙여 넣기를 해 보면은 클로드 코드에서 작업하던 그런 컨텍스트 내역을 이렇게 커서에다가 넣어서 여기서 이제 커서에서이어서 작업을 하는 방식으로도 활용을 해 볼 수가 있을 것 같고요
19:49그리고 클로드 코드에서는 이렇게 내장된 슬래시 명령어 이외에 여러분들만의 슬래시 명령어 사용자 정의 슬 명령어를 만들 수도 있습니다
19:55어 커스텀 슬래시 명령어를 만드는 방법은 굉장히 간단한데요
20:00프로젝트 루트 경로에이로드 안에 이제 커맨즈라고 하는 폴더를 하나 생성을 해 주면 되고요
20:00예를 들어서 이런 식으로 저는 옵티마이즈.닷m라고 MD라고 하는 파일 하나 생성해 주었습니다
20:06이런 식으로 사용자가 제공한 코드의 성능이나 버그를 최적화하는 단계를 제한해 줘라고 프롬프트를 작성해 봤고요
20:11그리고 이제 클로드 코드를 다시 한번 이제 실행을 시켜 주게 되면은 이런 식으로 제가 조금 전에 추가한 커스텀 슬래시 령어가 나온 것을 확인할 수가 있고요
20:23이렇게 옵티마이즈에다가 이제 코드를 이렇게 넣어 주게 되면은 해당 코드에 대해서 이제 최적화를 진행해 줄 수 있게 그렇게 커스텀 슬래시 명령을 한번 만들어 보았고요
20:28어이 커스텀 슬래시 명령어는 여러분들이 이제 계속해서 반복적으로 어 만들어야 되는 그런 프롬프트나 팀원간의 어떤 규칙을 정해 주고 계속해서 재사용해야 된다고 했을 때 이렇게 커스텀 슬래시 명령어를 미리 구축을 해 두고 계속해서 이런 식으로 재사용하는 방식으로 활용하면은 굉장히 유용하고요
20:46그리고 이제 클로드 코드 내부에서 이제 배시 명령어를 실행할 수 있는 방법도 있는데요
20:53예를 들어서 뭐 어떤 패키지를 빌드하거나 할 때 이렇게 터미널을 새로 열어서 이렇게 패키지 명령어를 실행할 수도 있는 방식이 있지만 그런데 이제 클로드 코드 내부에서도 배시 명령어를 직접 실행하도록 하는 방식이 있습니다
21:03배시 명령어를 클로드 코드 내부에서 실행하기 위해선 이렇게 느낌표로 입력해 주시게 되면 이런 식으로 배시 모드로 변경이 되게 되고요
21:10클로드코드 세션 내부에서 배시 명령어를 이제 수행하도록 만들 수가 있습니다
21:15이렇게 클로드 코드 내부에서 배시 명령어를 수행했을 때의 장점이라고 하면은 클로드 코드가 해당 터미널 명령어에 대한 이제 진행 상황이나 결과 같은 것들도 이제 콘텍스트로 다 가져갈 수가 있기 때문에 예를 들어서 이렇게 뭔가 빌드를 하다가 실패가 되었을 때 그 실패된 이제 에러 메시지나 이런 것들에 대해서 기존에는 이렇게 터미널에서 뭔가 이제 복사를 하다가 이제 클로드 코드에다가 넣어 주고 하는 과정이 필요했는데 이제는 클로드 코드가 명령어 수행 과정에 대한 모든 컨텍스트를 다 알고 있기 때문에 어떤 에러가 발생했을 때 해당 에러를 클로드 크로드 코드가 자체적으로도 분석하고 해결하게 만드는 과정으로도 활용을 할 수가 있습니다
21:45그리고 이제 클로드 코드에서는 기본적으로는 이렇게 유저에게 미리 허락을 받은 그런 명령어에 대해서만 물어보지 않고 수행을 해 줄 수가 있는데요
21:58그래서 이런 식으로 세팅스타 제이슨 파일에다가 클로드 코드가 이제 허락 없이 수행할 수 있게 하는 명령어들을 이렇게 정의해 주고 사용할 수도 있고 그리고 이제 특정 파일에 대해서는 접근하지 못하게 하거나 어떤 명령어를 거부하게 할 수 있는 그런 설정을 이렇게 세팅스타 제이슨 파일에다가 정의를 해 두고 활용할 수가 있습니다
22:16그런데 가끔 이제 클로드 코드가 완벽하게 모든 자율성을 가지고 작업을 하도록 만들어 주고 싶을 때가 있는데요
22:22그럴 땐는 이런 식으로리스미션스라고 하는 옵션을 추가를 해 주면은 됩니다
22:28그럼 이렇게 바이패스 퍼미션 모드가 활성화가 되게 되어서 이제부터는 사용자에게 아무런 확인을 하지 않고 모든 작업을 다 진행해 줄 수가 있게 되거든요
22:33그런데이 바이패스 퍼미션 모드는 굉장히 주의를 하면서 활용을 해 주셔야 됩니다
22:39해당 모드에서는 클로드 코드가 모든 도구 모든 MCP를 완전하게 자율적으로 다 조정을 할 수가 있게 되거든요
22:46그렇기 때문에이 바이패스 퍼미션 모드를 활용할 때는 개발 컨테이너를 활성화를 시켜서 활용해 주시는 것을 저는 추천을 드리고 있습니다
22:57엔트로픽에서는 이런 식으로 디벨로먼트 컨테이너라는 것을 이제 지원을 하고 있는데요
22:57해당 컨테이너는 이제 클로드 코드를 활용할 수 있는 그런 환경 자체를 이제 신뢰할 수 있는 환경에서 개발할 수 있도록 미리 도커 컨테이너 기반으로 구축된 것을 지원할 수 있게 만들어 둔 것인데요
23:08데브 컨테이너 셋업에 들어가서 보게 되면은 이런 식으로 도커 파일이나 데브 컨테이너 제이썬 그다음에 파이어월 같은 이런 세 가지의 설정 파일들이 제공이 되고 있습니다
23:19그래서 해당 설정 파일들을 다운로드 받아 가지고 여러분들의 프로젝트에다가 세팅을 시켜 주어야 되는데요
23:25저는 이런 식으로 루트 경로에다가 대브 컨테이너라고 하는 폴더를 생성하고 그 안에다가 아까 전에 있던 그 도커 파일 컨테이너다 제이썬파이어 셜스크립트 파일을 이렇게 세 가지를 넣어 주었습니다
23:32그리고 나서이 해당 컨테이너를 활용하는 방법은 이제 vs코드 익스텐션을 하나 설치를 해 줘야 되는데요
23:38이제 마켓플레이스 검색창에다가 이런 식으로 데브 컨테이너라고 검색하게 되면은 맨유에 커서에서 자체적으로 지원하는 이제 데브 컨테이너 익스텐션을 확인 할 수가 있습니다
23:50그래서 해당 익스텐션을 먼저 설치를 진행을 해 주시면은 되고요
23:56그리고 나서 여러분들의 프로젝트 루트 경로에다가 이런 식으로 다 데브 컨테이너라고 하는이 프로젝트 폴더를 하나 세팅을 완료해 주시게 되면 이제 데브 컨테이너를 활용을 할 수가 있습니다
24:07커맨드 팔레트를 컨트롤 시프트 P를 눌러서 이렇게 활성화를 시켜 준 다음에 여기서 이제 오픈인 컨테이너라고 이런 식으로 검색하게 되면은 이런 식으로 데브 컨테이너를 활성화를 시켜 줄 수가 있습니다
24:18그래서 여기서 한번 엔터로 눌러 보게 되면은 이렇게 커서가 새롭게 이제 창이 하나 만들어지는 것을 볼 수가 있고요
24:18그래서 이렇게 데브 컨테이너로 열어 준 편집기는 이렇게 컨테이너 클로드 코드 샌드박스라고 이렇게 뜨게 되고요
24:25여러분들의 이제 로컬에다가 도커 파일을 통해서 클로드 코드가 만들어 둔 여러 가지의 이런 설정값들을 기반으로 해서 도커 컨테이너가 이제 올라간 상태로 그도 컨테이너 내부에서 여러분들이 이제 개발을 진행할 수 있게 그렇게 만들어 줄 수가 있고요
24:43해당도 파일은 노드 JS 20 기반의 프로젝션 환경과 필수 개발 도구들이 이제 포함된 형태로 이제 구성이 되어 있습니다
24:48그리고 이제 맞춤형 방화벽 설정을 통해서 허용된 서비스에 대해서만 네트워크 접근을 허용하도록 그렇게 만들어 주고 있고요
24:54그래서 우리가 이런 식으로 바이패스 퍼미션을 활성화를 시켜서 클로드코드다에게 모든 권한을 주고 싶다라고 했을 때는 저는 이런 식으로 데브 컨테이너를 활성화를 시켜서 그 컨테이너 내부에서 활용하는 것을 더 추천을 드리고요
25:06제 컨테이너 내부에서이 바이패스 퍼미션을 활용한다고 했을 때는 내부적으로 이런 방화벽 같은 것들로도 설정이 되어 있고 이제 허용된 네트워크에 대해서만 이런 요청들이 가능하도록 그렇게 세팅이 되어 있기 때문에이 컨테이너 내부에서만 동작 가능하게 만들어져 있기 때문에 어느 정도는 이제 바이패스 퍼미션 모드라고 해도 안정적으로 활용할 수 있는 그런 장점이 있습니다
25:30그래서 여러분들이 꼭이 바이패스미션 모드를 활용하고 싶다라고 하시면 저는 이런 식으로 데브 컨테이너를 활용하는 것을 굉장히 추천을 드리고요
25:37그리고 이제 클로드 코드를 사용하면서 몇 가지 유용한 서비스를들을 소개해 드리려고 하는데요
25:42첫 번째는 이제 CC 유세지라고 하는 클로드 코드 유세지를 볼 수 있는 그런 서비스입니다
25:47우리가 이제 클로드 코드를 사용할 때 얼마나 많이 사용을 하고 있는지 확인할 수 있는 그런 서비스인데요
25:53CC 유세지를 활용하는 방식은 굉장히 간단합니다
25:53MPX 명령을 활용하면 되고요
25:53CC라고 이렇게 MPX CC라고 입력하게 되면은 이런 식으로 일별로 클로드 코드에서 인풋 아웃풋 토큰이 얼마나 활용이 되었는지 캐시는 어떻게 생성이 되었고 총 토큰은 얼마나 썼는지 그리고 사용한 달러가 얼마 정도 되는지를 이렇게 시각적으로 활용할 수가 있습니다
26:12그리고 두 번째로는 이제 슈퍼클로드라고 하는 서비스를 소개해 드리려고 합니다.이 이 슈퍼클로드라고 하는 서비스를 여러분들의 로컬에다가 설치를 해 주게 되면은 슈퍼클로드에서 자체적으로 구현해 둔 여러 가지 유용한 커스텀 슬래시 명령어들을 활용을 할 수가 있는데요
26:27예를 들어서 개발 관련 슬래시 명령어 분석하는 거 코드를 개선하는 거 그다음에 여러 가지의 이제 유틸리티 같은 것들도 슬래시 명령어로 다 미리 구축을 해 뒀기 때문에 이런 식으로 SC라고 명령어를 슬래시 명령어을 입력하게 되면 여러 가지 슈퍼클로에서 미리 구축해 둔 이런 슬래시 명령어들을 활용을 할 수가 있기 때문에 커스텀 슬래시 명령어 유용한 것들을 미리 구축해 둔 것을 이제 활용하고 싶다라고 했을 때 이런 슈퍼클로드 같은 서비스를 활용을 해 보면 굉장히 좋고요
26:50그리고 이런 슬래시 명령어를 제외하고도 여러 가지의 페르소나들을 자체적으로 이제 수퍼클로드가 알아서 전환을 시켜 줍니다
26:56아키텍처 플래닝을 세울 때는이 아키텍트라고 하는 페르소나로 전환을 시켜 주고 그다음에 프론트엔드 개발할 때는 프론트엔드 페르소나로 전환하고 백핸드는 백엔드 그다음에 이제 분석할 때는 분석하는 페르소나를 전환을 시켜서 특정 작업에 특화된 페르소나를 통해서 클로드 코드의 성능을 더 많이 올려 줄 수가 있고요
27:14그리고 이제 다음으로는 클로드코드 템플릿이라고 하는 서비스를 소개해 드리려고 합니다
27:21클로드코드 템플릿은 이런 식으로 a템플릿닷컴이라고 하는이 주소로 접속하면은 확인할 수가 있고요
27:28제가 이번 콘텐츠에서 소개해 드린 이런 서비스에 대한 링크는 제가 설명란에다가 다 남겨 둘테니까 거기를 참고해 주시면 좋을 거 같고요
27:35여기서도 이제 마찬가지로 이런 슬래시 명령어에 대해서도 이제 설치를 해서 활용할 수가 있게 만들어 줄 수가 있고 여러 가지 세팅값들이나 그다음에 클로드 코드의 흑수 기능이 그다음에 MCP 템플릿 같은 것들을 다 활용할 수 있게 만들어 준 그런 서비스인데요
27:46그런데 아까 전에이 슈퍼 클로드와는 다르게이 슈퍼클로드는 한번 설치하게 되면은 여기에서 이제 지원하는 모든이 슬래시 명령어에 대해서 전체적으로 다 설치가 되어서 활용이 가능하게 되어 있는데 그런데이 클로드 코드 템플릿은 어 우리가 원하는 슬래시 명령어나 아니면 우리가 원하는 커맨드 이런 것들에 대해서 선택을 해 가지고 장바운이 담아서 필요한 것들만 설치해 가지고 활용할 수가 있습니다
28:10예를 들어서 특정 훅을 설치하고 싶다라고 했을 때 설치하고자 하는 훅들을 먼저 선택을 해 주면 되고요
28:15애드투 스택 버튼을 눌러서 이제 스택에다가 이렇게 장바운에다가 추가를 해 줄 수가 있고요
28:22그리고 파일 프로텍션도 한번 추가를 해서 넣어 보도록 하겠습니다
28:22이렇게 지금 훅을 세 개를 넣어 주었고요
28:28그리고 예를 들어서 이제 슬래시 명령어도 마찬가지로 커맨드도 추가해 보도록 할 건데 허스키도 이렇게 추가해 가지고 넣어서 장바운이다가 먼저 이렇게 다 넣어 준 다음에 전체적인 것들을 한 번에 설치할 수 있는 명령어가 이제 나오게 됩니다
28:39이런 식으로 아래 있는이 명령어를 그대로 이제 복사를 해 가지고 여러분들의 프로젝트 루트 경로에서 복사한 명령어를 이렇게 붙어 넣어 주게 되면은 이런 식으로 어떤 스코프에다가이 명령어들을 추가 할 건지를 이제 물어보게 되고요
28:51예를 들어서 저는 프로젝트 세팅에다가 추가한다고 해서 이렇게 넣어 보게 되면은 우리가 장바구니에 추가했던이네 가지의 컴포넌트들이 전체적으로 빠르게 설치가 완료된 것을 확인할 수가 있고요
29:03그래서 이제 프로젝트 스코프에 보게 되면은 퍼스키 슬래시 명령어에 대해서도 이렇게 추가가 된 것을 확인할 수가 있고 세팅스 제이슨에 보게 되면 이런 식으로 우리가 여러 가지로도 추가했던 그런 클로드 코드의 훅수도 잘 추가가 완료된 것을 확인할 수가 있습니다
29:20그래서 제가 이렇게 소개해 드린 이런 여러 가지의 서비스들을 활용해서 여러분들의 클로드 코드의 성능을 더 많이 끌어 올리고 그리고 여러분들의 개별 환경에 맞도록 여러 가지 클로드 코드의 세팅 같은 것들을 커스터마이징해 보는 과정을 한번 진행해 보시면 굉장히 좋을 것 같습니다
29:31그래서 이번 영상에서는 클로드 코드 관련한 여러 가지 세팅 방법들이나 그리고 서브 에이전트나 병렬 처리를 통해서 효과적인 워크플로우를 구축하는 방식 그리고 또 여러 가지의 클로드코드 관련한 유용한 서비스들도 같이 소개를 해 드렸습니다
29:44그래서 이번 영상 관련해서 궁금한 점들이 있으면은 댓글에다가 많이 남겨 주시면 좋을 것 같고요
29:49저는 이제 다음 영상에서 더 유용한 정보로 다시 돌아오도록 하겠습니다
29:54습니다.