Claude Code Mods 설명, 10가지 사용 사례
원본 영상: Claude Code Mods 설명, 10가지 사용 사례
채널: 코드팩토리
Claude Code의 화면을 직접 구성하는 Mods
화자는 Mods를 Claude Code의 사용성을 크게 바꾸는 업데이트로 소개한다. 입력창 위에 필요한 정보를 붙이고, 옆에 에이전트의 작업 패널을 띄우며, 응답에 포함된 이메일 주소를 클릭하기 전까지 가리는 등 사용자가 원하는 화면을 구성할 수 있다는 설명이다.
이러한 기능은 TypeScript 코드로 작성해 미들웨어 방식으로 연결한다. 영상의 중심은 필요한 정보와 조작 기능을 Claude Code의 작업 화면에 직접 배치하는 것이다.
이벤트에 함수를 연결하는 구조
화자는 Mod의 TypeScript 파일 경로를 지정하고, 해당 파일에 원하는 기능을 작성하는 흐름을 설명한다. 응답을 화면에 표시하는 시점처럼 원하는 이벤트에 함수를 등록하면 Claude Code가 그 함수를 호출하는 방식이다.
이벤트에 연결된 함수가 받는 인자로는 $, 현재 발생한 이벤트, next가 제시된다.
이메일 가림으로 살펴보는 화면 변경
이메일 가림은 응답의 표시 내용을 바꾸는 예제다. 화자는 Claude Code의 출력에 포함된 이메일 주소를 가리고, 사용자가 클릭하면 확인할 수 있도록 만드는 기능을 소개한다.
구현 설명에서는 이벤트의 props에서 화면에 표시할 내용을 확인하는 과정을 보여준다. 가림 기능은 이렇게 응답이 표시되는 과정에 연결된다.
이어서 가림 상태를 변경하고 invalidate를 호출해 화면을 다시 그리는 흐름을 설명한다. 표시 내용을 바꾸는 기능에 사용자 조작을 연결하는 예제다.
작업 화면에 붙이는 정보와 조작 기능
옆 패널에서 수정할 문단 선택하기
문단 수정 사례에서는 옆 패널에 있는 문단의 연필 버튼을 눌러 수정할 대상을 선택한다. 문서의 특정 부분을 화면에서 직접 지정하는 방식이다.
입력창 위에 컨텍스트 사용량 표시하기
입력창 위에는 현재 컨텍스트 사용량처럼 작업 중 확인할 정보를 표시할 수 있다고 설명한다. 앞서 소개한 ‘입력창 위에 원하는 정보를 붙이는 기능’을 구체적으로 보여주는 사례다.
에이전트 작업 패널 배치하기
화자는 에이전트들이 작업하는 패널을 옆에 띄우는 구성을 소개한다. 각 에이전트를 눌러 개별 작업을 살펴보는 방식으로, 여러 에이전트의 진행 상황을 확인하는 화면을 구성한다.
반복해서 확인하는 정보에서 시작하기
마지막으로 화자는 평소 Claude Code를 사용하면서 따로 확인해야 했던 정보나 반복해서 입력하던 요청을 Mod로 만들어보라고 권한다. 필요한 정보를 계속 보여주거나 자주 사용하는 기능을 화면에 배치하는 데서 출발하라는 제안이다.
영상의 사례들은 화면에 정보를 추가하는 일과 사용자가 직접 조작하는 기능을 연결한다. 입력창 위의 정보 표시, 옆 패널의 작업 확인, 이메일 가림은 모두 자신의 작업 방식에 맞춰 Claude Code의 화면을 구성하는 예다.
출처
코드팩토리 — Claude Code Mods 설명, 10가지 사용 사례