개발 · 프로그래밍

프론트엔드

웹 프론트엔드 포트폴리오의 모든 것 - 주제 선정부터 실전 배포까지 압축 실습 강의!

"경력자만 뽑는 세상, 신입의 무기는 단 하나 - 차별화된 '개인' 포트폴리오!" 현업 요구를 녹인 프로젝트로 실력을 보여주는 신입 개발자의 필수 가이드.

9명 이 수강하고 있어요.

문태훈

개발자포트폴리오

이런 걸 배울 수 있어요

채용 담당자의 시선에서 바라본 포트폴리오 구성 방법
포트폴리오를 위한 주제 및 기획 정리 방법
React와 Next.js로 실제 프로젝트를 설계하고 구현하는 전 과정
모바일 대응과 반응형 UI 구현의 핵심 원리
Git 커밋 로그를 실무 스타일로 정리하는 방법

"React Todo App? 이미 수백개는 봤습니다."

채용 담당자의 브라우저 탭은 늘 포트폴리오로 가득하지만,
끝까지 클릭되는 프로젝트는 손에 꼽힙니다.

어떤 스택을 덕지덕지 붙였느냐보다
'이 기능을 왜, 어떻게 구현했는가'가 궁금합니다.

CS 전공, 수십개의 사이드 프로젝트?
있으면 좋지만 신입에게 현실적으로 불가능한 옵션이죠.

결국 "이 사람에게 일을 맡겨도 될까?"를 증명하면 됩니다.

이 강의는 바로 그 증명서를 만듭니다.
주제 선정 → 실전 코딩 → 배포 → (선택) 리뷰 & 멘토링 50% 할인 혜택까지,
취업 전에 꼭 필요한 핵심만 모아
'합격 테이블' 위에 올릴 포트폴리오를 완성합니다.

웹 프론트엔드 포트폴리오의 모든 것

이 강의는 여러분이 웹 프론트엔드 개발자로 취업하기 위한 자신만의 포트폴리오를 갖출 수 있도록 돕습니다. 주제 선정 가이드부터, 실습 수업, 포트폴리오 리뷰까지 전 과정을 담았습니다. 단순히 개념을 전달하거나 "이 정도면 될겁니다"같은 모호한 이야기를 하지 않습니다.

저는 15년 이상 현업에서 소프트웨어 엔지니어로 활동해왔고, 주로 웹 프론트엔드 개발자로서 커리어를 쌓았습니다. 실제로 수백 건의 이력서를 검토하고 다수의 채용 인터뷰를 직접 진행했기 때문에, 구인하는 입장에서 신입 개발자에게 어떤 능력을 기대하는지 알고 있습니다.
단순히 현직자로서의 경험 외에도, 대학교 특강 및 다수의 멘토링, 그리고 부트캠프 강의를 통해 실제 채용 시장에 들어오시는 신입 개발자분들의 현 상태와 어떤 고민들을 가지고 계시는지도 많이 경험했습니다.
그런 제가 느낀 가장 큰 문제점은 바로 "방향성의 부재" 였습니다. 특히 최근에는 ChatGPT를 비롯한 AI의 발전 때문에, 더더욱 구직 준비를 어떤 방향으로 해야할지에 대해 고민이 많으실거라 생각합니다.
이 강의는 여러분들에게 명확한 방향을 제시하고, 그 목표를 이루도록 돕는 강의입니다.

강의는 세 가지 축으로 구성됩니다.

방향 잡기
- 포트폴리오가 왜 중요한가?
- 현업 관점에서 통하는 주제·기술 선택 전략
실전 제작
- 프로젝트 설계 → 코딩 → 배포까지 전 과정을 함께 실습
- Git 커밋·배포 자동화 등 실무 흐름 그대로 경험
최종 점검 & 선택형 리뷰
- 완성 후 스스로 품질을 체크할 수 있는 리뷰 가이드·체크리스트 제공
- (선택) 수강생 전용 포트폴리오 리뷰 50 % 할인 쿠폰으로 지식공유자 피드백 & 멘토링 신청

프로젝트 웹사이트: https://apple-game-portfolio.vercel.app/

GitHub 저장소: https://github.com/panarch/apple-game-portfolio

적절한 난이도로 구성하기 위해 많은 고민을 했습니다. 실습 포트폴리오 프로젝트가 너무 간단해도 문제지만, 주니어에게 기대하기에 과한 스펙을 갖춘 프로젝트도 문제가 됩니다. 그래서 실습에 불필요한 부분들은 가능한 배제하고, 꼭 필요한 내용들만을 담았습니다.

제 기준에서, 그리고 주변 현직자분들의 의견을 종합했습니다.

