Claude Code Mods 설명, 10가지 사용 사례

Video: Claude Code Mods 설명, 10가지 사용 사례
Channel: 코드팩토리
Duration: 8m 36s
Source: subtitle (auto, ko)
Transcript:
어떻게 보면 역사상 가장 큰 클로드 코드에 사용성 업데이트가 나왔습니다. 클로드 코드의 화면을 우리가 직접 변경을 할 수가 있게 됐어요. 정말 다양한 것들을 우리가 할 수가 있는데 입력창 위에다가 우리가 원하는 정보를 붙이고 옆에 에이전트들이 작업하고 있는 패널들을 띄우고 답변속 이메일을 클릭하기 전까지 안 보이게 가릴 수도 있어요. 자, 이런 기능을 단순히 타입스크립트 코드로 미들 방식으로 우리가 붙일 수 있는 모드라는 시스템이 실시됐습니다. 자, 여러분이 상상하던 클로드 코드에 필요한 UI를 이제 직접 만들 수 있게 됐는데 공식 지원으로 공식 UI에 붙일 수 있게 되니 굉장히 유용해요. 어떻게 이걸 우리가 사용할 수 있는지 제가 설명을 자세히 해 드리고 실제로 사람들이 많이 쓰고 있는 유용한 사례 열 가지 한번 빠르게 소개해 드리도록 할게요. 쏘as지. 자, 먼저 공부부터 조금 해 보겠습니다. 모드가 어떻게 동작하는지부터 한번 봐 보도록 할게요. 자, 모드는 클로드 코드 플러그인을 우리가 만들 수가 있고요.

플러인. 의 플러그의 이름이랑 버전을 적고 훅스.J제이슨의 제이슨에 실행할 코드 파일을 우리가 연결해 주면은 돼요. 자, 여기에 있는 모듈스의 타입스크립트 파일에 경로를 넣고요. 그 파일에다가 우리가 원하는 기능을 작성을 해 주면 됩니다. 자, 그러면이 코드를 클로드 코드가 언제 호출할지 우리가 정해 주면은 돼요. 자, 클로드 코드는 프롬프트를 보낼 때, 도굴 호출할 때, 그리고 응답을 화면에 표시할 때 각각 이벤트들을 발생을 시키거든요. 자, 그럼 우리는 원하는 이벤트에 함수를 등록하면 돼요. 그래서 우리가 일반적으로 알고 있었던 후 기능이랑 굉장히 비슷하죠? 자, 이렇게 등록을 하게 되면은 클로드 코드가 우리가 레지스터한 작업을 수행하기 직전에 우리 함수를 호출하게 됩니다. 클로드 코드의 아웃풋에서 이메일을 가리고 싶다라고 하면은 화면에 표시되는 이벤트에 함수를 연결하면 돼요.이 함수가 이메일을 가린 뒤에 클로드 코드가 그 결과를 화면에 따로 표시하도록 우리가 표시되는 정보를 변경하는 거죠. 웹 개발하는 사람들은 전부 다 미들웨어를 써 봤을 건데 굉장히 익숙한 구조입니다.

클로드 코드가 원래 작업을 수행하기 전에 중간에 우리가 인터셉트에서 내용을 바꾸거나 확인할 수가 있는 거죠. 자, 함수는 세 가지 파라미터를 받고 있어요. 달러 기호, 지금 발생한 이벤트, 그리고 넥스트 이렇게 세 가지입니다. 자, 넥스트를 보면 바로 알 수가 있죠. 콜백 형태입니다. 자, 달러로는 우리가 클로드 코드의 기능을 사용할 수가 있어요. 패널을 띄우고 파일을 읽고 모델을 호출할 수가 있어요. 이벤트에서 우리가 지금 표시할 응답이나 호출할 도구 정보를 우리가 확인할 수가 있는 거죠. 자, 넥스트로 호출하면 우리가 다음 미들웨어를 이제 넘길 수가 있습니다. 이벤트를 그대로 넘기면은 기존 동작을 우리가 그대로 유지할 수가 있고 수정한 이벤트를 넘기면 다음 미들와 처리를 할 때 우리가 넘긴 결과값을 사용하게 되는 거죠. 넥스트로 호출하지 않고 그냥 바로 반환을 하게 되면은 우리가 반환한 값이 아웃풋으로 사용됩니다. 자, 이런 식으로 그래서 우리가 작업 상태를 읽어서 표시하고 응답의 표시 내용을 바꾸고 버튼이랑 패널로 우리가 필요한 기능들을 따로 만들 수도 있다라는 거예요.

