이력서 한 장보다 더 강력한 무기, 포트폴리오 웹사이트!
직무와 상관없이 자신을 브랜딩하고, 경력과 실력을 보여줄 수 있는 훌륭한 도구입니다.
이번 글에서는 개인 포트폴리오 웹사이트를 HTML, CSS, JS로 쉽게 만드는 방법을 알려드립니다.
왜 포트폴리오 웹사이트가 필요한가요?
- 채용 시 이력서보다 먼저 보는 자료
- GitHub, Notion보다 디자인과 전달력이 뛰어남
- 개인 브랜드 구축 가능 (도메인 연결 시 효과 극대화)
💡 디자이너, 개발자뿐 아니라 마케터, 기획자, 프리랜서에게도 강력 추천!
포트폴리오 사이트 구성요소
| 섹션 | 설명 |
|——|——|
| 소개(About) | 자기소개, 직무 요약 |
| 프로젝트(Project) | 주요 작업물 목록 |
| 기술 스택(Skills) | 사용 가능한 도구, 언어 등 |
| 연락처(Contact) | 이메일, 링크, GitHub 등
🧩 레이아웃은 1페이지 스크롤 구조(single-page)로 시작하면 쉽고 깔끔합니다.
실전 예제: HTML 기반 기본 구조
“`html
윤태호
프론트엔드 개발자
About Me
10년차 UI/UX 기반 프론트엔드 개발자입니다.
Projects
-
- 이커머스 관리자 페이지 개발
-
- 개인 블로그 리디자인
Contact
Email: yun@example.com
GitHub: github.com/taeho-dev
“`
🖼️ 이미지 ALT 태그 위치 예시:
디자인은 어떻게 적용하나요?
- CSS 프레임워크 추천: Bootstrap, Tailwind CSS
- 폰트 추천: Noto Sans KR, Pretendard (웹폰트 적용)
- 색상 조합 툴: coolors.co
“`css
body {
font-family: ‘Pretendard’, sans-serif;
background-color: #f8f9fa;
color: #333;
}
“`
배포는 어떻게 하나요?
| 플랫폼 | 장점 |
|——–|——|
| GitHub Pages | 무료, 코드 기반 관리 쉬움 |
| Netlify | CI/CD 자동 배포, 설정 간단 |
| Vercel | 프론트엔드 배포에 최적화 |
📢 초보자는 GitHub Pages → Netlify 순으로 추천드립니다.
도메인 연결 팁
.kr,.me,.site등 합리적인 가격의 도메인 구입 가능- DNS 설정은 네임서버를 GitHub Pages나 Netlify에 연결하면 OK
- naver.com/yourname 형태보다 yourname.dev이 훨씬 신뢰도 높음
포트폴리오 유지 관리 팁
- 신규 프로젝트 반영은 분기별 업데이트
- 반응형 디자인 필수 (모바일에서 이상 없는지 확인)
- 오탈자, 링크 오류 주기적 점검
참고용 포트폴리오 사례
마무리
포트폴리오 웹사이트는 단순한 자기소개 페이지가 아닙니다.
자신의 가치, 비전, 실력을 보여주는 온라인 명함이자 경쟁력입니다.
지금 바로 하나 만들어보세요. 나만의 도메인이 있는 사람은 기억에 남습니다.
🔎 다음 포스팅 주제 추천
→ 10번: 초보자를 위한 React 입문 강좌
→ 30번: 웹 개발자를 위한 크롬 확장 프로그램 추천
참고자료
- https://coolors.co/
- https://pages.github.com/