본문으로 건너뛰기

팀에 잘 녹아들고,일하는 방식을 함께 바꿉니다.

잘 스며드는 데서 그치지 않고, 팀이 일하는 방식을 함께 바꿔 갑니다.

─ 프론트엔드 개발자 박수범

혼자 잘 쓰던 방식을 팀이 같이 쓰도록 만듭니다. 규약·스킬을 공용 레포로 묶고, 반복되는 판단은 AI 로 굳혀 팀이 다시 헤매지 않게 해요.

웹접근성 컨설턴트로 시작해서, 구조와 의미를 먼저 보는 사고가 기본기예요.

  • Extension
    10,940
    Claude Code Skills Panel · Open VSX + VS Code Marketplace 합산
  • npm weekly
    16
    npm 패키지 합산 · 지난 7일

Live · 매일 09:00 KST 자동 갱신 · last sync 2026. 9. 14.

Now Building
  • Building개인 프로젝트용 디자인 시스템 구상 중 — 토큰·컴포넌트 재사용 체계
Now Thinking

요즘의 고민과 생각

먼저 짧게 써 둔 고민이나 생각을, 여기서는 한 편만 골라 조금 더 길게 옮겨 둡니다. 최신순이 아니라, 지금 내게 붙잡히는 이야기를 남기는 쪽에 가깝습니다.

#개발자 성장2026.05.14

집에서는 출력, 회사에서는 정확도

집에서 클로드 쓸 땐 뭐든 만들 수 있을 것 같았는데, 수학 교구 개발팀에 들어가니 정반대였다.

집에서 퇴근 후 클로드맥스를 켜면 0에서 95까지 자유도 끝판왕이다. 제약 없고 내가 곧 룰이라 익스텐션도 만들고 npm 패키지 배포까지 다 해봤다.

근데 회사에서 도입되니 완전 다른 도구가 됐다. 매쓰캔버스라는 수학 교구를 만드는데, 대부분 이미 95까지 완성돼 있고 필요한 건 95에서 100으로 가는 과정이다. 섬세하고, 복잡하고, 다른 사람 코드를 함부로 못 바꾼다.

수학 교구라는 도메인이 특히 그렇다. 숫자 하나, 부등호 하나, 좌표 한 칸 차이가 아이들 학습 경험을 완전히 바꿔 놓기 때문에 대충 비슷한 답이 통하지 않는 분야다.

이러다 보니 집에서는 출력을, 회사에서는 정확도를 연마하게 됐다. 같은 도구인데 쓰는 법이 정반대가 됐다.

AI-Native Workflow

AI 와 경쟁하지 않고, 지휘합니다.

Claude Max 를 메인으로 쓰지만, 핵심은 도구가 아니라 AI 의 결과가 스스로 증명하게 만드는 방식이에요. 컨텍스트를 layer 로 설계해 세션 간에 잇고(claude-distill), 반복은 Skills 로 줄이고, 지시는 phase 로 쪼갭니다. 그리고 나온 결과는 계측과 변이 테스트로 되묻습니다. 자유도가 아니라 '제약'을, 신뢰가 아니라 '검증'을 설계하는 파이프라인입니다.

01AI 가 빈 손으로 시작하지 않게

Context Engineering

CLAUDE.md · knowledge.md · gotchas.md

프로젝트마다 결정 이유(판례)·함정 기록·도메인 규약을 분리한 markdown 으로 미리 설계합니다. 한 파일에 다 때려박지 않고 layer 를 나눠야, 다음 세션에서 관련 컨텍스트만 정확히 복구돼요.

02기획 → 인터페이스 → 구현

Phased Prompting

Phase Split · Skills

한 번에 다 시키지 않고 phase 별로 쪼개 지시합니다. 앞 단계 산출물이 다음 프롬프트의 완벽한 컨텍스트가 되도록 설계해 구현 오류를 사전에 차단하고, 반복되는 패턴은 Skills 로 등록해 매번 같은 설명을 하지 않아요.

03증상을 묻지 말고 숫자로 답하게

Measure, Don't Infer

런타임 계측 · toDataURL

AI 에게 '왜 느리냐'고 되묻는 대신, 의심 구간에 계측을 직접 심어 숫자로 답하게 합니다. 슬라이드 전환 지연을 파던 날엔 그럴듯한 가설 4개를 계측 한 번으로 전부 죽였고, WebGL 이 비면 버퍼를 이미지로 떠서 '안 그려진 것'과 '안 보이는 것'을 갈랐어요. 추론은 빠르지만 틀리고, 측정은 결론을 냅니다.

04AI 가 쓴 테스트를 되묻는다

Adversarial Verification

Vitest · Mutation A/B

테스트가 초록불이라고 안심하지 않습니다. 일부러 버그를 심어(변이) 그 테스트가 진짜 잡는지 확인해요. 정적 스펙을 통과해버리는 변이를 직접 만들어 '한 층만 있었으면 그대로 새어 나갔을 회귀'를 눈으로 본 뒤로는, 수정 하나에 정적·런타임 2층 스펙을 같은 PR 에 함께 답니다.

05세션 휘발성 무력화

Auto Handoff

claude-distill · Stop hook

