Hello, I'm Anny.

I plan.

I design.

I build.

기획을 구현하기 전, 사용자 행동 데이터부터 검증합니다.

  • 상담사 현장 인터뷰 및 2개월간의 Hotjar 히트맵 분석 진행 후 화면 개편
  • VoC 추적으로 추천 시술 조합 시뮬레이션 기능 도입

복잡한 데이터를 직관적이고 브랜드 시각 경험으로 바꿉니다.

  • 단순 텍스트 목록이었던 6가지 피부 점수를 육각 방사형 그래프로 시각화
  • 브랜드 메인 아이덴티티 구축 및 핵심 UX 요소로 승화

성능 병목은 추측하지 않고 정밀하게 계측해서 해결합니다.

  • LCP 로딩 과정을 5단계로 세분화하여 단계별 지연 요소 추적
  • 243ms 중 218.7ms를 차지하던 CPU Readback 병목 특정 및 개선
PLANDESIGNBUILD

현장에서 문제를 찾고,
제품으로 풀어냅니다.
프론트엔드 엔지니어 이예린.

가이아랩스 · 2024.11 – 현재 · 서울

Annything.
SCROLL

Selected Work

All Projects

DERMA:CODE

프론트엔드
  • 상담사가 경험과 감각으로 설명하던 피부 상태를 28개 지표로 구조화하고, 추천 시술과 예상 결과까지 확인할 수 있는 상담 프로그램입니다.
  • 반복해서 접수된 “시술 후 모습을 미리 보고 싶다”는 VoC를 2주간 프로토타입으로 검증해 3D 시뮬레이션을 정식 기능으로 발전시켰습니다. 이후 마케팅의 주요 콘텐츠로 활용되었습니다.
  • 누적 통계에서 AI 진단 점수의 분포 이상을 직접 발견하고, 상대 지표 보정안을 제안해 모델 재학습과 라벨링 도구 개발까지 연결했습니다.

Next.js 15 · React 19 · TypeScript · React Three Fiber · three.js · MediaPipe · TensorFlow.js · Konva · TanStack Query · Zustand · react-i18next · Tailwind 4

시뮬레이션2주 프로토타입 → 정식 기능마케팅 주요 콘텐츠
LCP16.7s5.7s단계별 계측

Derma:code Chart Library

설계·개발
  • 기존 라이브러리로 구현하기 어려운 육각 레이더의 그라데이션·마커·시퀀스 애니메이션을 구현하기 위해 Canvas API로 차트 8종을 직접 제작했습니다.
  • Canvas·SVG·Recharts로 같은 차트를 직접 만들어 비교하고, 성능뿐 아니라 접근성과 레티나 대응의 비용까지 확인한 뒤 Canvas를 선택했습니다.

Canvas API · TypeScript · pnpm workspace · tsup (CJS+ESM) · Vitest · Storybook · GitHub Actions · GitHub Packages

벤치마크Canvas 76fpsSVG 36 · Recharts 11 · CPU 4× 스로틀링
사용DERMA:CODE V1·V215개 버전 배포 · 스토리 50+

CPE

프론트엔드
  • 예약부터 상담·진료·결제까지 의원의 실제 운영 흐름을 다루는 내부 운영 시스템을 개발했습니다.
  • 의원을 직접 방문해 상담사를 인터뷰하고, 상담 중 여러 화면을 오가야 했던 업무를 한 화면에서 처리할 수 있도록 재설계했습니다. V2에도 유지되었습니다.
  • 로그인 이후 사용하는 운영툴의 특성을 기준으로 Next.js 구조를 다시 검토하고 React + Vite 전환을 제안했습니다.

V1 · Next.js 14 (App Router) · V2 · React 19 · Vite · react-router v7 · TypeScript 5.9 · Zustand · TanStack Query · Tailwind 4 · Storybook · Vitest · FSD

현장 인터뷰상담 화면 재설계정보 확인·구매·할인을 한 화면에서
아키텍처Next → Vite3개월 병행 · 무중단 이관

Waiting for 7000 Bus

기획·디자인·개발
  • 할머니가 종이 시간표에서 다음 버스를 찾는 데 매번 5분 이상 할애하시는 것을 보고 만들었습니다.
  • 도착 시간과 출발 시간을 기준으로 가장 가까운 7000번대 버스를 바로 찾을 수 있습니다.

React · Vite · TypeScript · Zustand · Emotion

개인 프로젝트기획·디자인·개발·배포 전 과정
공개GitHub오픈소스 저장소

About

현장을 이해하고, 개발을 기획합니다.

"피부 미용"이라는 비즈니스 로직이 제품에 직결되는 도메인을 경험하며, 명세에 따라 기능을 구현하는 것만으로는 제품의 완성도를 높이기 어렵다는 것을 깊이 배웠습니다. 개발 착수 전에 실제 현장의 업무 흐름과 사용자의 목소리를 확인합니다. 어떤 것이, 왜 필요한지를 정의하고, 이를 명확한 요구사항으로 구체화합니다. 프로토타입과 사용 데이터를 통해 해결책을 검증하고 제품에 반영합니다.

단순한 기술 구현보다 현장에서 실제로 도움이 되는 제품을 만드는 것을 중요하게 생각합니다.