정태환

도감 프로젝트 · 6

1. No.001 · 2026useTaehwan()/uiTypeScript · Tailwind v4 · React›
2. No.002 · 2026각(Gak)Spring Boot · Next.js · PostgreSQL›
3. No.003 · 2026OrbitNext.js · FastAPI · Three.js›
4. No.004 · 2026오늘어디Expo · NestJS · Gemini›
5. No.005 · 2026끼니Expo · Claude Code · 기획 파이프라인›
6. No.006 · 2026쪽쪽Expo · React Native · 로컬 알림›

잘 만든 코드는
잘 쓴 문서와 닮았습니다.

타운맵 경력

(주)셀메이트 · 2022.11 – 재직 중

1. 2026.02 – 현재신규 쇼핑몰 웹앱 · 앱·웹 공유 도메인 코어

   EXP

   361 MR

   내용 펼치기 ＋

   Flutter 모바일 앱을 참조 구현으로 삼아 웹 버전을 Next.js로 신규 구축하고, 앱과 웹이 공유하는 프레임워크 독립 TypeScript 코어 패키지를 만들었습니다(MR 361건 — 화면 244·코어 117). 코어는 사내 패키지 레지스트리에 release/publish CI로 배포하고, 쿠폰 상호 배타 로직과 상품쿠폰 per-unit 계산 등 금액 계산을 앱과 1:1로 정합시킨 뒤 단위 테스트 759개로 커버리지를 42.0% → 69.3%까지 올렸습니다. 웹앱은 세트상품 구매 파이프라인(상품상세 → 카트 → 체크아웃 → PG 금액 정합), 비회원 구매, LINE 로그인, 독립몰 SSO를 구현했고 정적 페이지 65개·E2E 35개 페이지 커버를 확보했습니다. 실배포 후 무파라미터 카트 조회가 백엔드를 폭주시키던 문제를 페이지네이션 전환 + 중복 호출 제거로 잡았습니다.

   MR 361Tests 759Cov 42.0 → 69.3 %
2. 2025.09 – 2026.08클린 아키텍처 리팩토링 캠페인 주도

   EXP

   132 MR

   내용 펼치기 ＋

   UI·상태·로직·API 호출이 한 파일에 뒤섞인 어드민 페이지를 Entity / API Repository / UseCase / Store 4계층으로 분리하는 캠페인을 콘텐츠 도메인에서 시작해 주문·포인트·리뷰·카테고리·MID 등으로 확산했습니다(리팩토링 MR 132건). 주문 도메인 9개 페이지는 엔티티 6종·API 17개·useCase 12종을 신설하며 백엔드 페이로드를 동일하게 보존하는 원칙으로 옮겼고, 최대 파일은 1,224 → 499줄(59%↓), 다른 도메인 페이지 컨테이너는 50~90% 줄었습니다. 회귀는 원인 커밋 단위로 역추적해 유닛 테스트 82개로 봉인했고, 컴포넌트 19개 전환 중 computed 내부 ref 부수효과로 금액 표시가 흔들릴 수 있던 잠복 결함 3건을 발굴했습니다. 규칙은 팀 리팩토링 가이드로 제정해 AI 협업 규칙(CLAUDE.md)과 연동하고, 어드민 전체 Vitest 1,345개·Cypress e2e를 도입했습니다.

   MR 1321,224 → 499 linesVitest 1,345
3. 2025.03 – 2026.03결제 중개 서비스 — PayPal PG 엔드투엔드 연동

   EXP

   178 MR

   내용 펼치기 ＋

   FastAPI + Jinja2 결제창의 프론트(바닐라 JS ES 모듈)를 맡아 PayPal을 주문 생성 → approve → confirm → capture 전 구간으로 연동했습니다(MR 178건). 동일 결제수단에 복수 PG가 물리는 구조라 merchant-id별 SDK 동적 로딩과 PG 벤더 매칭을 설계했고, 앱 웹뷰에서 SDK가 동작하지 않는 제약은 외부 브라우저 플로우로 우회했습니다. 569줄 모놀리식 스크립트를 PayPal·Apple Pay·Google Pay·카드 모듈로 분리하고, INICIS·Eximbay·LINE Pay·Toss까지 멀티 PG의 성공/취소/실패 분기와 5개 언어 실패 화면, PG별 에러 Sentry 로깅을 정리했습니다.

   MR 178PG ×6Locales ×5
4. 2025외부 시스템 연동 — 판매채널 OAuth · 매장 주문 WebSocket

   EXP

   188 MR

   내용 펼치기 ＋

   카페24 외부 판매채널 연동(MR 114건)에서 OAuth 팝업 플로우를 직접 구현했습니다 — authorize 파라미터 수신 → 팝업 → 콜백의 code/state를 postMessage로 받아 Promise resolver에 연결하고, 팝업 차단·토큰 만료를 예외 처리했습니다. 채널 상품 → 자사 상품 30여 필드 매핑과 WebSocket 진행 상태 플로팅 알림을 만들고, 이후 내보내기와 중국 Youzan 채널로 확장하면서 채널별 정책 차이를 엔티티 레이어에 격리했습니다. 오프라인 매장 주문 시스템(MR 74건·4개월)에서는 QR/바코드 스캐너 모드와 픽업 상태 머신을 구현하고, 배송처리 엑셀 업로드를 동기 대기에서 WebSocket 비동기 통지로 바꿨습니다.

   MR 114 + 74Fields ×30OAuth · WS
