BOUNDS

어떻게 만들어졌나

원본은 디자인 교육 시리즈의 한 편으로 만든 원페이지 사이트입니다. Site of the Day와 함께 Developer Award를 받았습니다.

모든 블록을 1440 프레임 좌표에 놓고 100vw/1440 단위 하나로 잽니다. 로고 1400×215와 8칸 그리드는 원본 값 그대로입니다.

세로 카드, 가로 카드, 원판, 쐐기 같은 도형이 스크롤에 따라 다음 모양으로 이어집니다. GSAP과 Lenis를 쓰고 스크롤 연동은 직접 계산합니다.

Notes Mode는 노트 18개를, Daughter's Version은 크레용 낙서와 종이 질감을 켭니다. 마지막 놀이판은 Matter.js로 조각을 떨어뜨립니다.

문구는 전부 새로 썼고 사진은 25장으로 바꿨습니다. 아이 그림은 직접 그린 크레용 SVG입니다.

흐린 글자 #bfbfbf는 #767676으로 올리고 토글에 포커스 링을 넣었습니다. 767px 이하와 터치 기기에서는 시계와 안내만 나옵니다.

주요 기능

• 1440 프레임 좌표 원페이지
• 노트 모드 · 아이 그림 버전 토글
• 원판 · 다이얼 · 포스터 스크롤 연출
• Matter.js 놀이판 · 실시간 시계

어디에 어떻게 쓸 수 있나

강의·전시·캠페인처럼 주제 하나를 한 장에 보여 주는 특별 페이지에 맞습니다. 토글로 같은 화면에 설명 층과 놀이 층을 더합니다.

확인할 점

767px 이하와 터치 기기에서는 본문을 볼 수 없습니다. 메뉴·폼이 없는 원페이지라 정보를 찾는 사이트에는 맞지 않습니다.