카드 그리드는 시안에서 거의 언제나 잘 나옵니다. 여섯 장을 배치하고 각 장에 알맞은 길이의 제목과 잘 고른 그림을 넣으면 화면이 정돈되어 보입니다. 문제는 실제 콘텐츠가 40장 들어왔을 때 시작됩니다.
깨지는 순서가 대체로 정해져 있습니다. 종횡비, 카드 높이, 그리고 시각적 다양성입니다.
첫 번째 규칙은 종횡비이고, 가장 먼저 깨집니다
그리드 안의 썸네일 비율이 제각각이면 카드 UI 는 즉시 무너집니다. 사용자가 카드를 하나의 반복 단위로 인식하는 근거가 그 반복되는 형태이기 때문입니다. 한 장이라도 비율이 다르면 그 카드만 튀어 보이고, 여러 장이 다르면 그리드가 아니라 잡동사니가 됩니다.
비율이 어긋나는 경로는 대체로 콘텐츠 쪽입니다. 편집자가 가로 사진과 세로 사진을 섞어 올리거나, 어떤 글에는 대표 이미지가 없거나, 외부에서 가져온 항목의 이미지 규격이 다릅니다. 그래서 비율은 콘텐츠에 요구하지 말고 화면이 강제해야 합니다. 썸네일 자리에 고정 비율을 주고 그 안에서 이미지를 잘라 채우면, 어떤 원본이 들어와도 격자가 유지됩니다.
대표 이미지가 없는 항목의 처리도 미리 정해야 합니다. 빈 자리로 두면 그 카드만 높이가 달라지고, 회색 사각형을 넣으면 그리드에 구멍이 뚫린 것처럼 보입니다. 대체 도형을 코드로 그려 채우는 방법이 여기서 잘 듣습니다 — 파일이 필요 없고, 항목마다 다른 그림을 규칙적으로 만들 수 있습니다.
카드 높이는 가장 긴 내용이 정합니다
같은 행의 카드는 높이가 같아지므로, 한 장의 제목이 세 줄이 되면 그 행 전체가 세 줄 높이가 됩니다. 40장 중 한두 장은 반드시 제목이 깁니다.
대응은 두 갈래입니다. 제목의 줄 수 상한을 정해 넘치면 말줄임으로 처리하거나, 처음부터 길이 자체를 제한하는 것입니다. 둘 다 하는 편이 좋습니다 — 상한은 화면을 지키고, 길이 제한은 애초에 상한에 걸리는 항목을 줄입니다.
발췌도 같습니다. 본문에서 자동으로 뽑는 발췌는 길이가 들쭉날쭉하고, 문장 중간에서 잘리면 카드가 미완성처럼 보입니다. 가능하면 발췌를 따로 작성하는 편이 좋고, 자동 생성을 쓴다면 길이를 서버에서 통일합니다.
세 장이 한 장처럼 읽히는 문제
이것이 40장에서 두 번째로 드러나는 문제입니다. 카드를 같은 규칙으로 예쁘게 만들었는데, 막상 늘어놓으니 같은 계열의 카드 세 장이 한 덩어리로 읽혀서 개별 항목이 구분되지 않습니다.
원인은 대개 변형 축이 하나뿐인 데 있습니다. 예를 들어 분류마다 색을 하나씩 배정했다면, 같은 분류의 카드는 색이 완전히 같습니다. 그 카드들이 나란히 놓이는 순간 세 장이 하나의 색면처럼 보입니다.
해결은 축을 곱하는 것입니다. 색 하나에 배치 방향, 도형 위치, 밀도, 모티프를 각각 몇 가지씩 더하면 조합 수가 곱셈으로 늘어납니다. 축이 넷이고 각각 서너 개면 조합은 수십 가지가 되고, 같은 분류의 카드가 붙어 있어도 서로 다른 그림으로 보입니다.
여기서 중요한 것이 같은 항목은 언제나 같은 그림이어야 한다는 점입니다. 조합을 무작위로 고르면 새로고침마다 그림이 바뀌어 사용자가 위치를 기억하지 못합니다. 항목의 고유 번호처럼 변하지 않는 값으로 조합을 결정하면, 언제 어디서 그려도 같은 카드가 나옵니다.
열 수와 개수는 함께 정합니다
마지막으로 사소해 보이지만 화면 인상을 크게 좌우하는 것이 있습니다. 한 페이지에 몇 장을 보여 줄 것인가입니다. 열 수로 나누어떨어지지 않으면 마지막 행에 빈칸이 남습니다. 3열과 2열을 오가는 반응형 그리드라면 6의 배수가 양쪽에서 깔끔합니다.
대표 항목 하나를 크게 세우는 구성도 흔한데, 조건을 하나 붙이는 편이 좋습니다. 필터가 걸린 목록에서는 특정 항목을 크게 세우지 않는 것입니다. 사용자가 방금 조건을 지정했는데 우리가 고른 항목이 화면을 차지하면, 방문자의 선택보다 우리 판단이 앞서는 화면이 됩니다.
목록 · 아카이브 화면의 색인 정책은 SEO 아카이브에서 다루고, 화면 폭에 따라 열 수를 바꾸는 규칙은 반응형 연재에 정리돼 있습니다. 실제 사이트의 목록 화면을 점검받고 싶다면 최적화 지원 사업에 화면 진단이 포함됩니다.