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

면접관이 실제로 보는 것

필수 섹션 — 이것만 있으면 된다

기술 스택 선택 — Next.js vs Gatsby vs Astro

Next.js 포트폴리오 구조 — 실제 코드

Next.js 15 포트폴리오 디렉토리 구조
portfolio/
├── app/
│   ├── layout.tsx          # 루트 레이아웃 (메타데이터, 폰트)
│   ├── page.tsx            # 홈 (히어로 + 프로젝트 + 스킬)
│   ├── projects/
│   │   └── [slug]/
│   │       └── page.tsx    # 프로젝트 상세 (MDX)
│   └── blog/
│       ├── page.tsx        # 블로그 목록
│       └── [slug]/
│           └── page.tsx    # 블로그 포스트 (MDX)
├── components/
│   ├── ProjectCard.tsx
│   ├── SkillBadge.tsx
│   └── ContactForm.tsx
├── content/
│   ├── projects/           # .mdx 파일 (프로젝트 설명)
│   └── posts/              # .mdx 파일 (블로그 포스트)
├── lib/
│   └── mdx.ts              # MDX 파싱 유틸리티
└── public/
    └── og.png              # OG 이미지

프로젝트 목록 페이지 핵심 코드 (app/page.tsx)
// app/page.tsx
import { getProjects } from '@/lib/mdx'
import ProjectCard from '@/components/ProjectCard'

export default async function Home() {
  const projects = await getProjects()

  return (
    <main>
      <section className="hero">
        <h1>이름</h1>
        <p>무엇을 만드는 개발자인지 한 줄로</p>
        <div className="links">
          <a href="https://github.com/username">GitHub</a>
          <a href="/resume.pdf">이력서</a>
        </div>
      </section>

      <section className="projects">
        <h2>프로젝트</h2>
        <div className="grid">
          {projects.map((project) => (
            <ProjectCard key={project.slug} project={project} />
          ))}
        </div>
      </section>
    </main>
  )
}

// MDX 프로젝트 파일 예시 (content/projects/my-saas.mdx)
// ---
// title: SaaS 프로젝트명
// description: 한 줄 요약
// tech: [Next.js, Supabase, Stripe]
// demo: https://demo.example.com
// github: https://github.com/username/repo
// ---
//
// ## 문제
// 왜 이걸 만들었는지
//
// ## 해결 방법
// 어떻게 구현했는지, 기술적 결정 이유

SEO 설정 — 검색에 노출되는 포트폴리오

Next.js 15 메타데이터 + OG 이미지 설정
// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: {
    template: '%s | 이름 — 개발자',
    default: '이름 — 풀스택 개발자',
  },
  description:
    'Next.js, TypeScript, Supabase를 주로 사용하는 풀스택 개발자입니다. SaaS, 웹앱 프로젝트 경험이 있습니다.',
  openGraph: {
    type: 'website',
    locale: 'ko_KR',
    url: 'https://yourname.dev',
    siteName: '이름 포트폴리오',
    images: [{ url: '/og.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
    creator: '@twitter_handle',
  },
  robots: {
    index: true,
    follow: true,
  },
}

Vercel 배포 — 10분 안에 완료

피해야 할 실수 — 면접관이 이탈하는 포인트