실사용자 대상 패션 커머스 서비스(danble.co.kr)에서 프론트엔드 2~3명·백엔드 2~3명의 소규모 개발팀으로 사용자 웹, 브랜드 파트너 어드민, 내부 운영 어드민, 모바일 앱, 검색 품질까지 프론트엔드 전 영역을 담당했습니다.

1. 렌더링 성능 최적화
• Lighthouse 기준 LCP 4.2s→2.1s(50%), INP 3,170ms→350ms(89%), CLS 1.373→0.09(93%), 페이지 프리즈율 4%→0.8%로 개선했습니다.
• 프로모션 페이지 DOM 노드를 251,857개→51,271개(80% 감축), JS Heap을 375MB→190MB(49% 감축)로 줄였습니다. SSR 전체 렌더로 SEO를 유지하면서 hydration 이후 IntersectionObserver로 뷰포트 밖 슬롯을 placeholder로 치환하는 LazySlot을 신규 작성해 무거운 슬롯 8종에 적용했습니다.
• barrel export가 미사용 컴포넌트까지 컴파일하는 구조임을 규명하고 개별 import로 전환하여, 홈 화면 Evaluate Script Time을 239.25ms→68.47ms(71% 단축)로 개선했습니다.
• Third-party SDK 초기화를 requestIdleCallback으로 전환하고 Next.js getLayout 패턴으로 전역 헤더 리렌더링을 제거해 모바일 스크롤·터치 지연을 해소했습니다.
2. Tailwind CSS 전면 마이그레이션 · 컴포넌트 아키텍처
• styled-components를 Tailwind CSS로 전체 교체하고 패키지를 완전히 제거했습니다.
• Figma MCP + Playwright 기반 디자인·코드 정합성 자동 Visual QA 파이프라인을 구축했습니다.
• 공용 컴포넌트 158개 파일을 Atomic Design 4계층(atoms 41 / molecules 69 / organisms 23 / templates 25)으로 전면 재분류했습니다 — 파일 이동 87건, import 경로 변경 1,100건 이상, 구조 위반 35건→6건. Button, Badge, Label, Divider, Icon 등 공용 컴포넌트 라이브러리를 구축하고 계층별 규칙을 팀 문서로 남겼습니다.
3. 결제 · 쿠폰 시스템 개발
• 코디 단위 쿠폰 로직 개발 — 코디 ID 기준으로 주문서에 포함된 상품 조합을 검증해 자동 최적 적용하는 구조를 구현했습니다.
• 마케팅 수신 동의 기반 쿠폰 자동 발급 시스템 구현 (앱 버전 분기 처리 포함).
• 쿠폰 선택 팝업 UX 개선 — FullScreenPopup, 최대할인 자동 선택, 선택 쿠폰 위치 스크롤을 구현했습니다.
4. 프로모션 시스템 아키텍처 재편
• 프로모션별로 흩어져 있던 이미지 자산 경로를 단일 폴더 구조로 통일하고 중앙 매핑 모듈을 도입해 추가/수정 시 한 곳만 변경하면 되도록 개선했습니다.
• ISR(Incremental Static Regeneration)을 적용해 프로모션 페이지 초기 로딩을 개선했습니다.
5. 큐레이션 · 스타일리포트 서비스
• 스타일퀴즈 완료 → 큐레이션 브릿지 → 도착 일자 분기까지 전체 플로우를 설계·개발했습니다.
• 스타터팩 프로모션 페이지에 SSR + ISR 혼합 렌더링을 구현했습니다.
• 친구 초대 페이지 및 카카오 공유 딥링크를 구현했습니다.
6. 알림 시스템 안정화 (FlareLane)
• SDK 초기화 큐잉 및 dead state를 정리하여 race condition과 stale closure를 수정했습니다.
• 유저 식별 순서(토큰 주입 → 태그 전송)를 보장해 name·phone 누락 이슈를 해결했습니다.
7. React Native 앱 개발 (2025~)
• React Native 0.81 + React 19 버전 업그레이드 — 코어 및 네이티브 의존성 전체 마이그레이션을 진행했습니다.
• Recoil → Jotai 상태 관리 마이그레이션, Firebase Dynamic Links → Airbridge 딥링크 체계 전환을 수행했습니다.
• iOS Alpha/Beta 빌드 분리(TestFlight QA 동시 설치 지원) 및 빌드별 자동 도메인 라우팅을 구현했습니다.
• WebView 리로드 없이 SPA 경로를 즉시 전환하는 네이티브-웹 통신 유틸과, 웹 화면에서 네이티브 알림 권한을 직접 요청할 수 있는 브릿지를 구현해 앱-웹 간 상호작용을 개선했습니다.
8. AI 에이전트 기반 개발 워크플로우 (2025~)
• 전사 'AI 중핵과제'에서 FE 컴포넌트 시스템 과제를 담당했습니다 — Primitive가 정의되지 않으면 AI가 기존 컴포넌트를 재사용하는 대신 새로 만드는 파편화가 생긴다는 문제의식으로, 컴포넌트 분류 체계와 설계 맥락을 'AI가 읽는 문서'로 자산화했습니다.
• 어드민 사용법 가이드 89개 페이지를 멀티 에이전트 병렬 생성 + 브라우저 자동화 캡처·하이라이트 루프로 제작했습니다. 라이브 운영 환경 대상이라 mutation 클릭 금지, 개인정보 DOM 마스킹, 캡처 미검수 무효 등 안전 원칙을 먼저 문서로 규정했습니다.
• OpenSearch 기반 키워드 품질 점수 체계를 설계하고, 500개 키워드 스모크 테스트를 자동화하는 검색 품질 평가 에이전트를 구축했습니다.
• AI를 적용하지 않는 판단도 했습니다 — 매출에 직결되는 상품 정렬 로직에서는 LLM을 재현성·설명가능성 문제로 폐기하고 결정론적 수식으로 대체했습니다.
9. 브랜드 파트너 · 내부 운영 어드민 개발
• 별도 담당자 없이 프론트엔드 인원이 직접 어드민 2종을 병행 개발·운영했습니다.
• 통합상품 CRUD, 사이즈/재고 테이블, 엑셀 업/다운로드, 굿스플로(3PL) 연동 등 브랜드 파트너 어드민 핵심 기능을 개발했습니다.
• 레거시 프로모션 편집기를 5단계에 걸쳐 리팩토링하고, iframe 라이브 미리보기와 컴포넌트 단일 소스 구조를 도입했습니다.
• 블랙프라이데이 재고 모니터링 탭, 위클리큐레이션 마더박스 어드민을 신규 구축했습니다.