mummu

Portfolio

mummu

front-end developer_Jeon sehoon

서비스를 구축하는 일만큼, 팀 전체에 도움이 되는 구조를 만드는 일을 좋아합니다.

서비스를 운영하며 접수 스파이크 캐시 설계와 사진 서비스 신규 오픈 경험이 있습니다. 모바일 Safari 크래시 같은 문제는 브라우저 메모리 수준에서 원인을 찾아 해결했습니다.

Work experience

  1. 2025.06 – 2026.08

    러너블

    중앙그룹 계열 러닝 플랫폼 | runable.me

    Frontend Developer

    1. e-pic 대회 사진 조회/다운로드 서비스 신규 구축

      2026.05 – 2026.08 | Next.js 14 App Router | Turborepo | TanStack Query

      프론트 전체를 맡아 서비스/어드민/공용 패키지 모노레포를 구축하고 목 서버로 백엔드와 병렬 개발했습니다.모바일 Safari 사진 탭 크래시의 원인이 파일 용량이 아니라 디코드 메모리(장당 97MB)와 webp 디코드 피크임을 콘솔에 이미지를 직접 주입해 실측했고, 서버 이미지는 화질을 줄일 수 없어 Web Worker 풀로 화면 자리별 리사이즈를 클라이언트가 감당하는 파이프라인을 직접 구축했습니다.

      • 크래시 임계 7장 → 99장 이상 참가자 페이지 정상 (실기기)
      • 같은 사진 디코드 3회 → 1회, JS 힙 45MB → 27MB
      • 20 VU 부하에서 p95 481ms, 에러 0%

    2. 러너블 서비스 / 어드민 운영

      2025.06 – 2026.08 | Next.js 14 App Router | TanStack Query | zustand | React 18

      대회 접수 스파이크에 대비해 캐시 경계를 설계했습니다. 공용 데이터는 fetch 캐시 + revalidateTag로 필요할 때 갱신하고, 개인화 페이지는 라우트 그룹으로 분리했습니다.첫 래플 부하테스트(8코어 16GB 5대)에서 동시 9,000명에 Next 렌더링 병목을 확인한 뒤 배포했습니다. pm2 cluster 프로세스별 캐시 불일치는 대안 5개를 비교해 재배포로 대응하고 Redis 중앙 캐시는 후순위로 남겼습니다.

      • 페이지 전환마다 발생하던 사용자 정보 API 호출을 5분당 1회로
      • 매거진 글 등록마다 프론트 배포하던 구조를 운영팀이 직접 게시하는 구조로 (API + ISR)
      • 래플을 대회마다 개발이 필요한 페이지에서 어드민 설정만으로 여는 기능으로
      • 어드민 CRA → Vite 전환 실측: 빌드 메모리 3.6GB → 1.05GB, CPU 400% → 111% (운영 반영은 보안 검토로 보류)

  2. 2020.11 – 2025.02

    리마커블 소프트

    프론트엔드 개발팀 대리 | 프론트 개발자 2명

    1. 사내 프론트 모노레포 구축 및 운영

      2023.09 – 2025.02 | lerna | yarn berry → vite | 패키지 18개

      프로젝트마다 core 컴포넌트를 복사해 쓰며 같은 이슈를 따로 고치던 문제를 모노레포로 해결했습니다.editor, components(grid, tree, ui-base), calendar, pdf-viewer, utils 패키지로 구성하고, core 위에 vue2/vue3 어댑터를 얹어 소비 프로젝트의 Vue 버전과 무관하게 같은 인터페이스를 제공합니다.

      • GW노트, 차놀자, 수리과학 체험센터 등 사내 프로젝트가 가져다 쓰는 공용 패키지로 운영
      • storybook, vitest를 사내 프론트에 처음 도입

    2. 블럭형 위지윅 에디터 라이브러리

      2022.01 – 2025.02 | TypeScript | vite

      오픈소스 블럭 에디터가 확장과 협업에 닫혀 있어 자체 개발했습니다. 커맨드 패턴, undo/redo, 드래그앤드랍, html/excel/한글(HWPX) 붙여넣기를 갖췄습니다.앱 내장 에디터를 라이브러리로 꺼내며 Domain / Core / Config 주입 구조로 재설계해 새 블럭 타입은 hook만 구현하면 추가되고 외부는 api 계층만 쓰도록 캡슐화했습니다.

      • 회사가 판매 중인 노트 솔루션 Wiz NOTE의 핵심 에디터로 탑재

    3. 공통 컴포넌트 설계

      2023.03 – 2025.02 | Nuxt 3 | TypeScript | Vuetify | Electron

      사이트마다 달랐던 List/Table/Grid의 props와 emit을 ListView 하나로 통일하고, GridListView 내부 컴포넌트를 slot 주입으로, 검색 폼 조합 폭발을 Group(Composite)으로 정리했습니다.validation 로직을 페이지에서 떼어 검증 유틸 + Input/Select 어댑터로 분리했습니다. (차놀자, 모노레포 components, KCC 건설자재 DB Electron)

      • Electron 데스크톱 gridTable을 개발한 뒤 components-grid 패키지로 분리

    4. PDF 뷰어 모바일 성능 개선

      2025.01 | pdf.js

      저사양 모바일 Safari에서 열리지 않던 전자책 뷰어를 탭당 메모리 정책에 맞춰 페이지 단위 로드로 변경했습니다.

      • 3G 로드 5초 이상 → 1초 이내 (JS 분할, HTTP Range 병렬 다운로드)

    5. 그 외

      • GW노트 Nuxt 2 → Vue 3 + TypeScript 전환 (2024.04 – 05) — CSR 초기 진입 3초 → 1초
      • GW노트 프론트 개발 (2021.10 – 2023.08)
      • 강원교육정보원 포털/체험센터 UI (2020.11 – 2021)Heylaw, KCC KPMS UI (2020.11 – 2021.02)아모레퍼시픽 앱투어 React Native 화면 (2023.01)

Education

  • 2012.03 – 2020.03전남대학교 시각정보디자인 학사
  • 2020.03 – 2020.08더조은 아카데미 웹 UI/UX 프론트엔드
  • 2021.04 – 2021.05이젠 아카데미 리액트
  • 2017.09 – 2017.10SBS 아카데미 Java

Contact