안녕하세요, 기획·디자인 산출물이 부족하거나 지연되는 환경에서도 제품을 완성해온 9년 차 React UI 개발자 박윤경입니다.

모든 프로젝트는 문제 상황 → 해결 과정(나의 액션) → 결과 및 성과 구조로 정리했습니다.

애드포터

2025.09 ~ 재직중

과장 · React UI 개발 / PL·PO 지원

광고주와 매체주를 연결하는 광고 플랫폼(Web/Admin/Mobile-App). 개발 기술 의사결정은 별도 개발PM이 담당하고, 본인은 React UI 개발을 중심으로 화면 정책 보완, 기획·디자인·개발 간 일정·운영 조율, 대표 커뮤니케이션을 수행합니다.

1. AI 에이전트 UI 개발 거버넌스 킷 "UI Architecture Agent Kit" 설계·구축

• 문제 상황: 기획·디자인 산출물이 부족하거나 지연되는 상황에서 AI 도구(Claude·ChatGPT·Codex·Cursor)와 1인 UI 개발을 병행하는 구조. AI 산출물이 세션마다 달라져 하드코딩·중복 컴포넌트·스타일 파편화가 반복 발생 → 검수·재작업 비용 증가
• 해결 과정(나의 액션):
  • AI가 지켜야 할 규칙을 정본 문서 6종으로 체계화 — Agent 실행 규약(승인 게이트·작업 위험도 S0~S4·STOP 프로토콜), 디자인 시스템(Token First·typography mixin 강제), 컴포넌트 재사용(패턴 카탈로그 20종+), 페이지 조합 원칙, 검증 체계, 화면설계서 운영
  • 규칙 위반을 도구가 잡도록 Node.js 정적 검증기(ds-check)와 통합 하네스(harness)를 직접 개발 — 금지 패턴 8종 자동 검출, ds-check→type-check→lint→build 파이프라인화
  • 레거시는 baseline 동결로 묶고 "신규 위반 0건"만 완료 조건으로 설정
  • Kit(정본)과 프로젝트(값)를 Adapter 패턴으로 분리 — 디자인 토큰·SCSS mixin·템플릿 포함, 신규 프로젝트 30분 온보딩
• 결과 및 성과: AI 산출물 품질이 세션·작업자와 무관하게 일정하게 유지되는 체계 확보. 프로젝트 종속이 없어 재사용 가능한 개발 자산으로 정리 (2026.07 v1, 실물 시연 가능)
• React TypeScript Node.js SCSS Claude/GPT Cursor

2. 모바일 핵심 플로우·Expo WebView 라우트 연결

• 문제 상황: 지도·검색·매체 상세·등록 UI와 Expo 앱 셸의 진입 경로가 분산돼 모바일 핵심 흐름을 연속적으로 검증하기 어려운 상태
• 해결 과정(나의 액션): 고정·이동 매체 지도, 검색·필터·정렬, peek/half/full 바텀시트, 선택 해제 규칙과 온보딩을 구현하고 공통 필터·결과·스켈레톤 및 Expo WebView 라우트와 연결
• 결과 및 성과: 개발 브랜치 병합, sb-check·diff-check PASS 및 headless Chrome Screenbook 지도 렌더 확인. 실 API 검색·클러스터와 native 위치 기능은 후속 범위로 분리
• React 19 TypeScript SCSS Naver Maps Expo WebView

3. 지도 다크 모드·찜 상태 공통화

• 문제 상황: 지도 다크 모드의 아이콘 대비가 일정하지 않고 검색·지도·관심·상세 화면의 임시 찜 상태가 분산돼 화면별 상태가 달라질 수 있는 구조
• 해결 과정(나의 액션): 찜 상태를 공통 정본으로 통합하고 이동형 매체 범례와 바텀시트 offset token을 추가해 지도 표현 기준을 정리