Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
본 글은 Claude Code mods를 활용하여 코드 리뷰 효율성을 극대화한 경험을 공유합니다. 특히 검토 중인 diff와 AI의 요청 사항을 별도의 페인과 배너 형태로 고정 표시하는 모드를 직접 제작했습니다. 이를 통해 여러 세션에서 코드를 읽고 응답할 때 발생하는 정보 흐름의 단절 문제를 해결하고, 개발 워크플로우를 개선했습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Zenn AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기左に解説、右のペインにチャンクの差分と周辺コード、下の帯に進捗とnext・back・doneのボタンが出ているClaude Codeの画面
Claude Code 화면 오른쪽에는 검토 중인 차이점(diff)이 한 덩어리씩 표시됩니다. 다른 세션에서는 프롬프트 위에 Claude가 요청한 내용이 나열되는 배너도 표시합니다.
이 두 가지 모두 Claude Code mods를 이용해 제가 직접 만들었습니다.
최근에는 Claude Code 세션을 동시에 6개 이상 구동하고 있습니다. 코드를 작성하는 속도는 이미 충분하기 때문에, 막히는 부분은 항상 저의 차례, 즉 차이점을 읽을 때와 Claude가 요청한 사항에 응답할 때였습니다. 이 두 지점을 편리하게 만들기 위해 만든 화면에 대한 이야기입니다.
Claude Code mods는 Claude Code의 모양과 움직임을 바꿀 수 있는 플러그인입니다. JavaScript나 TypeScript로 작성된 함수가 Claude Code 내에서 작동하며, 대화 옆에 페인을 열거나, 프롬프트 위에 배너를 놓거나, 툴 호출을 가로챌 수 있습니다. hooks나 skills, MCP 서버와 달리, 화면에 무언가를 그릴 수 있는 것은 mods뿐입니다. 자세한 내용은 공식 문서를 참고하세요.
skills나 hooks 역시 상당히 정교하게 만들어졌습니다. 하지만 아무리 정교하게 만들더라도, Claude의 답변은 대화 속에 텍스트로 흘러갑니다. 다시 읽고 싶은 내용은 위로 흘러가기 때문에 스크롤해서 찾아야 합니다.
mods를 만져보고 가장 다르다고 느낀 점은 정보를 놓아둘 '장소'를 가질 수 있다는 것이었습니다. 흘러가는 글이 아니라, 정해진 위치에 항상 같은 형태로 표시되는 화면입니다.
첫 번째 불편함은 코드 리뷰였습니다.
AI가 코드를 작성하게 되면서, 리뷰할 기회가 급격히 늘어났습니다. 세션마다 다른 PR(Pull Request)을 열고 여러 PR을 동시에 검토하는 경우도 있습니다. 리뷰에 사용되는 시간이 늘어난 만큼, 그 경험 자체를 개선하고 싶어서 만들기를 시작하게 된 계기입니다.
터미널에서 차이점을 추적하는 것도 힘들고, GitHub 화면도 힘듭니다. 결국 IDE로 보거나 GitHub로 보거나 왔다 갔다 하는 사이에, 지금 어디를 리뷰하고 있는지 알 수 없게 되었습니다.
어떤 파일부터 읽는 것이 좋을지 매번 Claude에게 제안받았습니다. 그 제안은 유용하지만, 그것 역시 대화 속에 흘러가기 때문에 두 번째 파일을쯤 되면 원래 순서를 잃어버립니다.
그래서, 리뷰를 보조하는 skill과, 그것을 표시하는 mod를 만들었습니다. 제가 만들고 싶은 것을 Claude에게 이야기하자, 처음 작동하는 버전은 순식간에 완성되었습니다.
Claude Code에도 차이점 관련 기능이 있습니다. /diff는 변경 사항을 옆으로 보여주지만, 어디부터 읽을지는 스스로 정해야 합니다. /code-review는 AI가 버그를 찾아 지적해 주지만, 판단의 주체는 AI입니다. 제가 원했던 것은 그 어느 것도 아니었고, 제가 판단하기 위한 읽는 순서와 질문을 제공하는 것이었습니다.
skill은 PR의 차이점을 이해하기 쉬운 단위(chunk)로 나누고, 읽는 순서를 정해줍니다. 인터페이스 변경부터 먼저, 테스트는 나중에, 와 같은 방식입니다.
이는 레이어드 아키텍처(layered architecture) 프로젝트에서 특히 유용했습니다. 레이어가 분리되어 있으면, 도메인 계층(domain layer)부터 읽고, 애플리케이션 계층(application layer), 인프라 계층(infrastructure layer), UI 순으로 바깥쪽으로 읽고 싶다는 순서가 명확합니다. PR의 차이점을 그 순서에 맞춰 재배열해 주기 때문에, 항상 읽고 싶은 순서대로 읽을 수 있습니다.
리뷰를 시작하면, 먼저 전체 지도가 나옵니다.
全体マップ。変更の意図、規模、2つのチャンクの分類と要点、読む順番の理由、全体で人間が判断すべきことが並んでいる
Claude에게는 리뷰어 역할이 아니라 안내원 역할을 맡겼습니다. 린트(lint)나 타입 같은 기계적인 체크는 AI에게 맡기고, 변경 사항이 의도에 맞는지, 설계가 더 단순하게 할 수 있는지와 같은 판단은 제가 합니다. Claude는 한 덩어리씩 그 판단에 필요한 맥락과 질문만 던져줍니다.
チャンクの解説。人間が判断すべきことと、AIが気になった点が箇条書きで並んでいる
프롬프트 위의 배너에는 리뷰 대상의 제목과 진행 상황, 그리고 next, back, done 버튼이 나옵니다. 다 읽으면 next를 누르면 다음 덩어리로 전환됩니다.
レビュー対象のタイトル、0/2の進捗、今のチャンク名、next・back・done・unifiedのボタンが並んだ帯
지금까지 이 방식으로 10개 이상의 PR을 읽었습니다. 사용해 보니 달라진 점은 길을 잃지 않았다는 것입니다. 지금이 전체의 몇 번째 덩어리이며, 무엇을 보고 있는지 항상 화면에 표시되므로, IDE와 GitHub를 오갈 필요가 없어졌습니다.
페인에는 현재 청크의 차분(diff)이 표시됩니다. 이것이 터미널의 git diff보다 훨씬 보기 좋아서, 만들어 정말 잘했다고 생각한 가장 큰 부분이었습니다.
追加した行に緑の背景色が付いた差分と、その下に参照した周辺コードが並んだペイン
표시는 자신의 취향에 맞게 세밀하게 만들었습니다.
git diff는 줄의 시작 부분에 있는 +와 - 색상만으로 변경 사항을 구분해야 합니다. 페인이라면 줄 전체에 색을 입힐 수 있기 때문에, 수정된 줄은 삭제된 줄의 빨간색과 추가된 줄의 녹색이 위아래로 나란히 배열되어 무엇이 어떻게 바뀌었는지 바로 읽을 수 있습니다.
消した行に赤、足した行に緑の背景色が付いた差分と、テスト対象の関数を参照したコード
변경 전후에 무엇이 있었는지도 같은 화면에서 읽을 수 있습니다. 이런 시각적 선호도를 말하면 그 자리에서 반영해 주는 것도 mods의 좋은 점입니다.
두 번째 불편함은 Claude가 자신에게 하는 요청이었습니다.
세션을 6개 이상 나열하고 있으면, 각각에서 무엇을 진행했는지 대화 내용을 거슬러 확인해야 합니다. 게다가 Claude가 '작동 확인 부탁드립니다', 'OO 설정을 해주세요'와 같이 자신에게 적어 놓은 지시 사항들을 자주 놓쳤습니다.
놓치기 쉬운 데에는 이유가 있습니다. 터미널에는 강조 표현이 굵게 처리된 정도밖에 없기 때문입니다. 긴 답변 중간에 쓰인 요청 사항들은 다른 문장과 시각적으로 거의 차이가 없습니다. 확인을 기다리며 멈춰 있는 세션에 한동안 알아차리지 못할 때도 있었습니다.
그래서 Claude가 자신에게 요청한 것을 프롬프트 상단에 계속 보여주는 띠를 만들었습니다.
Your turnに頼まれごとが2件、開いたLaterに2件並んでいる帯
이 띠는 'Your turn'(지금 할 일)과 'Later'(나중에 할 일)의 두 단으로 구성되어 있습니다. 확인이나 판단처럼 자신이 움직여야 작업이 진행되는 것은 'Your turn'에 들어갑니다. 미루게 된 작업처럼 당장 필요하지 않은 것은 'Later'에 들어갑니다.
'Later'는 평소에는 접혀 있어서 건수만 보입니다. 클릭하면 열리고 내용물이 나열됩니다. 각 항목의 '✓'를 누르면 완료가 되고, '지금 할 일'을 누르면 'Your turn'으로 올라갑니다.
등록하는 것은 Claude 자신입니다. Claude에게 요청할 때는 답변과 동시에 띠에 등록하도록 규칙으로 작성했습니다. 단순히 답변만 했다고 지우지 않고, 요청한 것이 끝났다고 알았을 때 삭제하도록까지 정해두었습니다.
이로써 세션을 전환해도 대화를 거슬러 올라갈 필요 없이, 그 세션이 자신에게 무엇을 요구하는지 띠를 보면 알 수 있게 되었습니다.
마지막으로, 앞으로 mods를 시도해 볼 사람들을 위해 자신이 거쳐 간 시작 방법과 사용해 보니 좋았던 사용법을 정리합니다.
코드는 직접 작성하지 않았습니다. 만들고 싶은 화면을 Claude에게 이야기하면, Claude Code에 내장된 plugin-authoring라는 skill을 사용하여 Claude가 mod를 작성해 줍니다. 필요한 것은 Claude Code v2.1.287 이상입니다.
Claude가 작성한 mod는 해당 세션 전용 폴더에 놓이며, 오래되면 삭제됩니다. 마음에 드는 mod는 자신의 폴더(자신의 경우 dotfiles)에 복사해 두면 다른 세션에서도 사용할 수 있습니다. 절차의 자세한 내용은 공식 문서의 제작 방법 페이지에 있습니다.
mod는 자신의 권한으로 그대로 작동하는 코드이므로, 타인의 mod를 넣을 때는 신뢰할 수 있는 작성자의 것만 사용하는 것이 안전합니다.
직접 2개를 만들어 보고 이렇게 쓰니 좋다고 생각했습니다.
두 개의 화면을 만들면서 느끼는 것은, Claude Code의 불편함 중 상당 부분은 자신의 작업 방식에 맞춰 화면을 구성하면 사라진다는 것입니다.
도구에 맞춰 참아야 했던 것들을, mods를 사용하면 '이런 화면이 필요하다'라고 Claude에게 말하는 것부터 시작할 수 있게 되었다는 점입니다. 리뷰 페인과 배너 역시, 만든 후에 실제로 사용해보고 방해가 된다고 느낀 것을 덜어내는 과정으로 지금의 형태가 되었습니다.
두 가지 모두 아직 시도 중입니다. 사용하면서 또 덜어내거나 추가해 나갈 것 같습니다.
여러 개의 Claude Code를 나란히 두고 작동시키는 이야기는 제 블로그에도 작성했습니다.
