Frontend / Product Engineer
황준혁
소개
사용자 흐름과 시스템 상태가 어긋나는 문제를 찾아 수정합니다.
복잡한 UI 상태부터 입력·검증·제출, 자동 저장과 실패 복구까지 하나의 제품 흐름으로 설계합니다.
AI 제안 코드와 결과는 테스트와 실제 화면으로 확인한 뒤 반영합니다.
핵심 역량
Product UI사용자 흐름과 상태 전이 설계
FrontendReact, Next.js, TypeScript
State / Data자동 저장, 입력 검증, API 상태 관리
Reliability실패 상태, 재시도, 복구 경로
TestingPlaywright E2E, MSW mock API, Vitest·Storybook
프로젝트 경험
Maru | 입학전형 지원서의 입력·검증·제출 조건
부산소프트웨어마이스터고 입학전형 지원서의 입력·검증·제출 흐름을 수정했습니다.
- 늦게 온 임시저장 응답이 업로드한 사진 값을 덮어써 '다음'이 막히던 race 수정: 100% → 0% (응답 순서 재현)
- 검정고시 원서의 숨긴 학교 7개 필드가 빈 값·이전 입력값으로 전송되던 문제 수정: 제출 400 해결, 전송 7개 → 0개
justn.me | PDF 그대로 웹에서 고치는 이력서·포트폴리오
원본 PDF 레이아웃 그대로 웹에서 고치고, 회사별 문서에 기준 문서 수정분을 병합하는 편집기를 만들었습니다.
- 모바일 Lighthouse 성능 50 → 82, CLS 0.77 → 0: 한글 폰트 서브셋·첫 화면 전 축소 계산
- 한글 폰트 전송 2.5MB → 510KB, 모바일 이미지 2.7MB → 0.1MB
- PDF 다운로드 첫 생성 10초대 → 캐시 응답 0.17초: 페이지를 열 때 서버에서 미리 만들어 내용 해시 캐시에 저장
자갈치플랫폼 | AI 학습 로드맵 서비스
Web·API·Infra를 맡아 AI 서비스를 NestJS 작업 경계(예약·환불·확정)에 연결했습니다.
- 새 커밋 push 시 승인 APPROVED → BOUND, 별도 reviewer 재승인만 통과(작성자 승인 403 차단)
자갈치 | 학습 경로 노드 편집기
6인 팀의 개발자 학습 경로·노드 편집기에서 Frontend Lead와 PM을 맡았습니다.
- 실행 취소 시 노드·연결선이 따로 돌아가 화면이 깨지던 버그 수정: 깨짐 59.9% → 0% (무작위 편집 1,000회)
- 로드맵 하나가 손상되면 저장할 때 나머지가 전부 지워지던 버그 수정: 손실 100% → 0% (1,000회)
팀 프로젝트 경험
사주리움 | 다중 화면 제품 프로토타입
Next.js 기반으로 온보딩·리포트·관계·상담·상품·계정·운영 화면을 구성했습니다.
벙개 | 24시간 소규모 모임
인증·API 오류·화면 복구, 참여·대기·체크인·신고·차단 흐름을 포함한 프론트엔드와 디자인을 담당했습니다.
오픈소스 기여
React Flow
PR #5730중복 좌표에서 SmoothStep 연결선 곡률이 0이 되는 원인을 찾아 PR #5730을 제출했고, 병합됐습니다(@xyflow/system 0.0.76).
학력·자격
학력·수상
부산소프트웨어마이스터고 소프트웨어개발과
2024.03–2027.01 졸업 예정
- 교과우수상 · 웹·응용 개발·AI 모델링·앱 프로그래밍
- 교내 웹개발 경진대회 장려상 · 2025.08
- 교내 네트워크 결과물 경진대회 장려상 · 2024.12