"포트폴리오 만들었는데 왜 떨어질까?"
"포트폴리오 만들면 취업 돼요?" — 프론트엔드 취업 준비하면서 한 번쯤 들어본 말이죠.
맞아요, 포트폴리오는 중요해요. 그런데 클론 코딩 프로젝트 3개 넣었는데 서류에서 탈락하는 사람이 왜 이렇게 많을까요?
이유는 간단해요. 포트폴리오는 '무엇을 보여주느냐'가 핵심인데, 보여줄 기초 체력이 없으면 예쁜 포트폴리오도 의미가 없어요. 채용 담당자는 투두 앱 클론이 아니라, JavaScript를 얼마나 깊이 이해하는지, 문제를 어떻게 해결했는지를 보고 있어요.
실제로 채용 공고를 분석해보면, 프로젝트 경험을 요구하는 비율(70%)이 포트폴리오 사이트 자체를 요구하는 비율(40%)보다 훨씬 높아요[5]. 포트폴리오는 도구예요. 진짜 중요한 건 그 안에 담긴 역량이에요.
채용 공고로 보는 프론트엔드 필수 스킬
채용 공고가 실제로 요구하는 스킬을 분석한 결과예요[5].
스킬 | 채용 공고 언급 비율 | 중요도 |
|---|---|---|
JavaScript | 90% | 필수 |
HTML / CSS | 85% | 필수 |
React | 75% | 필수 |
TypeScript | 70% | 필수 |
Git | 65% | 필수 |
REST API 연동 | 55% | 필수 |
Node.js | 50% | 권장 |
Next.js | 45% | 권장 |
Tailwind CSS | 35% | 선택 |
브라우저 렌더링 이해 | 30% | 권장 |
JavaScript가 90%로 압도적 1위예요. React(75%)보다도 높아요. 이게 핵심이에요 — React를 먼저 배우려는 분이 많지만, JavaScript 기초 없이 React를 배우면 모래 위에 집 짓는 것과 같아요.
프론트엔드는 전체 개발자 채용 공고의 11.1%를 차지하고, 지원 비율은 15.5%예요[3]. 공고보다 지원자가 더 많다는 뜻이에요. 경쟁이 치열하기 때문에 기본기가 탄탄한 사람이 살아남아요.
학기별 3단계 로드맵
Phase 1: 기초 다지기 (1~2학기)
가장 먼저 해야 할 건 웹의 기본 언어를 익히는 것이에요.
HTML / CSS — 채용 공고 85%에서 요구[5]. 시맨틱 태그, Flexbox, Grid, 반응형 디자인까지 확실히 해야 해요.
JavaScript (ES6+) — 90%[5]. 변수, 함수, 배열 메서드부터 비동기(Promise, async/await), DOM 조작까지. 이게 모든 것의 토대예요.
Git — 65%[5]. 커밋, 브랜치, PR(Pull Request)의 기본 흐름을 익히세요. 혼자 코딩해도 Git은 필수예요.
브라우저 렌더링 이해 — 30%[5]. DOM, CSSOM, 레이아웃 과정을 이해하면 면접에서 차별화돼요.
예상 학습 시간: 약 120시간 (하루 1시간 기준 4개월)
팁: JavaScript는 모던 JavaScript 튜토리얼(ko.javascript.info)에서 무료로 배울 수 있어요. 매일 한 챕터씩 읽으면 한 달이면 기초가 잡혀요.
Phase 2: 프레임워크 + 첫 프로젝트 (3~4학기)
JavaScript에 익숙해졌으면, 프레임워크를 배우고 실전 프로젝트를 만들어요.
React — 75%[5]. 컴포넌트, Props, State, Hooks를 배우세요. 한국 프론트엔드 시장에서 React는 사실상 표준이에요.
TypeScript — 70%[5]. JavaScript에 타입을 추가한 언어예요. 대부분의 실무 프로젝트에서 사용해요.
REST API 연동 — 55%[5]. 백엔드와 데이터를 주고받는 법. fetch, axios로 API 호출하고 응답을 화면에 보여주는 연습을 하세요.
첫 프로젝트 — 70%의 채용 공고가 프로젝트 경험을 요구해요[5]. 이 단계에서 반드시 하나 완성하세요!
예상 학습 시간: 약 140시간
Phase 3: 실전 경쟁력 (5학기~졸업)
이제 취업 시장에서 눈에 띄는 사람이 돼요.
Next.js — 45%[5]. SSR, SSG 등 서버 사이드 렌더링을 배우면 확실한 경쟁력이 돼요.
웹 성능 최적화 — 25%[5]. Lighthouse 점수 개선, Core Web Vitals 이해. 면접 단골 질문이에요.
인턴 경험 — 30%[5]. 실제 팀에서 코드 리뷰 받고, 배포까지 해본 경험은 큰 차별점이에요.
포트폴리오 정리 — 각 프로젝트의 "문제 → 기술 선택 → 구현 → 결과" 흐름을 정리하세요.
포트폴리오를 '제대로' 만드는 법
포트폴리오가 중요하지 않은 게 아니에요. '제대로' 만드는 게 중요해요. 클론 코딩만 3개 넣는 건 "튜토리얼을 따라했어요"라고 말하는 거예요[2].
차별화되는 포트폴리오의 핵심은 이래요:
자기 아이디어로 기획한 프로젝트 — 왜 만들었는지, 어떤 문제를 해결하는지가 분명해야 해요[2].
기술 선택 이유 문서화 — "React를 쓴 이유", "상태 관리를 왜 이렇게 했는지" 등을 README에 정리하세요[2].
문제 해결 과정 — 버그를 만났을 때 어떻게 해결했는지, 성능을 어떻게 개선했는지를 보여주세요.
지금 바로 시작할 수 있는 프로젝트 3가지
1. 나만의 할 일 관리 앱 (React + TypeScript) 단순한 투두 앱이 아니라, 드래그 앤 드롭, 우선순위, 카테고리 분류를 넣어보세요. CRUD와 상태 관리를 연습할 수 있어요.
2. 날씨/뉴스 대시보드 (API 연동) 공공 API를 활용해 실시간 데이터를 보여주는 대시보드를 만들어보세요. REST API 연동과 데이터 시각화를 동시에 연습할 수 있어요.
3. 개인 블로그/포트폴리오 (Next.js) Next.js로 나만의 블로그를 만들어보세요. SSR/SSG를 실제로 적용해보는 경험이 되고, 배포까지 하면 포트폴리오 자체가 돼요.
프론트엔드 개발자, 전망은?
프론트엔드 개발자 수요는 전체 개발자 채용의 11.1%를 차지하며, 서버/백엔드(16.2%) 다음으로 꾸준한 수요가 있어요[3]. 신입 개발자 연봉은 약 3,000~3,500만원, IT 대기업에서는 5,500만원 이상도 가능해요[4].
다만 솔직한 현실도 말씀드릴게요. AI 시대가 되면서 신입 채용은 줄고, 요구 수준은 높아지고 있어요[4]. 그래서 더더욱 기초 체력이 중요해요. JavaScript를 깊이 이해하고, 문제 해결 과정을 보여줄 수 있는 사람이 살아남아요.
비전공자에게도 길은 열려 있어요. 한 개발 교육 기관에서는 취업자의 72%가 비전공자라고 해요[1].
마무리 — JavaScript 한 줄부터 시작하세요
정리하면 이래요:
Phase 1 (1~2학기): HTML/CSS, JavaScript, Git — 기초 다지기
Phase 2 (3~4학기): React, TypeScript, 첫 프로젝트 — 프레임워크 + 실전
Phase 3 (5학기~졸업): Next.js, 인턴, 포트폴리오 정리 — 경쟁력 만들기
포트폴리오보다 중요한 건 포트폴리오에 담을 실력이에요. 화려한 디자인보다, JavaScript를 제대로 이해하고 있는지가 면접관의 첫 번째 질문이에요. 오늘 console.log('Hello, World!') 한 줄부터 시작해보세요.
내가 지금 어디쯤 와 있는지 궁금하다면? 트리업에서 프론트엔드 개발자 준비도를 무료로 확인해보세요. 채용 공고 기반으로 내 스킬과 경험을 분석해서, 다음 단계를 알려드려요.
