본문으로 건너뛰기
포트폴리오 목록으로

웹사이트콘셉트 데모

SPAN — 도시·건축 에디토리얼 계간지

책등(Spine) 내비게이션·연대 오도미터 스크럽·도면 루페를 갖춘 디지털 매거진 플랫폼

직접 써보기 이 사례를 참고해 문의하기

14개 호 · 3개 에디토리얼 뷰계간 아카이브

누구를 위해
긴 호흡의 아티클과 아카이브 도판을 출판물 수준의 타이포그래피·인터랙션으로 전달하려는 미디어·건축·문화 기관
무엇이 문제였나
장문의 건축 비평과 고해상도 도판·각주가 많은 계간지를 일반적인 블로그 레이아웃으로 옮기면 독서 호흡과 맥락이 무너졌습니다.
무엇을 했나
화면 좌측에 상주하는 책등(Spine) 내비게이션과 목차 드로어, 1968–1995 연대 오도미터 스크롤 씬, 도면 확대 루페, 각주 하이라이트를 갖춘 3개 에디토리얼 뷰를 구축했습니다.
무엇이 달라지나
방문자가 표지·목차(Home)에서 특집 아티클(Article)과 과월호 색인(Archive)까지 6분할 블라인드 트랜지션으로 이동하며 출판물 수준의 디지털 독서 경험을 체험할 수 있습니다.
SPAN — 도시·건축 에디토리얼 계간지 체험 화면
가상 브랜드로 만든 체험 화면입니다. 실제 고객 사례가 아닙니다.

어떻게 움직이나

한 건의 일이 처음부터 끝까지 어떻게 흘러가는지 순서대로 보여드립니다.

인쇄 계간지 한 권의 목차·연대기·장문 비평을 웹에서 읽고 탐색하기까지

예시 입력발행 호수 SPAN Issue №14 (p.1–96)탐색 범위 1968–1995 도시·건축 도판 & 각주

재생을 누르거나 단계를 눌러 순서대로 살펴보세요.

직접 써보기

가상 브랜드로 만든 데모입니다. 주문·예약·상담은 실제로 전송되지 않습니다.

이렇게 해보세요

  1. 상단 스위처에서 01 표지 · 02 특집 아티클 · 03 아카이브 3개 화면을 전환해보세요
  2. 01 표지 화면을 아래로 스크롤하면 1968년부터 1995년까지 연도 숫자가 회전하며 시대별 건축 도판이 전환됩니다
  3. 화면 좌측 책등(Spine)의 목차 버튼을 누르면 Issue №14 전체 챕터 드로어가 열립니다
체험 가이드 1개 더 보기
  • 02 특집 아티클에서 본문 각주와 도판 시퀀스를 확인하고 03 아카이브에서 과월호 이슈를 탐색해보세요

화면 크기를 바꿔 PC와 모바일에서 같은 흐름을 확인할 수 있습니다.

https://example.com
SPAN01 표지 · Issue №14 목차

연대 스크럽(1968–1995) · 도면 확대 루페 · 책등(Spine) 내비게이션

만든 범위

종이 잡지의 지면 비례(Warm Paper #ebe7dd · Ink #191917 · Rust #c83e2b)와 전용 모션 엔진(motion-span.js)으로 설계한 디지털 매거진 웹사이트입니다. 좌측 책등(Spine) 바에서 현재 페이지의 폴리오(p.1–96, p.12–33)와 읽기 진행률을 실시간으로 보여주고, 연대기 스크롤 스크럽(1968→1995 오도미터), 마우스 루페 도판 확대, 아티클 본문 각주 연동, 과월호(No.01–14) 아카이브 필터링을 제공합니다.

구현한 기능

  • 좌측 책등(Spine) 내비게이션 & 목차 드로어현재 읽고 있는 폴리오 번호와 스크롤 진행률을 책등에 표시하고 언제든 전체 목차(Index) 드로어를 호출
  • 1968–1995 연대 오도미터 스티키 스크럽스크롤에 따라 연도 숫자가 회전하며 시대별 도시·건축 아카이브 도판과 해설이 순차 전환되는 인터랙티브 씬
  • 건축 도면 루페(Loupe) 커서 & 6분할 블라인드 전환도판 위에 마우스를 올리면 배율 루페가 활성화되고 페이지 이동 시 6개 수직 블라인드가 순차 개폐
  • 각주 인터랙션 아티클 & 과월호(No.01–14) 아카이브본문 각주 번호와 사이드 노트가 연동되는 장문 아티클 뷰어 및 14개 과월호 이슈 검색·필터 제공

사용한 기술

Custom Editorial Motion (motion-span.js) · Spine & Folio Navigation · Odometer Scroll Scrub · React 18 / DC Runtime · Editorial Grid Typography

확인된 사실

페이지 구성
Home(표지·목차) · Article · Archive
시그니처 모션
6분할 블라인드 전환 · 연대 오도미터
독서 인터랙션
좌측 책등(Spine) 목차 · 각주 하이라이트
도판 탐색
건축 도면 루페 확대 · 이슈별 색인

데모의 구현 범위입니다. 실제 고객 성과가 아니며, 브랜드와 인물은 체험을 위해 만든 가상 콘셉트입니다.