제가 zero-dependency 포트폴리오 템플릿을 만들었습니다 — 배운 점

Source: Dev.to

왜 제로‑디펜던시 템플릿인가?

• 디자이너 친화적 – JSX도, 컴포넌트도, 상태 관리도 없습니다. 브라우저에서 바로 열 수 있는 순수 HTML 파일만 있습니다.
• 빌드 단계 없음 – 파일을 수정하고 브라우저를 새로 고침하면 됩니다.
• 미래 보장 – 폐기된 패키지도, 깨지는 업데이트도, npm audit 경고도 없습니다.
• 작은 용량 – 전체 템플릿이 300 KB (JavaScript 번들만이 아니라 전체).
• 이중 언어 지원 – 러시아어와 영어를 언어 전환기로 제공, 두 언어에 쉽게 적용 가능.
• 다크 모드 – 토글 버튼 + 시스템 선호도 자동 적용, localStorage에 저장.
• 케이스‑스터디 레이아웃 – 번호 매긴 섹션, 통계 그리드, 줌 기능이 있는 이미지 라이트박스, 이전/다음 네비게이션.
• 터미널 이스터 에그 – ~ 키를 눌러 디자인 명언이 나오는 비밀 터미널을 열 수 있습니다.
• 디자인‑시스템 오버레이 – Shift+G를 눌러 12‑컬럼 그리드를 확인할 수 있습니다.
• 한 번의 명령어 설정 – ./setup.sh가 이름을 물어보고, 파비콘을 생성하고, 모든 플레이스홀더를 교체합니다.
• SEO 준비 – Open Graph, JSON‑LD, sitemap, canonical 태그, hreflang 포함.
• 접근성 – ARIA, 키보드 네비게이션, focus-visible, reduced‑motion 지원.

빠른 시작

git clone https://github.com/diyoriko/portfolio-template.git my-portfolio
cd my-portfolio
./setup.sh

스크립트가 다음을 물어봅니다:

• 이름
• 도메인
• 이메일
• 소셜 링크

그 후에 수행되는 작업:

1. 모든 곳에 있는 “Jane Smith” 플레이스홀더를 교체합니다.
2. 초기 문자로 SVG 파비콘을 생성합니다.
3. CNAME, sitemap, config.json을 업데이트합니다.

설정이 끝나면 변경 사항을 커밋하고 GitHub Pages에 푸시합니다.

다크‑모드 아키텍처

처음엔 prefers-color-scheme만 사용했지만, 사용자는 수동 토글을 원한다는 것을 금방 깨달았습니다. 최종 해결책은 두 시스템을 결합한 형태입니다:

/* 자동 모드 */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    /* 다크 테마 변수 */
  }
}

/* 수동 토글 */
html.dark {
  /* 다크 테마 변수 */
}

교훈: CSS가 중복됩니다. 다음에는 처음부터 CSS layers나 단일 클래스 기반 접근 방식을 사용했을 것입니다.

하드코딩된 색상 처리

첫 번째 시도에서는 경계선과 그림자에 rgba(0, 0, 0, 0.08)을 여기저기 흩뿌렸습니다. 다크 모드에서는 이 값이 보이지 않아 CSS 커스텀 프로퍼티로 교체했습니다:

:root {
  --border-color: rgba(0, 0, 0, 0.08);
}

/* 다크 모드 오버라이드 */
html.dark {
  --border-color: rgba(255, 255, 255, 0.12);
}

교훈: “당연한” 값이라도 첫 날부터 변수를 정의하세요.

데모 및 리소스

• 실시간 데모: diyor.design (동일한 코드로 구축)
• GitHub 저장소: – 포크, 클론, 혹은 “Use this template” 버튼 사용
• 원클릭 배포: GitHub 템플릿을 이용해 GitHub Pages에 바로 배포 가능

라이선스

템플릿은 MIT License 하에 배포됩니다. 이를 활용해 무언가를 만들면, 여러분의 작업을 보고 싶어요!