정보를 정확히 정렬해도 어느 항목이 한 그룹인지, 스위치가 어디에 영향을 주는지 모를 수 있다. 구성은 위치와 관계를 함께 설명해야 한다.
공통 시작점과 행 높이에서 출발해 설정 화면과 작업 패널로 묶음, 설명 위치와 강조 순서를 살펴본다. 공간이 설명의 일부를 맡게 하는 방법이다.
이 글은 원문을 재구성하고 확장했다. 표본의 수치는 해당 조건의 값이며 모든 화면에 적용하는 규격이 아니다. 시리즈의 맥락과 도구는 다음 글에서 확인할 수 있다: 총론.
정렬과 행 높이
정보를 같은 시작점에 맞추기
간격의 리듬(spacing rhythm)은 반복되는 관계에서 나온다. 도해의 행 높이는 64 px, 아이콘과 글자 사이는 12 px, 패널 안쪽 여백은 24 px다. 이름과 설명, 구분선이 글자 시작점을 공유하고 아이콘은 자기 영역에 남는다. 열 머리글은 내용 묶음 전체의 시작점에 맞춰 열의 범위를 설명한다.
묶음 안은 가깝게, 묶음 사이는 여유 있게
같은 시작점은 내용을 정돈하고 근접성(proximity)은 관계를 드러낸다. 여기서는 두 내비게이션의 글자와 행 높이, 묶음 안의 8 px 간격을 유지하고 묶음 사이만 8 px에서 24 px로 늘렸다. Workspace와 Personal의 구분이 더 쉽게 읽힌다.
24 px는 이 콘텐츠 묶음의 쉼이며 모든 내비게이션에 그대로 넣을 필요는 없다. 작업 공간이 촘촘해도 묶음은 알아볼 수 있어야 한다. 구분선을 넣는다면 콘텐츠의 시작점을 따라 배치한다. 나는 간격으로 관계를 먼저 설명하고 어디에 선이 더 필요한지 결정한다.
한 줄에 놓인 요소의 리듬 맞추기
텍스트 줄은 24 px인데 옆의 아바타, 배지, 조작 요소는 더 높을 수 있다. 아바타와 썸네일은 자체 크기를 가지며, 버튼, 체크박스, 라디오, 스위치, 입력 필드, 선택 상자에는 안쪽 여백이나 최소 조작 영역이 있다. 먼저 어떤 요소가 행 높이를 정하는지 확인한다.
나는 레이아웃이 차지하는 범위, 보이는 범위, 조작 범위를 나누어 본다. 윤곽선, 그림자, 포커스 표시는 바깥에 그려져도 행을 높이지 않을 수 있지만, 실제 border, padding과 요소 크기는 배치에 참여한다. 기준선 정렬과 시각적 정렬은 서로 다른 판단이며, 수직 리듬은 연속된 행 사이의 관계를 말한다.
이 예에서는 위아래 −6 px margin으로 36 px 조작 요소가 flex 행에 기여하는 높이를 24 px로 줄인다. 요소와 클릭 영역은 36 px 그대로다. 음수 margin 보정은 구현을 설명하고, bleed는 주변 여백으로 제어하며 확장하는 관계를 뜻한다. Radix의 ghost button도 padding을 상쇄하는 비슷한 처리를 사용한다.
값은 요소와 주변 공간에 맞춰야 한다. 행의 역할과 밀도, 요소 크기, 여백과 정렬을 확인한 뒤 보정을 판단한다. 큰 이미지, 두 줄 문구, 큰 터치 영역이 필요하면 행 높이나 배치를 바꾼다. 이동만 적용하면 원래 차지하던 높이가 남으며, 확장된 조작 영역이 이웃 행을 가려서도 안 된다.
표 셀과 문장 안의 줄 상자 따로 보기
표에서는 조작 셀의 padding을 조절할 수 있다. 24 px 텍스트 줄에 위아래 8 px를 더하면 40 px 행이다. 같은 여백에 36 px 조작 요소를 넣으면 52 px가 된다. 조작 셀의 위아래 여백만 2 px로 줄이면 요소를 축소하지 않고 40 px로 돌아온다.
기본 HTML 표는 셀 내용과 정렬을 행 높이 계산에 포함한다. tr 높이를 지정해도 더 큰 내용이 줄어들지는 않는다. 조작 요소의 margin만 빼면 기준선과 줄 상자의 여유가 남을 수 있어 flex 계산을 그대로 적용할 수 없다.
문장 안 이미지와 아이콘은 기준선 아래에 디센더 공간을 남길 수 있다. 문장의 일부가 아닌 이미지는 독립 영역에서 block으로 배치하고, 실제 인라인 요소는 기준선을 확인한다. code, 위 첨자, 기본 조작 요소도 글꼴이나 줄 높이 기본값이 다르다. vertical-align: middle은 주변 글꼴의 기준선과 x-height를 사용하므로 행 전체의 기하학적 중심과 같지는 않다.
글자와 행 높이 연구 페이지에서 다섯 언어, 명암, 너비와 글자 크기를 바꾸고 각 요소를 조작할 수 있다. 문법 지원, 실제 측정과 시각적 판단을 구분하며, 글자나 조작 영역에 공간이 더 필요하면 행도 늘어난다.
관계를 드러내는 구성
경계는 의미 있는 한 그룹을 감싼다
모든 입력란을 각각 카드에 넣으면 정돈되어 보이지만 관계까지 설명하지는 못한다. 이 비교는 입력란과 순서를 고정한 채 오른쪽에서 알림 설정을 하나의 영역으로 묶고 계정 정보는 분리한다. 경계가 그룹을 나타낸다.
나는 제목과 간격으로 먼저 정리한 뒤 배경이나 외곽선이 필요한지 판단한다. 같은 패널에 있다고 함께 저장되는 것은 아니다. 저장 범위가 다르면 버튼과 설명으로 알려 주어야 하며, 동작이 경계가 암시한 관계와 어긋나서는 안 된다.
설명은 대상 가까이에 둔다
오류가 폼 맨 위에만 있으면 독자는 메시지를 기억한 채 해당 입력란을 찾아야 한다. 여기서는 같은 이메일 형식 오류의 위치만 바꾼다. 전체 폼 위에 두거나 이메일 입력란 바로 뒤에 둔다.
가까운 피드백은 개별 문제를 설명한다. 긴 폼에는 상단의 오류 요약과 이동 링크도 유용하다. 시각적 근접성뿐 아니라 프로그램에서도 입력란과 설명을 연결해야 한다. W3C 폼 알림 지침은 전체 요약과 입력란 주변 피드백을 함께 다룬다.
중요한 정보를 먼저 찾게 한다
제목, 상태, 시각과 모든 버튼이 같은 무게를 가지면 독자가 읽는 순서를 직접 정해야 한다. 두 검토 패널은 내용과 위치가 같고, 오른쪽만 대기 상태와 주요 작업을 강조한다.
페이지 전체에 강조점을 하나만 두기보다 현재 작업에 맞게 무게를 배분한다. 부차적인 글자도 읽을 수 있어야 한다. 오류, 비용, 되돌릴 수 없는 작업의 결과는 주요 제목이 아니어도 명확하게 보여야 한다.
컨트롤을 영향을 받는 내용 가까이에 둔다
스위치를 오른쪽 위에 모으면 깔끔하지만 어떤 알림을 바꾸는지 모호해질 수 있다. 그림은 이름과 개수를 유지하면서 오른쪽에서 이메일과 데스크톱 알림 스위치를 각각 해당 행으로 옮긴다.
위치는 대응을 돕고 레이블은 효과를 설명한다. 작업 공간 전체에 영향을 주면 그 계층에 놓고 범위를 명시한다. 좁은 화면에서도 컨트롤은 자신의 콘텐츠와 함께 이동해야 한다.
세부 사항을 접어도 선택은 남긴다
고급 옵션을 항상 펼칠 필요는 없지만 접었을 때 적용된 설정까지 숨겨서는 안 된다. 이 알림 설정은 빈도를 기본 화면에 남기고, 펼치면 방해 금지 시간을 조정하며, 접으면 선택한 시간을 요약한다. 필수 조건과 오류도 계속 표시한다.
가끔 쓰는 조정은 분명한 이름의 두 번째 층에 둔다. 매번 펼쳐야 한다면 구분을 다시 살펴야 한다. 점진적 공개는 화면을 가장 짧게 만드는 방법이 아니라 필요에 따라 정보를 배치하는 방법이다.
무엇을 함께 읽고, 어떤 조작이 어디에 영향을 주며, 지금 무엇을 처리해야 하는지 배치에서 드러나기를 바란다. 간격과 영역, 강조로 그 관계를 먼저 설명하면 접기도 단순히 페이지를 줄이는 대신 읽기를 도울 수 있다.