김정환 · Frontend Engineer
padd60@naver.com · GitHub: https://github.com/padd60 · Blog: https://padd60.tistory.com · Portfolio: https://padd60.github.io/portfolio

Summary

헬스케어 플랫폼에서 유저 앱·웹, 의사·약사 웹, 어드민의 프론트엔드를 맡고 있고, 2026년 9월부터는 PO·FE·BE가 함께하는 제품 파티의 파티장을 맡고 있습니다. 기능을 만들면서 아키텍처와 품질, 개발 워크플로우도 함께 손봐 왔습니다. 의사 온보딩(가입 → 제휴 → 튜토리얼)을 다시 만든 뒤 가입 코호트의 진료 가능 전환율이 27~36%에서 50~54%가 됐고, 약을 병원 밖 약국에서 받는 원외처방에서 총액과 그 근거인 인근 약국 가격을 보여 주는 A/B 테스트로 진료신청 완료율(보조 지표)을 12.1%에서 13.4%로 높였습니다. 2026년부터는 Claude 에이전트와 Kotlin/Spring으로 FE와 BE를 함께 맡아 기능을 출시까지 끌고 가며, 2026년 3분기에 제 계정으로 머지된 PR의 38.6%는 제가 만든 야간 AI 루틴이 만들었습니다.

Skills

• 주력: TypeScript, React, Next.js, React Native, TanStack Query, Tailwind CSS·Radix UI, Jest·Playwright, Datadog(RUM·Logs·APM), Claude Code(에이전트·스킬·스케줄 루틴)
• 경험: Kotlin·Spring Boot, Kafka, GraphQL BFF, pnpm 모노레포, Jotai·Zustand, Storybook, SonarQube, GitHub Actions·AWS, GrowthBook·SQL(Redash·BigQuery), Vue 3

Experience

닥터나우 (DoctorNow)

Frontend Engineer | 2024.11 - 현재 | FE 3~4명 | 2026.09부터 3파티(PO·FE·BE) 파티장

유저 앱·웹, 의사·약사 웹, 어드민의 프론트엔드를 담당합니다. 2026년부터는 Kotlin/Spring 백엔드도 함께 개발합니다.

Highlights

• 의사 온보딩 풀퍼널(가입 → 제휴 → 튜토리얼)의 의사웹 FE를 단독으로 다시 만들어, 가입 월 코호트의 진료 가능 전환율 개편 전 27~36% → 개편 후 50~54% (2026.Q1, 대조군이 없어 개편 전후 코호트 비교)
• 원외처방 가격 표기 A/B 5건을 설계·판정해, 총액의 근거로 인근 약국 가격을 보여 준 안에서 진료신청 완료율 12.12% → 13.36%(상대 +10.2%, 보조 지표, B안이 나을 확률 97%) (2026.Q3, A/B 설계)
• 야간 AI 루틴 4종이 제 계정으로 머지된 분기 PR 352건 중 136건(38.6%) 을 만들었고, 앱별 루틴은 팀원 계정으로 나눠 운영 (2026.Q3)

[비즈니스 임팩트]

• 도매 커머스 (약사웹·의사웹):
  • [약사] 비제휴 약국도 둘러보고 담을 수 있게 가입 관문을 결제 시점 약관 동의로 옮기고, 리스트 바로 담기·최근 구매·검색바 고정·추천 검색어를 FE 단독으로 냄. 같은 기간 도매 월 매출 9.4억 → 12.1억(전월 대비 +28%) (2025.Q2, 자사몰 전환 초기라 기여 분리 안 함)
  • [의사] 약사웹에서 쓰던 도매 구매 유도 툴팁을 의사웹과 CS 어드민으로 옮겨 운영팀이 문구를 직접 켜고 끄게 함. 배포 전후 15일 의사 도매 주문 7 → 23건, 일평균 결제액 34.8만 → 222.8만 원(6.4배) (2025.Q4, 툴팁 클릭 로그가 없어 기여 분리 안 함)