세션 종료 시 4단 게이트(휴리스틱 → Haiku → dedup → 재귀 가드)로 결정·페일·환경 quirk 를 자동 추출해 markdown 에 누적합니다. 다음 세션은 어제 노하우를 시스템 프롬프트로 들고 시작해요. LLM 비용 약 90% 절감.

Core Principles

컨텍스트가 곧 자산

AI 협업의 진짜 비용은 어제 한 결정을 오늘 다시 설명하는 것. 매 세션 휘발되는 노하우를 자동 누적해 다음 세션의 출발점으로 만듭니다.

자유도보다 제약

막연한 자유는 환각의 입구. 엣지 케이스를 사전에 막고 입력을 뾰족하게 다듬어 정해진 레일 위에서 정교하게 움직이게 합니다.

비용 모델 없는 협업은 지속 불가

세션마다 LLM 부르면 금세 한 달 $60. 4단 게이트로 본 추출 호출률을 약 10% 수준까지 낮춰 세션 평균 비용을 0 에 가깝게.

100% 위임하되 100% 신뢰는 X

AI 산출물도 추론 과정·변경 사항을 먼저 문서화시킵니다. 그 문서가 곧 검수 필터이자, 회귀가 들어와도 즉시 잡히는 안전망.

Skills & Tools

Frontend

React
Next.js
Vue.js
TypeScript
Tailwind CSS
Framer Motion
Zustand
Pinia
Three.js

Backend

Node.js
Supabase
NestJS

Tools

Git
Figma
Vercel
Playwright
Chrome DevTools

Featured Projects

언커버 (Uncover)
Web

언커버 (Uncover)

저작권 문제없는 음원을 찾고 영상과 미리 매칭해보는 스트리밍 플랫폼. Recoil 상태 관리와 Audio/Video 동기화 로직 구현.

React
TypeScript
Recoil
AWS S3
View Details
AI 협업 포트폴리오 (subeom.dev)
Web Platform

AI 협업 포트폴리오 (subeom.dev)

Next.js 14와 FSD 아키텍처, Supabase로 구축하고 AI와 협업하여 완성한 나만의 포트폴리오 플랫폼

Next.js 14
TypeScript
Supabase
FSD Architecture
+2
View Details
항해플러스 아카이빙
Backend

항해플러스 아카이빙

LMS 과제 제출 이력 영구 보존 서비스. 결함 허용 PR 매칭 알고리즘 설계 및 4-Layer Fallback 로직 구현.

Node.js
NestJS
GitHub API
React
+2
View Details
Claude Code Skills Panel
Developer Tools

Claude Code Skills Panel

Claude Code 슬래시 커맨드를 한 번의 클릭으로 실행하는 VS Code 확장. Open VSX 6,942 다운로드 · 평점 5.0, 7일 만에 v0.44.6, 4개 IDE · 4개 언어 배포.

VS Code Extension API
Node.js
Vanilla JavaScript
Webview API
+3
View Details

Latest Articles

지속적인 학습과 성장을 기록합니다. 최근 작성한 블로그 글들을 확인해보세요.

학습이력 재생, 꼭 무거운 비디오로 바꿔야 할까?

과정중심평가 이야기가 나오면서 '학생 화면을 비디오로 녹화하자'는 논의가 있었습니다. 그런데 비디오로 바꾸면 답안 하나가 10KB 안팎에서 50~100MB로 불고, 지금은 되는 자동 채점·검색·썸네일이 막힙니다. 정말 비디오여야 할까 따져보다 HLS까지 처음 만났고, 낯선 개념을 제가 이미 아는 것(델타 저장, 미러링 스트림, before/after 모델)에 대보며 이해한 기록입니다.

2026. 08. 30.
7
MathCanvas
주니어 개발
학습기록
HLS

초록불인 테스트가 아무것도 지키지 않고 있었습니다

테스트를 안 쓰던 사람이 회귀 방어에 기대게 되고, 그 방어가 뚫리는 걸 보고 다시 테스트를 의심하게 된 과정입니다. 스토어 초기값 [[]] 때문에 빈 캔버스가 '데이터 있음'으로 통과했고, 예시 데이터 하나뿐인 테스트는 초록인 채로 다른 페이지를 깨뜨렸습니다. TDD는 이미 몇 년째 돌아가는 서비스라 순서를 못 지켰고, 대신 고친 것만 되돌려 테스트가 빨개지는지 확인하는 단계를 붙였습니다. 변이 테스트는 코드가 아니라 테스트를 위한 테스트입니다.

2026. 08. 27.
10
MathCanvas
주니어 개발
회고
테스트

폴백을 둘까 걷을까 — 같은 날 양쪽을 다 겪었습니다

폴백을 기본으로 두자는 쪽과, 조용한 실패를 키우니 걷자는 쪽으로 팀에서 대치했습니다. 마침 그날 코드에서 양쪽 사례가 하나씩 나왔어요. 값을 문자열로 감싼 폴백 하나가 학생 7명 전원을 오판하게 만들었고, 반대로 대체 그림을 연결하지 않은 자리는 화면이 백지가 됐습니다. 결론은 한쪽이 이기는 게 아니었습니다 — '얼마나 두느냐'가 아니라 '무엇을 채우느냐'로 축을 바꾸니 둘 다 답이 나왔습니다.

2026. 08. 26.
4
MathCanvas
주니어 개발
회고
테스트