실습 프로젝트는 신입 웹 프론트엔드 개발자에게 기대하는 "최소한에서 조금 더 어려운 수준"의 난이도로 구성했습니다. 다시 말하면, 이 강의에서 다루는 실습 프로젝트 수준의 포트폴리오를 직접 개발하실 수 있게 된다면, 충분히 구직 준비가 되셨다고 할 수 있습니다. 자신의 포트폴리오 프로젝트를 진행하실 때 기준점으로 참고하실 수 있게끔 준비했습니다.

실습 수업에서는 단순히 코드만 작성하는 것이 아닌, 어느정도 분량으로 코드를 나눠야 하는지, Git commit도 실습의 과정으로 하나씩 직접 쌓아가면서 진행합니다.

현업에서 기대하는 "문제 해결 능력"을 강조한 포트폴리오를 구성할 수 있게 됩니다.
Next.js 기반의 프로젝트를 처음부터 배포까지 경험하며 프로젝트 완성에 대한 경험을 얻습니다.
실제 현직자가 인정할 만한 명확한 수준의 포트폴리오를 기획하고 개발할 수 있게 됩니다.
HTML/CSS, JavaScript 기본기를 갖출 수 있게 됩니다.
(선택) 수강생 전용 1 : 1 포트폴리오 리뷰 50 % 할인 쿠폰으로 지식공유자 피드백 & 멘토링을 추가 신청할 수 있습니다.

2010년, Internet Explorer 6와 jQuery 환경에서 웹을 개발하던 시절부터 지금까지 게임, 핀테크, 엔터테인먼트, 국내외 스타트업을 거치며 15년 이상 다양한 실무 개발 경험을 쌓아왔습니다.
웹 프론트엔드를 중심으로, 백엔드와 모바일(React Native) 개발까지 두루 경험하며 실제 서비스의 기획부터 배포까지 모든 과정을 다뤄왔습니다.

Svelte와 React는 물론, GlueSQL이라는 오픈소스 데이터베이스 프로젝트의 메인테이너로 활동하며 2020년 공개SW 개발자대회 대상을 수상했고, 이후에도 꾸준히 오픈소스 활동 또한 이어오고 있습니다.

유튜브 채널 운영 (구독자 2.7k) – 웹 프론트엔드 개발, 바닐라 JS 게임 만들기 등 지식 공유
부트캠프에서의 강의 및 멘토링 경험, 대학 특강(Git, 오픈소스) 다수 진행
오픈소스 컨트리뷰션 아카데미 멘토 (2021~2023)

YouTube: https://inf.run/FcBQs

GitHub: https://inf.run/Yxo7h

LinkedIn: https://inf.run/bA1C7

Q. 비전공자나 초보자도 따라갈 수 있나요?

기본적인 HTML, CSS, JavaScript 및 React에 대한 이해가 있으시다면, 충분히 따라오실 수 있습니다. 실습 수업에서 이론 하나하나를 상세하게 설명해드리는 방식은 아니지만, 수강하시면서 하나씩 학습하면서 따라오실 수 있도록 준비했습니다.

포트폴리오에 어떤 기술 요소들이 중요한지에 대해 판단하기 어려우실거라 생각합니다. 여러 단편 지식들을 많이 학습하는 것도 좋지만, 그 학습에 대한 시간, 기회 비용을 고려하지 않을 수 없습니다. 그리고 이제는 AI로 인해서 예전과 달리 단순 여러 라이브러리 사용 경험 등 단편적인 지식에 대한 중요도도 크게 낮아졌습니다.
본 실습 수업에서는 불필요한 단편 지식 학습 요소들을 최대한 배제하고, 지원자의 개발 능력을 어필할 수 있도록 하는 본질에 집중합니다. 다른 복합 라이브러리에 대한 사전 지식을 요구하지 않습니다.

Q. 실습 수업 코드 변경 이력과 사용되는 이미지 리소스를 받을 수 있나요?

각 실습 수업마다 수업 종료 시점 코드 스냅샷을 확인하실 수 있도록 수업 노트에 추가해두었습니다.

또한, 해당 수업에서 사용하는 리소스가 있다면 관련 링크도 추가로 달아두었습니다.

실습 수업은 Git commit을 하나하나 같이 쌓아가면서 진행합니다.

전체 이력은 아래 링크에서 확인하실 수 있습니다.

https://github.com/panarch/apple-game-portfolio/commits/main/

수업 노트 예시.

이런 분들께
추천드려요

학습 대상은
누구일까요?

실제 채용 현장에서 통하는 포트폴리오를 직접 만들어보고 싶은 분
React와 Next.js를 활용한 실전 프로젝트에 도전하고 싶은 분
단순한 클론 코딩을 넘어서 진짜 나만의 포트폴리오를 만들고 싶은 분
코드로 나만의 프로젝트를 설계하고 구현하는 표현력을 키우고 싶은 분

선수 지식,
필요할까요?

HTML, CSS, JavaScript 및 React 기본 지식

