About
쇼핑몰 솔루션의 초기 개발부터 통합 어드민, 삼성 스마트 TV 앱 출시까지 프론트엔드 설계와 개발을 맡아왔습니다. 최근에는 Next.js 기반 어드민을 리뉴얼하며 도메인 구조, 공용 패키지, 개발·배포 자동화를 구성했습니다.
HTML·CSS와 웹 접근성에 대한 이해를 바탕으로 반응형 UI의 완성도까지 챙깁니다.
Work
기술 스택
프론트엔드
- React 19
- Next.js 16 · App Router
- TypeScript
- Vue 3
- Nuxt.js
- JavaScript
- HTML
- CSS / SCSS
- Tailwind CSS v4
구조 설계·상태 관리
- FSD
- Turborepo · 모노레포
- pnpm Workspaces
- Micro Frontends
- Module Federation
- TanStack Query
- Zustand
- Pinia
- React Hook Form
- Zod
- React Compiler
AI 개발 워크플로
- Claude Code
- AI 하네스 구성
- 커스텀 스킬 설계
- 서브에이전트 리뷰
- 훅 기반 명령 가드
- 검사 게이트 설계
AI 하네스 구성 경험
AI가 프로젝트의 규칙과 작업 절차를 따르도록 지시 문서·스킬·리뷰 에이전트·명령 가드·검사 게이트를 연결한 개발 환경을 구성했습니다. 설계부터 PR까지 작업 근거와 리뷰 판정이 남도록 관리합니다.
- 지시 문서와 작업 단계
- 프로젝트 규칙, 코딩·문서·커밋 규약과 설계·이슈·계획·구현·리뷰·PR의 단계별 상태를 정의했습니다. 리뷰 형식과 테스트 약화 예외 처리 규칙도 문서화했습니다.
- 단계별 커스텀 스킬 14개
- 설계와 계획서 작성, 단계별 구현·검사·커밋, 리뷰 반영, PR 생성과 동료 PR 검토를 스킬로 나눴습니다. 버그 주장 판정, 불변식 조회, CI 캐시 변경 검증도 별도 절차로 구성했습니다.
- 리뷰 전용 서브에이전트 5개
- 구조·동작·규약의 세 축에서 서로의 결과를 보지 않고 리뷰하도록 구성했습니다. 개별 지적의 재현 가능성을 반박 관점에서 판정하는 에이전트와 배포 산출물·정책·설계 일치를 검토하는 PR 리뷰 에이전트를 분리했습니다.
- 명령 가드와 세션 컨텍스트
- 보호 브랜치 직접 push, 낡은 리뷰로 PR 생성, changeset 누락 커밋과 로컬 버전 발행 명령을 실행 전에 검사하도록 했습니다. 세션 시작과 요청마다 이슈·브랜치·작업 상태·다음 절차를 안내하도록 구성했습니다.
- 사람과 AI가 공유하는 검사 게이트
- 린트·타입·테스트뿐 아니라 리뷰 최신성, 테스트 약화, 패키지 경계, 문서 링크, 배포 영향과 배포본 설치·타입 검사를 연결했습니다. 훅·세션 컨텍스트·CI 게이트 자체의 테스트도 구성했습니다.
- GitHub Actions 워크플로 6개
- PR 검증, Changesets 기반 버전 관리와 패키지 게시, 시험 앱 배포, PR별 미리보기, 캐시 정리, Notion 티켓 동기화를 연결했습니다. 로컬 검사와 CI 검증이 같은 규칙을 따르도록 구성했습니다.
- 설계·리뷰·판정 기록 관리
- 설계와 목표, 구현 계획, 회차별 리뷰와 수정·보류·기각 판정을 기록했습니다. 결정 문서와 불변식 레지스트리, 커밋에 고정한 코드 링크를 통해 변경의 근거를 추적할 수 있도록 했습니다.
테스트·코드 품질
- Vitest · 테스트 코드 작성
- ESLint
- TypeScript 정적 검사
- Steiger
- eslint-boundaries
- API Extractor
- Lefthook
Git·빌드·배포
- Git
- GitHub Actions
- GitHub CLI
- GitHub Packages
- Changesets
- CI/CD
- Docker
- AWS · EC2 / S3 / CloudFront
- Static Export · CDN
- Vite
- Firebase CLI
- release-please
- Conventional Commits
- Makefile
제품 분석·모니터링
- GA4
- PostHog
- Sentry
앱·TV 플랫폼
- Flutter
- React Native
- Tizen
- App Store · iOS 앱 배포
- Google Play · Android 앱 배포
검색·접근성·다국어
- SEO
- GEO
- 웹 접근성
- 웹 접근성 마크 취득·갱신
- 웹 표준
- 반응형 UI
- i18next
- Vue I18n
API·데이터·인터랙션
- REST API
- OpenAPI 기반 타입 생성
- Axios
- Recharts
- ECharts
- Three.js
- Matter.js
- Lottie
- ExcelJS
- jsPDF
- Node.js
- MySQL
- jQuery
Experience
- 딥메디 2026.01 — 현재
- 프론트엔드 구조 설계·구현 · 공용 패키지와 개발 자동화 환경 구축
- 하이 (Haii) 2024.10 — 2026.01
- 통합 어드민과 MFE · 삼성 TV 앱 · 채팅형 설문 웹
- IoT 스마트팜 개발자 과정 2024.05 — 2024.11
- 교육 이수 · 팀 프로젝트모듈형 자동 재배기 설계, React Native 컨트롤러 앱 제작 및 아두이노 통신 구현
- 키위스냅 2020.11 — 2024.03
- 프론트엔드 개발 팀장 · 쇼핑몰 에디터와 React 기반 KDDM 직거래 솔루션 설계·개발 및 팀 리딩
- 에이치나인 2017.04 — 2020.01
- 웹 접근성 · 다국어 · 하이브리드 앱 · 반응형 UI