{"componentChunkName":"component---src-templates-blog-post-js","path":"/etc/개발자-포트폴리오-구축-가이드-GitHub부터-배포까지/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog","description":"웹·앱·AI 개발자 전병훈(bottlehs)의 기술 블로그. AI·LLM, JavaScript·Vue, Spring Boot, 알고리즘, 블록체인 실무 가이드를 다룹니다","siteUrl":"https://www.bottlehs.dev","author":{"name":"Jeon Byung Hun","summary":"개발을 즐기는 bottlehs - Engineer, MS, AI, FE, BE, OS, IOT, Blockchain, 설계, 테스트"},"social":{"github":"bottlehs","codepen":"bottlehs"}}},"markdownRemark":{"id":"9b514a09-02d8-53b1-bb08-83cac404ca02","excerpt":"개발자 포트폴리오 구축 가이드 개발자 포트폴리오는 단순한 이력서가 아니다. 자신의 기술 역량, 프로젝트 경험, 문제 해결 능력을 보여주는 창구다. 이 글은 GitHub 프로필 최적화부터 포트폴리오 웹사이트 제작, 배포까지 완벽한 포트폴리오 구축 가이드를 제공한다.…","html":"

\"개발자

\n

개발자 포트폴리오는 단순한 이력서가 아니다. 자신의 기술 역량, 프로젝트 경험, 문제 해결 능력을 보여주는 창구다. 이 글은 GitHub 프로필 최적화부터 포트폴리오 웹사이트 제작, 배포까지 완벽한 포트폴리오 구축 가이드를 제공한다.

\n

1. 포트폴리오가 중요한 이유

\n

1-1. 포트폴리오의 역할

\n

기술 역량 증명:

\n\n

개인 브랜딩:

\n\n

취업/이직 지원:

\n\n

1-2. 효과적인 포트폴리오의 특징

\n

명확성:

\n\n

시각적 매력:

\n\n

실전 경험:

\n\n

2. GitHub 프로필 최적화

\n

2-1. README 프로필 만들기

\n

프로필 README 생성:

\n
    \n
  1. GitHub에서 자신의 사용자명과 동일한 이름의 저장소 생성
    2. \n
  2. README.md 파일 추가
    3. \n
  3. 자동으로 프로필에 표시됨
    4. \n
\n

기본 템플릿:

\n
# 안녕하세요, [이름]입니다 👋\n\n## 소개\n- 💻 프론트엔드 개발자\n- 🎯 React, TypeScript 전문\n- 📚 지속적인 학습자\n\n## 기술 스택\n- **Frontend**: React, Next.js, TypeScript\n- **Backend**: Node.js, Express\n- **Tools**: Git, Docker, AWS\n\n## 프로젝트\n- [프로젝트 1](링크) - 설명\n- [프로젝트 2](링크) - 설명\n\n## 연락처\n- 📧 Email: your.email@example.com\n- 💼 LinkedIn: [프로필 링크]\n- 🌐 Blog: [블로그 링크]
\n

2-2. 고급 프로필 README

\n

GitHub Stats 추가:

\n
## GitHub Stats\n\n![GitHub Stats](https://github-readme-stats.vercel.app/api?username=yourusername&show_icons=true&theme=radical)\n\n![Top Languages](https://github-readme-stats.vercel.app/api/top-langs/?username=yourusername&layout=compact&theme=radical)
\n

기술 스택 아이콘:

\n
## 기술 스택\n\n![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)\n![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)\n![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)
\n

커밋 그래프:

\n
![GitHub Streak](https://github-readme-streak-stats.herokuapp.com/?user=yourusername&theme=radical)
\n

2-3. 프로젝트 README 최적화

\n

좋은 README 구조:

\n
# 프로젝트 이름\n\n짧은 한 줄 설명\n\n## 🚀 기능\n\n- 주요 기능 1\n- 주요 기능 2\n- 주요 기능 3\n\n## 🛠️ 기술 스택\n\n- React\n- TypeScript\n- Node.js\n\n## 📸 스크린샷\n\n![스크린샷](이미지링크)\n\n## 🚀 시작하기\n\n### 설치\n\n\\`\\`\\`bash\nnpm install\n\\`\\`\\`\n\n### 실행\n\n\\`\\`\\`bash\nnpm run dev\n\\`\\`\\`\n\n## 📝 라이선스\n\nMIT License
\n

3. 포트폴리오 웹사이트 제작

\n

3-1. 기술 스택 선택

\n

추천 스택:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
스택장점단점추천 대상
Next.jsSEO 우수, 빠른 배포학습 곡선프론트엔드 개발자
React + Vite빠른 개발, 가벼움SEO 제한적React 개발자
Gatsby정적 사이트 최적화설정 복잡블로그 통합 원하는 경우
Astro빠른 성능, 다양한 프레임워크상대적으로 새로움성능 중시
\n

3-2. Next.js 포트폴리오 만들기

\n

프로젝트 초기화:

\n
npx create-next-app@latest portfolio --typescript --tailwind --app\ncd portfolio
\n

기본 구조:

\n
portfolio/\n├── app/\n│   ├── page.tsx          # 홈 페이지\n│   ├── about/\n│   │   └── page.tsx      # 소개 페이지\n│   ├── projects/\n│   │   └── page.tsx      # 프로젝트 페이지\n│   └── contact/\n│       └── page.tsx      # 연락처 페이지\n├── components/\n│   ├── Header.tsx\n│   ├── Footer.tsx\n│   └── ProjectCard.tsx\n└── public/\n    └── images/
\n

홈 페이지 예시:

\n
// app/page.tsx\nimport Link from 'next/link';\n\nexport default function Home() {\n  return (\n    <main className=\"min-h-screen p-8\">\n      <section className=\"max-w-4xl mx-auto\">\n        <h1 className=\"text-4xl font-bold mb-4\">\n          안녕하세요, 개발자입니다\n        </h1>\n        <p className=\"text-xl mb-8\">\n          프론트엔드 개발자로 React와 TypeScript를 주로 사용합니다.\n        </p>\n        \n        <div className=\"flex gap-4 mb-12\">\n          <Link \n            href=\"/projects\"\n            className=\"px-6 py-3 bg-blue-500 text-white rounded\"\n          >\n            프로젝트 보기\n          </Link>\n          <Link \n            href=\"/contact\"\n            className=\"px-6 py-3 border border-blue-500 text-blue-500 rounded\"\n          >\n            연락하기\n          </Link>\n        </div>\n        \n        <section>\n          <h2 className=\"text-2xl font-bold mb-4\">기술 스택</h2>\n          <div className=\"flex flex-wrap gap-2\">\n            {['React', 'TypeScript', 'Next.js', 'Node.js'].map(tech => (\n              <span \n                key={tech}\n                className=\"px-3 py-1 bg-gray-200 rounded\"\n              >\n                {tech}\n              </span>\n            ))}\n          </div>\n        </section>\n      </section>\n    </main>\n  );\n}
\n

3-3. 프로젝트 섹션 구현

\n

프로젝트 데이터:

\n
// data/projects.ts\nexport interface Project {\n  id: string;\n  title: string;\n  description: string;\n  image: string;\n  technologies: string[];\n  githubUrl: string;\n  liveUrl?: string;\n}\n\nexport const projects: Project[] = [\n  {\n    id: '1',\n    title: 'E-commerce Platform',\n    description: 'React와 Node.js로 만든 전자상거래 플랫폼',\n    image: '/images/project1.png',\n    technologies: ['React', 'TypeScript', 'Node.js'],\n    githubUrl: 'https://github.com/username/project1',\n    liveUrl: 'https://project1.example.com',\n  },\n  // 더 많은 프로젝트...\n];
\n

프로젝트 카드 컴포넌트:

\n
// components/ProjectCard.tsx\nimport Image from 'next/image';\nimport Link from 'next/link';\nimport { Project } from '@/data/projects';\n\ninterface ProjectCardProps {\n  project: Project;\n}\n\nexport default function ProjectCard({ project }: ProjectCardProps) {\n  return (\n    <div className=\"border rounded-lg overflow-hidden shadow-lg\">\n      <Image\n        src={project.image}\n        alt={project.title}\n        width={400}\n        height={250}\n        className=\"w-full h-48 object-cover\"\n      />\n      <div className=\"p-4\">\n        <h3 className=\"text-xl font-bold mb-2\">{project.title}</h3>\n        <p className=\"text-gray-600 mb-4\">{project.description}</p>\n        \n        <div className=\"flex flex-wrap gap-2 mb-4\">\n          {project.technologies.map(tech => (\n            <span\n              key={tech}\n              className=\"px-2 py-1 bg-blue-100 text-blue-800 text-sm rounded\"\n            >\n              {tech}\n            </span>\n          ))}\n        </div>\n        \n        <div className=\"flex gap-4\">\n          <Link\n            href={project.githubUrl}\n            target=\"_blank\"\n            className=\"text-blue-500 hover:underline\"\n          >\n            GitHub\n          </Link>\n          {project.liveUrl && (\n            <Link\n              href={project.liveUrl}\n              target=\"_blank\"\n              className=\"text-blue-500 hover:underline\"\n            >\n              Live Demo\n            </Link>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}
\n

3-4. 디자인 가이드

\n

색상 팔레트:

\n
/* tailwind.config.js */\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        primary: '#3B82F6',\n        secondary: '#8B5CF6',\n        accent: '#10B981',\n      },\n    },\n  },\n};
\n

