외곽에 패널을 넣거나 트랙에 선택 조각을 끼울 때, 몇 픽셀의 틈에서 정교함이 드러난다. 모서리에서도 간격이 이어지는지, 글자에는 별도의 여백이 있는지 나누어 측정한다.
컨테이너의 거리와 곡선부터 살펴본 뒤 분할 컨트롤, 이음선, 진행 트랙으로 범위를 좁힌다. 판단 방식은 공유해도 수치는 각 콘텐츠에 맞춰야 한다.
이 글은 원문을 재구성하고 확장했다. 표본의 수치는 해당 조건의 값이며 모든 화면에 적용하는 규격이 아니다. 시리즈의 맥락과 도구는 다음 글에서 확인할 수 있다: 총론.
감싸는 간격과 모서리
좁은 틈과 콘텐츠 여백은 따로 재기
감싸는 구조에는 두 종류의 안쪽 여백(padding)이 있다. 외곽 셸에서 패널까지의 좁은 틈과 패널에서 콘텐츠까지의 여백이다. 여기서는 각각 8 px와 24 px다. 앞의 값은 이음새의 긴밀함을 정하고, 뒤의 값은 제목과 정보 행을 여유 있게 배치한다.
바깥 ring은 레이아웃 공간을 차지하지 않는다. 패널은 그대로 8 px의 안쪽 여백에 놓이고, 0.5 px ring이 바깥쪽 틈으로 그려진다. 따라서 직선 부분에 실제로 드러나는 셸은 약 7.5 px다. 콘텐츠의 24 px는 패널 표면 경계에서 재며, 물리적 테두리 한 겹을 다시 빼지 않는다.
모서리도 같은 간격을 따라가기
이 등간격 예시의 중첩 반지름(nested radii)은 R24, 8 px 안쪽 여백, R16이다. 두 표면의 원 중심이 같아 틈이 모서리를 돌아갈 때도 연속성을 유지한다. 이 뺄셈 관계는 도해처럼 등간격이고 물리적 테두리가 없는 기하에 한정된다. 모든 컨테이너의 고정 공식으로 삼을 필요는 없다.
패널이 바깥으로 0.5 px ring을 그리면 그려진 바깥 가장자리의 반지름은 R16.5다. 표면 자체는 여전히 R16이며 콘텐츠도 원래 표면 경계에서 시작한다. 레이아웃을 재는지 실제 그려지는 범위를 보는지, 어느 가장자리를 다루는지 구분해야 한다.
휘어지는 정도도 직선과 이어지게
반지름은 모서리가 차지하는 크기를 정한다. 접점에는 다른 문제도 있다. 직선에서 곡선으로 들어갈 때 휘어지는 정도가 어떻게 바뀌는가다. 원호는 직선과 접선 연속성(tangent continuity)을 이룰 수 있어 방향은 이어진다. 하지만 직선의 곡률은 0이고 원호에 들어서는 순간 일정한 휘어짐으로 바뀐다.
곡률 연속성(curvature continuity)은 이 변화까지 다룬다. 오른쪽의 3차 베지어 곡선은 접점에서 곡률을 0으로 내려 휘어지는 정도가 직선으로 이어지게 한다. 양쪽의 외접 크기, 채움, 선과 32 px 모서리 범위는 고정했다. 관찰하는 것은 모서리 곡선뿐이다.
양쪽에서 32 px가 뜻하는 바는 다르다. 왼쪽은 R32 원호지만 오른쪽은 곡선이 어디서 휘기 시작하는지만 나타낸다. 하나의 원 중심이나 고정 반지름은 없다. 오른쪽은 이 시편의 단순화된 베지어 모델이다. 중첩 컨테이너에 쓸 때는 안팎 곡선 사이의 좁은 틈을 다시 확인해야 하며, 원 반지름의 뺄셈 관계를 그대로 쓸 수 없다.
나는 전체 윤곽 안에서 다시 본다. 오른쪽은 접점이 연속적이지만 휘어짐이 더 집중돼 원호보다 각진 모양이다. 어울리는지는 비례와 여백, 이웃 요소를 함께 봐야 한다. 여기서는 접점을 해체해 설명하는 데 쓰고, 마지막 전체 작업 공간에는 원래의 원호 모서리를 유지했다.
안에 들어가는 부품
트랙과 선택 면을 함께 보기
분할 선택 컨트롤(segmented control)의 트랙은 끊김 없이 유지하고, 흰 선택 면은 자신의 ring과 짧은 그림자로 현재 위치를 가리킨다. 이 시편은 트랙에 아주 연한 안쪽 그림자만 주었다. 흰 면은 표면 글의 윤곽과 두 층의 깊이를 이어 쓰고 안쪽 빛은 더하지 않았다.
트랙은 R14, 안쪽 여백 4 px, 선택 면은 R10이다. 큰 패널과 마찬가지로 4 px는 레이아웃 거리다. 0.5 px ring이 바깥으로 그려지면 직선 부분에 드러나는 회색 바탕은 약 3.5 px다. 나는 부품이 끼워진 느낌을 좋아하지만 선택 면을 높이 띄울 필요는 없다.
같은 조작 묶음에는 이음새 하나만
공유 이음새(shared seam)는 날짜와 화살표를 하나의 외형으로 감싸고 내부에는 1 px 구분선 하나만 둔다. 독립된 두 윤곽이 맞닿는 부분에서 겹쳐 짙어지지 않게 한다. 선은 틀의 위아래에서 각각 8 px 물리고 끝을 조금 둥글게 했다. 조작 영역을 나누는 선이므로 외곽까지 닿을 필요는 없다.
진행 트랙에도 감싸는 구조를
얕게 들어간 트랙(recessed track)은 같은 관계를 작게 줄인다. 높이 6 px, R3의 바깥 트랙에 1 px 안쪽 여백을 두고 높이 4 px, R2의 채움을 넣었다. 75%는 안쪽 여백을 뺀 사용 가능한 너비를 기준으로 계산하며 끝 주변에도 바탕색 한 겹을 남긴다.
여기서는 트랙의 안쪽 위 가장자리에 짧고 어두운 그림자만 남기고 채움의 위 가장자리에는 아주 약한 재질의 밝기를 두었다. 몇 픽셀짜리 부품에 국한된 역할이므로 모든 불투명 패널의 흰 안쪽 빛으로 확장하지 않는다.
컨테이너와 부품은 거리, 곡률, 내용의 여백이 함께 맞을 때 자연스럽게 이어진다. 수치를 가져오기 전에 눈에 보이는 틈부터 살피고, 문자와 조작 범위, 다른 크기에서도 확인한다. 기하학적 통일을 위해 내용을 비좁게 만들어서는 안 된다.