Project Detail
( 05 )
mesel7 Dev Portfolio
기존 React SPA·Firebase 기반으로 제작했던 개인 포트폴리오를 Next.js, TypeScript, Tailwind CSS 기반으로 전면 리뉴얼한 프로젝트입니다. 전체 구조를 개선하고 UI/UX를 재정비하여, 프로젝트·경험·기술 스택을 더 직관적이고 일관된 방식으로 전달할 수 있도록 구성했습니다.
이 프로젝트의 주요 기능, 구조, 스크린샷 등은 GitHub를 통해 확인하실 수 있으며 프로젝트 링크에서 실제 서비스를 체험해보실 수 있습니다.
본 페이지에서는 개발 배경과 문제 해결 과정, 배운 점을 중심으로 정리하였습니다.
Motive
처음 제작했던 React 기반 포트폴리오는 구조적 한계와 확장성 부족 문제가 있었기에, 향후 프로젝트와 기술 스택을 전문적으로 보여줄 수 있도록 전면 리뉴얼을 기획했습니다. 레이아웃 구조를 기반으로 색상 팔레트, 인터랙션, 컴포넌트 구성 등을 직접 재설계해, 저만의 디자인 톤과 브랜드 감성을 담았습니다.
Problem Solving
기존 React SPA 구조를 Next.js App Router 기반으로 마이그레이션하여 라우팅 구조, SEO, 성능을 대폭 개선했습니다. JavaScript로 작성된 코드를 TypeScript로 전환하며 타입 안정성을 확보했고, CSS 기반 스타일링을 Tailwind CSS 체계로 재구성하여 스타일 일관성을 높였습니다. 정적 데이터는 JSON 파일로 관리해 서버 호출 없이 빠르게 렌더링되도록 구성했고, 국제화(i18n) 적용을 위해 언어별 리소스를 ko.json·ja.json으로 분리했습니다. 반응형 디자인은 모바일·PC 전용 레이아웃을 분리하여 자연스럽게 전환되도록 구현했고, UI는 심플한 화이트 기반 레이아웃에 네온·그라데이션 포인트를 적용해 정보성과 개성을 균형 있게 전달했습니다.
Learned
Next.js·TypeScript 기반으로 포트폴리오를 재구축하면서 기술 선택과 구조 설계의 중요성을 다시 확인했습니다. 국제화(i18n) 적용, Tailwind CSS 스타일 시스템 구성, 타입 기반 컴포넌트 설계 등 실서비스 수준의 구조적 고민을 경험했습니다. 또한 단순한 기능 구현을 넘어 UI·브랜딩·가독성까지 고려하는 것이 포트폴리오 완성도에 큰 영향을 준다는 점을 체감하며, 개발자로서의 정체성을 시각적으로 표현하는 경험을 쌓을 수 있었습니다.