타이포그래피:

\n\n

레이아웃:

\n\n

4. 프로젝트 소개 방법

\n

4-1. 프로젝트 선택 기준

\n

포함할 프로젝트:

\n\n

제외할 프로젝트:

\n\n

4-2. 프로젝트 설명 작성법

\n

좋은 프로젝트 설명:

\n
## 프로젝트 이름\n\n### 문제\n사용자가 겪는 문제를 명확히 설명\n\n### 해결 방법\n어떻게 문제를 해결했는지 설명\n\n### 기술 스택\n사용한 기술과 선택 이유\n\n### 주요 기능\n- 기능 1: 설명\n- 기능 2: 설명\n\n### 배운 점\n프로젝트를 통해 배운 것들\n\n### 스크린샷/데모\n시각적 자료 포함
\n

나쁜 예시:

\n\n

좋은 예시:

\n\n

4-3. 코드 품질 관리

\n

코드 리뷰 체크리스트:

\n\n

README 최적화:

\n\n

5. 배포 전략

\n

5-1. 배포 플랫폼 선택

\n

Vercel (추천):

\n\n

Netlify:

\n\n

GitHub Pages:

\n\n

자체 서버:

\n\n

5-2. Vercel 배포

\n

배포 단계:

\n
    \n
  1. GitHub에 코드 푸시
    2. \n
  2. Vercel에 GitHub 연동
    3. \n
  3. 프로젝트 선택
    4. \n
  4. 자동 배포
    5. \n
