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

저는 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분)

강의 게시일:

마지막 업데이트일:

수강평

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

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

₩121,000

비슷한 강의

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

웹에서 다루는 네트워크 통신 - 기초부터 HTTP, SSE, WebSocket 그리고 WebRTC P2P 통신까지

이사님은

다양한 통신 기법들에 대해 배우고 차이점을 이해하면, 가장 적합한 통신 방법을 선택하고 구현하는 능력을 키울 수 있습니다.

입문

JavaScript, React, Java

웹에서 다루는 네트워크 통신 - 기초부터 HTTP, SSE, WebSocket 그리고 WebRTC P2P 통신까지

이사님은

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

돌멩이

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

초급

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

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

돌멩이

[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용

코드덤

부트스트랩5로 나만의 색을 입힌 포트폴리오 웹 사이트 제작부터 배포까지! 전세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷! Bootstrap 5

입문

HTML/CSS, Bootstrap

[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용

코드덤

모바일 웹 퍼블리싱 포트폴리오 with Figma

코딩웍스(Coding Works)

퍼블리셔 취업과 퍼블리셔 실무에서 가장 경쟁력이 있는 모바일 웹 제작 능력을 향상할 수 있습니다. 퍼블리셔로서 모바일 웹을 제작하기 위한 거의 모든 제작 방법과 노하우를 다질 수 있습니다. 특히 요즘 퍼블리셔와 개발자에게 요구되는 디자인 능력을 피그마(Figma) 학습으로 많은 부분 커버할 수 있도록 피그마(Figma)로 모바일 웹 UI 디자인 작업을 하는 과정도 상세하게 설명하였습니다. 모바일 웹 퍼블리싱 수업에서 가장 강점인 부분인 HTML 와이어프레임 상세한 작성법을 모든 페이지 하나하나 상세하게 설명합니다. 강의를 통해 HTML 와이어프레임 제작 능력이 크게 향상될 것입니다. 모바일 웹 퍼블리싱은 CSS 변수(Var) 활용한 모바일과 태블릿에 맞춘 레이아웃을 완벽하게 맞추는 학습을 통해서 실무 작업과 대동소이한 정도의 작업 능력을 갖추게 됩니다. Flex 레이아웃을 중심으로 중상급 CSS 실전 능력을 충분히 갖추시게 됩니다.

초급

HTML/CSS, 포트폴리오, 모바일 디자인

모바일 웹 퍼블리싱 포트폴리오 with Figma

코딩웍스(Coding Works)

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

양동준

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

입문

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

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

양동준

리액트 훅(React Hook)으로 만드는 웹앱

최광성

모던 프론트엔드 프레임워크 중 가장 인기있는 React(리액트), 하지만 배우기가 어렵습니다. 이를 해결하기 위해 훅(Hook)이 나왔습니다. 본 강의는 훅을 이용해 React를 쉽게 배울 수 있도록 도와드립니다.

초급

React, 웹앱

리액트 훅(React Hook)으로 만드는 웹앱

최광성

생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)

JEngineer

생성형 AI(Chat GPT, Cursor AI)를 통해서 웹 사이트 개발과 배포하는 과정을 전반적으로 학습합니다.

초급

HTML/CSS, JavaScript, 웹앱

생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)

JEngineer

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

이 강의를 통해서 리액트와 파이어베이스를 이용해서 채팅 어플리케이션을 만들수 있습니다.

초급

React, Firebase, 웹앱

따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]

John Ahn

UX 입문자들 모여라! 1시간에 끝내는 UX 포트폴리오 강의

주협

IT 회사 디자이너로 취업하는데 필수 역량인 UX와 포트폴리오 제작법을 영상과 PDF에 담았어요.

입문

Figma, UX 기획, 포트폴리오

UX 입문자들 모여라! 1시간에 끝내는 UX 포트폴리오 강의

주협

디자이너 포트폴리오 무엇이든 물어보세요!

강영화

영화 님과 키키 님이 이전까지 무료로 공개했던 디자이너 포트폴리오 자료와 영상, 포트폴리오 관련 자주 묻는 질문을 모았어요.

입문

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

디자이너 포트폴리오 무엇이든 물어보세요!

강영화

[백엔드/예외처리 시나리오/집계 최적화] 백엔드 포트폴리오와 실무 이력 강화 전략. 올인원 PART1

인큐(INCU)

취준생과 주니어개발자를 위해 준비한 [백엔드, 이력강화] 강의입니다.

초급

Java, Spring Boot, 기술면접

[백엔드/예외처리 시나리오/집계 최적화] 백엔드 포트폴리오와 실무 이력 강화 전략. 올인원 PART1

