이예린
PROFESSIONAL SUMMARY
커뮤니케이션 디자인을 전공하고 프론트엔드 엔지니어로 전환한, 디자인과 코드의 언어를 동시에 구사하는 엔지니어입니다. 의료 AI SaaS에서 디자인 토큰과 테마 시스템을 탑재한 Canvas 기반 차트 라이브러리를 단독 설계하며, 인터랙티브한 그래픽 요소를 시스템화하는 역량을 쌓았습니다. 복잡한 비즈니스 도메인의 문제를 직관적인 UX와 확장 가능한 인터페이스 구조로 풀어내는 데 집중합니다.
TECHNICAL SKILLS
Frontend
TypeScript · React 18/19 · Next.js (App Router, RSC) · React Query · Zustand · Tailwind CSS · WebSockets · Canvas API · StoryBook · Jest / Vitest
Tooling
Vite · tsup (CJS+ESM) · pnpm workspace · GitHub Actions · Vercel · Netlify
Design
Figma · Adobe Photoshop · Illustrator · After Effects · Procreate
PROFESSIONAL EXPERIENCE
Gaia Labs
프론트엔드 엔지니어 · 정규직
서울, 대한민국
2024년 11월 - 현재 (1년 4개월)
사내 차트 시각화 라이브러리
Canvas 기반 사내 공용 컴포넌트 라이브러리 · 단독 설계·개발
- 성능 최적화를 위한 Canvas API 기반 차트 설계
30개 이상의 차트 동시 렌더링 벤치마크 결과, Canvas(76fps)가 SVG(36fps) 및 기존 라이브러리(11fps) 대비 성능 우위 확인. DOM 트리 비의존적 구조로 리플로우 없이 안정적 프레임·픽셀 단위 애니메이션 제어 구현. - 디자인 시스템 체계화
색상·타이포그래피·간격 등을 디자인 토큰으로 정의하여 디자인-개발 간 협업 언어 통일. light·dark·minimal·colorful 4종 프리셋 테마 제공 및 인스턴스별 토큰 오버라이드 기능을 통해 시각적 일관성과 유연성 동시 확보. - 컴포넌트 문서화 및 QA 프로세스 효율화 (67% 단축)
50개 이상의 스토리로 props·테마 변형·인터랙션 문서화. 디자이너의 직접 검수 환경을 제공하여 기존 도메인당 3시간 소요되던 수동 QA 프로세스를 1시간으로 단축. - 라이브러리 아키텍처 및 CI/CD 구축
pnpm workspace 모노레포로 core 라이브러리와 Storybook 데모 앱 분리 관리. tsup 기반 CJS + ESM 듀얼 출력 및 TypeScript 선언 파일 자동 생성. npm scoped package로 배포. GitHub Actions CI/CD: 테스트 → 빌드 → GitHub Packages → Storybook 자동 배포. - 7가지 도메인 특화 차트 타입 구현
상담 프로그램 DERMA:CODE의 모든 차트를 단일 라이브러리로 통합, 신규 화면 추가 시 별도의 차트 스타일링 공수 완전 제거. - 테스트 커버리지 구축
Vitest + Canvas 2D Context Mock으로 렌더링·테마·인터랙션 시나리오 테스트 구축.
DERMA:CODE
AI 피부 상담 프로그램 · 테이아 클리닉 강남 실사용 B2B 서비스
- 데이터 시각화를 통한 핵심 아이덴티티 구축
6개 피부 지표를 리스트 나열하던 초기 구조에서 Hexa(육각형) 시각 모델을 직접 제안·구현 → AI 분석 결과 화면·상담 UI·리포트 전반에 적용, 제품의 핵심 브랜드 요소로 정착. 현재 영업 자료·제품 소개서의 대표 시각 요소로 활용. 상담 시간 5~10% 단축. - 이중 사용자 UX 설계
상담사의 '빠른 파악'과 환자의 '심리적 확신'을 위한 맞춤형 진입점 및 페이지 분리. Progressive Disclosure로 핵심 지표를 우선 노출, 필요 시 상세 데이터를 탐색할 수 있는 구조로 설계 → 상담 중 추가 질문 5% 감소 (상담진 피드백 기준). - 오너십
기획·설계·개발·배포를 단독 운영하며 1~2주 단위 애자일 사이클 유지. V1~V3 3차례 버전 업데이트 주도, V3 로드맵 및 요구사항 명세(PRD) 직접 정의. - LCP 16.7s → 5.7s (66% 개선)
Lighthouse + DevTools 병목 분석 후 코드 스플리팅·지연 로딩·캐싱 재설계 적용, 중복 API 호출 40% 절감.
Aesthe CRM Next
피부과 EMR 성격의 CRM · 테이아 클리닉 강남 실사용 의료 CRM · 신규 지점 표준 시스템 예정
- 의료 워크플로우 UI 설계
상담→결제→시술→사후 관리까지 끊김 없는 화면 흐름 설계. 5단계 분산 접수 플로우를 단일 화면으로 통합 → 시술 접수 소요 시간 10분 → 6분 (40% 단축). - API 구조 개선 주도 (BFF 패턴)
V1의 50+ 필드 단일 응답 구조 발견 → V2에서 도메인별 독립 엔드포인트 분리(환자 기본정보·상담 이력·결제 내역) 제안. 서버 관리 코드 테이블 전환으로 신규 시술 추가 시 프론트 배포 없이 대응 가능한 구조 설계. - WebSocket 실시간 동기화 설계
접수 데스크·상담실·진료실로 이어지는 환자 동선을 실시간으로 추적해야 하는 비즈니스 요구에 따라, 결제·진료 상태 등 즉시 전파가 필요한 항목에 한정해 WebSocket을 도입하고 invalidateQueries 연동으로 관련 캐시를 즉시 갱신 → 데이터 충돌 0건. 나머지는 React Query 캐싱 전략으로 API 호출 45% 절감. - App Router + RSC 도입
JS 번들 30% 경량화, 대시보드 LCP 1.2s 단축. - 부가세 정수 기반 계산 전환
정산 오차율 0%, 6개월간 금액 불일치 0건. 해당 유틸리티가 V2 정산 정책 표준으로 채택됨.
제일기획
디지털 마케팅 · 인턴십
서울, 대한민국
2021년 5월 - 2022년 8월 (1년 3개월)
- WSC Jira/Confluence Helpdesk 담당
Jira JQL을 활용한 티켓 데이터 필터링 및 추출을 통해 SQL 기반의 논리적 쿼리 사고방식 정립. - 글로벌 콘텐츠 프로젝트 PM
삼성전자 Global 85 Sites B2B·B2C 콘텐츠 업데이트 프로젝트 다수 PM 참여. 해외 센터, 개발사 등 협력사와 커뮤니케이션 주도. - AEM 기반 CMS 운영
대규모 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개월 내 완성 — Prisma + Express 백엔드 구축 및 Render 배포 담당.
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
정보처리기사
한국산업인력공단 (HRD Korea)
대한민국
2024년 6월 18일
SQL 개발자 (SQLD)
한국데이터산업진흥원
대한민국
2024년 6월 21일
컴퓨터활용능력 1급
대한상공회의소 (KCCI)
대한민국
2022년 6월 10일