• 의약품몰 입점몰 전환 (FE+BE):
  • 1단계로 직영몰 전제의 상품 모델에 셀러 채널과 외부 제약사 셀러를 들이고 입점사 노출·필터를 FE+BE로 3주에 출시. 필터 사용자의 결제 버튼 클릭 비율 42%(미사용자 4.5%, 배포 직후 14일, 당시 대시보드 확인), 낱개 판매 시 적자인 품목에 수량 조건 할인을 붙여 해당 상품의 6개 이상 주문 비중 24% → 81%(전후 4주, 대조군 없음) (2026.Q2)
  • 2단계로 직매입 종료 규제에 맞춰 입점사별 비교·구매가 되는 3섹션 몰과 제네릭 검색 인덱스, 장바구니 V2를 FE+BE 단독으로 약 3주 만에 출시 (2026.Q3)
• 원외처방 가격 표기 A/B 연작: 다이어트 진료 지도에서 원외처방은 결제 전까지 진료비와 약값을 합친 총액을 알 수 없어 사용자가 이탈한다는 가설로 시작. 총액 표기, 총액의 근거인 인근 약국 가격, 가격 표기 단위를 바꾼 A/B 5건을 설계·판정해 인근 약국 5곳 가격을 펼쳐 볼 수 있게 한 안을 채택. 진료신청 완료율 12.12% → 13.36%(상대 +10.2%, 보조 지표, B안이 나을 확률 97%) (2026.Q3, A/B 설계)
• 의사 온보딩 풀퍼널 개편 (회원가입 → 제휴 → 튜토리얼):
  • 수동으로 처리하던 의사 제휴를 가입 후 셀프 신청(사업자·의사·병원·처방전 4단계)과 CS 승인·반려로 바꾼 의사웹·CS FE를 단독 구현. 출시 후 5주 코호트의 신청 완료부터 첫 승인까지 평균 9.8일(중앙값 1.8일) (2025.Q2)
  • 진료 세팅 ON까지 안내하는 튜토리얼을 새로 만들고 샘플 처방전 자동 검증을 연동했으며, 끊겨 있던 가입 전 퍼널 로그를 복구함. 배포 후 1주 튜토리얼 진입 21명 중 시작 95%, 진료 세팅 완료 81%(PO 집계), 가입 월 코호트 진료 가능 전환율 27~36% → 50~54% (2026.Q1)
• 데스크톱 앱(PWA) 제안으로 알림 누락 대응: 크롬 탭이 비활성이면 조제·진료 접수 알림음이 울리지 않는 문제에 PWA 데스크톱 앱 방식을 제안해 당일 프로토타입을 만들고, 앱을 다시 켠 뒤 첫 클릭 전에는 알림이 울리지 않는 브라우저 제약은 알림 테스트 배너로 보완. 약사웹 설치 버튼을 누른 약국 53.5%(2,143/4,005, 직접 측정), 약사 알림 미수신 문의 배포 전후 12주 23 → 15건(사내 채널 기준, 사전 안내 조치와 겹쳐 기여 분리 안 함) (2026.Q1, 직접 제안)

[아키텍처·품질]

