글자를 올바른 상자에 넣는 것만으로 배치가 완성되지는 않는다. 실제 글자 면, 숫자 폭과 아이콘 무게가 행 전체의 안정감에 영향을 준다.
줄바꿈과 바뀌는 수치부터 다룬 뒤 글자 형태, 혼합 조판, 아이콘을 살펴본다. 아래 수치는 고정된 표본의 값이며 글꼴, 언어, 내용이 바뀌면 다시 판단해야 한다.
이 글은 원문을 재구성하고 확장했다. 표본의 수치는 해당 조건의 값이며 모든 화면에 적용하는 규격이 아니다. 시리즈의 맥락과 도구는 다음 글에서 확인할 수 있다: 총론.
줄바꿈과 수치
줄바꿈도 구성에 참여시키기
제목의 마지막 줄에 아주 짧은 단어만 남으면 아래 여백이 한쪽으로 기울기 쉽다. 균형 줄바꿈(balanced wrapping)은 주어진 폭 안에서 글자를 재배치해 각 줄의 무게를 가깝게 만든다. 이 비교는 줄 너비 220 px, 문구, 글자 크기와 자간을 고정하고 줄바꿈 방식만 바꾼다.
짧은 설명은 줄마다 같은 무게를 줄 필요가 없다. 자연스러운 길이 차이는 두면서 마지막 줄만 지나치게 짧지 않은지 보겠다. 다듬은 줄바꿈(pretty wrapping)은 브라우저가 줄바꿈 위치를 다시 정할 여지를 준다. 다음 비교도 문구와 줄 너비를 고정한다.
이 선택들은 실제 문구와 함께 봐야 한다. 제목에는 의미상 멈춤이 있고 짧은 글에도 읽기 좋은 폭이 있다. 영어 단어와 번체 중국어 문장부호는 줄을 나눌 수 있는 조건이 다르며 브라우저 결과도 달라질 수 있다. 나는 컨테이너가 합리적으로 늘고 줄 공간부터 마련하고, 좁은 화면과 긴 번역문을 확인한 뒤 balance나 pretty를 쓸지 결정한다.
숫자가 갱신돼도 각 자리는 안정적으로
타이머가 11:11에서 08:08로 바뀔 때 글리프 폭이 다르면 숫자열 전체의 무게가 달라진다. 고정폭 숫자(tabular figures)는 각 숫자가 같은 폭을 차지하게 한다. 갱신되는 값과 카운터, 훑어봐야 하는 숫자 열에 어울린다.
주된 숫자는 양쪽 모두 같은 크기의 Geist로 같은 내용을 표시한다. 바꾸는 것은 비례폭 숫자와 고정폭 숫자 기능뿐이다. 작은 표시는 별도의 고정폭 글꼴이며 이 숫자 폭 비교에는 참여하지 않는다.
자릿수가 늘어날 공간도 미리 마련하기
각 숫자가 고정폭이어도 문자열 전체가 길어지는 문제는 남는다. 9에서 99, 다시 100이 되면 글자가 늘어난다. 아래 양쪽 모두 고정폭 숫자를 켠 상태다. 오른쪽은 세 자리 폭을 추가로 확보하고 오른쪽 정렬해 뒤의 설명이 같은 자리에서 시작하게 한다.
세 자리 폭은 이 카운터의 예상 범위다. 천 단위 구분 기호나 음수 부호, 더 큰 값이 들어오면 공간을 다시 마련해야 한다. 날짜와 카운트다운, 백분율도 각각 가장 긴 형식이 있다. 나는 숫자가 확보한 범위 안에서 변하고 주변 글자와 조작은 안정적으로 남게 한다.
금액을 소수점에 맞춰 정렬하기
한 열의 금액을 빠르게 비교하려면 표시 정밀도와 숫자 폭, 정렬 방향을 함께 정해야 한다. 이 도해는 음수를 포함하고 소수점 이하 두 자리와 고정폭 숫자를 고정한 뒤 금액의 정렬 방향만 바꾼다. 오른쪽으로 맞추면 소수점과 일의 자리도 같은 선에 놓인다.
단위는 별도의 가벼운 열에 두고 금액과 일정한 거리를 유지한다. 여기서 소수점이 맞는 것은 표시 정밀도가 같기 때문이다. 같은 열에서 소수 자릿수를 섞어야 한다면 정수부와 소수부를 다시 나누어 배치해야 한다. 음수 부호도 숫자 안에 남겨야 하며 정렬을 위해 생략하면 안 된다. 고정폭 숫자는 출발점이다. 실제 글꼴의 커닝도 배열에 영향을 줄 수 있으므로, 나는 설정을 켰는지만 보지 않고 같은 양수와 음수로 확인한다.
글자 면과 아이콘
중앙에 놓은 뒤, 보이는 형태를 보기
광학적 중앙 정렬(optical centering)은 보이는 형태의 무게를 다룬다. 오른쪽을 가리키는 삼각형은 면적이 왼쪽에 치우쳐 있어 외접 상자를 중앙에 놓아도 왼쪽으로 보일 수 있다. 여기서는 버튼을 고정하고 같은 도형을 오른쪽으로 1 px만 옮겼다. 이 값은 도해의 삼각형에 해당하며 다른 아이콘은 다시 봐야 한다.
글자 상자를 맞춘 뒤, 글자의 높이 보기
텍스트의 레이아웃 범위에는 글꼴이 위아래에 남기는 공간이 포함되며 보이는 글자는 그중 일부만 차지한다. Flex 레이아웃으로 버튼의 중앙에 놓아도 글자가 조금 높거나 낮아 보일 수 있다. 도해는 같은 Save, 같은 글꼴과 줄 높이를 사용한다. 왼쪽은 글자 상자를 유지하고 오른쪽은 대문자 높이와 기준선을 따라 위아래를 다듬은 다음 같은 높이의 버튼에 넣었다.
텍스트 박스 트리밍(text-box trimming)은 이 공간을 글꼴의 경계에 맞춰 다룬다. 도해의 가는 모서리 표시와 중심선은 차이를 보기 위한 것이다. 실제 선택에서는 글자의 어센더와 디센더, 옆 아이콘까지 확인해야 한다. 번체 중국어와 가나, 한글은 각 글꼴의 보이는 글자에 맞춰 다시 판단해야 한다. 영어의 cap/baseline 값으로 모든 언어의 광학 정렬을 대신할 수는 없다. 트리밍을 지원하지 않는 환경에서는 원래의 글자 상자 레이아웃을 유지한다.
글자틀과 실제 글자 모양을 함께 보기
같은 24 px라도 한자, 가나, 한글, 로마자의 크기가 다르게 보일 수 있다. 글자 크기는 글자틀을 기준으로 하고, 실제로 보이는 자면은 그 일부를 차지한다. 서체, 굵기, 실제 문자열에 따라 비율과 위치도 달라진다. 아이콘이 옆에 있다면 두 상자의 중심뿐 아니라 보이는 모양을 함께 살펴본다.
언어 지정과 대체 글꼴 순서도 먼저 정해야 한다. 중국어, 일본어, 한국어에는 각 지역에 맞는 글리프가 필요하고, 하나의 혼합 문자열을 여러 글꼴이 나누어 그릴 수도 있다. CSS의 family 이름만으로 모든 글자의 실제 글꼴을 확인할 수는 없다. W3C 중국어 조판 요구사항도 지역 차이와 자면을 설명한다.
앞의 cap／alphabetic 다듬기는 해당 영문 레이블을 설명한 예다. CJK에서는 ideographic 경계도 살펴볼 수 있지만 실제 글꼴 정보와 브라우저 지원을 확인해야 한다. 로마자, 숫자, 위 첨자가 섞이면 함께 판단하고, 지원하지 않는 환경에는 기본 글자틀 배치를 남긴다.
간격, 문장 부호, 줄바꿈을 함께 판단하기
빈 공간에도 서로 다른 원인이 있다. 자간은 글자 사이의 거리를, 문자 체계 사이 간격은 한자·가나와 로마자·숫자의 경계를, 문장 부호 여백은 부호 자체의 공간을 다룬다. 문단 전체의 자간을 줄이는 것만으로 이 관계들을 각각 조정할 수는 없다.
text-autospace는 원문을 바꾸지 않고 배치 단계에서 간격을 넣는다. 적용하기 전에 기존 공백도 확인해야 한다. text-spacing-trim은 일부 CJK 부호의 내부 여백을 다루며, 글자틀의 위아래를 다듬는 text-box와는 역할이 다르다. 각 속성의 지원을 따로 확인하고, 한국어의 띄어쓰기는 그 언어의 관습에 따라 판단한다. CSS Text에 각 기능이 정의되어 있다.
좁은 화면에서는 실제 제목, 설명, 긴 번역문부터 확인한다. 중국어 예에서는 InterfaceCraft를 한 단어로 보존하고, 일본어는 작은 가나의 금칙을, 한국어는 음절 단위와 어절 단위 줄바꿈을 비교한다. 본문 행간, 짧은 레이블, 여러 줄 제목도 따로 판단한다. 글자를 확대하면 컨테이너가 늘어나도록 해야 한다.
아이콘 쪽 여백은 보이는 무게에 맞춰
글자에 화살표를 더하면 화살표 주위의 빈 공간도 묶음 전체의 무게에 영향을 준다. 여기서는 글자와 도형, 사이 간격과 위아래 안쪽 여백을 고정하고 아이콘 쪽 가로 안쪽 여백만 16 px에서 14 px로 줄여 조금 더 긴밀하게 묶었다.
2 px는 이 화살표와 문구의 조정량이다. 채워진 아이콘이나 다른 글꼴을 쓰거나 아이콘을 글자 앞에 놓으면 전체 형태를 다시 봐야 한다. 아이콘이 자기 캔버스 안에서 이미 치우쳤다면 원본 도형을 먼저 바로잡아 버튼에 추가하는 보정을 줄일 수 있다.
작은 아이콘의 선폭은 다시 판단하기
획의 굵기(stroke weight)도 아이콘 크기와 함께 줄이기만 해서는 안 된다. 이 14 px 폴더는 왼쪽에서 24 px 원본의 1.5 px 선을 같은 비율인 0.875 px로 줄였고, 오른쪽에서는 1.25 px로 조정했다. 도형 크기는 그대로 두고 최종 획만 바꾼 것이다.
나는 실제 크기에서 선 끝과 모서리, 내부 여백, 옆 글자를 함께 본다. 이 아이콘에 필요한 무게가 더 복잡한 다른 형태에도 맞는 것은 아니다.
작은 레이블에도 고유한 자간을
모두 대문자인 영어 레이블은 숫자나 제목 가까이에 놓이는 경우가 많다. 글자들이 붙으면 작은 글자가 무거운 한 덩어리로 보일 수 있다. 자간(tracking)을 조금 넓히면 분명한 리듬을 유지하는 데 도움이 된다.
이 시편은 10 px, 굵기 500, 같은 대문자 레이블을 고정하고 자간 0과 0.05 em만 비교한다. 아래 내용과 레이블 사이 간격을 비롯한 나머지는 그대로다.
나는 글자 크기와 굵기, 문구 길이를 함께 본다. 이 대문자 레이블은 약간의 숨 쉴 공간이 어울리지만 번체 중국어의 작은 제목과 일반 본문은 보이는 밀도가 다르다. 역할마다 알맞은 무게가 필요하고 전체 텍스트 위계는 여전히 단순해야 한다.
나는 값이 갱신되고 언어가 바뀌고 글자가 커진 뒤 행 전체를 다시 본다. 올바른 글자 상자, 안정적인 글자면, 정보의 정렬은 서로 다른 확인 사항이다. 실제 내용에서도 성립할 때 미세 조정에 의미가 생긴다.