직무별 가이드 / 프론트엔드 개발자 이력서 작성법
프론트엔드 개발자 이력서 작성법
프론트엔드 이력서는 '무엇을 만들었나'보다 '사용자가 체감한 변화를 무엇으로 쟀나'에서 갈려요. 화면을 만든 개발자는 많지만, LCP·INP 같은 측정값과 번들 크기, 접근성, 디자인 시스템처럼 여러 화면에 남는 기반을 다룬 사람은 많지 않아요. 기술 스택 목록보다 '어떤 화면의 어떤 문제를, 어떤 조건에서 쟀는지'를 앞에 두세요.
프론트엔드 면접관이 먼저 확인하는 것
- 1
측정 도구로 확인한 성능 개선
'빠르게 만들었다' 대신 Lighthouse, web-vitals, React Profiler 중 무엇으로 쟀고, 어떤 기기·네트워크 조건에서 얼마나 바뀌었는지 적어요. 측정 조건이 붙으면 같은 숫자도 훨씬 믿을 만해져요.
- 2
한 화면을 넘어서는 기반 작업
디자인 시스템, 공통 훅, 상태 관리 구조 정리, 빌드 설정 개선처럼 다른 개발자의 속도까지 바꾼 일은 기능 하나보다 무게가 커요.
- 3
브라우저와 사용자 환경을 읽는 감각
접근성, 구형 브라우저·저사양 기기 대응, 다국어, SSR과 CSR 중 무엇을 왜 골랐는지가 보이면 '화면만 그리는 사람'과 구별돼요.
- 4
디자인·백엔드와의 경계에서 내린 결정
API 응답 구조를 함께 정한 일, 디자인 토큰을 코드와 맞춘 일, 디자인 QA 절차를 만든 일처럼 경계를 매끄럽게 만든 경험을 찾아 적어 보세요.
기술 스택은 스킬 섹션 한 줄이면 충분해요. 경력 성과 문장에서는 스택이 '수단'으로만 등장하고, 문장의 주인공은 문제와 결과가 되게 쓰세요.
화면은 만들었는데 경험이 안 보이는 문장들
React, Redux, TypeScript, styled-components를 사용하여 관리자 페이지 개발
주문 관리 화면 목록을 가상 스크롤로 바꿔 1만 건 조회 시 스크롤 끊김 해소(React Profiler 기준 커밋 시간 120ms → 16ms)
💡 스택은 결과를 만든 도구로만 등장해요. 어떤 문제가 있었는지가 먼저 보여야 읽는 사람이 실력을 가늠할 수 있어요.
반응형 웹 및 크로스 브라우징 대응
매장 태블릿(구버전 사파리)에서 깨지던 예약 화면을 대체 레이아웃과 폴리필로 정리해 현장 문의를 주 20건대 → 한 자릿수로 줄임
💡 반응형·크로스 브라우징은 기본기라 그 자체로는 차별점이 아니에요. 어떤 환경에서 누가 겪던 문제였는지를 붙여야 경험이 돼요.
신입과 경력은 무게중심이 달라요
| 항목 | 신입 | 경력 |
|---|---|---|
| 대표 경험 | 배포까지 끝낸 개인·팀 프로젝트, 실제 사용자가 있었다면 그 반응 | 운영 중인 서비스의 지표를 바꾼 개선, 레거시를 걷어낸 리팩터링 |
| 기술 깊이 | 이 상태 관리·렌더링 방식을 왜 골랐는지 비교한 근거 | 대안을 검토해 팀 표준으로 정착시킨 과정과 마이그레이션 전략 |
| 협업 증거 | 코드 리뷰를 주고받은 PR, 디자이너 피드백을 반영한 과정 | 디자인 시스템·컨벤션 주도, 주니어 온보딩, 기술 면접 참여 |
| 숫자의 종류 | Lighthouse 점수, 번들 크기처럼 직접 잴 수 있는 값 | 전환율·이탈률·에러율처럼 비즈니스와 이어지는 값 |
링크 하나로 실력을 보여주는 증거
- 배포된 URL — 로그인이 필요하면 데모 계정이나 30초 화면 녹화를 함께 두세요
- GitHub 저장소 — README 첫 화면에 실행 방법, 스크린샷, 기술 선택 이유를 적어 두세요
- 성능 개선 전후 캡처 — Lighthouse 리포트나 Performance 패널을 같은 조건에서 찍은 것만
- Storybook·디자인 시스템 문서 링크 — 컴포넌트 설계 감각을 가장 빨리 보여줘요
- 기술 블로그 글 — 트러블슈팅 과정을 쓴 글 한두 편이 튜토리얼 요약 열 편보다 나아요
- 빼야 할 것: 회사 내부 화면 캡처, 사내 저장소 코드, 강의를 따라 만든 클론 코딩을 직접 기획한 프로젝트처럼 보이게 한 설명
이 이력서에서 이어질 면접 질문
면접관: LCP를 4.1초에서 2.3초로 줄였다고 하셨는데, 어떤 환경에서 재셨어요?
지원자: 실사용자 값은 web-vitals로 모은 75퍼센타일이고, 실험실 측정은 Lighthouse 모바일 설정으로 같은 페이지를 다섯 번 돌려 중앙값을 썼어요.
면접관: LCP 요소는 뭐였고, 가장 효과가 컸던 조치는 뭐였나요?
지원자: 상단 대표 이미지였어요. 지연 로딩이 걸려 있어서 오히려 늦게 받아오고 있었는데, 그 이미지만 우선 로딩으로 바꾸고 기기별 크기를 나눈 게 가장 컸어요.
필수 항목 체크리스트
- React/Vue/Angular 경험
- TypeScript 사용
- 성과 수치 포함
- 협업/팀 경험(권장)
- UI/UX 개선 경험(권장)
- 성능 최적화(권장)
강조 키워드
좋은 성과 문장 예시
- ✦상품 상세 페이지의 대표 이미지 우선 로딩과 코드 분할로 모바일 LCP 4.1초 → 2.3초, 초기 번들 크기 38% 축소
- ✦사내 디자인 시스템에 공통 컴포넌트 42종을 Storybook·접근성 테스트와 함께 구축해 신규 화면 개발 기간 약 2주 → 4일
- ✦결제 폼의 에러 안내·키보드 탐색을 WCAG 2.1 AA 기준으로 고쳐 결제 단계 이탈률 18% → 11%
바로 프론트엔드 개발자 이력서를 만들어 보세요
무료 · 경력 몇 줄이면 시작
지금 무료로 이력서 만들기 →