도시락처럼 칸을 나눠 담는 화면

1. 칸칸이 나뉜 도시락에서 온 레이아웃

일본식 도시락 벤토는 네모난 상자 안에 밥, 반찬, 디저트를 크기가 다른 칸에 나눠 담습니다. 서로 섞이지 않고, 한눈에 무엇이 들었는지 보이죠. 요즘 웹사이트에서 자주 보이는 벤토 그리드가 바로 이 모양을 닮은 레이아웃입니다. 크기가 제각각인 카드들을 하나의 격자 안에 빈틈없이 채워 넣는 방식인데, 애플이 신제품을 발표하면서 주요 기능을 한 장에 정리해 보여주는 슬라이드에 이 구성을 즐겨 쓰면서 널리 퍼졌습니다. 이제는 서비스 소개 페이지마다 한 번쯤은 보일 만큼 흔해졌고, 벤토 레이아웃만 모아 둔 사이트가 따로 있을 정도입니다.

2. 크기로 말하는 정보의 위계

벤토 그리드가 잘 먹히는 이유는 크기만으로 중요도를 말할 수 있기 때문입니다. 가장 큰 칸에 핵심 기능을, 작은 칸에 부가 기능을 넣으면 사용자는 글을 다 읽지 않아도 무엇이 중요한지 압니다. 긴 목록을 위에서 아래로 읽어 내려가는 대신 화면 전체를 한 번에 훑어보게 되죠. 칸마다 짧은 문장과 이미지 하나씩만 담다 보니 군더더기도 자연스럽게 줄어듭니다. 기능이 많은 제품일수록 효과가 커서, 하고 싶은 말이 너무 많은 랜딩 페이지에게는 꽤 고마운 형식입니다. 화면이 좁아지면 칸을 한 줄로 세우면 되니 반응형으로 옮기기도 비교적 수월한 편이고요.

3. 모두가 같은 도시락을 싸기 시작했을 때

문제는 너무 흔해졌다는 겁니다. 둥근 모서리의 카드, 옅은 회색 배경, 칸마다 들어간 아이콘과 짧은 문구. 서로 다른 회사의 사이트인데 로고만 가리면 구분이 안 되는 경우가 많아졌습니다. 모바일에서는 그 장점도 많이 사라집니다. 데스크톱에서 크기로 만들었던 위계가 한 줄로 쌓이는 순간, 비슷비슷한 카드가 길게 늘어선 목록이 되어 버리거든요. 칸을 채우려고 굳이 필요 없는 기능을 끼워 넣는 일도 생깁니다. 벤토는 내용이 칸에 맞게 나뉠 때 제 몫을 하는 형식인데, 형식에 맞추려고 내용을 쪼개기 시작하면 순서가 뒤집힌 겁니다.

4. 세컨드펭귄의 시선: 칸을 나누기 전에 이야기를 먼저 정합니다

우리는 레이아웃을 고를 때 요즘 무엇이 유행인지보다 이 내용이 어떤 순서로 읽혀야 하는지를 먼저 묻습니다. 여러 기능을 동등하게 보여줘야 한다면 벤토가 잘 맞지만, 하나의 이야기를 차례로 들려줘야 한다면 넓은 여백과 긴 호흡의 스크롤이 나을 수 있습니다. 같은 12칸 그리드 위에서도 어디를 비우고 어디를 채우느냐에 따라 브랜드의 성격이 전혀 다르게 보입니다. 레이아웃 작업은 어떤 이야기를 어떤 순서로 할지 적어 보는 데서 시작합니다.