\n

환경 변수 설정:

\n
# Vercel 대시보드에서 설정\nAPI_KEY=your-api-key\nDATABASE_URL=your-database-url
\n

커스텀 도메인:

\n
    \n
  1. Vercel 대시보드에서 도메인 추가
    2. \n
  2. DNS 설정 변경
    3. \n
  3. SSL 자동 인증
    4. \n
\n

5-3. CI/CD 설정

\n

GitHub Actions:

\n
# .github/workflows/deploy.yml\nname: Deploy Portfolio\n\non:\n  push:\n    branches: [main]\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v3\n      \n      - name: Setup Node.js\n        uses: actions/setup-node@v3\n        with:\n          node-version: '20'\n      \n      - name: Install dependencies\n        run: npm install\n      \n      - name: Build\n        run: npm run build\n      \n      - name: Deploy to Vercel\n        uses: amondnet/vercel-action@v20\n        with:\n          vercel-token: ${{ secrets.VERCEL_TOKEN }}\n          vercel-org-id: ${{ secrets.ORG_ID }}\n          vercel-project-id: ${{ secrets.PROJECT_ID }}
\n

6. SEO 최적화

\n

6-1. 메타 태그 설정

\n

Next.js Metadata:

\n
// app/layout.tsx\nexport const metadata = {\n  title: '개발자 포트폴리오',\n  description: '프론트엔드 개발자 포트폴리오입니다.',\n  keywords: ['개발자', '포트폴리오', 'React', 'TypeScript'],\n  openGraph: {\n    title: '개발자 포트폴리오',\n    description: '프론트엔드 개발자 포트폴리오입니다.',\n    images: ['/og-image.png'],\n  },\n};
\n

