Technical Skills

FrontendReact, TypeScript, Zustand, TanStack Query, shadcn/ui, ECharts

TestingPlaywright, E2E 테스트 설계, Page Object Model

UI / UXIA 설계, 사용자 플로우 설계, 복잡한 경험 단순화, 실시간 대시보드 UI, 프로토타이핑

ToolsGit, ESLint, 기술 문서화, 팀 컨벤션 수립, AI 기반 테스트 작성

Experience & Projects

엑셈 (Exem) 2025.04 – 현재

Frontend Developer · LLM플랫폼 팀

eXemble 온프레미스·폐쇄망 환경에 특화된 LLMOps 플랫폼 2025.08 – 현재

React · TypeScript · Zustand · TanStack Query · ECharts · Playwright

실시간 대시보드 툴팁 동기화 개선블로그 ↗

실시간 데이터가 10초마다 유입되는 대시보드에서 6개 메트릭 차트의 툴팁 동기화가 깨져, 같은 시점의 데이터를 보고도 차트마다 다른 값을 해석하게 되는 문제를 해결했습니다.
차트별 API 응답 시점 차이와 React 상태, ECharts 인스턴스의 업데이트 타이밍 불일치로 인해 동기화 기준이 흔들린다는 점을 파악하고, 실제 시간 값을 기준으로 툴팁을 동기화하도록 재설계했습니다.
ECharts 인스턴스 대신 React prop을 source of truth로 전환하고 requestAnimationFrame 기반 보정을 적용해, 사용자가 여러 차트의 값을 동일 시점 기준으로 안정적으로 비교할 수 있는 실시간 대시보드를 구현했습니다. 이후 동일 패턴으로 동기화 깨짐 현상이 재발하지 않았습니다.

대규모 트리 탐색을 고려한 문서 관리 UX 재설계

문서 업로드 시 업로드할 위치를 직접 입력해야 하는 구조로 인해 오류와 반복 문의가 발생하는 문제를 확인하고, 실제 작업 흐름에 맞는 탐색 기반 UX 재설계를 제안했습니다.
사용자는 경로를 기억하기보다 폴더를 탐색하며 작업한다는 점에 맞춰 macOS Finder를 레퍼런스로 IA와 화면 플로우를 재설계하고, 업로드 위치가 현재 탐색 중인 폴더 기준으로 자동 결정되도록 구현했습니다.
최대 10만 건까지 커질 수 있는 트리 구조를 고려해 API Pagination을 제안하고 virtualization을 적용해 화면에는 20개 내외의 요소만 DOM에 유지되도록 최적화했습니다.
그 결과 경로 입력 오류로 2주간 15건 유입되던 고객 문의가 개편 이후에는 추가 유입되지 않았고, 약 1초가 걸리던 트리 토글 동작도 거의 지연 없이 동작하도록 개선했습니다.

QA 공백 환경에서 E2E 테스트 체계 구축블로그 ↗

QA 인력 부재로 실제 사용자 플로우 검증이 수동 점검에 의존했고, 기능별 분기 테스트가 반복되며 릴리즈 리스크가 누적되는 상황에서 E2E 중심 테스트 체계를 설계했습니다.
자연어 입력을 테스트 코드로 변환하는 AI 에이전트를 구현해 반복 테스트 작성 비용을 절감하고, 배포 전 기능 검증 시간을 약 10분 → 30~60초로 단축하며 약 20개 분기 테스트를 자동화했습니다.
핵심 사용자 플로우 12개를 기준으로 Playwright E2E 테스트와 병렬 실행 구조, Page Object Model을 도입하고, 셀렉터 우선순위 및 스코프 기반 로케이터 전략을 포함한 테스트 작성 규칙을 문서화했습니다.

FSD 기반 프론트엔드 구조 재설계블로그 ↗

페이지 중심으로 구조가 확장되며 변경 영향 범위를 예측하기 어려워졌고, 기능 수정 시 연관 파일을 7~8개씩 탐색해야 하는 비효율이 반복되어 FSD 기반 구조 재설계를 주도했습니다.
Atomic Design, 도메인 단순 분리, FSD를 비교 검토한 뒤 UI 단위 분류만으로는 비즈니스 로직 경계를 통제하기 어렵다고 판단했고, 기존 코드를 전면 전환하는 대신 신규 기능부터 점진적으로 적용하는 방식을 선택했습니다.
"2개 이상의 entity 결합 시 feature로 분리" 규칙과 FSD 공식 린터 steiger를 적용해 예측 가능한 변경 범위를 유지할 수 있는 개발 환경을 만들었고, 기능 변경 시 파일 탐색 단계를 7~8개에서 2~3단계로 줄여 개발 리드타임과 리뷰 효율을 개선했습니다.

Xtract 전사 활용 가능한 RAG 성능 평가 서비스 2025.05 – 2025.09

React · TypeScript · Zustand · TanStack Query · shadcn/ui

사업 검증을 위한 RAG 평가 MVP 설계 및 구현

유저 페르소나와 사용 시나리오를 정의하고 Builder.io를 활용해 2일 내 프로토타입을 제작해, 기획과 구현 사이의 피드백 루프를 단축했습니다.
모델 개발자와 기획자의 실제 작업 흐름을 기준으로 IA와 핵심 플로우를 설계하고, 평가 지표 확인, 결과 비교, 반복 실행 시나리오를 고려한 MVP를 단독으로 설계 및 구현했습니다.
사업 검토와 피드백 수집이 가능한 수준까지 제품 완성도를 끌어올렸고, 해당 MVP는 이후 정식 LLMOps 제품인 eXemble로 확장되는 기반이 되었습니다.

Writing

배운 것은 글과 발표로 남깁니다. 개인 블로그, 기술 블로그 기고, 사내 발표까지 이어지고 있습니다.

AI Agent로 테스트 자동화 정착시킨 방법 ↗

QA 없는 환경에서 Claude Code로 테스트 에이전트를 구축해 수동 검증 시간을 줄인 경험

Webpack으로 Vite 속도 따라잡기 ↗

Webpack loader를 esbuild로 교체해 빌드 시간을 16초 → 3초로 단축, Vite와 동등한 성능을 달성한 과정

AI 시대에서 살아남기 - 프론트엔드 개발자 편 ↗

평촌경영고등학교 AI융합과 학생 대상 발표 — AI를 두려워하기보다 도구로써 제대로 활용하는 방법

Obsidian + Claude Code로 나만의 RAG 챗봇 만들기 ↗

로컬 노트에 Claude Code를 연결해 개인 RAG 환경을 만든 방법

Awards

Exem 2025 사내 우수 도전·기여 포상

기술 블로그, 사내 발표, 개발 과제를 주도하며 기술 공유 문화 확산과 AI 플랫폼 기술 경쟁력 강화에 기여한 점을 인정받아 수상

2025.12

Exem 2025 Best-3X

입사 3개월 만에 빠른 실행력, 고객 중심 설계 사고, 지식 확산 기여를 인정받아 수상

2025.07

LG U+ SW 부트캠프 유레카 최종융합 경진대회 우수상

반려견 동반 가능 시설 공유 플랫폼 놀멍 개발 프로젝트로 수상

2024.12

2022 클라우드 아이디어 공모전 장려상

교통약자를 위한 저상버스 예약 서비스 설계로 수상

2022.12

Education

서울과학기술대학교 컴퓨터공학과 (편입, 졸업)

2024.02

LG U+ SW 부트캠프 유레카 프론트엔드 과정

2024.06 – 2024.12