안녕하세요
입니다.

Svelte와 React는 물론, GlueSQL이라는 오픈소스 데이터베이스 프로젝트의 메인테이너로 활동하며
2020년 공개SW 개발자대회 대상을 수상했고, 이후에도 꾸준히 오픈소스 활동을 이어오고 있습니다.

유튜브 채널 운영 (구독자 2.7k) – 웹 프론트엔드 개발, 바닐라 JS 게임 만들기 등 지식 공유
부트캠프에서의 강의 및 멘토링 경험, 대학 특강(Git, 오픈소스) 다수 진행
오픈소스 컨트리뷰션 아카데미 멘토 (2021~2023)

YouTube: https://inf.run/FcBQs

GitHub: https://inf.run/Yxo7h

LinkedIn: https://inf.run/bA1C7

커리큘럼

전체

62개 ∙ (8시간 12분)

섹션 1. 인트로

6개 ∙ (23분)

섹션 2. 포트폴리오 앞에서 생기는 모든 고민들

6개 ∙ (42분)

7. 비전공자, 걱정할 필요 없습니다
05:35
8. 개인 프로젝트 vs 팀 프로젝트
06:31
9. 개발 블로그, 중요할까요?
03:32
10. 오픈소스 기여 경험, 도움이 될까요?
08:20
11. "웹프론트엔드? 그거 이제 AI가 해줘"라는 말, 진짜일까?
11:46
12. AI 및 LLM 활용 시 주의사항
06:31

섹션 3. 포트폴리오 주제 선정과 필수 요소

7개 ∙ (33분)

13. 기술 스택 선택 – React와 Next.js를 선택해야 하는 이유
02:43
14. JavaScript vs TypeScript – 무엇을 선택해야 할까?
02:51
15. 채용 담당자의 입장에서 좋은 주제 선택 방법
05:28
16. 포트폴리오에 필수적으로 포함되어야 하는 기술적 요소들
08:54
17. Tailwind CSS의 현실적인 사용 여부
03:34
18. 기획 단계에서 고려할 사항들
05:15
19. 최적의 포트폴리오 주제 선정 – 왜 사과게임인가?
04:41

섹션 4. 실제 개발 과정 - 프로젝트 세팅 및 기본 UI 구성하기

9개 ∙ (1시간 20분)

섹션 5. 실제 개발 과정 - 사과 게임 메인 로직 구현하기

10개 ∙ (1시간 49분)

섹션 6. 실제 개발 과정 - 랭킹과 리플레이 기능 구현하기

8개 ∙ (1시간 35분)

섹션 7. 실제 개발 과정 - 반응형 디자인 구현하기

7개 ∙ (1시간 5분)

섹션 8. 실제 개발 과정 - 프로젝트 배포 및 마무리 작업들

7개 ∙ (29분)

섹션 9. 마무리

2개 ∙ (12분)

강의 게시일:

마지막 업데이트일:

수강평

아직 충분한 평가를 받지 못한 강의입니다.

모두에게 도움이 되는 수강평의 주인공이 되어주세요!

월 ₩24,200

5개월 할부 시

₩121,000

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

Next + React Query로 SNS 서비스 만들기

제로초(조현영)

리액트19 & 넥스트15 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화를 위한 SSR까지!

中級以上

Next.js, React, react-query

Next + React Query로 SNS 서비스 만들기

제로초(조현영)

자바스크립트 : 기초부터 실전까지 올인원

코딩알려주는누나

자바스크립트 기초강의, 응용강의, 포트폴리오 전용강의 따로따로 찾아 볼게 아니라, 강의하나로 자바스크립트 기초부터 현업이 쓰는 다양한 응용 기술, 포트폴리오 까지 다 끝내고 싶으신 분들을 위한 강의입니다.

初級

JavaScript, HTML/CSS

자바스크립트 : 기초부터 실전까지 올인원

코딩알려주는누나

실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지

한윤석

OAuth 2.0을 구글이나 깃헙같은 계정으로 간편 로그인을 사용해봐서 이미 친숙하게 느껴질지도 모릅니다. 소셜 로그인은 OAuth 2.0을 확장하여 만들어진 것으로 핵심 기술은 OAuth 2.0 인가 프레임워크에 있습니다. OAuth 2.0의 원리를 이해하면 그것을 바탕으로 필요에 맞게 적절히 구현하고 조정하는 능력을 기를 수 있습니다.

初級

OAuth, Next.js, JavaScript

실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지

한윤석

React 완전 끝내기: useHoooooook

김영보

넓고 깊으면서 자세하게 React의 state와 hook을 배울 수 있습니다. React 공식 문서의 95% 이상을 다룹니다. 본 강좌로 React를 끝낼 수 있습니다.

初級

React, JavaScript, DOM

React 완전 끝내기: useHoooooook