6-2. 구조화된 데이터

\n

JSON-LD:

\n
// components/StructuredData.tsx\nexport default function StructuredData() {\n  const structuredData = {\n    '@context': 'https://schema.org',\n    '@type': 'Person',\n    name: 'Your Name',\n    jobTitle: 'Frontend Developer',\n    url: 'https://yourportfolio.com',\n    sameAs: [\n      'https://github.com/username',\n      'https://linkedin.com/in/username',\n    ],\n  };\n\n  return (\n    <script\n      type=\"application/ld+json\"\n      dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}\n    />\n  );\n}
\n

7. 성능 최적화

\n

7-1. 이미지 최적화

\n

Next.js Image 컴포넌트:

\n
import Image from 'next/image';\n\n<Image\n  src=\"/profile.jpg\"\n  alt=\"Profile\"\n  width={200}\n  height={200}\n  priority\n  placeholder=\"blur\"\n/>
\n

7-2. 코드 스플리팅

\n

동적 임포트:

\n
import dynamic from 'next/dynamic';\n\nconst HeavyComponent = dynamic(() => import('./HeavyComponent'), {\n  loading: () => <p>Loading...</p>,\n});
\n

7-3. 폰트 최적화

\n

Next.js Font:

\n
import { Inter } from 'next/font/google';\n\nconst inter = Inter({ subsets: ['latin'] });\n\nexport default function Layout({ children }) {\n  return (\n    <html className={inter.className}>\n      <body>{children}</body>\n    </html>\n  );\n}
\n

8. 연락처 및 소셜 링크

\n

8-1. 연락처 섹션

\n

연락처 폼:

\n
// components/ContactForm.tsx\n'use client';\n\nimport { useState } from 'react';\n\nexport default function ContactForm() {\n  const [formData, setFormData] = useState({\n    name: '',\n    email: '',\n    message: '',\n  });\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    // 폼 제출 로직\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"space-y-4\">\n      <input\n        type=\"text\"\n        placeholder=\"이름\"\n        value={formData.name}\n        onChange={(e) => setFormData({ ...formData, name: e.target.value })}\n        className=\"w-full p-2 border rounded\"\n      />\n      <input\n        type=\"email\"\n        placeholder=\"이메일\"\n        value={formData.email}\n        onChange={(e) => setFormData({ ...formData, email: e.target.value })}\n        className=\"w-full p-2 border rounded\"\n      />\n      <textarea\n        placeholder=\"메시지\"\n        value={formData.message}\n        onChange={(e) => setFormData({ ...formData, message: e.target.value })}\n        className=\"w-full p-2 border rounded\"\n        rows={5}\n      />\n      <button\n        type=\"submit\"\n        className=\"px-6 py-2 bg-blue-500 text-white rounded\"\n      >\n        전송\n      </button>\n    </form>\n  );\n}
\n

8-2. 소셜 링크

