사내 Claude Code 플러그인 마켓플레이스에 플러그인 세 개를 올리면서 겪은 구조 설계, 설치 인증 함정, 배포·버전 관리 이야기입니다.

출근 버튼 하나 누르려고 브라우저 탭을 찾고, 마감을 놓치지 않으려고 표를 다시 열었습니다. 필요한 건 대시보드 전체가 아니라 늘 보이는 위젯 몇 개와, 시간이 되면 울리는 알림이었어요.

필드 타입과 제약, 입력 경로가 곱해지는 노코드 플랫폼이라 사람이 다 돌릴 수가 없었습니다. 고정 시드 위에서 실제 API로 도는 네 층짜리 스위트를 만들었고, 첫 실행에서 실제 이슈 7건이 나…

초록 테스트, grep 0건, "기존 에러"라는 설명까지 AI의 보고는 매번 그럴듯했습니다. 확인해 보면 틀려 있었어요. 그 순간 여섯 개와 거기서 나온 검증 원칙 다섯 줄을 모았습니다.

Figma 시안과 구현 화면을 눈이 아니라 픽셀 일치율과 DOM 수치로 대조하는 검증 루프를, 로그인·모듈 해석·크기 불일치 같은 우리 환경의 함정에 맞춰 보정한 과정을 정리합니다.

MUI X DataGrid Premium을 걷어내고 자체 엔진을 사내 디자인 시스템으로 옮기는 동안, 구현 1·리뷰 1·컨트롤러 구조로 AI를 어떻게 굴렸고 무엇을 직접 했는지 정리했습니다.

화면 문구를 10개 언어로 내는데, 태국어와 타밀어는 제가 읽지도 못합니다. 그래서 키 추가와 번역체 교정을 AI 에이전트 둘에게 나누고, 기존 하드코딩은 커맨드 하나로 옮깁니다.

이관을 끝내고 배포하자 링크, 언어 전환, 웹폰트, 타입, lint가 하나씩 깨졌습니다. 전부 로컬에서는 멀쩡했고, 전부 Next가 자동으로 해주던 일이었어요.

라우트 39개, layout 17개, `.css.ts` 403개를 react-router 기반 SPA로 옮겼습니다. 폴더를 읽어 라우트를 만들고 import는 alias로 바꿔치기해서, 되돌릴…

Vite는 vanilla-extract에서 막혔고 Turbopack은 3,062건이 실패했습니다. 코드 다이어트의 상한은 9%였어요. 남은 카드가 Rsbuild 하나였고, 그래서 위험을 목록으로…

`.css.ts` 403개를 쓰는 Next 14 앱을 다른 번들러로 옮기려 했습니다. Turbopack, Vite, Rspack이 모두 실패했고, vanilla-extract 로더 세 줄을 고쳐…

dev 서버가 가장 무거운 화면을 처음 여는 데 232초가 걸렸습니다. 코드를 줄이면 될 줄 알았는데, 재 보니 상한이 9%였어요. 나머지는 우리가 쓴 코드가 아니었습니다.

`@mui`를 import하던 파일 790개가 0개가 됐습니다. 사용자가 받는 JS는 라우트 합계 19.1% 줄었고, 무거운 화면의 TBT는 248ms에서 39ms가 됐어요. 빌드 메모리는 오히…

3년 된 서비스에서 MUI를 완전히 제거하고 같은 조건에서 전후를 쟀습니다. 메인스레드 블로킹은 84.2% 줄었고, cold 빌드와 빌드 메모리, CSS 크기는 늘었습니다.

컴포넌트 트리 CLI, /구조도, /설계도를 만들며 AI의 설명을 텍스트가 아니라 눌러볼 수 있는 HTML로 받게 된 과정을 정리했습니다.

2주치 기능을 AI 서브에이전트 10개로 나눠 다시 뜯어보고, 틀린 주장을 거르고, 실제로 반영된 것까지 따라간 기록

MUI를 디자인에 맞출수록 우리 코드는 MUI 내부 구조를 아는 사람만 읽을 수 있게 됐습니다. `sx`가 539군데, `styled`로 감싼 파일이 47개였어요.

규칙 문서 13개와 역할별 에이전트 34개로 AI와 팀이 같은 기준으로 일하게 만든 기록

기획부터 E2E까지, 스프린트 파이프라인을 커맨드로 만들기

디자인시스템의 지식이 기록되고 축적되는 과정

컴포넌트 구조를 정의

다양한 방법론으로 여러 번 갈아엎으면서 배운 컴포넌트 패턴 이야기

디자인 시스템의 첫 단계를 거쳐가며 겪은 시행착오들

- 과거에 AI를 이용하여 생산성을 높이려 했던 방식들

기록을 의지에 맡기면 까먹었고, 한 곳에 다 넣으면 작업 로그가 지식을 덮었습니다. 그래서 일지, 기능 문서, 메모리, 규칙 문서를 수명이 다른 네 층으로 나눴어요.

각 API 제공사들은 어떻게 캐싱을 할까?

RAG와 비교하여 CAG 논문을 이해해보아요.

기획자가 Claude로 직접 기획 문서 사이트를 만들고 고치게 되면서, 그 문서를 개발 쪽 에이전트가 읽어 구현에 쓰는 흐름까지 이어진 과정을 정리했습니다.

"매 스프린트마다 협업 70%, 개발 30%라 해도 과언이 아니다." 프론트엔드 리드로 일하던 때 남긴 메모입니다. 그 70%를 덜 아프게 하려고 코드 밖에서 바꾼 규칙들을 모았어요.

AI 에이전트 이전, 팀 규칙을 담은 VSCode 스니펫 일곱 개로 반복 코드를 줄인 기록

우리 프론트엔드는 백엔드 API 타입을 손으로 쓰지 않습니다. 서비스별 swagger 스크립트로 타입과 클라이언트를 생성하고, 생성 타입만 import한다는 규칙을 사람과 AI 에이전트가 같이…

MUI 기반 디자인 시스템 v1을 패키지로 배포한 뒤, 실제 프로젝트에서 컴포넌트를 어떻게 우회해 썼는지 소스코드와 개발자 인터뷰로 조사하고 v2 스터디를 제안하기까지의 기록입니다.