📌 프로젝트명
- 개인 웹사이트
📋 프로젝트 개요
- 개발자로서의 철학과 커리어 여정을 담고, 주요 프로젝트를 소개하며, 영어와 한국어를 지원하는 다국어 포트폴리오 웹사이트입니다.
- 기획부터 디자인, 프론트엔드·백엔드 개발, 콘텐츠 구성 및 배포까지 전 과정을 혼자 수행한 풀스택 프로젝트입니다.
📅 기간
- 2025년 4월 – 2025년 6월
🛠 기술 스택
- 프론트엔드: React, Next.js, TypeScript
- 백엔드 (서버리스): Next.js API Routes
- 스타일링: Tailwind CSS
- 콘텐츠 관리: Contentlayer (MDX 기반)
- 국제화 (i18n): next-intl
- 배포 및 호스팅: Vercel
👤 역할 및 기여
- 개인 웹사이트의 기획, 디자인, 개발, 배포를 단독으로 수행
- 프로젝트 및 블로그 콘텐츠 구조 설계 및 콘텐츠 작성 자동화 구현
- 사용자 경험을 고려한 다국어 지원, 모바일 대응, 연락 폼 보안 기능 개발
🚀 주요 기술 포인트
-
다국어 및 SEO 최적화
- next-intl을 활용한 UI 문구의 언어별 JSON 파일 관리
- Next.js 다국어 라우팅 기능 연동으로 SEO 친화적인 URL 구조 설계
-
다국어 MDX 콘텐츠 관리
- 동일한 콘텐츠를 한국어, 영어 각각 별도 MDX 파일로 분리 작성
- Contentlayer와 Next.js 다국어 라우팅 기능 연동을 통한 사용자 언어에 맞는 정적 페이지 자동 생성
- UI 문구와 정적 콘텐츠 분리 관리로 유지보수성 및 확장성 확보
-
다국어 맞춤 블로그 최신 글 자동 연동
- RSS 피드를 활용해 블로그 최신 글을 자동으로 가져와 콘텐츠 업데이트 편의성 증대
- 다국어 설정에 맞춰 영어 블로그(Medium)와 한국어 블로그(Tistory)의 서로 다른 RSS 형식을 알맞게 파싱하고 가공하여 사용자 언어별로 정확하고 일관된 최신 글 표시
-
정적 콘텐츠 자동화
- MDX와 Contentlayer를 활용해 콘텐츠를 정적으로 관리하고, 빌드 시 자동 반영 및 최적화 구현으로 성능 향상 및 유지보수 용이성 확보
-
연락 폼 보안 및 UX 개선
- Google reCAPTCHA v3와 Rate Limiting을 병행 적용해 스팸 및 봇 공격 방지
- EmailJS를 통한 실시간 이메일 전송 기능으로 사용자 경험 및 보안 강화
-
모바일 반응형 디자인 구현
- Tailwind CSS를 활용해 모바일을 포함한 다양한 디바이스에서 최적화된 반응형 디자인 구현
-
배포 환경 최적화
- Vercel을 활용해 서버리스 API와 정적 페이지를 안정적으로 배포하고, CI/CD 파이프라인을 통한 자동 배포 환경 구성