저희는 비대칭 화면에서도 12열 그리드를 지웁니다. 대신 요소가 차지하는 열의 수를 고르게 나누지 않습니다. 본문 7열, 이미지 4열, 사이 1열. 혹은 제목 5열, 빈 공간 2열, 본문 5열. 숫자는 들쭉날쭉해도 모든 끝선이 열의 경계에 붙어 있습니다.
눈은 대칭보다 «맞아떨어지는 선»을 먼저 알아봅니다.
세로로도 기준을 하나 둡니다. 본문 첫 줄의 높이를 기준선으로 잡고, 옆 칸의 이미지 윗변이나 캡션 첫 줄을 거기에 맞춥니다. 가로로는 엇갈려 있어도 세로 한 줄이 맞으면 화면 전체가 묶여 보입니다.
좁은 화면에서는 비대칭을 열로 표현할 수 없습니다. 이때는 여백의 크기를 다르게 두어 같은 리듬을 이어 갑니다. 큰 여백 하나, 작은 여백 둘. 데스크톱의 엇갈림이 세로의 간격으로 옮겨 갑니다.
]]>본문 서체 후보는 처음부터 작은 크기로 봅니다. 인쇄라면 9에서 10포인트, 웹이라면 15에서 16픽셀. 이 크기에서 「ㅎ」과 「ㅇ」, 「ㅁ」과 「ㅂ」이 한눈에 구분되는지 확인합니다.
한 줄짜리 견본으로는 알 수 없습니다. 실제 원고 세 문단을 넣고 줄 간격을 잡아 읽어 봅니다. 글자 사이가 고르지 않은 서체는 문단이 길어질수록 얼룩처럼 보입니다.
본문 서체는 눈에 띄지 않을 때 가장 잘 일하고 있는 것입니다.
본문에는 보통, 중간, 굵게 세 단계가 필요합니다. 강조, 소제목, 캡션에 쓰기 위해서입니다. 단계가 둘뿐인 서체는 결국 다른 서체를 섞게 되고, 그때부터 화면이 산만해집니다.
잡지는 두 쪽을 한 번에 봅니다. 화면은 위에서 아래로 한 줄씩 지나갑니다. 왼쪽 쪽의 사진과 오른쪽 쪽의 글이 만들던 긴장은 웹에서 위아래 순서로 바뀌어야 합니다. 저희는 펼침면 대신 «장면»을 단위로 생각합니다.
인쇄에서 흔한 3단 본문은 웹에서 쓰지 않습니다. 한 단이 끝나면 위로 다시 올라가야 하기 때문입니다. 본문은 한 단, 한 줄에 35자에서 45자 사이로 둡니다. 편집의 느낌은 단 대신 여백과 캡션, 인용의 크기로 냅니다.
화면에서의 편집은 배치보다 순서를 설계하는 일입니다.
큰 숫자로 시작하는 목차, 본문보다 작고 단단한 캡션, 페이지를 넘기듯 크게 바뀌는 섹션 배경. 이 세 가지는 화면에서도 잘 작동합니다. 흉내 내는 대신 화면에 맞게 옮겨 오는 것들입니다.
]]>지금은 말투 기준을 A4 한 장에 담습니다. 담당자가 바뀌어도 첫날 읽고 바로 쓸 수 있는 분량입니다.
「친근하지만 가볍지 않게」 같은 설명은 사람마다 다르게 읽힙니다. 대신 «이렇게 쓰지 않고, 이렇게 씁니다»를 세 쌍 보여 주면 바로 알아듣습니다. 공지문 하나, 고객 응대 하나, SNS 문구 하나로 고릅니다.
말투는 설명보다 예시 한 쌍이 더 정확하게 전합니다.
문서를 넘기고 석 달 뒤에 실제로 쓰인 글을 받아 봅니다. 예시와 다르게 쓰인 곳이 있으면 그 문장을 네 번째 예시로 더합니다. 그렇게 한 장이 조금씩 그 브랜드의 것이 됩니다.
]]>사람은 목차를 읽지 않고 훑습니다. 훑을 때 눈은 가장 큰 것, 가장 짧은 것에 먼저 멈춥니다. 두 자리 숫자는 짧고 크게 쓰기 좋습니다. 숫자에 먼저 멈추고, 바로 옆 제목을 읽습니다.
목차에서 사람들은 읽기보다 고릅니다.
번호가 제목보다 굵으면 번호만 보입니다. 크기는 키우되 굵기를 한 단계 낮추면 번호와 제목이 함께 읽힙니다.
본문 서체의 숫자가 크게 썼을 때 어색하면 숫자만 다른 서체를 씁니다. 한글 서체에 딸린 숫자는 작은 크기에 맞춰 그려진 경우가 많아, 크게 키우면 획의 균형이 무너집니다.
]]>