5. 2023.08 – 2024프론트엔드 기반 개선 — i18n · Vite · 부트스트랩 · 배포 파이프라인

   EXP

   152 MR

   내용 펼치기 ＋

   운영 중인 어드민의 국제화·빌드·환경설정·배포 기반을 기능 개발과 병행해 교체했습니다. i18n은 vue-i18n 세팅부터 87개 파일의 하드코딩 문자열 치환까지 약 1주에 단독 수행했고, 라우트 name을 번역문으로 쓰던 구조가 언어 전환 시 페이지 이동을 깨뜨리는 문제를 찾아 교정한 뒤 5개 언어 체계로 확장했습니다. Webpack → Vite, Jest → Vitest 전환(196개 파일), 화면마다 반복 호출되던 환경설정 API를 boot 체인 + Pinia 캐싱으로 1회 로드 통합(45개 파일), GitLab CI를 템플릿 잡으로 추상화해 한 코드베이스를 2개 브랜드 서비스로 빌드·배포하는 파이프라인을 구성했습니다.

   Files 87 · 196 · 45Locales ×5Brands ×2
6. 2023.05 – 현재커머스 어드민 — 금액이 걸린 도메인 구축

   EXP

   642 MR

   내용 펼치기 ＋

   PG·MID 관리, 쿠폰·할인정책·정산·마진 통계, 세트상품처럼 금액 계산이 얽힌 도메인을 신규 구축했습니다. 실제 마진 통계는 프론트가 재계산하면 서버와 어긋날 수 있어 '응답값 그대로 표시, 재계산 금지' 원칙을 세우고 0 나눗셈·음수만 가드했습니다. 세트상품은 등록·상세부터 주문 8개 페이지와 신규주문 생성(구성상품 variants의 cartesian product 조합)까지 관통 구현했고, 입점 브랜드 상품 검수 워크플로(5개월·MR 41건)와 매출·주문 통계 4종(추세선 최소제곱법 직접 계산, 월 선택기 자체 제작)도 만들었습니다.

   Order pages ×8MR 41Stats ×4
7. 2022.11 – 2023.04POS 웹 서비스 · 사내 디자인시스템(Quasar UI킷)

   EXP

   62 MR

   내용 펼치기 ＋

   AngularJS 1.x + Laravel Blade 레거시에서 회원가입 퍼널과 매장별 매출통계 차트를 만들었고, 같은 시기 사내 Quasar 기반 UI킷의 컴포넌트를 제작하면서 어드민에서 소비하는 양쪽을 담당했습니다. 이 경험이 이후 @usetaehwan/ui의 '소비처에서 먼저 검증하고 추출한다'는 순서로 이어졌습니다.

   AngularJS 1.xQuasar UI kit

기술머신 AI 노트

AI를 통제 대상으로 다룹니다. 코드 생성기가 아니라 절차 안에 두는 것 — 역할을 나누고, 환각을 코드로 막고, 테스트의 정답을 먼저 고정하고, 체감 대신 숫자로 판단하고, 에이전트 팀과 스킬 저장소를 운영한 기록을 6편으로 정리했습니다. 회사 코드베이스와 개인 프로젝트 양쪽에서 실측한 값만 씁니다.

1. TM01역할 분리 파이프라인과 규칙의 코드화Claude Code · 스킬 · 게이트›
2. TM02환각과 조용한 실패를 코드로 막는다LLM · 결정론 · 검산›
3. TM03AI와 테스트 자동화 — 기준선 만들기Cypress · Vitest · 커버리지›
4. TM04측정이 가설을 기각할 때토큰 · 기준선 · 세션 로그›
5. TM05에이전트 팀 — 사람의 말은 원문으로서브에이전트 · 모델 분리 · Claude Code›
6. TM06스킬이 늘어날 때 — 상한과 가지치기훅 · 프롬프트 예산 · 온톨로지›

1. DASHBOARD스킬 저장소 대시보드사용 순위 · 매 턴 글자 · 온톨로지›

라이브캐스터 발표

1. TALK 01 · 2026.05Claude Code 기반 E2E 테스트 자동화사내 AI 활용 공유 세션 (7회차)›
2. TALK 02 · 2024브라우저 렌더링 원리와 SSR·CSR / SPA·MPA전사 개발자 컨퍼런스 · 프론트엔드팀 연사›

통신 연락

제안이나 협업 이야기를 기다립니다.

설정 배경음 · 효과음 · 기기 색