잘 만든 코드는 잘 쓴 문서와 닮았습니다.
4년차 프론트엔드 개발자입니다. 명확한 구조, 신중한 기본값, 다음 사람을 위한 설명 — 좋은 인터페이스와 좋은 문서는 같은 원리로 만들어진다고 생각합니다. 다국가 이커머스 어드민을 만들며 디자인 시스템과 아키텍처를 설계했고, 그 과정을 늘 기록으로 남깁니다.
혼자 잘하는 것보다 함께 잘하는 걸 중요하게 생각합니다. 팀의 경계에서 오가는 소통이 결국 결과물의 품질을 만든다고 믿습니다.
(주)셀메이트 · 2022.11 – 재직 중
StoreX Admin — 멀티테넌트 쇼핑몰 어드민 프론트엔드
기존 프로젝트를 인계받아 상품·브랜드·쿠폰·포인트·주문·리뷰 등 20개 이상의 관리 페이지를 단독으로 유지보수·신규 개발했습니다. 이후 후임 합류에 맞춰 온보딩과 코드 리뷰를 맡아 협업 체계로 전환했고, 테넌트별 마켓·다국어 구조를 대응해 현재 2개 고객사 · 5개 마켓(일본·미국·한국·대만) · 72개 브랜드가 운영되는 플랫폼을 담당하고 있습니다.
어드민 대시보드 리팩토링 — Clean Architecture + AI 워크플로우
Vue 3 커머스 관리자 대시보드(페이지 145개 · 컴포넌트 187개)의 God Component 문제를 Entity → UseCase → Store → Page 4계층으로 재구조화했습니다. UI·상태·로직·API가 뒤섞인 1,000줄 이상의 페이지를 계층으로 분리하고, API를 Repository 패턴으로 통일해 테넌트 경로를 캡슐화했으며, 반복되는 관심사를 20여 개 composable로 추출했습니다. 4계층 규칙과 코딩 컨벤션을 CLAUDE.md·커스텀 스킬로 코드화해 AI가 규칙을 벗어나지 못하게 통제하고, 리팩토링 → 테스트 → 리뷰를 한 사이클로 설계했습니다. God Component를 평균 65% 축소(OrderManagement.vue 1,375 → 325줄, 76%↓)하고 단위·E2E 테스트를 도입했습니다.
결제 중개 페이지 — 5개 결제사 통합 UI (프론트엔드)
앱·웹앱과 여러 결제사(PG) 사이에서 결제 흐름을 통합하는 중개 페이지의 프론트엔드를 담당했습니다(Toss·Inicis·Eximbay·LINE Pay·PayPal, 10여 결제수단, 5개국 운영). 결제 결과 콜백을 실행 환경에 따라 웹앱 팝업(postMessage)·네이티브 앱(WebView 브리지)·일반 웹(리다이렉트) 3가지로 분기 처리하고, 결제 취소·이탈 시 사용자 친화적인 에러 화면을 구현해 결제 UX를 안정화했습니다. (백엔드 API 및 PG 인증 처리는 별도 담당)
STO 웹앱 — Flutter → React 마이그레이션 (단독)
일본 패션 이커머스 앱(STO)의 웹 버전 전체를 Flutter에서 React로 마이그레이션했습니다. 모바일 앱만 있던 서비스에 PC 웹의 필요성과 웹 환경의 속도 이점을 고려해 전환을 주도했고, 상품 탐색부터 결제·주문관리·마이페이지까지 커머스 전 여정을 단독으로 기획·설계·구현했습니다. 화면(WebApp-front)과 비즈니스 로직(@storex/web-core)을 2계층으로 분리하는 아키텍처를 직접 설계하고, 로직 코어는 독립 npm 패키지(사내 레지스트리, 시맨틱 버저닝)로 배포했습니다. 페이지 약 70개 · 약 89,000 LOC, 커스텀 훅 120여 개, E2E 39 spec + 단위 테스트 168개 규모이며, 결제 금액 계산(세율·면세 판정)을 원 단위까지 정합하게 재현했습니다. 화면 마이그레이션은 Claude Code로 초안을 생성한 뒤 민감한 로직은 백엔드 코드와 대조·검증하는 워크플로우로 진행했고, 전 여정 구현 완료 후 신규 기능을 지속 확장하고 있습니다.
Projects
이 사이트를 만든 디자인 시스템
useTaehwan()/ui — 저채도 웜 뉴트럴 토큰과 6개의 React 프리미티브로 구성된 작은 디자인 시스템입니다. 색 하나를 바꾸면 사이트 전체가 따라 바뀝니다. 아래에서 직접 만져보세요.
useTaehwan()/ui
토큰 기반 컴포넌트. 아래 버튼·뱃지·입력은 모두 같은 변수를 참조합니다.