Speaker A
어떻게 보면 역사상 가장 큰 클로드 코드의 사용성 업데이트가 나왔습니다.
Claude Code의 화면을 직접 커스터마이징하는 '모드' 시스템을 소개하고, 미들웨어 방식 훅으로 이메일 가리기 등을 구현하는 법과 10가지 활용 사례를 정리합니다.
Key Takeaways
- Claude Code 모드는 공식 지원되는 플러그인 기반 UI 커스터마이징 시스템이다.
- 훅 이벤트에 함수를 등록하고 next로 흐름을 제어하는 구조로, 웹 미들웨어에 익숙한 개발자에게 친숙하다.
- 모드는 화면 표시만 변경하므로 모델의 원본 응답과 컨텍스트는 그대로 유지된다.
- 외부 도구 연동, 다이어그램 시각화, 작업 패널 등 개발 워크플로우 전반을 확장할 수 있다.
What the video covers
- Claude Code에 화면을 직접 변경할 수 있는 '모드' 기능이 공식 지원되어 입력창 위 정보 표시, 에이전트 작업 패널, 응답 일부 가리기 등이 가능해졌다고 소개합니다.
- 모드는 플러그인으로 구성되며, plugin 이름·버전을 기재하고 hooks.json에 실행할 TypeScript 파일 경로를 연결하는 방식입니다.
- Claude Code는 프롬프트 전송, 도구 호출, 응답 표시 시점에 이벤트를 발생시키며, 모드는 해당 이벤트에 함수를 등록하는 웹 미들웨어와 유사한 구조입니다.
- 미들웨어 함수는 ctx(기능 접근), event(현재 이벤트 정보), next(다음 처리로 넘기는 콜백) 세 파라미터를 받습니다.
- next에 수정한 이벤트를 넘기면 변경된 값으로 다음 처리가 진행되고, next 호출 없이 값을 반환하면 그 값이 출력으로 사용됩니다.
- 예시로 응답의 이메일 주소를 '이메일 가림'으로 바꾸고, 입력창 위 버튼으로 표시/가리기를 토글하는 기능을 구현합니다.
- 표시 내용만 바뀌고 모델이 읽는 원본 결과값은 유지되므로, 보안이나 촬영 목적의 화면 가리기에 적합합니다.
- 활용 사례로 PR 상태 확인, 이슈 트래커 연동, 문단 단위 수정, 브라우저 패널, 머메이드 다이어그램 렌더링, 대기 중 게임, 한국어 UI 등이 소개됩니다.
Full Transcript — Download SRT & Markdown
Speaker A
클로드 코드의 화면을 우리가 직접 변경을 할 수가 있게 됐어요.
Speaker A
정말 다양한 것들을 우리가 할 수가 있는데, 입력창 위에다가 우리가 원하는 정보를 붙이고, 옆에 에이전트들이 작업하고 있는 패널들을 띄우고, 답변 속 이메일을 클릭하기 전까지 안 보이게 가릴 수도 있어요.
Speaker A
자, 이런 기능을 단순히 타입스크립트 코드로 미들웨어 방식으로 우리가 붙일 수 있는 '모드'라는 시스템이 실시됐습니다.
Speaker A
자, 여러분이 상상하던 클로드 코드에 필요한 UI를 이제 직접 만들 수 있게 됐는데, 공식 지원으로 공식 UI에 붙일 수 있게 되니 굉장히 유용해요.
Speaker A
어떻게 이걸 우리가 사용할 수 있는지 제가 설명을 자세히 해 드리고, 실제로 사람들이 많이 쓰고 있는 유용한 사례 열 가지를 한번 빠르게 소개해 드리도록 할게요.
Speaker A
쏘as지. 자, 먼저 공부부터 조금 해 보겠습니다. 모드가 어떻게 동작하는지부터 한번 봐 보도록 할게요.
Speaker A
자, 모드는 클로드 코드 플러그인을 우리가 만들 수가 있고요. 플러그인의 이름이랑 버전을 적고, 훅스(hooks.json)에 실행할 코드 파일을 우리가 연결해 주면 돼요.
Speaker A
자, 여기에 있는 모듈스의 타입스크립트 파일에 경로를 넣고요. 그 파일에다가 우리가 원하는 기능을 작성해 주면 됩니다.
Speaker A
자, 그러면 이 코드를 클로드 코드가 언제 호출할지 우리가 정해 주면 돼요.
Speaker A
자, 클로드 코드는 프롬프트를 보낼 때, 도구를 호출할 때, 그리고 응답을 화면에 표시할 때 각각 이벤트들을 발생시키거든요. 자, 그럼 우리는 원하는 이벤트에 함수를 등록하면 돼요. 그래서 우리가 일반적으로 알고 있었던 후크 기능이랑 굉장히 비슷하죠?
Speaker A
자, 이렇게 등록을 하게 되면 클로드 코드가 우리가 등록한 작업을 수행하기 직전에 우리 함수를 호출하게 됩니다.
Speaker A
클로드 코드의 아웃풋에서 이메일을 가리고 싶다고 하면, 화면에 표시되는 이벤트에 함수를 연결하면 돼요. 이 함수가 이메일을 가린 뒤에, 클로드 코드가 그 결과를 화면에 따로 표시하도록 우리가 표시되는 정보를 변경하는 거죠.
Speaker A
웹 개발하는 사람들은 전부 다 미들웨어를 써 봤을 건데, 굉장히 익숙한 구조입니다. 클로드 코드가 원래 작업을 수행하기 전에 중간에 우리가 인터셉트해서 내용을 바꾸거나 확인할 수가 있는 거죠.
Speaker A
자, 함수는 세 가지 파라미터를 받고 있어요. 달러 기호(ctx), 지금 발생한 이벤트(event), 그리고 넥스트(next), 이렇게 세 가지입니다.
Speaker A
자, 넥스트를 보면 바로 알 수가 있죠. 콜백 형태입니다.
Speaker A
자, 컨텍스트로는 우리가 클로드 코드의 기능을 사용할 수가 있어요. 패널을 띄우고, 파일을 읽고, 모델을 호출할 수가 있어요. 이벤트에서는 우리가 지금 표시할 응답이나 호출할 도구 정보를 확인할 수가 있는 거죠.
Speaker A
자, 넥스트로 호출하면 우리가 다음 미들웨어에 이제 넘길 수가 있습니다. 이벤트를 그대로 넘기면 기존 동작을 그대로 유지할 수가 있고, 수정한 이벤트를 넘기면 다음 미들웨어 처리를 할 때 우리가 넘긴 결과값을 사용하게 되는 거죠.
Speaker A
넥스트로 호출하지 않고 그냥 바로 반환을 하게 되면, 우리가 반환한 값이 아웃풋으로 사용됩니다.
Speaker A
자, 이런 식으로 작업 상태를 읽어서 표시하고, 응답의 표시 내용을 바꾸고, 버튼이랑 패널로 우리가 필요한 기능들을 따로 만들 수도 있다는 거예요.
Speaker A
자, 그러면 실제 화면과 어떻게 매칭되는지 한번 확인해 보도록 할게요. 클로드 응답에 이메일 주소가 나오는데, 촬영할 때는 이 이메일 주소를 우리가 가리고 싶을 수가 있잖아요. 또는 그냥 보안 때문에 가리고 싶을 수도 있고요.
Speaker A
이 모드를 우리가 켜면 이메일 주소 대신에 '이메일 가림'이라는 가림막을 보여줘요. 이메일 주소를 확인하고 싶을 때는 '표시하기' 버튼을 누르면 되고, 이 액션은 호버나 클릭 형태로 우리가 설계할 수도 있어요.
Speaker A
자, 이 기능을 만드는 핵심부터 보면, UI 렌더에다 우리가 함수를 등록해 주고, 어시스턴트 메시지를 지정해서 클로드의 응답을 화면에 표시할 때 이 함수를 호출하도록 하면 됩니다.
Speaker A
이벤트의 프롭스에서 화면에 표시할 내용을 확인하고, 마스크 함수로 이메일 주소를 찾아서 '이메일 가림'이라는 표현으로 바꾸는 거죠.
Speaker A
그리고 이 내용을 담은 이벤트를 넥스트한테 넘기면 돼요. 그러면 클로드 코드가 이메일을 가린 응답을 화면에 표시를 해 줍니다.
Speaker A
자, 가릴지 말지는 우리가 '히든'이라는 값으로 정할 수가 있어요. 이 값을 켜면 이메일을 가리고, 끄면 원래 내용을 그대로 넘길 수가 있다는 거죠.
Speaker A
자, 그러면 이 값을 사용자가 직접 바꿀 수 있도록 우리가 버튼을 붙여야겠죠? 그럴 때 우리가 프롬프트를 지정해 주면 됩니다. 이름 그대로 입력창 위에다가 UI를 그리는 위치라고 보시면 돼요.
Speaker A
여기에다가 텍스트랑 버튼을 넣고, 버튼의 onPress에서 히든 값을 반전시켜 주면 돼요. 그리고 인밸리데이트를 호출해서 클로드 코드 화면을 다시 그리도록 하면 됩니다.
Speaker A
그래서 버튼을 누르면 이메일을 보여 주고, 다시 누르면 이메일이 가려지는 거죠. 버튼의 글자도 '표시하기'와 '다시 가리기'가 바뀌도록 상태를 변경해 주면 돼요.
Speaker A
자, 이 과정 속에서 우리는 화면에 실제로 표시되는 내용만 바꿉니다. LLM 모델은 원래 이메일 주소로 메일 초안을 작성하게 되고, 모드는 그 결과를 우리가 화면에 보여 줄 때만 작동을 하게 돼요. 그래서 원본 결과값과 클로드가 읽어 드리는 내용은 그대로 유지가 된다는 겁니다.
Speaker A
자, 그래서 여러분이 화면에 어떤 부분을 바꾸고 싶은지 먼저 정하고, 그 이벤트에다 코드를 연결하고, 클릭했을 때 상태가 바뀌는 형태로 설계를 하면 돼요. 우리 개발자들은 굉장히 많이 하는 방식이었죠.
Speaker A
그래서 그런 방식으로 입력창 위에다가 상태를 표시하거나, 옆에다가 작업 패널 같은 거를 붙일 수가 있다는 거예요.
Speaker A
자, 그러면 이런 모드를 실질적으로 어디에 사용할 수 있는지, 지금 인기 있는 열 가지 실제 사례들을 한번 빠르게 봐 보도록 할게요.
Speaker A
자, 첫 번째는 PR 상태 확인이에요. 입력창 위에다가 리뷰랑 검사 상태를 바로 확인할 수가 있어요. 코드를 작성하면서 PR에 어떤 확인할 것들이 남았는지 같이 볼 수도 있죠.
Speaker A
자, 두 번째는 리니어랑 연결하는 거예요. 리니어뿐만 아니라 다른 것들도 될 수 있습니다. 클로드 코드 안에서 이슈를 직접 검색하고, 선택한 이슈를 작업 요청으로 바로 넘길 수가 있어요. 코드 수정이랑 테스트를 마친 뒤에는 작업 결과를 댓글 초안으로 정리해서 업로드할 수도 있고요.
Speaker A
자, 세 번째는 문단을 직접 선택해서 수정하는 기능이요. 옆 패널에서 고칠 문단의 연필 버튼을 누르고, 어떻게 바꿀지 코멘트를 적을 수 있게 만들 수가 있다는 거죠. 그러면 이 컨텍스트를 갖고 클로드가 해당 문단을 수정하고, 패널도 수정한 내용을 그대로 보여 줄 수가 있어요.
Speaker A
자, 네 번째는 굉장히 많이 쓰는 기능인데, 브라우저 기능이에요. 지원하는 터미널 환경에서 클로드 코드 옆에 브라우저를 직접 붙일 수가 있습니다. 그래서 대화랑 웹페이지를 한 화면에 놓고 작업하는 방식으로 가져갈 수가 있다는 거죠.
Speaker A
자, 다섯 번째는 다이어그램이요. 클로드가 응답에 머메이드 코드 같은 걸 작성하게 되면 원래 문자로만 보여지는데, 모드를 활용하면 그 자리에 문자로 그린 도식을 그대로 보여 줄 수가 있어요. 로그인 분기나 결제 흐름 같은 걸 표현할 때 머메이드를 굉장히 많이 쓰게 되는데, 호환되는 프로그램을 더 이상 실행할 필요 없이 클로드 코드에서 바로 확인이 가능한 거죠.
Speaker A
자, 여섯 번째는 게임입니다. 이런 걸 만들면 꼭 게임을 붙이는 분들이 있죠. 클로드 코드의 응답을 기다리는 동안 게임을 하면서 시간을 활용할 수 있는 형태로 쓸 수도 있어요.
Speaker A
자, 일곱 번째는 한국어 UI인데, 이건 한국어뿐만
Topics:Claude Code모드플러그인미들웨어훅UI 커스터마이징TypeScript개발 도구AI 코딩
