LANDING SAMPLES
2026년 웹에서 실제로 쓰이는 랜딩 스타일을 서른세 장 만들었습니다. 제1전시실은 다섯 개의 축에 양극을 걸었고, 제2전시실은 게임·박물관·쇼핑·기술 실험 네 관입니다.
샘플 33 전시실 2 HTML 한 장씩 외부 의존 웹폰트와 three.js 제품은 전부 가상
트렌드 기사를 열 개쯤 모으면 결국 같은 얼굴 하나가 남습니다. 검은 바탕, 거대한 이탤릭 세리프, 어긋난 격자, 채도 높은 강조색 하나, 절제된 스크롤 모션, 유리판. 지금 모두가 그걸 처방하고 있으니 지금 가장 흔해질 얼굴이기도 합니다.
그래서 평균을 열 번 반복하는 대신, 축을 다섯 개 세우고 양 끝만 골랐습니다. 브라우저를 갈아 넣는 쪽과 자바스크립트를 한 줄도 안 쓰는 쪽. 액체 금속과 찢어 붙인 종이. 경보와 호흡. 한 화면에 문장 하나와 화면을 가득 채운 숫자. 고정폭 격자와 2001년 개인 홈페이지.
양쪽 모두 지금 실제로 쓰이는 방향입니다. 한쪽이 진짜고 다른 쪽이 농담인 구성이 아닙니다. 가운데 칸에 두 페이지가 실제로 갈라지는 지점을 수치로 적어 뒀습니다.
축 01
브라우저에 얼마나 일을 시킬 것인가. 2026년에는 무거운 3D와 저탄소 텍스트 웹이 나란히 유행합니다.
축 02
화면이 무엇으로 만들어졌다고 말하는가. 매끄러운 인공 재질과, 사람 손이 지나간 자국이 서로를 밀어냅니다.
03인공
LIQUID CHROME / GLASS
셰이더로 흘러내리는 액체 금속 위에 유리판을 얹은 이어버드 페이지. 색을 고르면 금속의 색조가 실제로 바뀝니다.
열기 →
04아날로그
ZINE / RISO COLLAGE
찢어 붙인 종이와 리소 2도 인쇄로 짠 인디 레이블 지면. 종이결도 찢긴 자국도 전부 코드로 그렸습니다.
열기 →
축 03
사람의 맥박을 어느 쪽으로 미는가. 같은 화면 기술로 몰아붙일 수도, 가라앉힐 수도 있습니다.
05공격
GLITCH / DATAMOSH
경보등 아래서 밀리초를 다투는 리듬 게임. 판정선에 오는 노트를 실제로 쳐 보면 오차가 ms 단위로 나옵니다.
열기 →
06진정
FRUTIGER AERO REVIVAL
물방울이 같이 숨을 쉬는 호흡 앱. 4초 들이마시고 7초 멈추고 8초 내쉬는 타이머가 진짜로 돕니다.
열기 →
축 04
한 화면에 몇 개를 담는가. 여백으로 값을 말하는 쪽과, 숫자를 쌓아 신뢰를 만드는 쪽.
07최소
ANECHOIC · EDITORIAL
향수 한 병만 파는 브랜드. 한 화면에 문장 하나만 두고, 스크롤을 따라 단어가 순서대로 들어옵니다.
열기 →
08최대
BENTO / CONSOLE
숫자로 화면을 채우는 에이전트 런타임. 이 장르가 AI 슬롭의 본진이라, 지문을 피하는 게 절반의 과제였습니다.
열기 →
축 05
같은 옛 컴퓨터를 어떻게 기억하는가. 둘 다 2026년의 실제 흐름입니다 — 코드 브루탈리즘과 스몰웹 부활.
09규율
TECHNICAL MONO / CLI
앰버 인광 터미널로 만든 배포 도구 페이지. 히어로의 터미널에 직접 명령을 쳐 볼 수 있습니다.
열기 →
10난장
WEB REVIVAL / SMALL WEB
2001년 개인 홈페이지가 돌아왔습니다. 88×31 배너와 방문자 카운터, 그리고 실제로 글이 남는 방명록.
열기 →
제2전시실
여긴 대립이 아니라 장르입니다. 게임처럼 굴러가는 것, 박물관과 아카이브, 물건을 파는 곳, 그리고 기법 자체가 주제인 실험 — 네 관에 스무 장, 그리고 특별 전시 세 장. 카드마다 무엇으로 만들었는지 적어 뒀습니다.
셋 다 "끊기지 않는 것"이 주제입니다. 진짜 영상으로 한 장, 영상 없이 영상처럼 한 장, 일곱 사람을 한 편으로 한 장.
32끊기지 않는 스크롤
일곱 인물이 하나의 무대에서 이어져 흐릅니다. 섹션이 끊기지 않고, 인물과 인물 사이에는 두 그림이 같은 자리에서 겹치는 구간이 있습니다. 배경색은 스크롤 내내 한 번도 멈추지 않고 — 어두운 방에서 흰빛·은빛·금빛·붉은빛을 지나 밤으로 — 옮겨 갑니다.
무대 하나 + <img> 두 장 교대 · 매 프레임 배경 RGB 보간 · 경계 크로스디졸브
열기 →
33스크롤 = 재생 헤드
바로 아래 「심층」이 사진 열네 장으로 영상 흉내를 냈다면, 이 장은 진짜 mp4 한 개를 스크롤에 물려 프레임 단위로 감습니다. 화면 아래에 편집실 타임라인(컷 세그먼트·재생 헤드·타임코드)을 얹어 두었으니 두 장을 나란히 열어 비교해 보세요. 영상은 이 사이트를 만들면서 로컬에서 생성한 것입니다.
h264 mp4 스크럽 · 0.25초 키프레임 · lerp 추종 · Range 미지원이면 정지 모드로 하강
열기 →
31프레임 스크러빙
스크롤이 곧 하강입니다. 도로 건너편에서 시작해 파사드·유리문·로비·계단을 지나 지하 4층 아카이브까지 한 번에 빨려 들어갑니다. mp4 한 조각 없이, 이어 붙인 사진 14장을 스크롤 진행도에 물려 만들었습니다.
--ref 체인 생성 프레임 14장 · scale 전진 + 크로스디졸브 · sticky 무대(스크롤재킹 없음)
열기 →
2026년 어워드 사이트의 문법은 조이스틱이 아니라 스크롤이 카메라입니다. 여기에 진짜 플레이되는 미니게임 둘을 더했습니다.
11스크롤=카메라
스크롤을 내리면 프로시저럴 능선 위를 경로 따라 활공하는 패러글라이딩 투어.
three.js r185 · fBm 지형 · CatmullRom 비행 경로
열기 →
12여섯 개의 방
방 여섯 개를 스크롤로 지나는 기계식 시계 쇼룸. 바늘은 실제 시각으로 돕니다.
three.js · PMREM 환경광 · 프로시저럴 시계
열기 →
13진짜 게임
히어로가 곧 벽돌깨기입니다. 깨면 쿠폰 조각이 나오고 기록이 남습니다.
canvas 2D · 고정 스텝 물리 · localStorage 기록
열기 →
14사전등록
누적 등록이 한 칸씩 여는 보상 사다리, 그리고 확률표를 공개한 체험 뽑기.
CSS 3D 카드 플립 · 캔버스 파티클 · 마일스톤 레일
열기 →
15부팅 시퀀스
화면 전체를 네 가지 색 망점으로 그리는 인디 게임 발표. 디더를 껐다 켤 수 있습니다.
three.js · 스크린스페이스 Bayer 디더 · 4색 양자화
열기 →
16HD-2D
방향키로 마을을 걸어 다니고, NPC에게 말을 걸면 그 섹션으로 갑니다.
canvas 2D 타일맵 · 절차 생성 스프라이트 · 빛 레이어
열기 →
2026년 박물관 사이트의 공통점은 절제된 모션과 소장품이 곧 허브인 구조입니다. 개관 상태를 첫 화면에 박아 두는 것도요.
17소장품 기록
타자기 한 점의 기록이 곧 박물관 입구입니다. 확대한 영역을 링크로 인용할 수 있습니다.
transform 딥줌 · 배율별 원본 교체 · #view 해시 인용
열기 →
18로그인 없음
계정 없이 소장품을 담고, 링크 하나로 그 상자를 건넵니다.
clip-path 피프홀 마스크 · localStorage · #box= 공유
열기 →
19걸어서 관람
전시실을 직접 걸어 다니며 회화 여덟 점을 봅니다. 2D 목록도 함께 있습니다.
three.js 실내 씬 · CanvasTexture 마루 · 스포트라이트
열기 →
20스크롤=시간
여섯 시대 여섯 표본. 스크러버를 끌면 페이지가 그 시대로 갑니다.
CSS 스크롤 연동 마스크 줌 · 스크러버 양방향 동기화
열기 →
21계절 팔레트
한지 결과 오방색으로 짠 야간 개방 안내. 계절을 바꾸면 지면 전체가 바뀝니다.
feTurbulence 한지 · mask 교차 · 세로쓰기 표제
열기 →
2026년에 구식으로 지목된 것: 선착순 드롭, 정적 이미지만 있는 상품 페이지, 밖으로 링크를 던지는 영상. 그 대안들입니다.
22라플 대기실
정각에 있었느냐로 순서를 정합니다. 카운트다운 → 대기번호 → 내 차례가 실제로 돌아갑니다.
5상태 머신 · 상태 추종 하단 바 · aria-live 안내
열기 →
233D 컨피규레이터
원단·다리·팔걸이·폭을 3D로 바꾸고, 그 조합을 링크로 남깁니다.
three.js 프로시저럴 의자 · 캔버스 노멀맵 · URL 해시 조합
열기 →
24퀴즈 퍼널
손목 안쪽 색 하나로 시작하는 네 문항. 결과는 이유까지 문장으로 나옵니다.
가중치 매칭 · canvas 결과 카드 · 스티키 장바구니
열기 →
25세 면 스티키
밤 11시에 담으면 새벽 5시 문 앞에. 마감까지 남은 시간이 실제로 줄어듭니다.
상·하·우 스티키 바 · ResizeObserver 높이 동기 · 실시간 합계
열기 →
26움직이는 광원
커서를 따라 금속 위 빛이 움직입니다. 반지 호수는 둘레를 넣으면 계산됩니다.
screen 블렌드 광원 · @property 보간 · SVG textPath 각인
열기 →
여기서는 기법이 곧 주제입니다. 넷 다 어려운 아이디어 하나만 붙들고 끝까지 밀었습니다.
27무한 캔버스
끝없이 이어지는 벽을 끌어서 봅니다. 같은 자리로 돌아오면 같은 사진이 있습니다.
시드 결정적 청크 · LRU 32칸 · 관성 lerp
열기 →
28분해도
스크롤하면 키보드 한 대가 아홉 겹으로 벌어졌다가 다시 조립됩니다.
three.js 9층 · InstancedMesh 키캡 60 · project() 라벨
열기 →
29글리프 양자화
3D 장면을 셰이더 안에서 5×7 비트 글자로 바꿔 내보냅니다. 송출 방식은 네 가지.
저해상도 렌더타깃 · 셰이더 내 비트 패턴 · Bayer 디더
열기 →
30타입 파티클
글자를 픽셀로 읽어 4만 6천 개 점으로 흩뜨립니다. 무너지도록 설계한 서체 견본.
canvas 알파 샘플링 · three.js Points 46,000 · 가변 폰트 축
열기 →
축 01은 말로만 하는 대립이 아닙니다. 제1전시실 열 장을 바이트로 세우면 이렇게 됩니다 — 가장 가벼운 장이 가장 무거운 장의 13%입니다. 웹폰트와 three.js는 뺀 HTML 자체 크기입니다. (제2전시실은 생성한 사진을 쓰는 장이 많아 같은 자로 재면 뜻이 흐려집니다.)
three.min.js가 사라져서 그 주소는 404입니다 — importmap + 모듈 빌드로 불러야 합니다.animation-timeline)은 2026년 9월에도 Baseline이 아닙니다. Firefox가 아직 플래그 뒤에 있어서 @supports 없이 쓰면 글이 안 보입니다.backdrop-filter에 먹이는 진짜 유리 굴절은 Chromium 전용입니다. 리퀴드 글래스를 그렇게만 만들면 사파리에서 사라집니다.subgrid와 컨테이너 쿼리는 이제 안심하고 씁니다. 벤토 격자가 2026년에 쉬워진 이유입니다.opacity:0 + translateY(20px) 페이드인