프론트엔드 개발자 신입 취업 준비 가이드

01

프론트엔드 개발자는 어떤 일을 하나요

프론트엔드 개발자는 사용자가 실제로 보고 누르는 부분을 만듭니다. 디자인을 화면으로 옮기고, 서버가 준 데이터를 받아 뿌리고, 버튼을 눌렀을 때 무슨 일이 일어날지를 구현합니다. 눈에 보이는 결과물이 나오기 때문에 시작할 때 성취감이 빠르다는 점이 이 직무의 장점입니다.

신입 공고를 모아 보면 요구사항이 거의 한 방향입니다. React를 요구하거나 React·Vue·Angular 중 하나 이상을 요구하는데, 그중 React가 압도적입니다. 여기에 자바스크립트 기본기(비동기, 클로저, ES6 문법), HTML5·CSS3 마크업 이해가 공통으로 붙고, TypeScript는 이제 우대가 아니라 사실상 표준이 됐습니다.

가장 흔한 함정은 화면이 그럴듯하게 나오는 것과 실력을 같은 것으로 착각하는 일입니다. 면접에서는 왜 이 상태 관리를 골랐는지, 렌더링이 왜 여러 번 일어나는지, 이미지가 많은 페이지를 어떻게 빠르게 만들지를 묻습니다. 만드는 것 다음에 설명할 수 있어야 합니다.

하루 업무는 대략 이렇습니다

디자이너가 준 시안을 화면으로 구현하고 반응형으로 다듬는다
백엔드와 API 명세를 협의하고 데이터를 화면에 연결한다
재사용할 수 있게 컴포넌트를 나누고 기존 코드를 리팩토링한다
브라우저마다 다르게 보이는 문제를 확인하고 맞춘다
로딩 속도와 번들 크기를 측정해 개선한다

02

필요한 핵심 역량과 기술 스택

필수는 없으면 서류에서 걸러지는 항목, 권장은 대부분의 합격자가 갖추는 항목, 우대는 있으면 확실히 차별화되는 항목입니다.

언어 · 기본기

프레임워크보다 먼저입니다. 면접에서 막히는 지점은 거의 항상 이 영역입니다.

JavaScript (ES6+)필수
비동기(Promise·async/await), 클로저, 스코프, 구조 분해 같은 ES6 문법을 설명할 수 있어야 합니다. 공고의 공통 필수 항목입니다.
HTML5 · CSS3필수
시맨틱 마크업과 Flex·Grid 레이아웃. React를 먼저 배운 사람이 오히려 약한 부분이라 격차가 잘 드러납니다.
TypeScript필수
정적 타입 사용 경험을 요구하는 공고가 계속 늘어 이제는 사실상 표준입니다. 복잡한 타입까지는 아니어도 props와 API 응답에 타입을 붙일 수 있어야 합니다.

프레임워크

React 하나를 깊게 파는 것이 가장 안전합니다. 신입 공고 수가 다른 선택지와 비교가 되지 않습니다.

React필수
신입 공고 대부분이 React를 직접 요구합니다. 컴포넌트 설계, 상태와 props, useState·useEffect의 동작 원리, 리렌더링이 언제 일어나는지까지는 설명할 수 있어야 합니다.
Next.js / SSR권장
Next.js 사용 경험이나 서버 사이드 렌더링에 대한 이해를 요구하는 공고가 자주 보입니다. 왜 SSR이 필요한지(초기 로딩, SEO)를 아는 것이 먼저입니다.
Vue / Angular우대
React·Vue·Angular 중 하나를 요구하는 공고도 있어 선택지는 됩니다. 다만 신입 공고 수는 React 쪽이 훨씬 많습니다.

실무에서 함께 쓰는 것

상태 관리권장
React Query, Redux(Redux-saga), Recoil, Zustand 등. 전부 알 필요는 없고 하나를 프로젝트에 써보면서 왜 필요한지를 이해하면 됩니다.
REST API 연동 · HTTP 이해필수
요청·응답 구조, 상태 코드, CORS. 데이터를 받아 화면에 뿌리는 흐름은 매일 하는 일입니다.
반응형 웹필수
미디어 쿼리로 모바일·태블릿·데스크톱을 대응하는 능력. 공고의 기본 요구사항으로 반복 등장합니다.
Git / GitHub · Git Flow필수
브랜치를 나눠 작업하고 Pull Request로 합치는 흐름. 협업 방식을 아는지 확인하는 항목입니다.

우대 사항