인큐(INCU)

AI 포트폴리오 만들기 - Airbnb 클론 프로젝트

AISchool

TensorFlow 활용 우수사례인 airbnb 데이터 사이언스팀의 Amenity Detection 프로젝트를 클론 프로젝트로 진행해보고 이 진행경험을 GitHub 블로그로 정리해서 AI 포트폴리오를 만들 수 있는 강의입니다.

초급

딥러닝, 포트폴리오, GitHub

AI 포트폴리오 만들기 - Airbnb 클론 프로젝트

AISchool

주니어 기획자가 고급으로 점프하는 방법 : 웹기획자의 커리어 확장 로드맵

미노플라넷

대한민국에서 웹기획자로 성장하여 SI 차세대 웹기획 PL로 정상을 찍기 위한 커리어 확장 로드맵을 알려드립니다.

초급

웹앱, 포트폴리오, 서비스 기획

주니어 기획자가 고급으로 점프하는 방법 : 웹기획자의 커리어 확장 로드맵

미노플라넷

웹시스템 기획 프로젝트 단계별 기술 스텍 : 기초과정 [프로젝트 표준 워크플로]

미노플라넷

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

초급

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

웹시스템 기획 프로젝트 단계별 기술 스텍 : 기초과정 [프로젝트 표준 워크플로]

미노플라넷

CSS GRID 마스터: FIGMA 디자인 웹구현 실전

이지웹

CSS Grid는 복잡한 레이아웃도 간단하고 직관적으로 구현할 수 있는 강력한 도구입니다. 이번 강의에서는 CSS Grid의 핵심 개념부터 실전 활용법까지 단계별로 쉽게 배울 수 있도록 구성했습니다. 이제 복잡한 float과 flexbox에 얽매이지 말고, 효율적인 레이아웃 설계의 정석을 배워보세요! 지금 바로 시작하세요!

초급

HTML/CSS, jQuery, Figma

CSS GRID 마스터: FIGMA 디자인 웹구현 실전

이지웹

서비스기획 & 프로덕트 매니저(PM)의 첫걸음[입문]

레브(Reve)

* 인하우스 서비스기획자&프로덕트 매니저 입문 강의 * 강의도 들으면서 포트폴리오도 챙길 수 있는 강의

입문

서비스 기획, Figma, 프로젝트 관리

서비스기획 & 프로덕트 매니저(PM)의 첫걸음[입문]

레브(Reve)

AI 시대, 반나절 만에 웹사이트 개발부터 배포까지 바이브 코딩 with MCP & Gemini CLI

코드브릿지

요즘 핫한 바이브 코딩! AI 도구를 활용하여 딸깍! 클릭만으로 웹사이트(Next.js)를 개발하고 배포하는 방법을 배울 수 있습니다.

입문

Next.js, AI 활용 (AX), 바이브코딩

AI 시대, 반나절 만에 웹사이트 개발부터 배포까지 바이브 코딩 with MCP & Gemini CLI

코드브릿지

기획자-PO 이직/포트폴리오 가이드

불꽃남자25

이직을 준비해야 하는 기획자, PO 분들에게 이직 관련 지식 및 경력서/포트폴리오 작성 가이드를 드리는 강의를 준비했습니다. 아래의 분들께 추천 드립니다. - 이직을 준비해야 하는데 어떻게 시작할지 모르는 분들 - 경력서/포트폴리오 작성 컨셉과 구성을 아예 모르겠어 힘들어 하시는 분들 - 본인이 자랑해야 할 포인트를 모르는 분들

입문

포트폴리오

기획자-PO 이직/포트폴리오 가이드

불꽃남자25

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

A Complete End-to-End Developer Journey — Build Lightning-Fast APIs, Modern Frontend Interfaces, Real Projects, Authentication Systems, Dashboards & Full Deployments Using FastAPI, React, and Vibe Coding Techniques.

입문

React, React Native, react.js

Complete Full-Stack Python Developer Roadmap: Learn FastAPI, React, Database Design API Architecture

IT s Dev

웹 프로그래밍(HTML5+CSS+javaScript)

국립안동대학교 SW융합교육원

초급자를 위한 웹 프로그래밍 강의입니다. HTML, CSS, JavaScript의 기본 문법과 활용법을 단계적으로 학습할 수 있도록 구성되었습니다. 웹 페이지 구조 및 디자인, 상호작용 기능 구현 등 웹 개발의 핵심 요소를 다루고 있습니다.

입문

HTML/CSS, JavaScript, 반응형 웹

웹 프로그래밍(HTML5+CSS+javaScript)

국립안동대학교 SW융합교육원

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

수강 후 이런걸 얻을 수 있어요

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