• 도메인 주도 Micro FSD, 발의부터 약사웹·의사웹 전환 완료까지: 표준 FSD는 레이어가 흩어져 있어 도메인을 바꾸거나 AI에게 작업을 맡길 때 범위가 커지는 한계가 있었음. domains 아래로 레이어를 모으는 컨벤션을 직접 정의하고 Public API 캡슐화, 서버 응답 변환 계층(ACL), 순환 참조 CI 검사를 넣어 약사웹 src 최상위 폴더 21 → 3, 의사웹은 도메인별 1차 이관 뒤 나머지를 1,186개 파일 변경의 단일 PR로 옮겨 롤백 없이 전환 (2025.Q4~2026.Q1, 직접 발의)
• 디자인 시스템: Tailwind CSS + Radix UI 기반 DDS에 킥오프부터 참여해 공통 컴포넌트를 모노레포 패키지로 분리·라이브러리화하고 운영에 적용. 2026년 3분기 오너십을 넘겨받은 뒤 실사용 분포로 API를 정한 신규 컴포넌트 5종과 에이전트용 기계가독 매니페스트로 넓힘. 아코디언 중복 구현 7종 → 1종, styled-components → Tailwind 전환율 75% → 95%(야간 루틴 포함) (2024.Q4~2026.Q3)
• 관측성 재설계: 주 19회 울리던 의사웹 장애 알림을 다시 설계하면서 배포 한 건 뒤 7일치 에러 로그 9.2만 건의 출처부터 나눠 보니 잘못된 배포의 무한 리로드 75%, 봇 18%, 실사용자 7%였음. 로그 등급, 자사 판정, 요청 시점 네트워크 계측으로 다시 설계해 의사웹 모니터 발화 주 19.4 → 4회(−79%), 약사웹 85 → 6~7회 (2026.Q3)
• 약사웹 Web Vitals: attribution으로 단계를 쪼개 렌더 커밋과 로딩 게이트를 원인으로 특정. 상호작용 지연 206 → 48ms(INP p75), 레이아웃 이동 0.379 → 0(CLS p75), 30일 RUM으로 유지 확인 (2026.Q2~Q3)
• 장애 재발 방지 3중 가드레일: 제 배포가 낸 의사웹 접속 불가 장애(Suspense 경계 밖 쿼리의 무한 재시도)를 10분 안에 롤백하고, 5 whys 회고로 정한 재발 방지를 시스템으로 만듦. Suspense 경계 CI 검사, Playwright CUJ E2E 확장(직접 추가한 테스트 154개), QueryClient 공용 팩토리(지금은 5개 앱이 쓰고 전역 suspense 설정을 타입으로 막음) (2026.Q1~Q2)

[AI 기반 개발 워크플로우]

• 야간 AI 루틴 4종 (코드 스멜 수정 · DS 마이그레이션 · Tailwind 전환 · 광고 스케줄 동기화): 앱당 열린 PR 1건 상한, 가짜 마이그레이션 차단, 교차 리뷰를 검증 장치로 두고 사람은 리뷰와 머지만 맡음. 제 계정으로 머지된 분기 PR의 38.6%(352건 중 136건)를 루틴이 만들었고, MAJOR 이상 FE 코드 스멜은 1,812 → 262건(−86%)(2026.02 → 09, 분석 범위 변경 전 같은 기준, 팀 정리 포함). 광고 스케줄은 루틴이 PR로 만들어 사람은 승인과 배포만 맡음. 루틴이 낸 회귀는 원인별 가드로 막음 (2026.Q1~Q3)
• cross-review·검증 하네스: 처음에는 계획·생성·평가 3에이전트 하네스를 작업 수행 모델로 도입하려 했지만 큰 작업이 아니면 무겁다고 판단해, 에이전트가 만든 코드가 일관된 의도와 컨벤션을 갖도록 여러 관점에서 검토하는 방식으로 방향을 바꿈. 전문 리뷰 에이전트 9개와 Judge 교차검증(cross-review)을 push 전 리뷰 절차로 정착시켜 지금까지 사용. 정적 검사는 통과하는데 배포 빌드가 실패하는 간극을 브랜치 재적재 스킬로 메워, 재적재한 5개 앱 중 4개가 실패하던 배포 빌드를 5개 모두 성공시킴 (2026.Q2~Q3)
• 위클리 인사이트 루틴: Redash와 사내 위키를 읽어 지표 해석, 실행 규모, 검증 기준까지 제안하는 주간 리포트를 발행. 8주 동안 누락 없이 나갔고, PO가 이 리포트를 근거로 광고 지면 비용 분석과 리포트 개선에 착수 (2026.Q3, 직접 발의)

[문제 해결]

• 안드로이드 웹뷰에서만 바텀시트 플릭이 무시되던 문제: 실기기 CDP 포인터 계측으로 브라우저의 정지 샘플과 라이브러리의 속도 계산 결함을 특정(가설 3개 폐기). 사내 패치 후 업스트림 PR 머지, mui/base-ui#5658 (2026.Q3, OSS 기여)
• 빈 카테고리로 나가던 BFF 요청: 앱이 빈 카테고리로 서버를 불러 예외가 하루 최대 1,061건 쌓임. “refetch가 enabled를 무시한다”는 1차 가설로 고쳤지만 계속 나서, 첫 렌더에 생긴 빈 키 캐시 엔트리가 관측자 없이 남아 다른 화면의 resetQueries에 되살아나는 것을 특정. 가드를 더하는 대신 빈 카테고리 상태를 타입으로 만들 수 없게 해 0건으로 만듦 (2026.Q3)

