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

출근 버튼 하나 누르려고 탭을 찾던 팀에게 만든 메뉴바 앱

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

팀용 Claude Code 플러그인 마켓플레이스 만들기

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

노코드 플랫폼 QA 스위트를 만들고 첫 실행에서 이슈 7건을 잡았다

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

[AI] 6. AI의 "완료" 보고는 그럴듯했고, 확인하면 틀려 있었습니다

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

"비슷해 보인다"는 완료가 아니다 — Figma 픽셀 검증 루프를 우리 환경에 붙인 기록

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

구현 에이전트와 리뷰 에이전트로 DataGrid 엔진 옮기기

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

태국어·타밀어를 못 읽는 개발자가 10개 언어를 AI로 관리하는 방식

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

Next에서 SPA로 옮긴 뒤 드러난 버그 다섯 개와 공통 원인

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

dev 서버 232초, 코드 다이어트로 줄일 수 있는 건 9%였습니다

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

vanilla-extract에 막힌 번들러 이관, 로더 세 줄로 뚫었습니다

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

국내 사례가 0건인데도 Rsbuild를 고른 이유

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

Next 앱을 src/app 무수정으로 react-router SPA로 옮겼습니다

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

MUI를 걷어낸 뒤 실측: 줄어든 지표 여섯, 늘어난 지표 셋

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

@mui import 790파일을 0으로: TBT -84%, 빌드 메모리 +11.5%까지 잰 기록

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

코드를 읽어 HTML로 그려주는 커맨드들

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

병렬 서브에이전트로 UX 개선점 찾기

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

MUI를 걷어내기로 했습니다

/*#__PURE__*/

vanilla-extract의 override 문제와 panda css

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

[AI] 5. AI에게 규칙을 가르치는 법

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

[AI] 스프린트 환경 구축

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

[DS] 디자인시스템을 문서화하는 방법

[DS] 3. 컴포넌트 구조 고민

[AI] 4. 디자이너에게 클로드 전파하기

3계층 구조의 DesignSystem

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

[DS] 2. 컴포넌트 설계 고민

[AI] 3. AI 온보딩 실험기

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

[DS] 1. 디자인 시스템의 첫 스텝

[AI] 2. 지금 내가 AI로 일하는 방식

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

[AI] 1. 프론트엔드 개발자의 AI 활용 탐구기

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

[AI] 7. 기록을 커밋에 묶고, 층마다 수명을 다르게 둔 이유

OpenAI의 Prompt Caching

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

API 레벨의 캐싱

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

CAG로 AI에게 지식 주입하기

[Frontend] SVG 최적화

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

기획자에게 Claude를 건넸더니 기획 문서 사이트가 생겼다

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

협업 70%, 개발 30%: 프론트엔드 리드가 코드 밖에서 바꾼 규칙들

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

반복 코드를 줄이려고 VSCode 스니펫을 만들었습니다

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

API 타입을 swagger로 생성하고, 사람과 AI가 생성 타입만 쓰게 한 구조

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