웹 성능 측정 · 최적화우대
Lighthouse로 측정하고 번들 크기·이미지·렌더링을 개선해본 경험. 신입 지원자 사이에서 가장 차별화되는 항목입니다.
테스트 (Jest · React Testing Library)우대
신입에게 요구하는 곳은 많지 않지만, 있으면 코드 품질을 신경 쓴다는 신호가 됩니다.
크로스 브라우징우대
브라우저마다 다르게 동작하는 문제를 겪고 해결해본 경험입니다.
GraphQL우대
쓰는 회사에서는 명시적으로 요구합니다. REST를 충분히 다룬 뒤에 봐도 늦지 않습니다.
React Native우대
앱까지 다루는 팀에서 요구합니다. React를 이미 안다면 진입 비용이 크지 않아 지원 범위를 넓히는 카드가 됩니다.
간단한 서버 개발 · API 명세 협업우대
백엔드를 조금 아는 프론트엔드는 협업에서 확실히 유리합니다. 직접 API를 만들어본 경험이면 충분합니다.

03

우대 자격증과 경험

자격증은 실력을 대신하지 못하지만 서류 통과와 학습 커리큘럼에는 도움이 됩니다. 우선순위를 보고 고르세요.

정보처리기사

우대

프론트엔드 사기업 채용에서는 거의 영향이 없습니다. 공기업·SI·일부 대기업이 지원 자격이나 가점으로 반영하므로, 그쪽을 함께 볼 때만 의미가 있습니다.

공식 사이트 →

웹디자인기능사 · 웹디자인개발기능사

우대

실무 평가에는 거의 반영되지 않습니다. 마크업 기초를 커리큘럼처럼 훑고 싶을 때 정도로만 쓰세요.

공식 사이트 →

평가에 도움이 되는 경험

실제로 배포해서 접속되는 웹 서비스

이 직무는 결과물을 눈으로 바로 볼 수 있습니다. 링크를 열었을 때 동작하는 것과 캡처만 있는 것은 평가가 완전히 다릅니다.

디자이너·백엔드와 함께한 협업 프로젝트

시안을 받아 구현하고 API 명세를 협의해본 경험은 실무와 가장 가까운 경험입니다.

성능을 개선해본 경험

로딩 시간을 몇 초에서 몇 초로 줄였다는 식의 전·후 숫자가 있으면 면접에서 가장 오래 이야기됩니다.

인턴 · 현업 프로젝트

실제 사용자가 쓰는 화면을 만져본 경험은 크게 평가됩니다.

기술 블로그 · 오픈소스 기여

필수는 아니지만 학습 과정을 보여주는 자료가 됩니다. 트러블슈팅 기록이 특히 좋습니다.

04

신입이 준비하는 포트폴리오 형태

개수를 늘리는 것보다 하나를 끝까지 완성하는 편이 유리합니다. 체크리스트를 기준으로 완성도를 점검하세요.

React로 만든 SPA 웹 서비스 (핵심 1개)

입문

이 직무 포트폴리오의 중심입니다. 주제는 평범해도 되지만, 목록·상세·검색·로그인처럼 실제 서비스가 갖는 흐름이 끝까지 동작해야 합니다. 이력서와 포트폴리오를 필수로 제출받는 곳이 많고, GitHub 저장소 + 배포된 웹사이트 + 노션 이력서가 사실상 표준 세트입니다.

GitHub 저장소 공개 + README에 기능·실행 방법·기술 선택 이유
접속 가능한 배포 URL (Vercel·Netlify 등)
실제 API 연동 (직접 만든 서버 또는 공개 API)
모바일까지 대응한 반응형 레이아웃
TypeScript 적용
노션 등으로 정리한 이력서·프로젝트 소개 페이지

성능을 개선한 기록

중급

위 프로젝트에서 파생시키는 것이 가장 효율적입니다. Lighthouse로 점수를 재고, 이미지 최적화나 코드 스플리팅, 불필요한 리렌더링 제거로 개선한 뒤 전후를 비교해 기록합니다. 프로젝트를 하나 더 만드는 것보다 이 기록 하나가 면접에서 훨씬 강합니다.

개선 전 Lighthouse 점수와 로딩 시간
병목 원인 분석 과정
적용한 개선 방법과 이유
개선 후 수치 비교
블로그 글 또는 README로 정리

협업 프로젝트 (선택)

중급

팀으로 만든 결과물입니다. 개인 프로젝트가 이미 탄탄하다면 여러 개를 만들 필요는 없습니다. 대신 본인이 맡은 화면과 기능을 명확히 구분해 적어야 합니다.

내가 담당한 부분과 아닌 부분을 구분해 명시
브랜치 전략과 코드 리뷰 흔적
디자이너·백엔드와 협의하며 겪은 문제와 해결 방법

