컴/폰
🎨 프론트엔드 개발 포트폴리오 만들기 꿀팁
놀이장군
2025-05-20 15:00
조회수 : 40
포트폴리오는 단순한 작품 모음이 아닙니다.
내가 어떤 개발자인지를 보여주는 살아있는 이력서죠.
특히 프론트엔드는 눈에 보이는 영역인 만큼,
디자인 감각과 사용성까지 함께 드러납니다.
어떻게 만들면 ‘와, 이 사람 뽑고 싶다’는 인상을 줄 수 있을지 정리해드릴게요.
✅ 1. 단 하나의 메인 프로젝트는 필수
로그인/회원가입
게시판 또는 CRUD 기능
반응형 디자인
API 연동 (뉴스, 날씨, 영화 등)
예시: 영화 검색 사이트, 블로그 클론, 간단한 커뮤니티
→ 기능이 완벽하지 않아도 구조가 잘 잡힌 게 더 중요
✅ 2. 기술 스택을 잘 드러내자
React, Vue, TypeScript, Styled-Components 등
상태 관리 (Redux, Zustand) 사용 여부
폴더 구조, 컴포넌트 분리, 코드 컨벤션 명확히
→ 기술을 "썼다"가 아니라 "잘 썼다"는 인상을 줄 것
✅ 3. 디자인 감각도 평가 대상
배색, 여백, 폰트 등 ‘보기에 편한지’가 중요
Figma 활용해서 UI 직접 기획한 흔적이 있다면 가산점
기존 디자인 템플릿을 응용했다면 출처와 변경 포인트 명시
✅ 4. 프로젝트 설명은 구조적으로
왜 만들었는가 → 어떤 기술을 썼는가 → 어떤 어려움이 있었는가 → 어떻게 해결했는가
README.md 파일은 영문 + 한글 둘 다 작성 추천
기술 블로그에 회고 정리하면 효과 2배
✅ 5. GitHub / 배포 링크 필수
GitHub: 커밋 기록, 코드 정리, 브랜치 사용 여부도 평가 대상
Netlify, Vercel, GitHub Pages 등으로 실제 배포
배포된 사이트는 모바일에서도 작동하는지 확인
✅ 6. 작은 프로젝트도 ‘스토리’를 담자
단순한 버튼 클릭 예제라도
“왜 이 기능을 만들었는지” 설명이 있으면 전혀 다르게 보입니다.
사이드 프로젝트 → 기획 → 디자인 → 개발 → 테스트
흐름을 보여주는 게 핵심
프론트엔드는 결과물이 보이기 때문에
작은 차이가 큰 인상을 남깁니다.
‘완성도’보다 중요한 건 ‘내가 이걸 만들며 뭘 배웠는지’ 보여주는 것!
오늘 하나라도 리팩토링해서 업로드해보세요 :)