자, 그러면은 우리가 실제 화면이랑 어떻게 매칭되는지 한번 확인해 보도록 할게요. 클로드 응답에 이메일 주소가 나오는데 촬영할 때는이 이메일 주소를 우리가 가리고 싶을 수가 있잖아요. 또는 그냥 보안 때문에 가리고 싶을 수도 있고요.이 이 모드를 우리가 켜면은 이메일 주소 대신에 이메일 가림이라는 가림막을 보여줘요. 이메일 주소를 확인하고 싶을 때는 표시하기 버튼을 누르면 되고이 액션은 우리가 호버라든가 클릭 형태로 우리가 설계할 수도 있어요. 자,이 기능을 만드는 핵심부터 우리가 보면은 UI. 엔더에다 우리가 함수를 등록을 해 주고 어시스트 메시지를 지정해서 클로드의 응답을 화면에 표시할 때이 함수를 호출하도록 하면 됩니다. 이벤트에 프옵스에서 화면에 표시할 내용을 확인하고 마스크 함수로 이메일 주소를 찾아서 이메일 가림이라는 표현으로 우리가 바꾸는 거죠. 그리고이 내용을 담은 이벤트를 넥스트한테 우리가 넘기면 돼요. 그러면 클로드 코드가 이메일을 가린 응답을 화면에 표시를 해 줍니다. 자, 가릴지 말지는 우리가 히든이라는 값으로 정할 수가 있어요.이 값을 켜면 이메일을 가르고 끄면은 원래 내용을 그대로 넘길 수가 있다라는 거죠.

자, 그러면이 값을 사용자가 직접 바꿀 수 있도록 우리가 버튼을 붙여야겠죠? 자, 그럴 때 우리가 prompt트를 지정해 주면 됩니다. 이름 그대로 입력창 위에다가 UI를 그리는 위치라고 보시면 돼요. 자, 여기에다가 텍스트랑 버튼을 넣고 버튼에 온 프레스에서 히든 값을 우리가 반전시켜 주면 돼요. 자, 그리고 인ાલ val리데이트를 호출해서 클로드 코드 화면을 다시 그리도록 하면 됩니다. 자, 그래서 버튼을 누르면은 이메일을 보여 주고 다시 누르면 이메일을 이제 가려지는 거죠. 버튼의 글자도 표시해서 다시 가리기를 우리가 바꾸도록 상태를 변경해 주면 돼요. 자,이 과정 속에서 우리는 화면에 실제로 표시되는 내용만 바꿉니다. LM 모델은 원래 이메일 주소로 메일 초안을 작성을 하게 되고 모드는 그 결과를 우리가 화면에 보여 줄 때만 작동을 하게 돼요. 그래서 원본 결과값과 클로드가 읽어 드리는 내용은 그대로 유지가 된다라는 겁니다. 자, 그래서 여러분이 화면에 어떤 부분을 바꾸고 싶은지 먼저 정하고 그 이벤트에다 우리가 코드를 연결하고 클릭했을 상태가 바뀌는 형태로 설계를 하면 돼요.

우리 개발자들은 굉장히 많이 하는 방식이었죠. 자, 그래서 그런 방식으로 우리가 입력창 위에다가 상태를 표시하거나 옆에다가 작업 패널 같은 거를 붙일 수가 있다는 거예요. 자, 그러면 이런 모드를 우리가 실질적으로 어디에 사용할 수 있는지 지금 인기 있는 열 가지 실제 사례들을 한번 빠르게 봐 보도록 할게요. 자, 첫 번째는 PR 상태 확인하는 거예요. 입력창 위에다가 우리가 리뷰랑 검사 상태를 바로 확인할 수가 있어요. 자, 코드를 작성하면서 PR에 어떤 확인할 것들이 남았는지 우리가 같이 볼 수도 있죠. 자, 두 번째는 리니어랑 연결하는 거예요. 리니어뿐만 아니라 다른 것들이 될 수도 있습니다. 클로드코드 안에서 우리가 이슈를 직접 검색하고 선택한 이슈를 작업 요청을 우리가 바로 넘길 수가 있어요. 코드 수정이랑 테스트를 마친 뒤에는 작업 결과를 우리가 댓글 초안으로 정리하고서 업로드할 수도 있고요. 자, 세 번째는 문단에 직접 선택해서 수정하는 기능이요. 옆 패널에서 고칠 문단의 연필 버튼을 누르고 어떻게 바꿀지 우리가 코멘트를 적을 수가 있게 만들 수가 있다는 거죠.

