najeong.me
/

사용자 경험과 팀의 협업 경험을 함께 개선하는 Frontend Engineer

인터랙티브 UI와 공통 컴포넌트 개발을 즐기며, 사용자가 자연스럽게 사용할 수 있는 경험을 만드는 데 집중합니다. 개발 과정에서 반복되는 문제를 발견하면 AI와 자동화를 활용해 해결합니다.

PRODUCT & UX

[설명 입력]

INTERACTION

[설명 입력]

FRONTEND ENGINEERING

[설명 입력]

Frontend
React · Next.js · TypeScript
State & Data
Zustand · TanStack Query
Interaction & UI
Framer Motion · Rive · Storybook · Tailwind CSS
Testing & Monitoring
Cypress · Vitest/Jest · Sentry · Hotjar
02  PRODUCTS

Real Academy

'2025 브랜드 고객충성도 대상' AI 초등영어 부문 1위 서비스. [서비스 설명 보완 입력]

Company
Socra AI (전 Riiid)
Role
Frontend Engineer
Period
2023.03 — 재직 중
Tech
React · Next.js · TypeScript · Zustand · TanStack Query · Framer Motion · Rive · Storybook · Cypress
WHAT I BUILT
  • 01사용자 중심 학습 UX 개발 및 개선 — 외부 영상 학습 기능을 플랫폼 내 신규 콘텐츠로 재구성, 4주 만에 MVP 완성
  • 02학습 인터랙션 컴포넌트 개발 — Framer Motion layout 기반 전환, Rive State Machine 기반 실시간 상태 애니메이션
  • 03실시간 수업 시스템 구축 및 운영 자동화 — Zoom SDK 통합, Heartbeat 출석 판정, Adaptive Polling 스토어 설계
  • 04태블릿 WebView 학습 앱 성능 및 UX 최적화 — 캐싱 레이어, Web-App 브릿지, 디바이스 상태 연동 UX

GOPAX

국내 5대 가상자산 거래소. [서비스 설명 보완 입력]

Company
스트리미 (Streami)
Role
Frontend Engineer
Period
[기간 입력]
Tech
Node 18 · TypeScript · React · Zustand · Storybook · Tailwind CSS
WHAT I BUILT
  • 01레거시 마이그레이션 — Node 18 + TypeScript + React 함수 컴포넌트 전환, Atomic Design 기반 점진적 리팩토링
  • 02USDC 마켓 오픈 대응 — 조건문 하드코딩 구조를 환경 변수 기반 설정 구조로 리팩터링
  • 03사내 API 테스트 어드민 사이트 개발 — 요청·응답 타입 시각화 탭 및 사이드바 구조 설계
  • 04OCR 및 주문창 UX 개선 — Canvas 기반 반응형 가이드 컴포넌트, Web/iOS/Android 주문창 UI 통합
03  CASE STUDIES
CASE 01

Interactive Learning Experience

Product
Real Academy
My Role
Frontend Engineer
Tech
Framer Motion · Rive · React · TypeScript
01 MOTIVATION

왜 이 기능이나 문제를 다루게 되었는가?

[내용 입력]

02 PROBLEM

기존 방식에는 어떤 문제가 있었는가? 사용자 또는 제품 관점에서 무엇을 문제라고 판단했는가?

[내용 입력]

03 MY DECISION

어떤 선택지를 고민했는가? 어떤 trade-off가 있었는가? 왜 최종적으로 이 방법을 선택했는가? 디자이너 / PO / 다른 개발자와 어떤 논의를 했는가?

[내용 입력]

04 ACTION & CONTRIBUTION

내가 직접 담당하고 기여한 부분은 무엇인가?

[내용 입력]

05 TECHNICAL IMPLEMENTATION

기술적으로 어떻게 해결했는가?

[내용 입력]

[코드 / 구조도 / 상태 전이 / Before-After 입력]
06 RESULT

사용자 경험, 제품, 성능, 운영 측면에서 무엇이 달라졌는가?

[결과 입력 — 확인된 수치만]

07 WHAT I LEARNED

이 경험을 통해 무엇을 배웠고, 이후의 개발이나 의사결정에 어떤 영향을 주었는가?

[내용 입력]

CASE 02

User Behavior Driven UX Improvement

Product
Real Academy
My Role
Frontend Engineer
Tech
Hotjar · Sentry · React · TypeScript
01 MOTIVATION

왜 이 기능이나 문제를 다루게 되었는가?

