[시즌 4] 클로드 코드를 내 입맛대로 개조할 수 있는 모드(mod)

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

클로드 코드 모드(mod)는 세션의 화면과 기능을 내 입맛대로 바꾸는 확장 방식이며, 영상은 바이브 코딩으로 파일 탐색기를 만드는 과정을 보여준다.

📌 핵심 요점

1. 모드는 클로드 코드 세션 안에서 동작하며, 외형 변경뿐 아니라 파일 탐색기 추가나 입력 프롬프트 수정 같은 기능 확장에도 쓰인다고 설명한다.
2. 훅과 모드는 작업 중간에 개입한다는 원리가 비슷하지만, 영상에서는 훅을 세션 밖의 동작으로, 모드를 세션 안의 화면과 기능을 바꾸는 요소로 구분한다.
3. 모드는 플러그인에 포함되며, 홈 또는 프로젝트의 .claude/skills에 등록 정보를 두는 방식으로 전역 사용과 프로젝트 한정 사용을 나눈다고 안내한다.
4. 실습에서는 자연어로 파일 탐색기와 파일 멘션 기능을 요청한 뒤, 레이아웃을 수정하고 Markdown 미리보기까지 추가한다. 처음 생성된 결과를 확인하고 요구사항을 보완하는 과정이 필요했다.
5. 모드에는 JavaScript·TypeScript 실행 코드가 포함되므로, 악성 코드가 환경 파일이나 API 정보를 외부로 보내는 위험을 경고한다. 직접 제작과 validate 검토를 대응 방법으로 제시한다.

🧩 배경과 문제 정의

영상은 클로드 코드의 기본 세션에 원하는 화면과 기능을 직접 추가하는 모드 개념을 소개한다. 기존 바이브 코딩이 웹 애플리케이션을 만드는 데 쓰였다면, 이번 사례는 코딩 도구 내부에서 동작하는 프로그램을 만드는 데 적용한다. 실습의 문제는 프로젝트 파일을 확인하려고 별도 탐색기를 오가거나 파일 경로를 직접 입력해야 하는 불편이다. 이를 해결하기 위해 세션 안에 파일 탐색기를 만들고, 파일 멘션과 내용 미리보기를 차례로 추가한다.

🕒 시간순 섹션별 상세정리

1. 모드의 개념과 훅·플러그인과의 관계

• 게임 모딩에 빗대어 클로드 코드의 화면과 기능을 사용자 취향에 맞게 바꾸는 개념을 소개하고, 세션 내부 프로그램도 바이브 코딩으로 만들 수 있다고 보여준다. [00:49]
• 도구 호출 과정에 모드가 개입하는 방식과 파일 탐색기·프롬프트 수정 사례를 제시한다. 훅은 세션 밖에, 모드는 세션 안에 있다는 구분도 보여준다. [01:43]
• 모드는 스킬 등을 묶어 제공하는 플러그인 안에 추가되는 요소라고 안내한다. [01:54]

2. 등록 위치와 실행 코드의 보안 위험

• .claude/skills에 모드의 존재를 알려야 한다고 설명하며, JavaScript 또는 TypeScript로 파일 탐색기를 만드는 실습을 예고한다. [02:35]
• 홈의 등록 위치를 이용하는 전역 사용과 프로젝트 폴더 안에 등록하는 프로젝트 한정 사용을 구분한다. [03:05]
• 실행 코드가 환경 파일을 외부 서버로 보내면 API 정보 등이 유출될 수 있다고 경고하고, 직접 제작하거나 validate로 검토하는 방법을 보여준다. [03:49]

3. 프로젝트 준비와 파일 탐색기 생성 요청

• 실습용 프로젝트 폴더로 이동해 클로드 코드를 실행하고, 업데이트와 모델·추론 강도 설정 방법을 안내한다. [04:50]
• 프로젝트 내용을 볼 수 있는 오른쪽 파일 탐색기와 파일을 쉽게 멘션하는 버튼을 자연어로 요청한다. [05:28]
• 생성된 모드를 현재 세션에 활성화하는 흐름을 설명하며, 테스트 후 세션에 탐색기를 띄우는 과정을 기다린다. [06:20]

4. 레이아웃 문제 수정과 오른쪽 패널 구현

