인호준 Frontend Engineer

코어 파트너 플랫폼 팀 2025.01 ~ 현재

크로스플랫폼 상품 어드민

무신사·29CM·조조타운·티몰글로벌·무신사차이나 5개 플랫폼과 14개 판매지역에 걸쳐, 파트너와 운영자가 한 곳에서 상품을 등록·수정·검수하는 통합 어드민.

• 200여 개 필드·40여 개 섹션의 상품 폼을 섹션 단위로 쪼개 설계. 어떤 섹션이 어떤 순서로 보이고 무엇이 채워져야 하는지를 한 곳에 모아, 등록·수정·조회·검수 네 화면이 같은 정의를 공유하도록 구성
• 수천 건 엑셀 일괄 등록·수정. 브라우저에서 먼저 검증하고 나눠 보내, 한 사람의 일괄 작업이 다른 사용자의 화면을 느리게 만들지 않도록 설계. 실패한 행만 골라 다시 받아 고쳐 올리는 회복 흐름 포함
• 판매 범위를 나타내는 설정값이 여러 개로 흩어져 서로 모순될 수 있던 구조를, 판매지역 선택 하나에서 파생되도록 재설계. 이미 그 값을 쓰고 있던 13개 기능은 수정 없이 그대로 동작하도록 유지
• Backend가 Internal API만 제공하는 구조로 바뀌어 프론트엔드가 직접 소유하는 BFF를 도입. 프레임워크·프로토콜 6개 조합을 5개 기준으로 비교해 Next.js API Routes + tRPC를 선택하고, 의사결정자로서 그 근거를 ADR에 기록
• 프레임워크 성능이 선택 기준인지 확인하려 NestJS·Fastify·Next.js에 동일 tRPC procedure를 올려 k6로 실측(경부하 차이 0.02ms 미만), 부하테스트로 기준 부하 10배까지 Error Rate 0%·P50 49ms·P95 177ms 확인
• Internal API 연쇄 장애에 대비한 Circuit Breaker 도입 기준을 문서로 수립. 적용 조건 4개와 timeout·임계치 설정값을 근거와 함께 정의하고, 멀티 Pod 상태 동기화는 새 SPOF가 된다는 이유로 의도적 배제 (적용은 진행 중)

자율형 프론트엔드 엔진

• PRD를 넣으면 할 일을 분해하고, 그 프로젝트의 디자인 시스템에 맞춘 화면까지 만들어 주는 사내 도구를 설계·개발 (Tauri · React). 디자이너가 최소한만 손봐 확정하면 그 컴포넌트가 그대로 PR로 올라와, 프론트엔드 개발자는 퍼블리싱이 끝난 상태에서 시작
• 핵심은 디자인 시스템을 카탈로그로 만든 것. 저장소마다 다른 디자인 시스템을 자동 식별해 컴포넌트별 용도와 사용 예시를 구조화하고, AI가 화면을 그릴 때 어떤 컴포넌트를 써야 하는지 코드 탐색 없이 카탈로그에서 고르도록 설계
• PRD나 디자인이 바뀌어도 현재 코드베이스를 참조해 PR을 다시 만들기 때문에, 퍼블리싱을 처음부터 다시 하지 않아도 되는 구조

파트너 플랫폼 구축

• 신설 조직의 프론트엔드 아키텍처를 Layered Architecture(Api → Service → Feature → App)로 설계하고, 레이어별 책임과 안티패턴을 팀 표준 문서로 정착
• 정적 분석으로 검증할 수 없는 아키텍처 규칙을 AI 룰 파일로 문서화하고, CI에서 검사하는 코드리뷰 봇 Architecture Keeper를 구현. 변경 레이어를 감지해 병렬 리뷰 후 라인 단위 코멘트 게시. 4개월간 운영·개선하다 더 나은 대안이 나오자 직접 걷어내고 전환
• 회고에서 단일 변경에 3개 레이어를 고쳐야 하는 결합 문제를 진단, Service Layer를 Anti-Corruption Layer로 재정의한 V2를 도출해 AI 룰까지 연결
• 디자인 변경이 수작업 없이 코드에 반영되도록 Figma Variables를 Tailwind 테마와 Ant Design 테마로 동시 변환하는 Figma 플러그인 개발
• 세일즈포스로 운영하던 광고 구좌 업무를 사내 시스템으로 내재화한 마케팅 구좌 관리 시스템 개발. 구좌 사전 신청 → 승인 → 확정 워크플로우와 일괄 편집, 담당자/승인자별 권한 분기 구현
• 어드민 중심 팀에서 대고객 모바일 서비스인 29CM 큐레이터 샵을 담당. 가입 퍼널, 프로필·닉네임·SNS 관리, 방문자 페이지, 링크 공유까지 샵 개설 여정 전반 개발
• 같은 화면이 무신사 앱·29CM 앱 웹뷰와 PC 웹에서 모두 동작해야 하는 구조. iOS 웹뷰에서 바텀시트를 열면 배경이 스크롤되던 문제를 스크롤 위치 고정·복원 방식으로 해결하고, safe-area·앱바 고정 등 앱 환경 차이를 흡수. 소개 페이지는 정적·동적 렌더링을 나눠 첫 진입 속도를 확보
• 카탈로그 어드민(표준 옵션·표준 카테고리·오퍼레이션 툴), 상품 카탈로그 통합(OCMP) 개발

29CM 카탈로그팀 2024.05 ~ 2024.12

• 29CM에서 트래픽이 가장 많이 몰리는 상품 상세 페이지를 새 아키텍처로 전환. 성능 개선과 유지보수성 확보
• AppleCare+ 같은 무형상품이 기존 상품 모델로 표현되지 않아, 등록·판매 흐름을 별도로 다룰 수 있게 만들고 속성을 한눈에 비교하는 피커 UI를 설계
• 예고된 시점에 트래픽이 한꺼번에 몰리는 아이폰 사전판매를 위해 대기열 기능 개발
• 매입/위탁 상품 매칭에서 고객향 상품 상세와 운영자 어드민을 함께 담당. 매칭 데이터가 없으면 기존 화면과 동일하게 동작한다는 점을 근거로 선배포 전략 수립
• 테스트 코드가 없던 조직에서 크로스팀 Testing Working Group을 발족. 레이어별 테스트 기법을 매핑하고 학습 자료를 작성해 직접 스터디 진행