Professional Summary
현장의 문제를 발견하고, 이를 가설 수립과 기술적 검증을 통해 해결하는 Product Engineer입니다.
상담사의 경험과 감각에 의존하던 피부과 상담을 데이터 기반으로 구조화한 DERMA:CODE, 피부미용 의원의 실제 업무 흐름을 반영해 상담·결제 프로세스를 시스템화한 CPE를 개발했습니다. 두 제품 모두 요구사항을 전달받아 구현하는 데 그치지 않고, 현장을 직접 관찰하고 문제를 정의한 뒤 제품의 구조와 기술을 결정했습니다.
사용자를 직접 만나 업무 흐름을 이해하고, 데이터를 측정해 문제를 검증하며, 프로토타입과 벤치마크로 해결책과 기술적 선택을 구체화합니다. 문제를 전달받아 구현하는 데 그치지 않고, 무엇을 만들고 어떻게 풀 것인지부터 고민하는 엔지니어입니다.
Technical Skills
Frontend
TypeScript · React · Next.js · Vite · TanStack Query · Zustand · Canvas API · WebGL · three.js / React Three Fiber · Konva · SSE · WebSocket · Vitest · Jest · Storybook · FSD
Backend & Infra
Node.js · Express · Prisma · PostgreSQL · GitHub Actions · pnpm 모노레포 · tsup · i18next (5개 로케일) · Vercel
Design
Figma · Adobe Photoshop · Illustrator · After Effects · Procreate
Professional Experience
Gaia Labs
정규직 · 서울, 대한민국 · 2024년 11월 - 현재
DERMA:CODE (V1, V2)
AI 기반 피부 상담 프로그램
- AI 진단 점수의 분포 이상을 발견해 모델 재학습으로 연결, 학습 데이터 수집 툴 개발
- 피부 분석 점수가 한쪽으로 치우친 것을 확인하고, 개원 이래 누적된 분석 결과를 pgAdmin에서 SQL로 직접 추출. 고민 항목별로 연령대·성별 코호트를 나눠 분포를 비교한 결과, 대다수 점수가 좁은 구간에 몰려 개인 간 차이가 드러나지 않는 상태임을 확인.
- 평균 기준 정규화 대신 분포 형태에 사분위 기반 산식을 설계해 백엔드에 제안·반영. 코호트 내 p10~p90 구간 보간으로 백분위를 산출하고 25/50/75 컷오프로 4단계 분류 → 절대 점수를 또래 대비 상대 지표로 전환.
- 분석 결과를 근거로 점수 체계 고도화를 조직 과제로 제안, 현재 모델 재학습 진행 중. 학습 데이터 확보를 위해 의료진이 피부 지표 점수에 정답 라벨을 부여하는 어노테이션 툴(human-in-the-loop) 개발.
- 반복 VOC를 프로토타입으로 검증해 3D 시뮬레이션 기능으로 승격
- 테이아 강남점 VoC에서 "시술 미리보기"에 대한 반복된 니즈를 파악. 바로 제안 대신 프로토타입으로 먼저 검증. 2주간 구현 후 동작 화면을 근거로 정식 기능으로 승격.
- 시술 효과를 6개 변형 파라미터로 모델링하고 시술별 파라미터 값을 백엔드 데이터로 분리 → 필러(볼륨 확장)와 일반 솔루션(inward 변형 + 텍스처 보정)의 상반된 효과를 한 엔진으로 처리.
- 상담 중 화면 로딩 병목을 5단계 계측으로 개선. LCP 16.7s → 5.7s
- 상담 중 3D 화면 로딩이 지연되는 문제를 확인하고 렌더링·네트워크 구간을 단계별로 계측.
- ① 렌더 게이트 제거 ② 2,827ms가 걸리던 미사용 폰트 요청 제거(LCP 변화 없음) ③ 2D 우선 렌더·3D 지연 로딩 ④ 서버 이미지 리사이즈·WebP 변환(3,506KB → 123KB). 최종 LCP 16.7s → 5.7s.
- 히트맵으로 탭 사용률을 측정해 GNB 구조 재편
- Hotjar로 2개월간 페이지별 사용률을 측정해 메인 탭 84%, 업셀링 탭 4.5%의 사용률 차이를 확인. 상담사가 솔루션 추천 흐름에서 업셀링하도록 운영되는 프로토콜을 근거로, 별도 업셀링 탭 대신 추천 과정에서 시너지 솔루션을 노출하는 구조를 제안하고 V2 GNB를 재편.
CPE (V1, V2)
피부 미용 의원 특화 마케팅 / 병원 운영 프로그램 (CRM + EMR)
- 의원 현장 인터뷰를 근거로 상담실 화면 전면 재설계 (V1)
- 의원을 직접 방문해 상담사 User Interview를 진행하고, 시술 구매 상담에 필요한 고객 정보와 이전 시술 구매 이력이 여러 페이지에 흩어져 있어 화면을 반복해서 오가야 하는 문제를 확인.
- 상담 시 필요한 정보 확인부터 시술 구매·할인 적용까지 한 페이지에서 완료할 수 있도록 상담 화면을 재설계, 해당 정보 구조를 V2에도 유지.
- SSR·SEO 활용도가 낮은 운영툴의 Next.js 구조를 재검토하고 React + Vite 전환 주도 (V2)
- 로그인 이후에만 사용하는 운영 툴로 SEO 필요성이 낮고, 대부분의 화면이 상호작용 중심이라 Client Component가 넓게 사용되는 구조를 확인.
- 제품 특성과 개발 제약을 기준으로 Next.js 유지와 React + Vite 전환을 비교·정리해 기술 전환을 제안.
- 결제 금액과 부가세의 1원 오차를 계산 정책으로 해결 (V1)
- 결제 금액과 부가세를 각각 계산·반올림하면서 공급가액과 부가세의 합이 화면 표시 금액과 일치하지 않는 1원 단위 오차를 확인.
- 표시 금액을 기준으로 공급가액을 역산하고, 부가세를 "표시 금액 - 공급가액"으로 산출해 분리 금액의 합이 항상 결제 금액과 일치하도록 계산 로직을 변경. 절사 방식과 할인·부가세 적용 순서를 백엔드와 명시적으로 합의해 동일한 계산 기준으로 적용.
- 선결제 상품 환불 누락 결함을 규명하고 API 계약을 구체화 (V2)
- 선결제 상품의 일부 환불 정보가 거래·영수증 응답에서 누락되는 문제를 발견하고, 3개 엔드포인트의 응답을 대조해 환불 상태의 기준이 되는 데이터를 특정. 환자·거래·청구서 ID를 포함한 재현 케이스로 문서화.
- API 관련 요청을 결함·API 신규/변경·응답 최적화 등 7개 범주로 구조화하고 블로킹 여부를 구분해 전달. 블로킹 항목은 우회 로직을 선반영해 API 변경 전에도 화면이 중단되지 않도록 처리.
Derma:code Chart Library(사내 공용 차트 라이브러리)
Canvas 기반 사내 공용 컴포넌트 라이브러리 · 단독 설계·개발
- 기존 차트 라이브러리로 구현하기 어려운 디자인을 위해 공용 라이브러리 제작
- 육각 레이더의 그라데이션 오버레이·글래스모피즘 마커·시퀀스 애니메이션을 기존 라이브러리에서 요구사항에 맞게 구현하기 어려워 Canvas API 기반으로 차트 8종 직접 구현.
- 기술 선택을 벤치마크로 검증
- Canvas·SVG·Recharts를 동일 차트로 구현한 벤치마크를 통해 렌더링 성능 트레이드오프 분석 및 기술 선택. CPU 4× 스로틀링에서 Canvas 76fps, SVG 36fps, Recharts 11fps를 기록하고, 클릭 반응 시간과 DOM 노드 수 비교.
- 현재 사용 규모에서는 SVG도 충분함을 확인했으나, 애니메이션·인터랙션을 통합한 렌더링 구조에서 제어하고 다중 차트 확장성을 확보하기 위해 Canvas를 채택. 접근성과 Retina 대응의 한계도 함께 기록.
- 배포 경로와 테스트 구조 구축
- pnpm 모노레포로 라이브러리·데모·벤치마크를 분리하고, tsup으로 CJS/ESM 듀얼 번들과 타입 선언 자동 생성. Git tag 기반 CI/CD로 15개 버전 배포 자동화.
- jsdom의 isPointInPath() 미지원으로 Canvas API 의존 테스트에 한계가 있어, 히트 판정 로직을 순수 함수로 분리해 Canvas 목킹 없이 테스트 가능하도록 구조화.
TheiA CPE SuperApp v2
병원용 통합 SaaS 슈퍼앱
- 인터랙션 미니앱 설계 및 개발
- 상태 전환, 카운트다운, 권한 인증 등 병원 운영 웹(CPE)의 기존 비즈니스 로직을 태블릿 환경과 역할별(환자/의료진) 뷰에 맞춰 10여 개 기능 영역으로 재구성
- 현장에서 인지하지 못하던 불편을 선제적으로 파악해 촬영 화면 내 얼굴 가이드라인 오버레이를 추가, 의료진과 경영진의 긍정적인 피드백 획득
- 지점별 콘텐츠 CMS 전환 및 데이터 정합성 유지
- 앱 번들에 하드코딩된 다국어 안내 콘텐츠를 서버 기반으로 전환하여, 콘텐츠 변경 및 신규 지점 추가 시 앱 배포가 필요 없는 아키텍처 확립
- 단순 요구사항 전달을 넘어 DB 스키마, API 규격, 렌더링 규칙을 망라한 '인터페이스 계약 수준 설계서'를 작성하여 백엔드와의 협업 병목을 해소하고 당일 구현까지 이끌어냄
- 블록 타입 추가 시 마이그레이션이 필요 없도록 지점당 JSONB 단일 문서로 저장소를 설계하고, 초기 구현된 어드민 편집기를 운영자 기준으로 재구성
- CMS 이관 시 발생한 지도 마커 좌표 오차를 이전 정의 기준으로 환산하고, 기존 좌표값 2개가 ±3px 이내에 오도록 테스트를 작성하여 고정
제일기획
인턴십 · 서울, 대한민국 · 2021년 5월 - 2022년 8월
- 삼성전자 Global 85 Sites B2B·B2C 콘텐츠 업데이트 프로젝트 PM
- 해외 지사 · 퍼블리셔 · 광고주 사이의 커뮤니케이션 주도.
- 프로젝트 규모가 커 지라 티켓이 뒤엉키자 용도별 JQL 쿼리 프리셋을 만들어 공유 → 팀의 티켓 검색 시간 절반 단축.
- AEM 기반 대규모 CMS 운영 중 JavaScript 스니펫을 분석한 것이 개발 전환의 계기.
Graphic Design Freelancer
대한민국, 캐나다 · 2019 - 2024
- 브랜드 디자인 단독 수행
- 로고·포스터·모션 그래픽 등 기획부터 납품까지 독립 수행
- LINE Creator Market에서 사막 여우 캐릭터 메신저 스티커 팩 24개 출시·판매
Education
코드잇 스프린트 풀스택 2기
Full Stack Developer Program · Online, South Korea · 2024년 7월 - 2024년 11월
Node.js·Express RESTful API, PostgreSQL·MongoDB 데이터 모델링
5인 팀 협업 View My Startup 프로젝트 1개월 완성
Emily Carr University of Art and Design
Bachelor of Communication Design · GPA 3.5 (3.47) / 4.3 · 밴쿠버, 캐나다 · 2018년 9월 - 2023년 5월
시각 디자인(타이포그래피, 에디토리얼)부터 인터랙션 디자인(모션, AR)까지 디자인 교육 이수
청심국제고등학교
가평, 대한민국 · 2015년 3월 - 2018년 2월
Certifications
컴퓨터활용능력 1급
대한상공회의소 (KCCI) · 2022년 6월 10일 취득 · Certificate No. 22-K9-051691
정보처리기사
한국산업인력공단 (HRD Korea) · 2024년 6월 18일 취득 · Certificate No. 24201300665P
SQL 개발자 (SQLD)
한국데이터산업진흥원 · 2024년 6월 21일 취득 · Certificate No. SQLD-053010291