왜 필요한가

긴 목록을 탐색하면서 필터도 계속 써야 합니다. 조작부로 매번 스크롤을 되돌리면 탐색이 끊깁니다.

어떻게 해결하는가

여섯 레이아웃은 같은 자료 6개, 라벨, 색을 사용합니다. 주제 필터·수집 역순·연구 메모 펼침·미리보기 폭을 조절합니다. 내용은 그대로 두고 읽기 흐름을 비교하세요. 초기화·새로고침하면 전체 자료와 수집 순서로 돌아갑니다. 필터가 자료 목록 옆에 놓이고 안내는 목록 뒤에 이어집니다.

같은 자료 6개로 배치 비교
수집 자료 / 06

시각의 조각

같은 자료 6개를 살펴보며 배치에 따른 읽기 흐름을 비교하세요.

01

색 지도

도시 산책에서 모은 색상표입니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

02

종이 형태

접은 종이로 부피와 그림자를 살핍니다. 아침과 저녁 빛에서 가장자리를 비교합니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

03

도시 리듬

거리를 따라 창문이 반복됩니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

04

고요한 기하

단순한 형태 사이에 여백을 둡니다. 원, 삼각형, 선이 한 페이지를 나눕니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

05

글자 연구

글자 형태, 내부 공간, 간격을 비교합니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

06

빛 기록

따뜻한 빛과 차가운 빛이 같은 표면을 바꿉니다. 다음 연구를 위해 관찰 옆에 기록을 남깁니다.

연구 메모

형태, 간격, 대비를 비교합니다. 다음 초안 곁에 자료를 두고 세부를 다시 살펴보세요.

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

무엇이라 부르는가

2열 — 나란한 두 영역이 필터와 자료를 나눕니다.

사이드바가 읽기 폭을 줄이므로 비좁아지기 전에 세로 배치로 바꾸세요.

W3C