티오더 (t’order)

커넥트서비스팀 팀장 & Frontend Developer | 2024.01 - 2024.11 | FE 4, BE 2, Design 1, PM 2 (총 9명)
Frontend Developer | 2022.04 - 2023.12

매장 태블릿 주문 서비스(티오더2)를 Vue3로 다시 만드는 작업을 FE 메인으로 맡아 MVP부터 매장 전환까지 진행했습니다. 2024년부터는 커넥트서비스팀 팀장으로 FE·BE·디자인·PM이 함께하는 팀을 이끌며 사장님 앱과 웨이팅을 출시했고, 모바일 주문 서비스는 퇴사 전 출시 마무리 단계까지 개발했습니다.

[주요 프로젝트 및 성과]

• 태블릿 주문 서비스 Vue3 재작성 (티오더2):
  • 전역 스타일 꼬임, 비대한 JSON 통신, 웹뷰 JS 메모리 초과 다운이 얽힌 레거시를 고쳐 쓰지 않고 Vue3와 Atomic Design으로 다시 작성. 매장별 화면은 코드 분기 대신 테마 데이터로 그리고, 대용량 JSON 연산은 서버로 넘김(서버 쪽은 BE 담당) (2022.Q2~2023.Q3, FE 메인)
  • 고도화 단계에서 코드 스플리팅, 폰트 preload, 이미지 지연 로딩으로 메인 화면 첫 표시 15초 → 3초, Lighthouse 성능 55 → 97(로컬·태블릿 실기기, 직접 측정) (2023.Q3)
  • 전환기에는 Lambda@Edge로 한 도메인에서 v1과 v2를 경로별로 나눠 서빙해 두 버전의 매장을 함께 운영. 퇴사 무렵 어드민 기준 3,000개 이상 매장이 v2로 전환(직접 집계) (2023.Q3~2024.Q4)
• 사장님 앱 (하이브리드 앱): 콜센터로 몰리던 점주의 메뉴·운영 요청을 점주가 직접 처리하게 하는 앱
  • MFA 보일러플레이트를 만들며 익힌 Module Federation 구조를 적용하고, 화면은 웹, 셸은 Flutter로 감싸 네이티브 기능은 브릿지 핸들러로 연결. 앱 업데이트 안내는 Firebase Remote Config 버전 관리로 처리
  • 팀장으로 유관부서 정기회의를 주관해 요구사항과 우선순위를 정하고 앱스토어·플레이스토어 동시 출시, 출시 약 4개월 뒤 활성 매장 1,400여 곳(DB 기준 직접 집계) (2024.Q1~Q2)
• 하얏트 호텔 주문 시스템:
  • 기존 상품·옵션 2단 구조로 못 담던 호텔 세트 상품을 세트/상품/옵션 트리로 파싱하고 장바구니·주문서용 트리로 다시 구성. 옵션 깊이를 임의로 두는 설계를 버리고 3단계로 고정했고, 주문 전송은 Form에서 JSON 포맷으로 교체
  • 그랜드 하얏트 제주 호텔 내 식당 10곳에 적용, 8개 영역 커스텀 테마와 4개국어 지원 (2023.Q1~Q2, FE 대부분 직접)
• 모바일 QR/NFC 주문 서비스 (티오더 유저):
  • QR 공유 어뷰징을 막으려 QR 접속이 서버 토큰을 거쳐 주문 화면으로 가게 하고 접속 유효시간을 제한함. 네트워크 단절은 TanStack Query 설정으로 대응하고 Sentry와 Source Map 업로드로 장애 추적
  • 팀장으로 전체 설계를 팀과 함께 잡고 번역을 뺀 FE 구현을 맡아 출시 마무리 단계까지 진행 (2024.Q3~Q4)