정렬이 안 맞으면, 잠을 못 잡니다.

신입 때, 제가 만든 화면을 본 팀장이 자를 대듯 손가락을 화면에 가져갔습니다. “이 제목하고 이 본문, 왼쪽이 3px 다르네.” 저는 안 보였습니다. 그런데 그 말을 듣고 맞추는 순간, 같은 화면이 갑자기 ‘정돈된’ 화면으로 바뀌었습니다. 그날 이후로 저는 레이아웃을 ‘요소를 예쁘게 놓는 일’이 아니라 ‘보이지 않는 격자를 깔고 그 위에 줄 세우는 일’로 봅니다. 그래서 정렬이 한 군데 어긋난 화면을 두고는 잠이 안 옵니다.

좋은 레이아웃엔 왜 격자가 필요할까요?

요소를 그때그때 ‘눈대중’으로 놓으면, 각 요소의 왼쪽 끝이 조금씩 다 다릅니다. 사용자는 1px을 콕 집어내진 못해도 ‘왠지 어수선하다’고 느낍니다. 격자는 모든 요소가 공유하는 공통 기준선입니다. 제목도, 본문도, 버튼도 같은 세로선에 맞으면 화면에 리듬이 생기고, 그 리듬이 ‘이 회사는 꼼꼼하다’는 인상으로 이어집니다.

그래서, 격자를 직접 켜보세요

설명보다 빠릅니다. 아래 ‘격자 보기’를 누르면 평소엔 숨어 있는 정렬 기준선이 드러납니다. 그리고 너비 슬라이더를 왼쪽으로 당기면, 화면이 좁아질 때 어떻게 다시 배치되는지 직접 보입니다.

왜 하필 12컬럼일까요?

제가 가장 자주 쓰는 건 12컬럼 그리드입니다. 이유는 단순합니다. 12는 2로도, 3으로도, 4로도, 6으로도 나뉩니다. 그래서 한 격자 위에서 2단·3단·4단 배치를 다 만들 수 있습니다. 갤러리는 4단, 가격표는 3단, 본문+사이드는 8:4단 — 전부 같은 12컬럼 안에서 해결됩니다. 다만 컬럼 수 자체에 집착하지는 않습니다. 콘텐츠가 적은 페이지는 더 단순한 격자가 낫습니다. 중요한 건 ‘일관된 기준선’이지 ‘12’라는 숫자가 아닙니다.

제가 화면을 깔 때 머릿속에 늘 켜져 있는 그 ‘보이지 않는 격자’를, 잠깐 보이게 켜둔 모습입니다.

세로선 12개가 모든 요소의 공통 기준선입니다. 2·3·4·6단 배치가 전부 이 한 격자 위에서 나옵니다.

여백은 정말 ‘빈 공간’일까요?

가장 자주 받는 요청이 “여백이 아까우니 뭐라도 채워 달라”입니다. 그런데 여백은 비어 있는 게 아니라 위계를 만드는 도구입니다. 저는 요소 사이 간격을 8의 배수(8·16·24·32px)처럼 일정한 단위로만 둡니다. 간격이 제멋대로면 같은 격자를 써도 어수선해 보입니다. 그리고 가장 중요한 요소 주변에 여백을 더 주면, 시선이 자연히 그쪽으로 갑니다. 빽빽하게 채운 화면은 핵심을 오히려 묻습니다.

간격도 감으로 찍지 않습니다 — 이 8의 배수 사다리에서 고른 값만 씁니다.

간격이 8의 배수로 통일되면 같은 격자 위에서도 화면이 한층 정돈돼 보입니다.

화면을 보면 시선이 어디로 가야 할까요? — 시각적 위계

레이아웃의 진짜 일은 ‘무엇을 먼저 보게 할지’를 정하는 겁니다. 저는 크기·굵기·색·여백·위치 다섯 가지로 위계를 만듭니다. 한 화면의 ‘주인공’은 딱 하나. 그것만 확실히 크고 진하게 두고 나머지는 단계를 낮춥니다. 모든 것을 강조하면 아무것도 강조되지 않습니다. 위 위젯에서 ‘주요 콘텐츠’ 박스가 다른 박스보다 큰 것도 같은 이유입니다 — 시선의 첫 도착지를 정해둔 겁니다.

화면이 좁아지면 언제 1열로 무너뜨릴까요?

흔한 오해가 “모바일은 768px”처럼 숫자로 분기를 정하는 겁니다. 저는 기기가 아니라 콘텐츠가 깨지는 지점에서 바꿉니다. 컬럼이 좁아져 글줄이 두세 글자에서 어색하게 끊기거나 카드가 찌그러지기 시작하면, 거기가 분기점입니다. 그때 저는 우선순위가 높은 콘텐츠를 위로 올리고 한 열로 쌓습니다. 위 위젯에서 슬라이더를 왼쪽으로 당겨보면 사이드 박스가 주요 콘텐츠 아래로 내려가 한 줄로 쌓이는 게 바로 이 동작입니다.

레이아웃을 이렇게 보는 사람은 무엇을 다르게 할까요?

레이아웃은 모든 콘텐츠가 올라서는 ‘바닥’입니다. 바닥이 1px씩 어긋나 있으면 그 위에 아무리 좋은 글과 사진을 올려도 어수선해 보입니다. 격자를 깔고 정렬을 맞추고 여백을 단위로 다루는 사람은, 같은 태도로 페이지의 모든 요소를 정돈합니다. Findable에서는 이 격자가 기본값입니다. 당신의 사이트, 어떤 격자 위에 세워드릴까요?

항목	정렬 없는 화면	그리드 기반 레이아웃
가독성	기준선이 제각각 → 시선이 헤맴	공통 격자로 시선이 자연히 흐름
신뢰	‘왠지 어수선’ → 믿음이 덜 감	정렬된 리듬이 ‘꼼꼼하다’는 인상
반응형	좁아지면 찌그러지거나 깨짐	콘텐츠 우선순위대로 1열 재배치

다른 담당자와의 연결

레이아웃은 무대입니다. 혼자 완성되지 않습니다. 그 격자 위에 글자가 놓이는 방식은 타입(타이포그래피) 담당자가 정합니다 — 같은 기준선 위에서 행간과 글자 크기가 위계를 더합니다. 사용자가 그 무대 위에서 어디로 움직일지, 그 흐름은 UX가 설계합니다. 그리고 화면이 좁아질 때 그 무대를 어떻게 다시 짤지는 모바일 재배치와 한 호흡으로 갑니다. 좋은 화면은 이 네 사람이 같은 격자를 공유할 때 나옵니다.