About Me
Frontend Developer, 박수범
Seoul · Available for work · 매주 스레드에 인사이트 발행
제가 답답해하던 문제가 곧 다음 도구의 개발 동기가 됩니다.
슬래시 커맨드 30개를 외우다 Claude Code Skills Panel 을, Claude 가 어제 배운 걸 까먹어서 claude-distill 을 만들었어요.
제가 만든 npm 패키지가 모르는 사람들에게 닿는 사이클을 좋아합니다.
What I Build For
AI 도구로 페인 포인트를 풉니다.
Claude Code Skills Panel — Open VSX 6,124 다운로드 · 평점 5.0. claude-distill — npm weekly 18. 본인이 답답해하던 문제로 시작해서 LLM 비용을 4단 게이트로 약 90% 절감하는 모델까지 직접 설계합니다.
구조와 의미를 먼저 봅니다.
MAU 480만 서비스(CJ CGV 등)의 접근성 진단·개선을 컨설턴트로 수행했어요. SEO 와 접근성이 결국 같은 구조를 본다는 걸 프론트엔드 합류 전부터 알고 있었고, vercel.app 권한 0 에서 이름 검색 1위로 증명한 적 있습니다.
"대충 비슷한 답" 이 안 통하는 곳에서 일합니다.
에듀테크 콘텐츠 뷰어/리포트 도메인에서 SSOT 정착 · FSD 레이어 위반 자체 발견·교정 · 6개월 누적 latent bug 동시 해소. 숫자 하나·좌표 한 칸 차이가 사용자 경험을 바꾸는 정밀 도메인입니다.
자주 하는 생각
- 기능보다 메트릭의 정의가 먼저예요.
- 허허벌판과 미로 — 같은 도구도 환경에 따라 정반대로 씁니다.
- SEO 와 접근성은 결국 같은 구조를 봅니다.
- 비용 모델 없는 LLM 협업은 지속 불가능합니다.
Experience
(주)코드넛
2026.03 - 현재정밀성이 요구되는 에듀테크 콘텐츠 뷰어/리포트 도메인에서 Vue 3 + FSD 아키텍처 기반 신규 기능 5건 · V2 리디자인 5건 출시. SSOT 정착·FSD 정합·latent bug 해소를 동시에 수행.
- 학생 풀이 재생 인프라 양방향 최적화 — forward 는 teardown 생략 + delta 적용, backward 는 history undo 역적용으로 슬라이더 seek 시 DOM 전체 재구성 비용 제거
- 리포트 도메인 단일 진실 출처(SSOT) 정착 — 정답률·아이콘 맵·시간 포맷·결과 빌더를 entities/report/lib 로 통합, FSD 레이어 순환 위험 자체 발견·교정
- 6개월 누적 latent bug 동시 해소 — 뷰어 진입 응답 shape 불일치, 채점 결과 직렬화 누락, 요약·상세 정답률 어긋남
- Figma 디자인 시스템 정합화 다수 — 리포트 목록·진행률 3-state 프로그래스바·빈 상태 variant·정답 확인 버튼 통일
(주)에스앤씨랩
2024.07 - 2026.03MAU 480만 대규모 서비스(CJ CGV 등)의 접근성 진단·개선 프로젝트 수행. 컨설턴트 시점에서 구조와 의미를 먼저 보는 사고를 익혔어요.
- 개발자 친화적 가이드라인 배포로 소통 비용 절감
- 재작업률 30% 감소 및 1차 검수 All Pass 달성
- 스크린 리더 사용성을 고려한 마크업 개선으로 법적 리스크 해소
널리소프트 (SSEM)
2024.03 - 2024.07SSEM 홈페이지 전면 리뉴얼 및 사내 운영 백오피스 개발.
- 레거시 스타일 청산 및 반응형 웹 구축으로 UX 개선
- 배포 프로세스 자동화로 3일 소요 작업을 즉시(0분)로 단축
- 자체 프레임워크 리팩토링 및 라이브러리화
모아프렌즈
2022.07 - 2023.01데이터 관제 대시보드 개발 및 레거시 마이그레이션.
- 데이터 집계 시간 일 1시간 → 실시간(0분) 단축
- PHP 레거시 시스템을 React/JWT 기반으로 마이그레이션
Education
프론트엔드 제7기 심화 과정
Best Practice 5회 선정, 팀장 수료
프론트엔드 엔지니어링 부트캠프
기수 1위 수료
멀티미디어 전공
졸업