자, 그러면은이 컨텍스트를 갖고 클로드가 해당 문단을 수정하고 패널도 수정한 내용을 그대로 보여 줄 수가 있어요. 자,네 번째는 굉장히 많이 쓰는 기능인데 브라우저 기능이에요. 지원하는 터미널 한에서 클로드 코드 옆에 브라우저를 직접 붙일 수가 있습니다. 그래서 대화랑 웹페이지를 우리가 한 화면에 놓고서 작업하는 방식으로 가져갈 수가 있다라는 거죠. 자, 다섯 번째는 다이어그램이요. 클로드가 응답에 머메이드 코드 같은 거를 작성을 하게 되면은 원래 문자로만 보여지는데 모드를 우리가 활용하게 되면은 그 자리에 우리가 문자로 그린 도식을 그대로 보여 줄 수가 있어요. 뭐 로그인의 분기라든가 결제 흐름 같은 거를 우리가 표현을 할 때 멀리를 굉장히 많이 쓰게 되는데 우리가 호환되는 프로그램을 더 이상 실행할 필요 없이 클로드 코드에서 바로 확인이 가능한 거죠. 자, 여섯 번째 게임입니다. 자, 이런 거 만들면은 꼭 게임을 붙이는 분들이 있죠. 클로드코드의 응답을 기다리는 동안 게임하면서 시간을 활용할 수 있는 형태로 쓸 수도 있어요.

자, 일곱 번째는 한국어 UI인데 이거는 한국어가 아니라 뭐 다른 언어도 마찬가지입니다. 자, 터미널에서 명령어 설명이랑 설정 항목을 우리가 한국어로 전부 다 바꿀 수가 있어. 자, 클로드 코드가 원래 표시하는 유아에도 이런 변화를 우리가 줄 수도 있다라는 겁니다. 자, 여덟 번째는 앞에서 미리 말했던 특정 문자 가리는 기능이요. 자, 촬영하다가 화면을 공유할 때 또는 아웃풋이 나오면 안 될 때 이메일 주소 또는 베이시 인코딩된 값, JWT 토큰 이런 것들을 우리가 가리도록 할 수가 있다라는 거죠. 우리가 봐야 될 때만 그리고 필요할 때만 버튼을 눌러서 확인하도록 할 수 있어요. 자, 아홉 번째는 컨텍스트 사용량이에요. 입력창 위에다가 현재 컨텍스트 사용량이랑 최근 턴에서 얼마나 컨텍스트 사용량이 증가했는지 우리가 확인할 수 있도록 설계할 수가 있어요. 파일을 읽거나 작업을 이어갈 때 컨텍스트가 얼마나 늘어나는지 우리가 한 눈에 볼 수 있는 거죠. 자, 마지막은 에이전트 관제. 현재 세션에서 실행하고 있는 에이전트들을 우리가 옆에 패널에서 전부 다 모아서 보여 줄 수 있어요.

각각 에이전트를 눌러서 우리가 대화랑 도구 사용 내역을 확인하고 어떤 작업을 맞췄는지도 볼 수 있어요. 자, 이런 거는 우리가 다이나믹 워크플로 같은 거를 쓸 때 굉장히 유용하겠죠. 자, 그럼이 지식을 기반으로 여러분도 지금까지 떠올랐던 클로드 코드에 있었으면 하는 기능들을 모드로 한번 만들어 보세요. 그냥 떠오른 대로 말하면 되는데 예를 들어서 입력창 위에다가 현재 깃 브렌치를 보여주는 모드를 만들어 줘라고 요청을 하게 되면은 그냥 알아서 만들어 줍니다. 어디에서 무엇을 보여 줄지 설명하면은 클로드가 모드 코드를 알아서 작성을 해 줘요. 그래서 여러분은 어디까지 가능한지만 알고 있으면은 그 지식을 기반으로 충분히 여러분의 아이디어를 펼쳐낼 수가 있겠죠. 자, 모드는 기본적으로 플러그인처럼 설치가 되기 때문에 여러분이 배포를 하거나 다른 사람들이랑 공유할 수도 있습니다. 자, 그러니까 평소에 클로드 코드를 쓰면서 따로 확인했어야 되는 정보 또는 반복해서 입력하는 요청들 이런 것들을 모드로 설계해서 한번 작업을 해 보세요.

그 정보를 계속 보여 주거나 반복해서 누르던 버튼 같은 거를 클로드 코드 바로 위에다가 넣게 되면은 여러분의 작업 표율이 굉장히 올라갈 수가 있습니다. 가능성은 무궁무진하기 때문에 여러분들의 아이디어를 충분히 많이 테스트를 해 보면 좋을 것 같아요. 자, 그래서 여러분이 생각했을 때 필요한 모드들을 직접 만들어 보시고 댓글에도 남겨 주시고 오늘 영상이 좋았다면 구독과 좋아요 설정에 하이볼까지 해 주시면은 제가 다음 영상을 제작하는데 큰 힘이 됩니다. 쏘as지. Yeah.