Resume Portfolio

Frontend Developer / Operation Flow Builder

백종환Jonghwan Baek

기능을 빠르게 붙이기보다, 반복되는 문제를 줄이는 기준을 먼저 잡는 프론트엔드 개발자입니다.

LMS 프론트엔드 단독 담당권한·평가·성적·영상 흐름 안정화
홈페이지 리뉴얼LCP 3.1s → 1.1s, SEO 58 → 92 개선
Develog 1인 프로젝트LMS 내부 TIL을 공개 포트폴리오로 전환
AI 활용 방식반복 작업은 자동화하고, 결과물은 사람이 정한 기준 안에서 검토 가능하게 유지

Working Standard

기획자·디자이너·백엔드·실무 담당자와 요구사항을 조율하며, 사용자 흐름이 끊기지 않는 구조를 만드는 데 집중합니다.

GitHub Blog Develog

2년 10개월

개발 경력

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

맡았던 범위와 사용 도구

실제로 맡았던 제품 영역과 사용 도구를 함께 정리했습니다. 권한, 평가, 미디어, 노출 분석처럼 운영 중 문제가 생기기 쉬운 지점을 다뤘습니다.

서비스 화면과 핵심 사용 흐름 구축

Product Frontend

Next.js · TypeScript · React · TailwindCSS · React Query

과정 탐색, 신청, 결제, 마이페이지로 이어지는 홈페이지 전환 경로 구축
LMS 평가, 성적, 학습 콘텐츠 화면의 역할별 사용 흐름 정리

로그인과 역할별 접근 범위 설계

Auth & Access

SSO · OAuth2 · RBAC · Accounts Server

여러 서비스의 로그인 진입점을 하나의 인증 체계로 통합
학생, 강사, 운영자 화면 접근 기준과 수강 상태 검증을 분리

대용량 미디어와 콘텐츠 데이터 처리

Media & Data Operations

Amazon S3 · HLS · MP4 fallback · Multipart Upload · Prisma

67.5MB GIF 중심 미디어를 WebM/MP4로 전환해 3.1MB까지 경량화
분할 업로드, HLS 우선 재생, MP4 fallback으로 강의 영상 실패 가능성 완화

콘텐츠 노출, 행동 분석, 반복 작업 자동화

Publishing & Automation

Google Analytics · JSON-LD · Sitemap · AI crawler policy · Claude · Notion

GA4 이벤트, 동적 sitemap, JSON-LD로 노출과 사용자 행동 분석 기반 마련
반복 작업은 AI로 보조하고 결과물은 사람이 정한 기준 안에서 검토

Career Archive

경력과 성장 흐름

2023.09 - 재직중 · 2년 10개월

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

개발팀 내 프론트엔드를 단독으로 담당하며 LMS, 홈페이지, 학습 기록 플랫폼을 개발·개선했습니다. 기획자, 디자이너, 백엔드, 실무 담당자와 요구사항을 조율하며 사용자 흐름이 끊기지 않는 구조를 만드는 데 집중했습니다.

2022.10 - 2023.07

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

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

2013.03 졸업