비대칭은 규칙이 있을 때 편안합니다

회색 바탕 위에 흰 종이와 파란 종이 조각이 비대칭으로 놓인 모습

비대칭 레이아웃을 맡으면 처음엔 칸을 버리고 싶어집니다. 이미지를 조금 왼쪽으로, 제목을 조금 아래로. 그렇게 눈대중으로 옮긴 화면은 사흘 뒤에 다시 보면 어딘가 흔들려 보입니다.

12열은 그대로 둡니다

저희는 비대칭 화면에서도 12열 그리드를 지웁니다. 대신 요소가 차지하는 열의 수를 고르게 나누지 않습니다. 본문 7열, 이미지 4열, 사이 1열. 혹은 제목 5열, 빈 공간 2열, 본문 5열. 숫자는 들쭉날쭉해도 모든 끝선이 열의 경계에 붙어 있습니다.

본문 안인아티클 · 높이 가변

애드센스 광고 자리 - 승인을 받으시면 이 자리에 광고를 넣으실 수 있습니다. (실제 애드센스 광고입니다)

눈은 대칭보다 «맞아떨어지는 선»을 먼저 알아봅니다.

세로로도 기준을 하나 둡니다. 본문 첫 줄의 높이를 기준선으로 잡고, 옆 칸의 이미지 윗변이나 캡션 첫 줄을 거기에 맞춥니다. 가로로는 엇갈려 있어도 세로 한 줄이 맞으면 화면 전체가 묶여 보입니다.

좁은 화면에서는 비대칭을 열로 표현할 수 없습니다. 이때는 여백의 크기를 다르게 두어 같은 리듬을 이어 갑니다. 큰 여백 하나, 작은 여백 둘. 데스크톱의 엇갈림이 세로의 간격으로 옮겨 갑니다.

글 끝디스플레이 · 336×280 대역

애드센스 광고 자리 - 승인을 받으시면 이 자리에 광고를 넣으실 수 있습니다. (실제 애드센스 광고입니다)

이름을 짓고 형태를 정하는 과정, 만난 사람과 읽은 책을 기록합니다. 일하며 알게 된 것을 천천히 정리해 둡니다.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.