[내용 입력]

02 PROBLEM

기존 방식에는 어떤 문제가 있었는가? 사용자 또는 제품 관점에서 무엇을 문제라고 판단했는가?

[내용 입력]

03 MY DECISION

어떤 선택지를 고민했는가? 어떤 trade-off가 있었는가? 왜 최종적으로 이 방법을 선택했는가? 디자이너 / PO / 다른 개발자와 어떤 논의를 했는가?

[내용 입력]

04 ACTION & CONTRIBUTION

내가 직접 담당하고 기여한 부분은 무엇인가?

[내용 입력]

05 TECHNICAL IMPLEMENTATION

기술적으로 어떻게 해결했는가?

[내용 입력]

[코드 / 구조도 / 상태 전이 / Before-After 입력]
06 RESULT

사용자 경험, 제품, 성능, 운영 측면에서 무엇이 달라졌는가?

[결과 입력 — 확인된 수치만]

07 WHAT I LEARNED

이 경험을 통해 무엇을 배웠고, 이후의 개발이나 의사결정에 어떤 영향을 주었는가?

[내용 입력]

CASE 03

Engineering for Better Experience

Product
Real Academy
My Role
Frontend Engineer
Tech
Flutter WebView · Zustand · TanStack Query · [Tablet UX 또는 Performance 중 선택]
01 MOTIVATION

왜 이 기능이나 문제를 다루게 되었는가?

[내용 입력]

02 PROBLEM

기존 방식에는 어떤 문제가 있었는가? 사용자 또는 제품 관점에서 무엇을 문제라고 판단했는가?

[내용 입력]

03 MY DECISION

어떤 선택지를 고민했는가? 어떤 trade-off가 있었는가? 왜 최종적으로 이 방법을 선택했는가? 디자이너 / PO / 다른 개발자와 어떤 논의를 했는가?

[내용 입력]

04 ACTION & CONTRIBUTION

내가 직접 담당하고 기여한 부분은 무엇인가?

[내용 입력]

05 TECHNICAL IMPLEMENTATION

기술적으로 어떻게 해결했는가?

[내용 입력]

[코드 / 구조도 / 상태 전이 / Before-After 입력]
06 RESULT

사용자 경험, 제품, 성능, 운영 측면에서 무엇이 달라졌는가?

[결과 입력 — 확인된 수치만]

07 WHAT I LEARNED

이 경험을 통해 무엇을 배웠고, 이후의 개발이나 의사결정에 어떤 영향을 주었는가?

[내용 입력]

04  OTHER WORK

Real-time Class

Zoom SDK로 실시간 수업 화면을 iframe 통합하고 출석 시스템을 구축. 1분 주기 상태 Heartbeat를 수집해 세션당 20회 이상 감지 시 출석으로 인정.

Tech · Zoom SDK · ReactResult · 출석 누락률 < 1%Link · [입력]

Adaptive Polling

Zustand + TanStack Query 기반 폴링 스토어. 수업 시간대에는 최대 1분 주기로 동기화하고, 비활성 구간에는 폴링 간격을 자동 완화.

Tech · Zustand · TanStack QueryResult · 네트워크 호출 80% 절감Link · [입력]

RYACO

사내 AI 정책 플랫폼. 분산된 정책 문서와 반복 질의응답 문제를 해결하고, 기획 단계에서 정책 충돌·누락을 사전에 발견하는 AI 정책 리뷰를 도입.

Tech · 기획 · 개발 주도Result · 정책 검토 맥락 기록 프로세스 구축Link · [입력]

GV Production Stability

6주간 누적된 프로덕션 오류의 근본 원인을 구조화하고, 릴리스별 사용자당 이벤트를 기준으로 개선 효과를 측정하는 검증 체계를 설계.

Tech · Sentry · 회귀 테스트Result · 프레임 인덱스 오류 79건/11명 → 0건Link · [입력]
05  ACTIVITIES & WRITING
SIPE

5기·6기 활동. 6기 부회장으로 프로그램 방향·일정·주제 논의 및 커뮤니티 운영 참여.

NEXTERS

25기·26기 활동. WeSki, for the Block 프론트엔드 개발. 25기 대상 및 카카오 대표이사상 수상.

Google Cloud Study Jam Hackathon

Gemini 기반 AI 서비스 새김(Saegim) 개발, Top 6 선정.

Blog

실무에서 발견한 문제와 해결 과정을 기록. bananajeong.tistory.com