TYPE
바닐라 JavaScript로 구현한 인터랙티브 타이포그래피 소개 웹사이트
HTML, CSS, JavaScript로 개발한 타이포그래피 소개 웹사이트입니다. 서체의 역사, 자간·행간, 크기와 무게, 폰트 소개, 서체 디자이너 등 5개 페이지로 콘텐츠를 구성했으며, 라이트/다크 모드 전환 시 배경 영상이 함께 전환되는 인터랙티브 환경을 구현했습니다. sessionStorage를 활용해 페이지 이동 간 다크 모드 상태를 유지하고, 인라인 스크립트로 렌더링 전 다크 모드를 선적용하여 플리커 현상을 방지했습니다. 자간·행간 슬라이더와 실시간 폰트 타이핑 체험 기능을 통해 사용자가 타이포그래피 개념을 직접 조작하며 탐색할 수 있도록 했으며, 851px 브레이크포인트를 기준으로 반응형 레이아웃과 토글 네비게이션을 적용했습니다.
상세 내용
인터랙티브한 인터페이스의 구현
- 각 페이지별로 분리된 JavaScript 모듈 구조로 코드 가독성과 유지보수성을 확보했습니다. global.js에서 공통 기능(다크모드, 네비게이션)을 관리하고 각 페이지별 개별 스크립트로 기능을 분리하여 관심사를 명확히 구분했습니다.
- const, let, arrow function, template literal 등 ES6+ 문법을 적극 활용하여 모던 JavaScript를 구현했습니다.
CSS Variables 기반 라이트/다크 모드 전환 시스템
•CSS 커스텀 속성(--primary-color, --secondary-color)을 활용한 동적 테마 전환을 구현했습니다.
sessionStorage로 사용자 테마 설정을 저장하여 페이지 새로고침 시에도 상태가 유지되도록 했으며, FOUC(Flash of Unstyled Content) 방지를 위해 DOM 로드 전 스크립트에서 테마를 사전 적용하여 사용자 경험을 최적화했습니다. 또한 CSS transition을 활용하여 부드러운 테마 전환 애니메이션을 적용했습니다.
실시간 DOM 조작 및 이벤트 처리
•addEventListener와 oninput 이벤트를 활용하여 실시간으로 스타일 속성을 변경하는 기능을 구현했습니다. range input과 select box의 값 변경 시 즉시 DOM style 속성을 업데이트하며 정규식을 활용한 입력 값 검증 및 필터링 로직을 구현했습니다.
CSS3 애니메이션 및 반응형 구현
•CSS transform과 perspective를 활용한 카드 플립 애니메이션을 구현했으며, keyframes를 이용한 타이핑 효과와 슬라이드 인/아웃 애니메이션을 제작했습니다.
Flexbox와 CSS Grid를 활용하여 레이아웃을 구성했고, 480px부터 2560px까지 다양한 디바이스에 대응하도록 미디어 쿼리를 활용하여 반응형 웹을 구현했습니다.
웹 표준 및 성능 최적화
•시맨틱 HTML5 요소(header, nav, main, section, article)를 활용한 구조적 마크업을 구현했으며, ARIA 속성과 alt 태그를 통한 접근성을 개선했습니다.
CSS 정규화(normalize.css)와 reset을 통한 브라우저 호환성을 고려하였으며 웹폰트 preload를 통해 렌더링 성능을 개선했습니다. 배경 비디오 preload와 함께 초기 페이지 로딩 시 필요한 리소스를 미리 준비하여 사용자 경험을 최적화했습니다.