Resume Portfolio

Frontend Developer / Operation Flow Builder

백종환Jonghwan Baek

기능을 빠르게 붙이기보다, 운영 중 반복될 문제를 줄이는 기준을 먼저 잡는 3년차 프론트엔드 개발자입니다.
권한, 상태 흐름, 데이터 갱신처럼 어긋나기 쉬운 기준을 분리해 사용자 흐름이 끊기지 않는 구조를 만드는 데 집중해 왔습니다.

Current Focus

LMS 핵심 워크플로우 안정화, 홈페이지 성능·SEO 개선, Develog 공개 기록 플랫폼 운영을 통해 실제 사용 흐름의 문제를 줄이고 있습니다.

GitHub Blog Develog

2년 9개월

개발 경력

2023.09 - 재직중

100%

주요 구축 기여

LMS · 홈페이지 · Develog

1.1s

LCP 개선

3.1s → 1.1s

Lighthouse SEO

58 → 92

Resume Projects

이력서 기반 핵심 프로젝트

01 / Public Portfolio Product

Develog - 자기개발 기록 플랫폼

2026.02 - 진행중

LMS 내부에만 남던 TIL을 공개 URL 기반 포트폴리오로 전환하기 위해 기획한 자기개발 기록 플랫폼입니다. 기록 지속성, 취업담당자의 검토 효율, 기관의 콘텐츠 자산화를 함께 고려했습니다.

기획 및 풀스택 개발 · 개발/운영 기여도 100%

글 작성, 이미지 업로드, 검색, 컬렉션, 개인 페이지를 포함한 기록 작성·탐색·공개 흐름 구축
히트맵, 연속 작성일, 핀 고정 글, 태그 그래프, 포커스 타이머로 학습 활동을 시각화
JSON-LD, 동적 sitemap, AI 크롤러 접근 정책, GA4 이벤트 기반으로 노출과 행동 분석 구조 마련
MVP 이후 글 분류, 개인 글 검색, 스크랩, 에디터 임베딩, 모바일 작성, 인증 흐름을 개선

Next.js · TypeScript · Prisma · Amazon S3 · Google Analytics

02 / Conversion & Performance

홈페이지 - 과정 탐색·신청·결제 퍼널 개선

2025.05 - 2026.02

홈페이지를 전환 퍼널로 재구성하고 초기 로딩, 미디어 용량, 검색 노출 병목을 함께 개선했습니다. 과정 탐색부터 신청, 결제, 마이페이지까지 이어지는 경로를 단순화했습니다.

프론트엔드 구축 및 초기 운영 안정화 100% 담당

67.5MB 규모의 GIF 중심 미디어를 WebM/MP4로 전환해 미디어 용량을 3.1MB로 경량화
신청 단계별 상태와 화면 전환 기준을 분리해 다단계 퍼널의 상태 누락과 이탈 가능성을 축소
CTA 클릭, 페이지 체류, 이탈 지점 추적 기반을 마련해 퍼널 개선을 데이터로 확인
메타데이터, sitemap, robots, 접근성 요소를 정리해 Lighthouse SEO 58 → 92 달성

Next.js · TypeScript · TailwindCSS · SEO · Analytics

03 / LMS Core Workflow

LMS - 평가·학습 워크플로우 구축

2023.09 - 진행중

하루 50~200명이 사용하는 LMS에서 역할별 접근 혼선, 제한 시간 평가 상태 유실, 채점·성적 정보 불일치, 대용량 영상 재생 지연처럼 반복될 수 있는 운영 리스크를 정리했습니다.

프론트엔드 단독 담당 · 개발/유지보수/리뉴얼 100%

역할 우선순위, 경로 기준 접근, 수강·개강 상태 검증을 분리해 학생·강사·운영자 화면 혼선을 축소
새로고침·장시간 응시·뒤로가기·시간 만료 상황에서도 답안과 남은 시간이 어긋나지 않도록 세션 보존과 서버 기준 동기화 흐름 정리
수강생·제출·채점·피드백 데이터를 같은 기준으로 연결하고 미채점 완료를 차단
HLS 우선 재생, MP4 fallback, 분할 업로드 흐름으로 대용량 강의 영상의 지연·트래픽·실패 가능성 완화

React · TypeScript · Next.js · React Query

Capability Profile

기술은 레벨 대신 맥락으로

실무에서 사용한 기술과 맡았던 역할을 정리했습니다. UI 구현, 권한·상태 처리, 미디어 처리, SEO·분석 설정처럼 실제 제품 운영에 필요한 작업을 중심으로 다뤘습니다.

Core Frontend Stack

Next.jsTypeScriptReactTailwindCSSReact Query

Access & State Flow

SSO역할 기반 접근 제어상태 흐름 분리서버 기준 동기화데이터 갱신 기준

Media & Data Handling

Amazon S3HLSMP4 fallback분할 업로드Prisma

Publishing & Growth

JSON-LD동적 sitemaprobotsAI 크롤러 정책GA4 이벤트

Career Archive

경력과 성장 흐름

2023.09 - 재직중 · 2년 9개월

디벨로켓에듀 · 스마트 훈련 플랫폼 개발팀 / 프론트엔드

개발팀 내 프론트엔드를 단독으로 담당하며 LMS, 홈페이지, 학습 기록 플랫폼을 개발·개선했습니다. 권한, 화면 접근, 상태 흐름, 데이터 갱신 기준을 분리해 운영 중 발생할 수 있는 혼선과 정보 불일치를 줄였습니다.

2022.10 - 2023.07

경일게임아카데미 · 웹 개발/블록체인 과정

HTML, CSS, JavaScript 기반 웹 개발 원리와 React, Node.js, Solidity를 학습했습니다. 블록체인 구조와 스마트 컨트랙트 개발 경험을 쌓았습니다.

2013.03 졸업