Project
Profile Website
Next.js 기반 웹 이력서/포트폴리오 사이트
Next.jsTypeScriptTailwind CSSVercel
Screenshots
Overview
Profile Website는 백엔드 개발 경험, 프로젝트 상세 설명, 웹 이력서를 하나의 흐름으로 정리한 Next.js 기반 정적 포트폴리오 사이트입니다. 프로젝트 내용은 TypeScript 데이터 파일에서 관리하고, App Router 기반 라우트에서 재사용해 메인 페이지, 프로젝트 목록, 프로젝트 상세, 이력서 페이지를 구성했습니다.
Problem
기존에는 프로젝트 소개, 기술스택, 이력서 정보가 README나 문서 형태로 흩어져 있어 방문자가 핵심 프로젝트와 역할을 한 번에 파악하기 어려웠습니다. 또한 배포 가능한 웹 포트폴리오로 운영하려면 콘텐츠를 하드코딩하지 않고 일관된 데이터 구조로 관리하면서, 모바일 화면과 공유 미리보기, 검색 노출까지 함께 고려할 필요가 있었습니다.
Solution
프로필, 프로젝트, 기술스택, 경험 정보를 src/data의 TypeScript 데이터로 분리하고, 메인 페이지와 상세 페이지에서 같은 데이터를 재사용하도록 구성했습니다. 프로젝트 상세 페이지는 slug 기반 동적 라우팅과 notFound 처리를 적용했고, 링크가 없는 항목은 깨진 버튼으로 보이지 않게 처리했습니다. Resume 페이지는 별도 PDF 파일 대신 브라우저 인쇄 기능으로 현재 웹 이력서를 PDF로 저장할 수 있도록 구성했으며, metadata, sitemap, robots, OG 이미지, GitHub Actions CI까지 배포 전 검증 흐름에 포함했습니다.
Core Features
- 프로필, 프로젝트, 기술스택, 경험 데이터의 TypeScript 기반 정적 관리
- 메인 랜딩 페이지와 Featured Projects 섹션
- 프로젝트 목록 페이지와 slug 기반 프로젝트 상세 페이지
- 프로젝트별 이미지 갤러리와 확대 보기
- 카테고리형 기술스택과 접이식 트러블슈팅 섹션
- 웹 이력서 페이지와 브라우저 인쇄 기반 PDF 저장
- 반응형 Header, 카드, 문서형 상세 레이아웃
- Open Graph, Twitter Card, robots.txt, sitemap.xml 구성
Tech Stack
Framework
Next.jsApp RouterReact
Language
TypeScript
Styling
Tailwind CSSResponsive UIPrint CSS
Content
Static TypeScript DataTyped Project Data
SEO
Metadata APIOpen GraphTwitter Cardrobots.txtsitemap.xml
Deployment
VercelGitHubGitHub Actions CI
Technical Decisions
- 콘텐츠를 페이지 컴포넌트에 직접 작성하지 않고 profile, projects, skills, experiences 데이터 파일로 분리
- 프로젝트 상세 페이지를 slug 기반 동적 라우팅으로 구성하고 generateStaticParams로 정적 생성
- 없는 프로젝트 slug는 notFound 처리해 잘못된 URL 접근을 명확하게 처리
- 프로젝트 카드와 상세 페이지에서 같은 링크 데이터를 사용하되 href가 없는 링크는 사용자 화면에 노출하지 않음
- 별도 PDF 파일 관리 대신 window.print와 print CSS를 사용해 현재 웹 이력서를 PDF로 저장하는 방식 선택
- 프로젝트 스크린샷은 Next Image 기반 갤러리로 표시하고, 작은 썸네일과 확대 보기 흐름을 분리
- SEO 설정은 layout metadata, 페이지별 metadata, robots.ts, sitemap.ts로 분리
- Vercel 배포는 Git 연동에 맡기고 GitHub Actions는 lint/build 검증만 담당하도록 구성
Challenges
- 프로젝트 설명이 길어질수록 카드, 상세 페이지, 이력서에서 같은 내용을 중복 관리하지 않도록 데이터 구조를 유지하는 문제
- 프로젝트별 실제 링크가 없거나 준비 중인 경우 깨진 버튼처럼 보이지 않게 처리하는 문제
- 웹 이력서가 화면에서는 읽기 좋고 인쇄 시에는 문서처럼 보이도록 스타일을 분리하는 문제
- 프로젝트 이미지가 많아져도 상세 페이지가 길고 산만해 보이지 않도록 썸네일과 확대 보기를 분리하는 문제
- 모바일, 태블릿, 데스크톱에서 Header, 카드 버튼, 배지 줄바꿈이 깨지지 않게 맞추는 문제
- 실제 배포 URL, sitemap, metadata, README의 도메인 정보가 서로 어긋나지 않게 관리하는 문제
Troubleshooting
Case 1정적 데이터와 페이지 컴포넌트의 책임 분리
- 이슈
- 프로젝트 설명, 기술스택, 링크, 이력서 내용이 페이지 컴포넌트 안에 직접 섞이면 같은 정보를 여러 페이지에서 재사용하기 어렵고 수정 누락이 발생할 수 있었습니다.
- 해결
- profile, projects, skills, experiences 데이터를 TypeScript 파일로 분리하고 타입을 정의했습니다. 메인 페이지, 프로젝트 목록, 상세 페이지, 이력서 페이지는 같은 데이터를 import해 렌더링하도록 구성했습니다.
- 결과
- 콘텐츠 수정 위치가 명확해졌고, 프로젝트 순서, 링크, 기술스택, 상세 설명을 한 곳에서 관리할 수 있게 되었습니다.
Case 2resume.pdf 의존 방식에서 브라우저 PDF 저장 방식으로 전환
- 이슈
- 미리 만들어둔 public/resume.pdf 파일을 다운로드하는 방식은 파일이 없을 때 버튼 비활성 처리와 TODO 문구가 필요했고, 웹 이력서 내용과 PDF 파일 내용이 달라질 수 있었습니다.
- 해결
- Resume 페이지에 클라이언트 PrintButton을 추가해 window.print()를 호출하도록 변경했습니다. print CSS로 Header, Footer, 버튼류를 숨기고 본문은 문서형으로 출력되도록 정리했습니다.
- 결과
- 별도 PDF 파일 없이 현재 웹 이력서 내용을 브라우저에서 바로 PDF로 저장할 수 있게 되었고, 이력서 콘텐츠와 출력물이 같은 소스를 사용하게 되었습니다.
Case 3프로젝트 이미지 확대 보기와 페이지 길이 문제
- 이슈
- 서비스 스크린샷을 모두 크게 노출하면 프로젝트 상세 페이지가 길어지고 본문 흐름이 끊길 수 있었습니다.
- 해결
- 썸네일은 한 줄 가로 스크롤 갤러리로 표시하고, 클릭 시 dialog 기반 확대 보기로 전환했습니다. 이전/다음 버튼과 키보드 이동을 추가해 여러 이미지를 이어서 볼 수 있게 했습니다.
- 결과
- 상세 설명의 가독성을 유지하면서도 필요한 경우 서비스 화면을 크게 확인할 수 있는 구조가 되었습니다.
Case 4실제 링크가 없는 프로젝트의 깨진 링크 노출 문제
- 이슈
- 프로젝트별 GitHub, Demo, Release 링크가 모두 준비되지 않은 상태에서 빈 href나 TODO 링크가 버튼으로 노출되면 사용자 경험이 좋지 않았습니다.
- 해결
- 링크 배열은 유지하되 href가 있는 링크만 화면에 표시하도록 처리했습니다. 실제 링크가 추가된 프로젝트는 카드와 상세 페이지에서 같은 링크 데이터를 사용하도록 구성했습니다.
- 결과
- 준비되지 않은 링크는 사용자 화면에 깨진 버튼으로 보이지 않고, 실제 링크가 추가되면 별도 UI 수정 없이 바로 노출됩니다.
Improvements
- README 중심의 단순 프로젝트 소개를 웹 기반 포트폴리오와 프로젝트 상세 페이지로 확장
- 하드코딩된 콘텐츠를 TypeScript 데이터 파일로 분리해 수정 위치를 명확화
- 프로젝트 목록, 상세 페이지, 이력서에서 같은 프로젝트 데이터를 재사용
- 별도 PDF 파일 다운로드 방식에서 현재 웹 이력서 인쇄/PDF 저장 방식으로 개선
- 프로젝트 이미지를 본문에 크게 나열하는 방식 대신 썸네일 갤러리와 확대 보기로 정리
- Vercel 배포 URL을 metadataBase, sitemap, README에 반영해 SEO 설정 일관성 개선
- GitHub Actions CI로 PR과 main push에서 lint/build 검증 흐름 추가
Next Improvements
- 커스텀 도메인 연결 시 metadataBase와 sitemap URL 갱신
- 프로젝트별 이미지 alt/caption 품질 보강
- 검색 노출 결과를 기준으로 title/description 문구 추가 조정
- 프로젝트 상세 페이지의 목차 또는 앵커 네비게이션 추가 검토
- 인쇄 결과를 실제 PDF 저장본 기준으로 추가 점검