Zero-dependency, 300KB의 극강 효율 Vanilla JS 포트폴리오 설계

Context

React나 Next.js 기반 템플릿의 복잡한 빌드 프로세스 및 의존성 문제. 디자이너가 터미널 조작 없이 직접 수정하기 어려운 개발 환경. 프레임워크 업데이트로 인한 코드 노후화 및 유지보수 비용 증가.

Technical Solution

• 외부 라이브러리 없이 HTML, CSS, JavaScript만 사용하는 Vanilla JS 아키텍처 설계
• 빌드 단계 제거를 통한 파일 수정 후 즉각적인 브라우저 반영 구조
• CSS Custom Properties를 활용한 다크 모드 및 테마 색상 관리 체계
• localStorage 기반의 사용자 테마 설정 저장 및 시스템 설정 자동 연동 로직
• shell script 기반의 자동화 도구로 사용자 정보 치환 및 Favicon 생성 프로세스 구현
• JSON-LD, Open Graph 등 SEO 표준 메타데이터 적용 및 ARIA 기반 접근성 설계

Impact

• 전체 템플릿 용량 300KB 달성

Key Takeaway

• 초기 설계 단계부터 CSS 변수를 도입하여 테마 확장성과 유지보수성을 확보하는 전략의 중요성. 과도한 프레임워크 의존성 제거를 통한 장기적 생존 가능성 및 배포 단순화 실현.