자신을 소개하고 진행해 온 프로젝트들을 깔끔하게 보여주기 위한 개인 포트폴리오 사이트를 기획하고 개발하는 과정은 언제나 흥미롭습니다.
이번 개발 프로젝트의 핵심 키워드는 **‘빠른 로딩 속도’**와 **‘미니멀한 디자인’**이었습니다.
왜 Vite와 Tailwind CSS인가? #
- Vite: 기존의 Webpack 기반 빌드 도구보다 현저히 빠른 HMR(Hot Module Replacement) 속도를 제공하여 개발 경험을 극대화합니다.
- Tailwind CSS: 유틸리티 클래스 위주의 스타일링 방식으로 별도의 CSS 파일을 열지 않고 마크다운 구조 안에서 직관적이고 일관된 레이아웃 작업이 가능합니다.
디자인 시스템 기획 #
- 컬러 팰럿: 눈의 피로를 덜어주는 슬레이트 그레이(Slate Gray)와 부드러운 화이트 톤을 메인으로 사용하고, 포인트 컬러로는 은은한 파스텔 블루를 적용했습니다.
- 반응형 웹: 모바일 화면에서도 1열 레이아웃으로 가독성이 유지되도록 미디어 쿼리를 세밀하게 설계했습니다.
구체적인 소스코드와 컴포넌트 구조는 깃허브 오픈소스로 공개할 예정입니다.