\n

소셜 아이콘:

\n
// components/SocialLinks.tsx\nimport Link from 'next/link';\n\nexport default function SocialLinks() {\n  return (\n    <div className=\"flex gap-4\">\n      <Link href=\"https://github.com/username\" target=\"_blank\">\n        GitHub\n      </Link>\n      <Link href=\"https://linkedin.com/in/username\" target=\"_blank\">\n        LinkedIn\n      </Link>\n      <Link href=\"https://twitter.com/username\" target=\"_blank\">\n        Twitter\n      </Link>\n      <Link href=\"mailto:your.email@example.com\">\n        Email\n      </Link>\n    </div>\n  );\n}
\n

9. 포트폴리오 체크리스트

\n

필수 항목

\n

기본 정보:

\n\n

프로젝트:

\n\n

기술적 요소:

\n\n

추가 요소:

\n\n

10. 포트폴리오 예시

\n

10-1. 좋은 포트폴리오의 특징

\n

명확한 구조:

\n\n

시각적 요소:

\n\n

기능적 요소:

\n\n

10-2. 참고할 만한 포트폴리오

\n

인기 포트폴리오 사이트:

\n\n

학습 포인트:

\n\n

FAQ

\n

Q: 포트폴리오에 몇 개의 프로젝트를 포함해야 하나요?
\nA: 3-5개 정도가 적당합니다. 너무 많으면 집중이 어렵고, 너무 적으면 역량을 충분히 보여주기 어렵습니다. 품질이 양보다 중요합니다.

\n

Q: 튜토리얼 따라하기 프로젝트를 포함해도 되나요?
\nA: 가능하면 피하는 것이 좋습니다. 하지만 튜토리얼을 따라하면서 개선하거나 새로운 기능을 추가했다면 포함할 수 있습니다.

\n

Q: 포트폴리오를 만들 기술을 모르면 어떻게 하나요?
\nA: 간단한 HTML/CSS/JavaScript로 시작하거나, Next.js 같은 프레임워크를 학습하면서 만드는 것도 좋은 방법입니다. 포트폴리오 자체가 학습 프로젝트가 될 수 있습니다.

\n

Q: 커스텀 도메인이 필수인가요?
\nA: 필수는 아니지만, 전문성을 보여주는 데 도움이 됩니다. 무료 도메인(.tk, .ml 등)보다는 유료 도메인(.com, .dev 등)을 추천합니다.

\n

Q: 포트폴리오를 자주 업데이트해야 하나요?
\nA: 새로운 프로젝트를 완성하거나 새로운 기술을 학습했을 때 업데이트하는 것이 좋습니다. 최소 분기별로 한 번은 업데이트하는 것을 추천합니다.

\n

Q: 모바일에서도 잘 보여야 하나요?
\nA: 네, 필수입니다. 많은 사람들이 모바일로 포트폴리오를 확인하므로 반응형 디자인은 필수입니다.

\n

결론: 나만의 포트폴리오 만들기

\n

개발자 포트폴리오는 단순한 웹사이트가 아니라 자신을 표현하는 창구다. 기술 역량, 프로젝트 경험, 문제 해결 능력을 보여주는 중요한 도구다.

\n

완벽한 포트폴리오를 한 번에 만들려고 하지 말고, 점진적으로 개선해나가자. 작은 것부터 시작하여 지속적으로 업데이트하고 개선하는 것이 중요하다.

\n

가장 중요한 것은 진정성이다. 자신의 경험과 성장 과정을 솔직하게 보여주는 포트폴리오가 가장 효과적이다. 기술적 완벽함보다는 자신의 이야기를 잘 전달하는 것이 중요하다.

\n

포트폴리오를 통해 더 나은 기회를 만나고, 더 많은 사람들과 연결되기를 바란다. 함께 성장하는 개발자 커뮤니티에서 우리의 여정은 계속된다.

\n

포트폴리오 완성 후 다음 단계

