메이슨리 대 벤토 그리드
메이슨리는 서로 다른 높이의 카드를 열에 채웁니다. 벤토 그리드는 계획된 카드 크기를 사용하여 가장 중요한 것을 보여줍니다.
높이가 다른 여러 개별 항목에는 메이슨리를 사용하세요. 크기가 중요도를 보여주는 소규모 집합에는 벤토 그리드를 사용하세요.
각 패턴이 무엇을 하는지 확인하세요
각 예제를 시도해 보세요. 그런 다음 그것이 수행하려는 작업에 대해 읽어보세요.
메이슨리 레이아웃
Masonry 레이아웃은 높이가 다른 항목들을 기둥에 빈틈없이 채워 넣어요. 줄을 맞추지 않고 세워지는 빈 공간을 채우죠.
영감 보드는 길고 넓은 카드들을 빈 공간 없이 균형 잡힌 단으로 맞춰요.
- 사용할 때
- 엄격한 행별 비교가 중요하지 않을 때 사진 탐색에 사용하세요.
- 다음 경우에는 사용하지 마세요
- 근원 순서, 키보드 순서, 또는 예상되는 읽기 경로가 헷갈릴 때는 피하세요.
- 코드에서 사용된 이름
columns / masonry
벤토 그리드
벤토 그리드는 크기가 다른 타일들을 하나의 레이아웃으로 쏙쏙 묶어요. 더 넓은 공간을 차지하는 타일이 가장 중요한 내용이라는 걸 보여주죠.
제품 소개 화면은 실시간 차트에 큰 칸을 내어줘요. 덜 중요한 숫자들은 더 작은 칸에 들어가요.
- 사용할 때
- 콘텐츠에 진짜 중요도 순서가 있을 때 사용하세요. 레이아웃이 그 순서를 보여주도록 하세요.
- 다음 경우에는 사용하지 마세요
- 타일을 무작위로 배치하지 마세요. 읽기 순서를 깨뜨리거나 의미 없는 스타일만 추가할 수 있습니다.
- 코드에서 사용된 이름
grid-column: span n
빠른 비교
| UI 패턴 | 이런 경우에 가장 좋아요 | 대상 아님 | 코드에서 사용된 이름 |
|---|---|---|---|
| 메이슨리 레이아웃Masonry Layout | 엄격한 행별 비교가 중요하지 않을 때 사진 탐색에 사용하세요. | 근원 순서, 키보드 순서, 또는 예상되는 읽기 경로가 헷갈릴 때는 피하세요. | columns / masonry |
| 벤토 그리드Bento Grid | 콘텐츠에 진짜 중요도 순서가 있을 때 사용하세요. 레이아웃이 그 순서를 보여주도록 하세요. | 타일을 무작위로 배치하지 마세요. 읽기 순서를 깨뜨리거나 의미 없는 스타일만 추가할 수 있습니다. | grid-column: span n |
출시하기 전에
- 01
그 사람이 해야 할 일을 적으세요.
- 02
키보드, 포커스, 터치, 확대/축소, 로딩, 비어 있음, 오류 상태를 테스트하세요.
- 03
사람들이 마우스 오버나 동작 없이 동일한 정보를 얻을 수 있도록 하세요.
- 04
작은 화면과 큰 화면에서 실제 콘텐츠로 테스트하세요.
비교 요청 복사 가능
팀이 패턴 사이에서 선택하는 데 도움이 필요할 때 이것을 복사하세요.
실제 사용자 흐름에 가장 적합한 패턴을 메이슨리 레이아웃 (Masonry Layout)、벤토 그리드 (Bento Grid)에서 선택하세요. 이 규칙 사용: 메이슨리는 서로 다른 높이의 카드를 열에 채웁니다. 벤토 그리드는 계획된 카드 크기를 사용하여 가장 중요한 것을 보여줍니다. 작업, 콘텐츠 양, 흐름 중단 비용을 기록하세요. 키보드, 터치, 로딩, 오류, 축소 동작을 확인하세요. 선택 이유를 설명한 후 프로젝트 디자인 시스템으로 가장 작은 접근 가능한 버전을 만드세요.