정태환

프로젝트6

• u

  useTaehwan()/ui

  2026

  직접 만들어 npm에 배포한 토큰 기반 React 디자인 시스템. 10개의 컴포넌트로 구성되고, 토큰만 덮어쓰면 프로젝트마다 다른 테마를 입힐 수 있어 Orbit(우주)·각(볼트 그린) 두 프로덕트가 같은 패키지를 씁니다.

  • TypeScript
  • Tailwind v4
  • React
• 각

  각(Gak)

  2026

  축구 팀의 일정 밀집도로 부진을 진단하고 다음 경기를 예측하는 웹앱. 사람·구현 AI·검증 AI의 역할을 나눈 파이프라인으로 만들었습니다.

  • Spring Boot
  • Next.js
  • PostgreSQL
• O

  Orbit

  2026

  공부하면 내 우주가 자라나는 학습 동기부여 웹앱. 기록을 남길수록 행성이 테라포밍됩니다.

  • Next.js
  • FastAPI
  • Three.js
• 오

  오늘어디

  2026

  성향·위치·예산·차·시간을 넣으면 데이트 코스 5개를 짜 주는 앱. 장소는 카카오맵에서, 분위기·가격·주차 힌트는 블로그·인스타 글에서 모으고, AI는 후보 안에서 코스를 조합하는 일만 맡습니다.

  • Expo
  • NestJS
  • Gemini
• 끼

  끼니

  2026

  "오늘 저녁 뭐 먹지?"를 대신 끝내 주는 앱. 선택지를 늘리지 않고, 예산·인분에 맞는 메뉴 하나를 재료비와 레시피까지 붙여 정해 줍니다. 한 줄짜리 요구에서 시작해 역할별 에이전트 팀이 기획했고, 지금은 Expo 프로토타입 단계입니다.

  • Expo
  • Claude Code
  • 기획 파이프라인
• 쪽

  쪽쪽

  2026

  수유 시작·종료를 한 번씩 누르면, 끝난 시각에서 정해 둔 시간이 지났을 때 "지민아~ 맘마먹자" 알림으로 다음 수유를 알려 주는 앱. 새벽 3시에 한 손으로 쓰는 것만 생각해 기능을 시작·종료·알람 세 가지로 줄였습니다.

  • Expo
  • React Native
  • 로컬 알림

경력

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

1. 2026.02 – 현재

   신규 쇼핑몰 웹앱 · 앱·웹 공유 도메인 코어

   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 361
   • Tests 759
   • Cov 42.0 → 69.3 %

2. 2025.09 – 2026.08

   클린 아키텍처 리팩토링 캠페인 주도

   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 132
   • 1,224 → 499 lines
   • Vitest 1,345

3. 2025.03 – 2026.03

   결제 중개 서비스 — PayPal PG 엔드투엔드 연동

   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 178
   • PG ×6
   • Locales ×5

4. 2025

   외부 시스템 연동 — 판매채널 OAuth · 매장 주문 WebSocket

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

   더 읽기

   • MR 114 + 74
   • Fields ×30
   • OAuth · WS

5. 2023.08 – 2024

   프론트엔드 기반 개선 — i18n · Vite · 부트스트랩 · 배포 파이프라인

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

   더 읽기

   • Files 87 · 196 · 45
   • Locales ×5
   • Brands ×2

6. 2023.05 – 현재

   커머스 어드민 — 금액이 걸린 도메인 구축

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

   더 읽기

   • Order pages ×8
   • MR 41
   • Stats ×4

7. 2022.11 – 2023.04

   POS 웹 서비스 · 사내 디자인시스템(Quasar UI킷)

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

   더 읽기

   • AngularJS 1.x
   • Quasar UI kit

AI 노트6

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

1. 01

   역할 분리 파이프라인과 규칙의 코드화

   판단은 사람, 구현은 구현 AI, 검증은 다른 벤더의 검증 AI. 절차는 게이트로 강제하고, 규칙은 프로젝트 문서에서 재사용 스킬로 옮겨 발동을 셉니다.

   109검증 AI가 요구사항 문서에서 뽑은 인수 테스트

2. 02

   환각과 조용한 실패를 코드로 막는다

   형식만 맞는 빈 응답, 기동마다 흔들리는 프롬프트 지문, 문장으로는 맞아 보이던 지표 정의 — 스키마나 합의가 아니라 코드 검증과 데이터 검산으로 잡은 사례들입니다.

   30 → 7JVM 30회 기동에서 관측된 프롬프트 순서 7가지

3. 03

   AI와 테스트 자동화 — 기준선 만들기

   시나리오 문서 0건이던 77페이지 웹앱에 4레이어 테스트 구조를 세우고, 금액 계산은 E2E에서 떼어 단위 테스트로 격리했습니다. 공유 코어 패키지는 테스트 759개로 커버리지 42 → 69%.

   42 → 69%공유 코어 패키지 커버리지 · 단위 테스트 759개

4. 04

   측정이 가설을 기각할 때

   훅으로 토큰을 아끼려던 계획을 실측하니 절감 대상이 전체의 0.003%였습니다. 도구는 남기고 목적을 바꿨습니다. 컨텍스트 기준선·레퍼런스 조회 비용·스킬 발동까지, 숫자를 먼저 재고 규칙을 만든 기록입니다.

   0.003%훅으로 절감하려던 검증 로그의 실제 비중

5. 05

   에이전트 팀 — 사람의 말은 원문으로

   기획·리서치·UX·설계·구현·문서 검증·서기 7개 역할에 모델을 고정해 나눴습니다. 팀 구조는 계획대로 돌았고, 깨진 곳은 사람과 에이전트 사이 — 질문보다 먼저 나간 프로토타입, 채팅에만 남은 사람의 답이었습니다.

   6/14문서 검증 지적 중 '사람의 말과 어긋남'으로 분류된 H급

6. 06

   스킬이 늘어날 때 — 상한과 가지치기

   스킬이 6개에서 12개로, 역할 에이전트가 9개로 늘며 생긴 문제 — 매 턴 실리는 설명 글자, 문서로만 있던 금지 규칙, 읽기만 하던 레퍼런스 512개 — 를 상한·훅·온톨로지로 관리하고, 새 모델은 스킬 0개에서 다시 붙이도록 설계했습니다.

   4,056자스킬 12개·에이전트 9개를 깔고 매 턴 실리는 글자 (상한 검사 중)

발표2

1. 2026.05 · 사내 AI 활용 공유 세션 (7회차)

   Claude Code 기반 E2E 테스트 자동화

   정답을 참조 앱의 파일:라인으로 먼저 고정하는 증거 기반 시나리오 작성법. 77개 페이지 시나리오 약 700건, Cypress 케이스 515건, QA 체크리스트 83항목 기준선을 만든 과정을 공유했습니다.

2. 2024 · 전사 개발자 컨퍼런스 · 프론트엔드팀 연사

   브라우저 렌더링 원리와 SSR·CSR / SPA·MPA

   다른 직군 개발자가 신규 SPA 프론트 구조를 이해할 수 있도록, 렌더링 과정부터 SSR·CSR과 SPA·MPA의 차이까지 설명했습니다.

연락

제안이나 협업 이야기를 기다립니다. 함께 만들 게 있다면 편하게 메일 주세요.