알통 지식정보공유

알록달록

ChevronLeft

컴/폰

🎨 프론트엔드 개발 포트폴리오 만들기 꿀팁

FileX

놀이장군

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. 작은 프로젝트도 ‘스토리’를 담자

단순한 버튼 클릭 예제라도

“왜 이 기능을 만들었는지” 설명이 있으면 전혀 다르게 보입니다.

사이드 프로젝트 → 기획 → 디자인 → 개발 → 테스트


흐름을 보여주는 게 핵심


프론트엔드는 결과물이 보이기 때문에

작은 차이가 큰 인상을 남깁니다.

‘완성도’보다 중요한 건 ‘내가 이걸 만들며 뭘 배웠는지’ 보여주는 것!

오늘 하나라도 리팩토링해서 업로드해보세요 :)


16,000

28

댓글

  • 하얀고슴도치 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 이켱 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 행복바라기짱 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • kingsnake 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 김숙희778 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 로이머스탱 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 처리1004 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • yyp6089 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • skyfish54 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 정고수 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 숏다리 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 브폴로 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!

  • 찐쿙이 님이 감사의 마음으로 놀이장군님께 0알을 증정했어요!