자기소개
AI로 빠르게 개발하고 그 변화를 자동화된 검증으로 안전하게
관리하는 프론트엔드 개발자입니다.
2023년 9월부터 AI 기반 치과 CAD/CAM SaaS인 Dentbird의 프론트엔드를
맡고 있습니다. 구독·결제와 3D 뷰어, 데스크톱 CAM 연동처럼 외부 의존이
많은 복잡한 화면을 만들고 그 화면의 기반이 되는 모노레포·환경 분리·품질
자동화까지 주도적으로 다뤄 왔습니다.
AI가 내놓은 코드와 결과는 반드시 사실로 검증하고 최종 판단은 직접
내리는 것을 원칙으로 삼습니다. 이 검증은 자동화했습니다. 커밋마다 바뀐
코드를 AI가 분석해 연관된 테스트만 골라 격리 환경에서 자동 실행하고
실패가 실제 회귀인지 테스트 코드 문제인지까지 1차로 분류하는
워크플로우를 만들었습니다. 문제는 빠른 처치보다 근본 원인을 정확히
파악한 뒤 해결합니다. 새로운 기술은 트레이드오프를 정량적으로 따져
가치가 분명할 때 도입합니다. 만든 뒤에도 효과가 없으면 인정하고 방향을
바꿉니다.
좋은 개발은 팀이 같은 방향을 공유할 때 나온다고 보아 성과뿐 아니라
되돌린 결정과 한계까지 정직하게 남기려 합니다.
주요 프로젝트
각 프로젝트의 배경·대안 비교·회고는 포트폴리오에 정리했습니다.
격리 재현 환경과 AI 변경 감지
테스트가 거의 없던 제품에 격리 재현 기반의 자동 회귀 감지 체계를
구축하고 배포마다 검증을 통과해 나간 결함을 추적하는 회귀 측정(CFR)
대시보드까지 직접 만들어 팀에서 운영하고 있습니다.
- 커밋 시점 클라이언트·서버·DB를 하나의 컨테이너로 통합해
결정론적 격리 재현 환경 구성
- 백오피스 전 영역에 E2E를 구축하며 로그인 중복을 공통 헬퍼로
약 93% 감소, 여러 레포에 나뉜 Playwright E2E를 모노레포로
통합·Page Object 리팩토링으로 중복 제거
- 커밋 변경을 분석해 연관 QA 테스트 케이스만 자동 선별·실행하고
실패를 실제 회귀와 테스트 코드 문제로 1차 분류해
Teams로 보고하는 AI 변경 감지 구축 — 초기 EC2 크론에서 이후 운영 부담을
줄여 로컬 데일리 E2E로 이전
- 개발팀 공용으로, 품질 테스트 케이스(TC)의 E2E 커버리지를
추적하는 대시보드를 구축하고 E2E 통과 결과가 자동 반영되도록
연동 (FE 화면 + API)
계정·구독 클라이언트 아키텍처 (FSD·컴포넌트 패턴)
크레딧에서 구독제로 전환하는 계정·구독 클라이언트에 FSD와 컴포넌트
패턴을 도입하되 각 패턴의 장단점과 과설계 경계를 직접 따져 적용 기준을
세웠습니다. 도입 후 겪은 합의 비용에서 “패턴은 팀의 공통 이해가 없으면
복잡도만 높인다”는 기준을 얻었습니다.
- FSD 레이어 규칙을 직접 설계 — DomainAPI 메서드·query key
factory·DTO와 도메인을 잇는 mapper 분리
- Compound Component·Render Props로 관심사를 분리하되 리렌더
비용·과설계 위험을 양면으로 기록
- 도입 후 폴더 위치 합의 비용·사용법 편차를 겪고 “기술 도입은
문제 해결이 우선”으로 정리 — 구조 자체는 유효해 모노레포 이관
후에도 존속
- 3개 앱에 중복되던 CaseInfo 다이얼로그를 공통 컴포넌트로 추출해
약 66% 감소
케이스 목록 썸네일 로딩 최적화
가장 자주 보는 케이스 목록 화면에서 지연 로딩·요청 배치로 “N장=N요청”
구조를 해소하고 재마운트마다 캐시가 소실되던 무한 재요청을 공유 캐시로
근절했습니다.
- “N장 = 네트워크 N요청”이 되기 쉬운 썸네일을
IntersectionObserver로 보일 때만 로드하고 동시에 들어온
요청을 모아 한 번에 배치 요청으로 처리
- 운영 중 발생한 무한 재요청을 재시도로 억제하는 대신,
재마운트마다 훅·캐시가 소실되는 구조를 진단해 캐시를
공유 스코프로 끌어올리고 성공뿐 아니라 실패도 캐시해
근본 해결, 회귀 테스트로 고정
웹·로컬 CAM 연동 Electron 앱 (Dentbird Linker)
웹에서 만든 보철 케이스를 사용자 PC의 외부 CAM 소프트웨어로 보내는
사내 연동 앱을 단독 설계·운영했습니다. 기존에는 다운로드·압축 해제·수동
투입을 거쳐야 했고 Chrome LNA 정책이 웹과 로컬 통신을 막기 시작한
상황이었습니다.
- Chrome LNA 정책으로 막힌 로컬 서버 통신을, 장기 안정성 기준의 대안
비교 끝에 Custom Protocol 중간 레이어로 재설계
- 좌표계·파일 전달 방식이 서로 다른 외부 CAM 12종을 단일
변환·연동 인터페이스로 통합
- 명세 없던 기존 CAM 연동을 특성화 테스트로 고정한 뒤
재구현
- 설치 감지는 틀려도 사용자가 막히지 않게 비차단
안내로 통일하고 CAM 없이 시나리오를 재현하는 Mock Server와 Datadog
로그로 검증·진단
- Windows 전용 CAM을 Mac에서 실제 전송과 동일하게 재현하는
원격 검증 도구를 직접 만들어 팀 스킬로 등록 — 조건을
하나씩만 바꿔 대조해 형상 오류의 원인을 규명하고 다른 사례는 벤더 실행
인자 제약임을 확인해 결함이 아님을 확정
Medit 소프트웨어 연동 인앱 현대화
협력사 Medit의 소프트웨어 안에서 Dentbird를 쓰도록 제공한 Electron
인앱이 2023년 이후 방치돼 곧 서비스 사용이 끊길 상황이었습니다.
엔진·로그인·회사 라이브러리 의존을 정리해 되살리면서 우리 서비스가
바뀌어도 재빌드가 거의 필요 없는 구조로 전환했습니다.
- 곧 배포될 우리 서비스 버전에서 인앱이 서비스를 아예 사용할 수 없게
될 상황을, 최신 3D 엔진이 요구하는 WASM 기능(JSPI) 구동을 위해
Electron 25에서 31로 업그레이드해 해소
- 우리 서비스 내부 응답에 기대던 로그인 감지를 IPC 기반으로
재설계해 로그인 후 엉뚱한 페이지로 이동하고 미로그인 상태에서
작업이 저장되지 않던 문제를 해결
- 우리 서비스가 바뀔 때마다 인앱이 함께 어긋나던 원인이 불필요한 내부
결합임을 확인, 회사 UI 라이브러리 의존을 MUI로 대체하고 결합을 최소화해
재빌드 필요 자체를 축소
- 브라우저 stub 검증이 불안정해 실제 Electron 환경에 CDP로
연결해 3D 엔진 구동까지 확인 (배포 대기, 릴리스는 협력사 Medit
담당)
프론트엔드 모노레포 통합
분리됐던 팀들이 합쳐지는 조직 변경에 맞춰 각자 관리하던 레포가 흩어져
하나의 변경이 여러 PR·여러 배포로 나뉘던 것을 단일 NX 모노레포로
통합했습니다. 앱마다 버전이 어긋나던 공용 라이브러리는 빌드타임에 합쳐
통합 배포와 버전 정합을 함께 확보했습니다.
- 커밋 이력을 보존해 앱 2종·공용 라이브러리 6종을 Git
Subtree로 이관하고 환경·도메인 구성을 통합 라이브러리로 일원화
— 이 라이브러리가 이후 격리 재현·품질 자동화의 기반이 됨
- 별도 패키지로 분리돼 앱 간 버전 불일치와 배포 시점 조율 비용이
따르던 공용 모듈을 빌드타임 통합으로 전환, 팀 간 버전
조율 커뮤니케이션을 제거
- NX 자동 타겟 추론이 일으키던 메모리 부족 빌드
실패를 진단, 불필요한 산출물 설정을 제거해 빌드 태스크
11→9로 정리
3D 렌더링 품질과 시각 회귀 테스트
팀이 AI로 진행한 사내 3D 라이브러리의 Three.js 마이그레이션에서,
이미지 맞춤으로 미세조정에 기대 있던 색·조명을 원본 엔진 기준으로 표준
기능화하고 시각 회귀 검증을 케이스당 120초에서 37.7초로 줄였습니다.
- 이미지 맞춤으로 들어간 미세조정 값을 원본 엔진 실제 동작 근거로
Three.js 표준 기능으로 대체 — 약 1,420줄 정리
- 격리 컨테이너에서 baseline을 고정 생성해 환경 차를 제거하고
Playwright 스크린샷 비교로 3D 렌더 회귀를 검증
데스크톱 앱 빌드·서명·배포 자동화
담당자 로컬 PC에서 돌던 두 데스크톱 앱의 빌드·서명·배포 파이프라인을
재설계해 빌드 시간을 33~39분에서 17~24분으로, 업로드 아티팩트를
757MB에서 334MB로(약 56%) 줄였습니다. Windows 코드 서명은 빌드머신 단독
운영으로 전환했습니다.
- macOS 빌드 파이프라인 재설계로 전체 빌드를 33~39분에서
17~24분으로 단축, 업로드 아티팩트 757MB→334MB(약
56%)
- Windows 코드 서명 에이전트를 물리 빌드머신에 직접 설치·풀 등록해
단독 운영 — 서명 USB·인프라팀 의존 제거
- 정식·실험 두 배포 변형(flavor)이 같은 OS 딥링크 스킴을 두고 충돌하던
문제를, 변형을 빌드와 런타임(OAuth 흐름) 양끝에서 구분하는
per-variant 커스텀 프로토콜로 재설계
B2B 구독·결제 시스템 프론트엔드
일회성 크레딧에서 반복 구독으로 전환하는 시점에 글로벌 멀티테넌트
결제·권한 프론트엔드를 전담했습니다. 모든 에러를 unknown으로 처리하던
구조는 예측 가능/불가능으로 나눠 한 기능의 실패가 전체 페이지를 멈추지
않도록 개선했습니다.
- 플랜 업그레이드·시트 구매·구독 취소·재개·쿠폰·결제수단·결제
히스토리까지 구독 워크플로우 전체를 구현
- 결제 상태를 서버·Stripe 동기화 기준으로 두고 무한
반복 방지 폴링·origin 격리된 결제 팝업으로 외부 연동 복원력 확보
- 모든 에러를 unknown으로 일괄 처리하던 것을 예측
가능/불가능으로 구분 — 비즈니스 에러는 코드별 분기, 시스템
실패는 ErrorBoundary로 격리하고 이 문제의식을 이후 5개 앱
관측·복원력 표준화로 확장