이 영상의 주제
이 영상은 Claude Code의 공식 UI 커스터마이징 기능인 ‘모드(Modes)’ 시스템을 다룹니다. 타입스크립트 기반의 미들웨어 구조를 활용해 입력창 상단, 응답 화면, 측면 패널 등에 커스텀 UI와 기능을 직접 구현하는 방법을 설명합니다. 대상 시청자는 Claude Code를 사용하는 중급 이상의 개발자입니다. 이 영상을 통해 Claude Code의 화면을 입맛에 맞게 변경하고, PR 상태 확인이나 토큰 마스킹 등 업무 효율을 높이는 다양한 활용 사례를 얻을 수 있습니다.
다루는 기술 스택 / 키워드
- Claude Code
- TypeScript
- 미들웨어 (Middleware)
- 플러그인
- UI 커스터마이징
- 이벤트 훅 (Hooks)
- 상태 관리
타임스탬프별 핵심 포인트
| 시간 | 내용 | |—|—| | 00:00 | Claude Code의 새로운 UI 커스터마이징 기능 ‘모드’ 소개 | | 00:36 | 모드의 동작 원리 및 타입스크립트 미들웨어 구조 설명 | | 02:26 | 실제 화면 매칭 방법 및 이메일 마스킹 기능 구현 예시 | | 04:36 | Claude Code 모드 활용 실제 사례 10가지 (PR 확인, 리니어 연동, 브라우저 등) | | 07:19 | AI를 활용한 모드 코드 작성 및 마무리 |
기본 정보
| 항목 | 내용 | |—|—| | 채널 | 코드팩토리 | | 카테고리 | 프로그래밍 | | 게시일 | 2026-10-06 | | 영상 길이 | 16:39 | | 처리 엔진 | gemini-3.5-flash-lite+transcript | | 원본 영상 | YouTube에서 보기 |