React Native 앱 (선택)

심화

앱 개발까지 요구하는 공고를 함께 노린다면 도전할 만합니다. React를 이미 익힌 상태라면 진입 비용이 크지 않습니다. 웹 프로젝트가 먼저입니다.

실기기에서 동작하는 화면 녹화 또는 스크린샷
웹과 무엇이 달랐는지에 대한 정리

05

신입이 자주 하는 실수

준비 방향을 잘못 잡으면 들인 시간에 비해 결과가 안 나옵니다. 아래 항목에 해당하지 않는지 점검해 보세요.

HTML·CSS를 대충 넘기고 React부터 시작하는 것. 정작 시안대로 레이아웃을 못 잡아 실무에서 바로 드러납니다.
강의를 따라 만든 클론 코딩 결과물을 그대로 제출하는 것. 같은 프로젝트를 수백 명이 냅니다. 최소한 기능 하나는 직접 설계해 추가해야 합니다.
화면만 예쁘고 자바스크립트 기본을 설명하지 못하는 것. 면접 질문은 비동기·클로저·렌더링처럼 기본기 쪽에서 나옵니다.
배포하지 않는 것. 눈으로 확인되는 직무인 만큼 접속 가능한 링크가 없으면 손해가 큽니다.
라이브러리를 넓게 나열하는 것. 상태 관리 라이브러리를 다섯 개 적는 것보다 하나를 왜 골랐는지 설명하는 편이 낫습니다.
자격증으로 시간을 보내는 것. 이 직무는 자격증의 영향이 가장 작은 축에 속하고, 결과물이 거의 전부입니다.

07

자주 묻는 질문

Q.React와 Vue 중 뭘 배워야 하나요?

국내 신입 공고 수만 놓고 보면 React가 압도적입니다. React·Vue·Angular 중 하나 이상을 요구하는 공고도 있지만 그중에서도 React를 명시하는 곳이 가장 많습니다. 특별히 Vue를 쓰는 회사를 목표로 하는 게 아니라면 React로 시작하세요. 하나를 제대로 하면 다른 프레임워크로 옮기는 데는 오래 걸리지 않습니다.

Q.TypeScript는 꼭 해야 하나요?

해야 합니다. 예전에는 우대사항이었지만 지금은 정적 타입 사용 경험을 요구하는 공고가 계속 늘어 사실상 표준에 가깝습니다. 깊은 타입 기법까지는 필요 없고, props와 API 응답에 타입을 붙일 수 있는 수준이면 신입 기준으로 충분합니다. 자바스크립트가 익숙해진 다음에 붙이세요.

Q.퍼블리셔나 웹디자이너와는 뭐가 다른가요?

퍼블리셔는 주로 HTML·CSS로 화면을 마크업하는 데 집중하고, 프론트엔드 개발자는 거기에 더해 자바스크립트로 동작을 구현하고 서버 데이터를 연결하며 컴포넌트 구조를 설계합니다. 채용 시장에서 요구하는 기술과 처우도 다릅니다. 프론트엔드를 목표로 한다면 마크업에서 멈추지 말고 반드시 자바스크립트와 React까지 가야 합니다.

Q.비전공자도 프론트엔드로 취업할 수 있나요?

IT 직무 중에서는 진입 장벽이 낮은 편이고 비전공자 비율도 높습니다. 결과물이 눈에 바로 보여 실력을 증명하기 쉽기 때문입니다. 다만 그만큼 지원자가 많아 클론 코딩 수준의 포트폴리오로는 통과하기 어렵습니다. 배포까지 마친 프로젝트 하나를 깊게 만들고, 자바스크립트 기본기를 설명할 수 있게 준비하는 것이 관건입니다.

Q.포트폴리오는 몇 개가 적당한가요?

잘 만든 것 1~2개면 충분합니다. GitHub 저장소, 접속되는 배포 URL, 노션 이력서를 한 세트로 준비하는 것이 표준입니다. 개수를 늘리는 대신 그 프로젝트에서 어떤 문제를 겪고 어떻게 해결했는지, 성능을 어떻게 개선했는지를 이야기할 수 있게 만드세요.

이 직무로 내 로드맵 만들기

졸업까지 남은 기간과 지금 수준을 고르면, 위 학습 순서를 시기별 계획으로 나눠 드립니다. 결과는 링크로 그대로 공유할 수 있습니다.

프론트엔드 개발자 로드맵 만들기 →

함께 보면 좋은 직무

백엔드 개발자

서버·API·데이터베이스를 설계하고 서비스가 실제로 돌아가게 만드는 뒷단 로직을 구현하는 직무입니다.

프론트엔드 개발자