\n

포트폴리오를 완성했다면, 이제 실제 프로젝트에 참여하여 경험을 쌓아보자. 블루버튼 같은 프로젝트 매칭 플랫폼을 활용하여 포트폴리오에 보여줄 수 있는 실전 프로젝트를 찾아보자. 다양한 프로젝트 경험을 통해 포트폴리오를 더욱 풍성하게 만들고, 실무 역량을 키워나가자.

","tableOfContents":"","wordCount":{"words":845},"fields":{"slug":"/etc/개발자-포트폴리오-구축-가이드-GitHub부터-배포까지/","image":null,"faq":[{"question":"포트폴리오에 몇 개의 프로젝트를 포함해야 하나요?","answer":"3-5개 정도가 적당합니다. 너무 많으면 집중이 어렵고, 너무 적으면 역량을 충분히 보여주기 어렵습니다. 품질이 양보다 중요합니다."},{"question":"튜토리얼 따라하기 프로젝트를 포함해도 되나요?","answer":"가능하면 피하는 것이 좋습니다. 하지만 튜토리얼을 따라하면서 개선하거나 새로운 기능을 추가했다면 포함할 수 있습니다."},{"question":"포트폴리오를 만들 기술을 모르면 어떻게 하나요?","answer":"간단한 HTML/CSS/JavaScript로 시작하거나, Next.js 같은 프레임워크를 학습하면서 만드는 것도 좋은 방법입니다. 포트폴리오 자체가 학습 프로젝트가 될 수 있습니다."},{"question":"커스텀 도메인이 필수인가요?","answer":"필수는 아니지만, 전문성을 보여주는 데 도움이 됩니다. 무료 도메인(.tk, .ml 등)보다는 유료 도메인(.com, .dev 등)을 추천합니다."},{"question":"포트폴리오를 자주 업데이트해야 하나요?","answer":"새로운 프로젝트를 완성하거나 새로운 기술을 학습했을 때 업데이트하는 것이 좋습니다. 최소 분기별로 한 번은 업데이트하는 것을 추천합니다."},{"question":"모바일에서도 잘 보여야 하나요?","answer":"네, 필수입니다. 많은 사람들이 모바일로 포트폴리오를 확인하므로 반응형 디자인은 필수입니다."}]},"frontmatter":{"title":"개발자 포트폴리오 구축 가이드 - GitHub부터 배포까지","date":"2025년 12월 30일","dateISO":"2025-12-30T06:15:00.000Z","updatedISO":null,"category":"etc","description":"개발자 포트폴리오를 구축하는 완벽한 가이드다. GitHub 프로필 최적화, 포트폴리오 웹사이트 제작, 프로젝트 소개 방법, 배포 전략까지 실무에서 바로 사용할 수 있는 포트폴리오 구축 방법을 정리한다.","tags":["포트폴리오","GitHub","개발자 브랜딩","이력서","개발자 마케팅","웹사이트 제작","배포","개발자 커리어"]}}},"pageContext":{"slug":"/etc/개발자-포트폴리오-구축-가이드-GitHub부터-배포까지/","previous":{"fields":{"slug":"/etc/2025년-개발자-회고-한-해를-돌아보며-배운-것들/"},"frontmatter":{"title":"2025년 개발자 회고 - 한 해를 돌아보며 배운 것들","tags":["개발자 회고","연말 정리","개발자 성장","학습","경험 공유","개발자 커리어","2025년 회고"]}},"next":{"fields":{"slug":"/etc/2026년-개발-트렌드-예측-개발자가-주목해야-할-기술/"},"frontmatter":{"title":"2026년 개발 트렌드 예측 - 개발자가 주목해야 할 기술","tags":["2026년 트렌드","개발 트렌드","기술 예측","개발자 트렌드","미래 기술","개발자 커리어","기술 스택","개발 예측"]}}}},"staticQueryHashes":["213619243","3262363727"]}