개발자 포트폴리오 10분에 합격/탈락 갈린다 (채용 담당자 시점)

"포트폴리오 좀 봐주실 수 있나요?"

스타트업 CTO로 일하면서 500개 이상의 포트폴리오를 봤습니다. 그리고 충격적인 사실을 발견했습니다.

95%의 포트폴리오는 10분 안에 탈락합니다.

왜일까요? 실력이 없어서? 아닙니다. 보여주는 방법을 몰라서입니다.

이 글에서는 채용 담당자가 포트폴리오를 보는 실제 과정과, 합격하는 포트폴리오의 공식을 공개합니다.

채용 담당자가 포트폴리오를 보는 방법

실제 타임라인 (10분)

00:00-00:30 (30초): GitHub 프로필
→ 첫인상 결정
→ 80% 여기서 걸러짐

00:30-02:00 (1분 30초): 핀한 레포지토리 훑어보기
→ 프로젝트 퀄리티 파악
→ 15% 추가로 걸러짐

02:00-05:00 (3분): README 상세 확인
→ 설명 능력 평가
→ 3% 추가로 걸러짐

05:00-08:00 (3분): 실제 코드 확인
→ 코딩 스타일, 구조
→ 1% 추가로 걸러짐

08:00-10:00 (2분): 배포 링크 클릭
→ 실제 작동 확인
→ 최종 1% 합격

합격률: 1%

충격적이죠? 하지만 현실입니다.

각 단계별 탈락 이유

30초 (GitHub 프로필) 탈락 80%:

❌ 프로필 사진 없음
❌ Bio 없음
❌ 핀한 레포지토리 없음
❌ 커밋 그래프 텅 빔
❌ 최근 활동 없음

2분 (핀한 레포) 탈락 15%:

❌ 프로젝트 제목이 "test", "project1"
❌ README가 없거나 부실
❌ 스타, 포크 0개
❌ 실행 방법 불명확

5분 (README) 탈락 3%:

❌ 무슨 프로젝트인지 불명확
❌ 스크린샷 없음
❌ 기술 스택 명시 없음
❌ 본인 기여도 불명확

8분 (코드) 탈락 1%:

❌ 코드 스타일 일관성 없음
❌ 주석 없음
❌ 파일 구조 엉망
❌ 안티 패턴

10분 (배포) 탈락:

❌ 배포 안 됨
❌ 에러 발생
❌ 로딩 느림
❌ 모바일 안 됨

탈락하는 포트폴리오 TOP 10

1. "Hello World" 수준 프로젝트

나쁜 예:

레포지토리 목록:
- calculator (계산기)
- todo-list (할일 목록)
- my-first-website (내 첫 웹사이트)
- python-practice (파이썬 연습)

왜 탈락:

튜토리얼 따라한 것
실제 문제 해결 없음
창의성 없음

개선: → 튜토리얼이라도 확장하기 → "계산기" → "개발자용 진법 변환 계산기" → "할일 목록" → "GitHub 이슈 연동 할일 앱"

2. README 없는 프로젝트

나쁜 예:

awesome-project/
├── src/
├── package.json
└── (README.md 없음)

왜 탈락:

무슨 프로젝트인지 모름
어떻게 실행하는지 모름
의도를 설명 안 함

개선: → README는 필수 → 최소한의 구조:

# 프로젝트명

## 소개
무엇을 하는 프로젝트인가

## 기술 스택
- React, Node.js...

## 실행 방법
```bash
npm install
npm start

주요 기능

기능 1
기능 2


### 3. 스크린샷 없는 프로젝트

**나쁜 예:**
- README에 긴 텍스트만
- 시각 자료 전무

**왜 탈락:**
- 결과물을 상상할 수 없음
- 귀찮아서 실행 안 함
- 첫인상 약함

**개선:**
→ 스크린샷 또는 GIF 필수
```markdown
## 데모
![메인 화면](./screenshots/main.png)
![대시보드](./screenshots/dashboard.png)

## 작동 영상
![](./demo.gif)

4. 복붙한 티 나는 코드

나쁜 예:

// StackOverflow 그대로 복붙
function example() {
  // TODO: implement this
  console.log('test')
}

왜 탈락:

실력 의심
이해 안 하고 복붙
테스트 코드 그대로

개선: → 복붙해도 이해하고 수정 → 주석으로 설명 추가 → 본인 스타일로 리팩토링

5. 배포 안 된 프로젝트

나쁜 예:

## 실행 방법
1. Clone this repo
2. npm install
3. npm start
4. Open localhost:3000

왜 탈락:

귀찮음 (안 함)
환경 문제로 실행 안 될 수도
진지하지 않아 보임

개선: → 반드시 배포하기

## 데모
🔗 [https://myapp.vercel.app](https://myapp.vercel.app)

테스트 계정:
- Email: test@example.com
- Password: test1234

6. 기술 스택 나열만

나쁜 예:

## 기술 스택
React, Node.js, MongoDB, Express,
Redux, Tailwind, TypeScript, Jest...

왜 탈락:

어디에 뭘 썼는지 모름
깊이가 보이지 않음
과장으로 보임

개선: → 역할 설명 추가

## 기술 스택

### Frontend
- **React** 18.2 - UI 컴포넌트 구조
- **TypeScript** - 타입 안정성
- **Tailwind CSS** - 반응형 디자인
- **React Query** - 서버 상태 관리

### Backend
- **Node.js** + **Express** - REST API
- **MongoDB** - 사용자/게시물 저장
- **JWT** - 인증/인가

### DevOps
- **Vercel** - 프론트엔드 배포
- **Railway** - 백엔드 배포
- **GitHub Actions** - CI/CD

7. 개인 기여도 불명확

나쁜 예:

팀 프로젝트만 나열
내가 뭘 했는지 불명확

왜 탈락:

실제 역할 모름
무임승차 의심
평가 불가능

개선:

## 프로젝트: 쇼핑몰 앱 (4인 팀)

### 내 역할
- **장바구니 기능 전체 개발** (프론트+백엔드)
  - React 장바구니 UI 컴포넌트
  - 수량 변경, 삭제 로직
  - 백엔드 API 3개 (추가/수정/삭제)

- **결제 시스템 통합**
  - 토스페이먼츠 API 연동
  - 결제 성공/실패 처리

### 기여율: 40%
### 코드 라인: 약 2,000 lines

8. 오타/문법 오류 투성이

나쁜 예:

# My Projetc

This is my first projetc.
I maked this with React.

## How to Run
Frist, install npm.

왜 탈락:

꼼꼼하지 않음
프로페셔널하지 않음
영어 능력 의심

개선: → Grammarly 사용 → 친구에게 검토 요청 → 한글이 더 나을 수도

9. 커밋 메시지가 "update", "fix"

나쁜 예:

update
fix
update again
final
final2
really final

왜 탈락:

개발 프로세스 이해 부족
협업 능력 의심
비전문적

개선: → 의미 있는 커밋 메시지

feat: 장바구니 담기 기능 구현
fix: 로그인 실패 시 에러 처리
refactor: API 호출 로직 모듈화
docs: README에 실행 방법 추가

10. 가짜 프로젝트

나쁜 예:

"Netflix 클론" (실제로는 UI만)
"유튜브 클론" (영상 재생 안 됨)
"인스타그램 클론" (기능 10% 구현)

왜 탈락:

과장
실제 역량 파악 불가
신뢰 상실

개선: → 솔직하게

# Netflix UI 클론 (학습용)

⚠️ 주의: 실제 스트리밍 기능 없음

## 구현한 것
- Netflix 스타일 UI
- 반응형 디자인
- TMDB API 연동 (영화 정보)

## 구현하지 않은 것
- 영상 스트리밍
- 사용자 인증
- 결제 시스템

합격하는 포트폴리오 공식

공식: 3P + 3S

3P:

Problem (문제): 무엇을 해결했나
Process (과정): 어떻게 만들었나
Product (결과물): 실제 작동하는 것

3S:

Screenshot (스크린샷): 시각적 증거
Stats (수치): 정량적 성과
Story (스토리): 왜 만들었나

합격 포트폴리오 예시

프로젝트: DevNews - 개발자 뉴스 큐레이션 앱

# DevNews 📰

> 개발자를 위한 뉴스 큐레이션 플랫폼
> 매일 아침 8시, 엄선된 기술 뉴스를 받아보세요.

🔗 [https://devnews.app](https://devnews.app)
📱 [App Store](https://apps.apple.com/devnews)

![메인 화면](./screenshots/main.png)

## 📌 문제 정의

개발자들은 매일 수십 개의 기술 블로그, 뉴스를 확인합니다.
하지만 어떤 글이 정말 가치 있는지 판단하기 어렵습니다.

**타겟 사용자:** 바쁜 주니어/시니어 개발자
**핵심 문제:** 정보 과부하, 시간 부족

## ✨ 주요 기능

### 1. AI 기반 뉴스 큐레이션
- GPT-4를 활용한 글 퀄리티 평가
- 개인화된 추천 (기술 스택 기반)
- 중복 제거 알고리즘

### 2. 요약 기능
- 3줄 요약 자동 생성
- 핵심 키워드 추출
- 읽는 시간 표시 (평균 3분)

### 3. 북마크 & 공유
- Notion, Slack 연동
- 팀원과 공유
- 나중에 읽기

## 🛠 기술 스택

### Frontend
- **Next.js 14** - SSR, App Router
- **TypeScript** - 타입 안정성
- **Tailwind CSS** - 빠른 스타일링
- **React Query** - 서버 상태 관리

### Backend
- **Supabase** - 인증, DB, Storage
- **OpenAI API** - 요약 생성
- **Python + FastAPI** - 크롤링 서버

### DevOps
- **Vercel** - Frontend 배포
- **Railway** - Backend 배포
- **GitHub Actions** - 매일 오전 7시 크롤링

## 📊 성과

- **사용자**: 1,200명 (3개월)
- **MAU**: 850명 (71% 리텐션)
- **일평균 접속**: 600명
- **GitHub Stars**: 340개
- **ProductHunt**: 200+ upvotes

## 💡 기술적 도전

### 1. 크롤링 최적화
**문제:** 100개 사이트 크롤링 시 30분 소요
**해결:**
- 멀티스레딩으로 5분 단축
- Redis 캐싱으로 중복 제거
- **결과: 5분으로 단축 (83% 개선)**

### 2. AI 비용 절감
**문제:** GPT-4 API 비용 월 $300
**해결:**
- Prompt 최적화
- 배치 처리
- 캐싱 전략
- **결과: 월 $80 (73% 절감)**

### 3. 모바일 성능
**문제:** Lighthouse 점수 60점
**해결:**
- 이미지 최적화 (WebP)
- 코드 스플리팅
- 레이지 로딩
- **결과: 95점 (58% 개선)**

## 📸 스크린샷

[메인 페이지 스크린샷]
[상세 페이지 스크린샷]
[모바일 뷰 스크린샷]

## 🎯 향후 계획

- [ ] iOS/Android 네이티브 앱
- [ ] 팀 공유 기능
- [ ] 뉴스레터 발송
- [ ] 유료 플랜 ($9.99/월)

## 🤔 배운 점

1. **Next.js App Router**: 기존 Pages Router와의 차이
2. **OpenAI API 최적화**: 프롬프트 엔지니어링의 중요성
3. **사용자 피드백**: 실제 사용자 인터뷰 20건 진행

## 👨‍💻 혼자 개발

- 개발 기간: 2개월 (주말 + 퇴근 후)
- 총 투입 시간: 약 200시간
- 코드 라인: 약 5,000 lines

## 🔗 링크

- [데모 사이트](https://devnews.app)
- [GitHub](https://github.com/username/devnews)
- [기술 블로그 포스트](https://blog.example.com/devnews)

---

## 라이선스

MIT License

## 문의

이메일: email@example.com

왜 이게 합격 포트폴리오인가?

✅ 문제 정의 명확 ✅ 실제 사용자 있음 (1,200명) ✅ 수치로 증명 (리텐션 71%) ✅ 기술적 도전과 해결 ✅ 배포됨 (실제 작동) ✅ 스크린샷 풍부 ✅ 배운 점 성찰 ✅ 향후 계획 (지속성)

GitHub 프로필 최적화

Before (탈락형)

[프로필 사진 없음]

@username
0 followers · 0 following

[Bio 없음]
[핀한 레포 없음]
[커밋 그래프 텅 빔]

After (합격형)

[전문적인 프로필 사진]

Kim Developer
@kimdev

Frontend Developer | React Enthusiast | Open Source Contributor

📍 Seoul, South Korea
🏢 @CompanyName
🌐 https://kimdev.com
📧 kim@example.com

🚀 Currently working on DevNews
💻 Learning TypeScript, Next.js
💬 Ask me about React, Web Performance

[핀한 레포 6개]
[커밋 그래프 꾸준함]
[GitHub Stats 뱃지]

README 프로필 만들기

### Hi there 👋

I'm a Frontend Developer passionate about creating user-friendly web applications.

### 🛠 Tech Stack

**Languages:**
![JavaScript](https://img.shields.io/badge/-JavaScript-F7DF1E?logo=javascript&logoColor=black)
![TypeScript](https://img.shields.io/badge/-TypeScript-3178C6?logo=typescript&logoColor=white)
![Python](https://img.shields.io/badge/-Python-3776AB?logo=python&logoColor=white)

**Frontend:**
![React](https://img.shields.io/badge/-React-61DAFB?logo=react&logoColor=black)
![Next.js](https://img.shields.io/badge/-Next.js-000000?logo=next.js&logoColor=white)
![Tailwind](https://img.shields.io/badge/-Tailwind-06B6D4?logo=tailwind-css&logoColor=white)

### 📊 GitHub Stats

![GitHub Stats](https://github-readme-stats.vercel.app/api?username=kimdev&show_icons=true&theme=radical)

### 🔥 Recent Projects

- [DevNews](https://github.com/kimdev/devnews) - News curation app
- [TaskFlow](https://github.com/kimdev/taskflow) - Task management tool

### 📝 Latest Blog Posts

- [Next.js 14 App Router 완벽 가이드](https://blog.com/post1)
- [React 성능 최적화 7가지 방법](https://blog.com/post2)

### 📫 Contact

- Email: kim@example.com
- LinkedIn: [linkedin.com/in/kimdev](https://linkedin.com/in/kimdev)
- Blog: [kimdev.com](https://kimdev.com)

프로젝트별 체크리스트

필수 항목 (없으면 탈락)

□ README.md 존재
□ 프로젝트 설명 (무엇을 하는가)
□ 실행 방법
□ 기술 스택 명시
□ 스크린샷 최소 1개
□ 배포 링크 (가능하면)
□ 라이선스

권장 항목 (있으면 가산점)

□ 데모 GIF/영상
□ 문제 정의
□ 해결 과정
□ 기술적 도전
□ 성과 (수치)
□ 배운 점
□ 향후 계획
□ 기여 가이드 (오픈소스)
□ 테스트 코드
□ CI/CD 뱃지

고급 항목 (차별화)

□ 아키텍처 다이어그램
□ 성능 벤치마크
□ 사용자 피드백
□ 기술 블로그 포스트
□ 발표 자료
□ 수상 경력

실전 팁

1. 프로젝트는 3개면 충분

질 > 양

❌ 10개의 Hello World
✅ 3개의 완성도 높은 프로젝트

추천 구성:

개인 프로젝트 (문제 해결, 창의성)
팀 프로젝트 (협업 능력)
오픈소스 기여 (커뮤니티 참여)

2. README는 스토리로

구조:

1. Hook (관심 유도)
   → "매일 뉴스 100개 읽기 지겹지 않나요?"

2. Problem (문제 공감)
   → "개발자는 정보 과부하..."

3. Solution (해결책)
   → "AI가 자동으로 큐레이션합니다"

4. How (기술)
   → "Next.js + GPT-4로 구현"

5. Results (결과)
   → "1,200명 사용 중"

6. Learning (배움)
   → "이 과정에서 배운 것들"

3. 수치로 말하기

Before:

"많은 사용자가 사용합니다"
"성능을 개선했습니다"
"인기 있는 프로젝트입니다"

After:

"1,200명 사용 (3개월)"
"로딩 시간 3초 → 0.8초 (73% 개선)"
"GitHub Stars 340개"

4. 배포는 필수

무료 배포 옵션:

Frontend: Vercel, Netlify, GitHub Pages
Backend: Railway, Render, Fly.io
Full-stack: Vercel, Heroku (무료 플랜)

주의:

배포 후 테스트 필수
모바일에서도 확인
데모 계정 제공

5. 지속적 업데이트

커밋 꾸준히:

[GitHub 잔디 그래프]

Good: ████████████████ (매일 커밋)
Bad:  █░░░░█░░█░░░░░█ (가끔 커밋)

방법:

매일 작은 기능 추가
리팩토링
문서 개선
이슈 해결

채용 담당자 Q&A

Q: 정말 10분만 보나요?

A: 네, 심지어 더 짧을 수도.

이력서 100개 검토
각 3분씩 = 300분 (5시간)
실제로는 더 빠르게

Q: 깊이 vs 넓이, 뭐가 중요한가요?

A: 깊이.

10개 얕은 프로젝트 < 3개 깊은 프로젝트
하나를 제대로 파고들기

Q: 팀 프로젝트는 어떻게 평가하나요?

A: 본인 기여도 명확히 하세요.

"우리가 만들었습니다" ❌
"제가 XX 부분을 담당했습니다" ✅

Q: 오픈소스 기여는 필수인가요?

A: 필수는 아니지만 가산점.

작은 기여라도 좋음 (오타 수정도)
이슈에 답변한 것도 기여
PR merge된 것 강조

Q: 토이 프로젝트도 괜찮나요?

A: 네, 단 완성도가 중요.

"토이"라고 얕보면 안 됨
작아도 완벽하게

마무리: 1주일 안에 개선하기

Day 1-2: 정리

□ 공개할 레포지토리 선택 (3개)
□ private 처리 or 삭제 (나머지)
□ 핀한 레포 설정

Day 3-5: README 작성

□ 프로젝트마다 README 추가
□ 스크린샷 추가
□ 배포 링크 추가

Day 6: GitHub 프로필

□ 프로필 사진 추가
□ Bio 작성
□ README 프로필 만들기

Day 7: 최종 점검

□ 친구에게 피드백 요청
□ 오타 검사
□ 모든 링크 작동 확인

1주일 후, 당신의 포트폴리오는 상위 5%가 됩니다.

포트폴리오 리뷰 원하시나요?

댓글에 GitHub 링크 남겨주시면 간단히 피드백 드립니다!

다음 글 예고: "개발자 면접 질문 100개와 모범 답안 (실전 경험 기반)"

채용 담당자가 포트폴리오를 보는 방법

실제 타임라인 (10분)

각 단계별 탈락 이유

탈락하는 포트폴리오 TOP 10

1. "Hello World" 수준 프로젝트

2. README 없는 프로젝트

주요 기능

4. 복붙한 티 나는 코드

5. 배포 안 된 프로젝트

6. 기술 스택 나열만

7. 개인 기여도 불명확

8. 오타/문법 오류 투성이

9. 커밋 메시지가 "update", "fix"

10. 가짜 프로젝트

합격하는 포트폴리오 공식

공식: 3P + 3S

합격 포트폴리오 예시

GitHub 프로필 최적화

Before (탈락형)

After (합격형)

README 프로필 만들기

프로젝트별 체크리스트

필수 항목 (없으면 탈락)

권장 항목 (있으면 가산점)

고급 항목 (차별화)

실전 팁

1. 프로젝트는 3개면 충분

2. README는 스토리로

3. 수치로 말하기

4. 배포는 필수

5. 지속적 업데이트

채용 담당자 Q&A

마무리: 1주일 안에 개선하기

궁금한 점이 있으신가요?