• 첫 결과는 기대한 오른쪽 2열 배치가 아니어서, 채팅과 파일 탐색기가 나란히 보여야 한다고 요구사항을 보완한다. [06:48]
• 패널 위치는 클로드 코드의 기본 렌더러가 정한다는 응답을 받고, TUI 전체 화면 방식으로 전환해 오른쪽 탐색기를 구현한다. [07:37]
• 패널 닫기와 탐색기 크기 조절 버튼이 동작하는 모습을 확인한다. [07:42]

5. 파일 미리보기 확장과 최종 활용 제안

• 파일과 폴더를 생성해 탐색기에 표시되는 모습을 확인한다. 파일 클릭이 멘션만 수행하자, Markdown 내용을 현재 세션에서 미리 볼 수 있도록 추가 요청한다. [08:50]
• 내용 미리보기, 목록으로 돌아가기, 별도 멘션 동작을 확인하고 프로젝트에서 사용할 파일 탐색기 모드의 활용성을 정리한다. [09:33]
• 숨긴 파일도 볼 수 있다고 설명하며 다양한 아이디어로 모드를 만들어보도록 권한다. 좋은 모드의 공유와 소개 의향을 밝힌 뒤 구독·추천 요청으로 영상을 마친다. [10:26]

🧾 결론

• 바이브 코딩의 대상이 별도 웹 애플리케이션에서 클로드 코드 세션 내부의 작업 도구로 확장되는 사례다.
• 파일 목록 확인, 폴더 펼치기, 내용 미리보기, 파일 멘션을 세션 안에서 처리하는 모습을 보여준다.
• 원하는 화면과 동작을 얻으려면 생성 결과를 확인하고, 배치와 클릭 동작을 구체적으로 다시 요청해야 한다.
• 외부 모드를 사용할 때는 편의성과 함께 실행 코드의 신뢰성을 판단해야 한다.

📈 투자·시사 포인트

• 개발 도구의 활용 가치를 평가할 때, 기본 기능뿐 아니라 사용자가 자기 작업 흐름에 맞춰 확장할 수 있는지도 살펴볼 만하다.
• 영상의 파일 탐색기 사례는 폴더 확인과 파일 지정에 필요한 화면 이동·입력을 줄이는 활용 방향을 보여준다. 실제 시간 절감 효과는 측정하지 않았다.
• 모드 배포가 늘어날수록 기능의 유용성과 실행 코드의 신뢰성이 함께 선택 기준이 될 수 있다.
• 영상에는 가격, 매출, 시장점유율이나 투자 수익 자료가 없어 특정 기업·자산의 투자 판단으로 연결할 근거는 부족하다.

⚠️ 불확실하거나 확인이 필요한 부분

• 모드의 정확한 지원 버전, 등록 파일 구성, 활성화 절차는 전사만으로 재현하기 어렵다. 영상은 업데이트와 .claude/skills 위치를 안내하지만 전체 설정 파일을 제시하지 않는다.
• validate가 무엇을 검사하며 악성 동작을 어느 범위까지 탐지하는지는 설명하지 않는다. 검토 기능의 존재만으로 보안이 보장된다고 판단할 수 없다.
• 오른쪽 패널 배치는 초기 결과에서 구현되지 않았고, 기본 렌더러의 제약과 TUI 전체 화면 방식이 언급된다. 다른 환경에서도 같은 배치가 가능한지는 확인이 필요하다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 사용 중인 클로드 코드에서 모드 지원 여부와 업데이트 상태를 확인한다.
• 전역 사용과 프로젝트 한정 사용 중 필요한 범위를 정하고, 영상에서 안내한 등록 위치와 실제 설정 구성을 확인한다.
• 파일 탐색기를 요청할 때 채팅과의 2열 배치, 폴더 펼치기, 파일 멘션 버튼, Markdown 미리보기 동작을 구체적으로 적는다.
• 생성 결과에서 파일·폴더 표시, 미리보기, 멘션, 패널 닫기와 크기 조절이 의도대로 동작하는지 확인한다.

❓ 열린 질문

• 모드가 접근할 수 있는 파일과 네트워크 범위는 어떻게 제한되며, validate는 그중 무엇을 확인하는가?
• 기본 렌더러와 TUI 전체 화면 방식에서 모드가 제어할 수 있는 레이아웃 범위는 각각 어디까지인가?
• 프로젝트에서 다시 실행했을 때 모드가 유지되는 조건과 다른 프로젝트로 옮기는 방법은 무엇인가?