목록으로 돌아가기
디지털 학술지 플랫폼
한국 타이포그래피 담론과 연구를 소개하는 디지털 학술지 플랫폼
타이포그래피 연구자, 디자이너, 학생에게 다양한 콘텐츠를 제공합니다.
1 / 6
담당 역할
기획디자인프론트엔드백엔드
기술 스택
Next.js 15
React 19
Tailwind CSS
jQuery
주요 기능
- 다중 볼륨 시스템: 각 호별 독립적인 레이아웃과 목차로 구성된 디지털 매거진
- 인터랙티브 이미지 갤러리: 클릭 시 전체 화면 오버레이로 확대, ESC 키 및 배경 클릭으로 닫기
- 다국어 텍스트 전환: 페이지 새로고침 없이 한국어/영어 콘텐츠 실시간 전환
- 스마트 목차 네비게이션: 섹션별 스크롤 앵커로 원하는 콘텐츠에 빠르게 접근
- 반응형 타이포그래피: 모바일부터 데스크톱까지 최적화된 한글 웹폰트 렌더링
수행 업무
- 커스텀 5-2 그리드 시스템: 본문(5)과 이미지(2) 비율의 반응형 레이아웃으로 학술 콘텐츠에 최적화된 가독성 제공
- 정적 콘텐츠 아키텍처: 데이터베이스 없이 JS 객체로 콘텐츠 관리, 빌드 타임 번들링으로 제로 레이턴시 로딩
- 커스텀 한글 웹폰트 최적화: 5종의 한글 폰트를 font-display: swap 전략으로 로드, FOIT 방지 및 렌더링 성능 확보
- 이미지 오버레이 훅: useExpandableImages 커스텀 훅으로 전역 상태 관리, 스크롤 잠금 및 키보드 접근성 구현
- 유동적 타이포그래피: CSS clamp() 함수로 뷰포트 기반 폰트 크기와 간격 자동 조절
- 경로 인식 네비게이션: 현재 URL 기반으로 볼륨별 헤더와 목차 자동 전환
#타이포그래피
#디지털 매거진
#학술지
#Next.js
#반응형 웹
#한글 웹폰트