김영보

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

이 강의는 단순한 DOM 조작을 넘어서, 실제 사용자와의 상호작용 속에서 웹 UI를 동적으로 구성하고 반응하는 방법을 깊이 있게 학습합니다. 이벤트 시스템의 본질, 버블링과 캡처링, 이벤트 위임, 실시간 UX 피드백, 그리고 throttle & debounce를 활용한 성능 최적화까지, 실무에서 자주 마주치는 문제들을 직접 구현하며 익힐 수 있도록 구성했습니다. DOM 트리의 구조 이해를 바탕으로, 이벤트 흐름과 상태 변경을 유연하게 연결하는 능력을 기르게 됩니다.

初級

HTML/CSS, JavaScript, React

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

nhcodingstudio

취업/이직에 성공할 수 밖에 없는 포트폴리오 전략 강의

키키

프로덕트 디자이너가 되고 싶은 분들, UX 취업/이직을 준비하는 사람이라면 필수 강의! 문제해결력이 있는 포트폴리오를 만들기 위해 프로젝트 선별부터 장표 기획/디자인까지 실제 경험을 기반으로 알려드려요.

初級

프로덕트디자인, UX 기획, 포트폴리오

취업/이직에 성공할 수 밖에 없는 포트폴리오 전략 강의

키키

인프런 클론코딩 Part 2: 수강부터 배포까지, 진짜 인프런 완성하기

로펀

🔥 강의 수강부터 결제, 배포까지 수강생이 겪는 전 과정을 그대로 구현해보는 실전 풀스택 강의입니다. 강의 탐색, 상세페이지, 수강신청, 영상 시청, 수강평과 질문, 장바구니 및 실결제, 이어보기, Docker + AWS 배포까지 모두 직접 만들며, 실제 서비스에 가까운 사용자 흐름과 구조 설계를 익히고 고급 풀스택 경험을 완성합니다.

初級

AWS, Docker, Next.js

인프런 클론코딩 Part 2: 수강부터 배포까지, 진짜 인프런 완성하기

로펀

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

中級以上

React, Redux, Node.js

[리뉴얼] React로 NodeBird SNS 만들기

제로초(조현영)

네카라쿠배당토 면접관이 알려주는 디자이너 서류・면접 합격 전략

돌멩이

서류부터 면접까지, 디자이너 취업의 A-Z가 모두 담겨있어요. 어디서도 볼 수 없는 실제 지원자의 면접 과정을 함께 보며 합격률을 높이는 방법을 자세하게 알려드려요.

初級

프로덕트디자인, 면접, 포트폴리오

네카라쿠배당토 면접관이 알려주는 디자이너 서류・면접 합격 전략

돌멩이

네카라쿠배 면접관의 경력기술서 (/feat. 서류합격률 100%)

taesun1114

24년도 서류합격률 100% (/feat. 네카라쿠배삼현슼엘) 본인을 PR 하기 위한 경력기술서 작성법

初級

포트폴리오, 면접

네카라쿠배 면접관의 경력기술서 (/feat. 서류합격률 100%)

taesun1114

주니어 웹기획자에게 필요한 중·고급 기술 스텍 : 웹기획 기초과정 [프로젝트 표준 워크플로]

미노플라넷

SI 및 차세대 프로젝트 웹기획자의 필수 역량인 RFP 분석부터 연계 정의 및 통합 설계 그리고 테스트 이행과 안정화로 이어지는 A부터 Z까지의 대형 프로젝트에서의 웹기획 업무 수행 절차를 단계적으로 배우는 강의입니다.

初級

포트폴리오, 서비스 기획, RFP

주니어 웹기획자에게 필요한 중·고급 기술 스텍 : 웹기획 기초과정 [프로젝트 표준 워크플로]

미노플라넷

빠른 취업을 위한 프론트엔드 로드맵

양동준

프론트엔드 준비하는데 구체적인 방법과 커리큘럼을 제공합니다. 지속적으로 업데이트 되는 프론트엔드 로드맵 강의 입니다.

入門

면접, 포트폴리오, 온라인 교육

빠른 취업을 위한 프론트엔드 로드맵

양동준

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

📌 이 강의는 전략형 AI 틱택토 프로젝트로 시작해, 객체지향 프로그래밍의 핵심 개념까지 실전 예제로 완성하는 커리큘럼입니다. 게임 구현으로 로직 설계와 AI 전략 사고를 훈련하고, 이어서 상속, 조합, 위임, 캡슐화 같은 OOP 설계 기술을 직접 코드로 경험합니다. 실제 프로젝트로 문법을 넘어서 ‘설계하는 개발자’로 성장하고 싶은 분께 추천드립니다.

初級

JavaScript, HTML/CSS, 객체지향

제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]

nhcodingstudio

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정

React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

初級

React, Electron, GUI

[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

닭강정