개발자 포트폴리오 사이트 만들기

왜 포트폴리오 사이트인가?

• GitHub 프로필만으로는 기술력을 보여주기 어렵습니다
• 이력서에 링크 하나로 본인을 소개할 수 있습니다
• 사이트 자체가 프론트엔드 실력의 증거입니다

필수 섹션

1. 히어로 (첫인상)

이름 / 직함
한 줄 소개 (구체적으로)
CTA: 이력서 다운로드, GitHub, 연락처

나쁜 예: "안녕하세요, 개발자입니다" 좋은 예: "3년차 프론트엔드 개발자. React + TypeScript로 월 100만 MAU 서비스를 운영합니다"

2. 프로젝트 (핵심)

각 프로젝트마다:

• 스크린샷 또는 데모 GIF
• 한 줄 설명
• 기술 스택 태그
• 본인 역할과 기여도
• 링크 (데모 + GitHub)

프로젝트 수: 3~5개. 많을수록 좋은 게 아닙니다.

3. 기술 스택

카테고리별 정리:

• Frontend: React, TypeScript, Next.js, Tailwind
• Backend: Node.js, PostgreSQL, Redis
• DevOps: Docker, GitHub Actions, AWS
• Tools: VS Code, Figma, Notion

4. 경험 (선택)

간략한 경력 타임라인. 상세 내용은 이력서에.

5. 연락처

이메일, GitHub, LinkedIn. 폼은 선택사항.

기술 스택 추천

간단하게: Next.js + Tailwind + MDX

npx create-next-app portfolio --typescript --tailwind --app

장점: SSG, SEO 최적화, Vercel 무료 배포

더 간단하게: Astro

npm create astro@latest

장점: 번들 크기 극소, 마크다운 기본 지원

SEO 최적화

포트폴리오 사이트도 검색에 노출되면 좋습니다.

export const metadata: Metadata = {
  title: "홍길동 | 프론트엔드 개발자",
  description: "React, TypeScript 전문 프론트엔드 개발자 포트폴리오",
  openGraph: {
    title: "홍길동 | 프론트엔드 개발자",
    description: "React, TypeScript 전문 프론트엔드 개발자",
    type: "website",
  },
};

디자인 팁

Do

• 깔끔한 화이트 스페이스
• 일관된 컬러 팔레트 (2~3색)
• 모바일 반응형 필수
• 다크모드 지원
• 부드러운 스크롤 애니메이션

Don't

• 과도한 애니메이션
• 여러 폰트 혼용
• 형광색 배경
• 자동 재생 음악
• 로딩 화면 (정적 사이트인데 로딩?)

배포

커스텀 도메인은 .dev가 개발자스럽고 깔끔합니다.

포트폴리오 체크리스트

1. 모바일에서 깨지지 않는가?
2. Lighthouse 성능 90점 이상인가?
3. OG 이미지가 설정되어 있는가?
4. 프로젝트 링크가 모두 살아 있는가?
5. 오타가 없는가?
6. 연락처 이메일이 작동하는가?
7. 로딩 속도가 3초 이내인가?

참고할 만한 포트폴리오

좋은 포트폴리오의 공통점:

• 첫 화면에서 누구인지 바로 알 수 있음
• 프로젝트가 시각적으로 매력적
• 기술적 깊이가 느껴지는 설명
• 군더더기 없는 심플한 디자인