Spacing and density

목적

Spacing은 관계를 설명하고 density는 작업 속도를 조절한다. Dot은 넓은 여백을 고급스럽게 보이기 위한 장식으로 사용하지 않으며, 많은 정보를 보여주기 위해 읽기와 조작을 희생하지 않는다.

• Flexible: 비교·작성·학습 맥락에 맞게 density를 조절한다.
• Link: 같은 종류의 관계와 반복 업무는 같은 간격과 위치를 유지한다.
• Glow: 브랜드 안내가 있더라도 기본 spacing 체계와 지정된 character 여백을 바꾸지 않는다.

기본 단위

기본 spacing 단위는 4px이다. 값은 임의로 고르지 않고 관계의 강도로 선택한다.

4px 배수라는 이유만으로 모든 값을 사용할 수 있는 것은 아니다. 반복되는 관계에는 위 단계 중 하나를 일관되게 선택한다.

관계를 표현하는 순서

그룹을 구분할 때 다음 순서로 판단한다.

1. proximity로 충분한가?
2. alignment와 제목으로 관계가 보이는가?
3. line-subtle이 필요한가?
4. 별도 surface가 실제 의미를 가지는가?
5. overlay elevation이 필요한가?

여백, border, background, shadow를 한 번에 모두 사용하지 않는다.

Component 내부 간격

• icon과 text는 보통 8px을 사용한다.
• field의 label, description, error는 하나의 세로 group으로 인식되게 4–8px 범위에서 연결한다.
• 서로 다른 field는 16px 이상 분리한다.
• Button의 좌우 padding은 label 길이와 size contract를 따르고 임의로 줄이지 않는다.
• icon-only Button도 시각 icon 크기와 무관하게 40×40px target을 유지한다.
• status icon, label, 부가 설명은 같은 의미 단위와 보조 단위를 구분한다.
• component 안에서 padding을 줄여 긴 콘텐츠를 억지로 맞추지 않는다.

Row density

• 같은 list나 table 안에서는 하나의 density만 사용한다.
• interactive target은 어떤 density에서도 최소 40×40px이다.
• compact row에는 여러 줄 설명, 큰 avatar, 복수 inline form을 넣지 않는다.
• comfortable은 중요도를 표현하는 수단이 아니다. 읽기·조작 맥락으로 선택한다.
• row가 지속적으로 56px을 넘으면 record list나 detail 구조가 더 적합한지 검토한다.

Page rhythm

PageScaffold는 기본적으로 32px 세로 rhythm과 다음 horizontal padding 흐름을 제공한다.

• small: 16px
• medium: 24px
• large: 32px

제품 페이지는 같은 역할의 outer padding을 다시 만들지 않는다.

• PageHeader와 첫 content group 사이에는 화면의 맥락이 분명해질 만큼 공간을 둔다.
• section 안의 제목·설명·action은 하나의 header group으로 묶는다.
• section 사이 간격이 내부 field 간격보다 분명히 커야 한다.
• 페이지 마지막에는 fixed action이나 browser chrome에 가리지 않을 여유를 둔다.
• empty state의 여백을 과도하게 늘려 action이 fold 아래로 내려가지 않게 한다.

Form density

• 하나의 form section은 한 개념만 편집한다.
• label과 control 관계는 field 사이 관계보다 가깝게 한다.
• 도움말은 control과 연결하되 다음 field의 label처럼 보이지 않게 한다.
• 오류가 추가돼도 다음 field가 갑자기 크게 밀리지 않도록 필요한 공간과 transition을 검토한다.
• 긴 form은 card padding을 반복하기보다 section title과 24–40px 간격으로 구조화한다.
• wide 화면에서도 control을 필요 이상으로 넓히지 않는다. 값의 예상 길이와 오류 문장을 기준으로 한다.

Table과 운영 화면

• 열 사이의 horizontal padding은 비교 축을 유지할 만큼 일관되게 한다.
• 첫 열의 시작점과 마지막 action 열의 끝점을 안정적으로 유지한다.
• 상태 badge가 row 높이를 결정하지 않게 한다.
• dense table에서 모든 cell에 button chrome을 표시하지 않고 필요한 action hierarchy를 적용한다.
• bulk action bar가 나타나도 table header와 첫 row가 갑자기 가려지지 않게 한다.
• scroll 영역의 padding은 고정 header·footer와 겹치지 않게 한다.

학습과 AI 맥락

• 긴 설명과 학습 콘텐츠는 body line-height와 comfortable한 group spacing을 유지한다.
• 질문, 답변, 피드백의 관계는 간격 단계로 구분하되 서로 다른 카드로 과도하게 분리하지 않는다.
• AI 입력과 결과를 병렬로 보여줄 때 각 column의 내부 rhythm을 독립적으로 유지한다.
• 처리 motion과 상태 문장, cancel action은 하나의 group으로 보이게 한다.
• character는 지정된 clear space를 유지하고 title·action을 밀어내지 않는다.
• 완료 영역은 여백만 크게 늘리지 말고 다음 배움 action을 가까이 연결한다.

Responsive density

• 좁은 화면에서 padding을 줄이기 전에 column을 재배치한다.
• 16px page gutter 아래로 줄이지 않는 것을 기본으로 한다.
• table을 record list로 바꾸면 각 item 내부는 12–16px, item 사이는 line 또는 16px 이상의 명확한 분리를 사용한다.
• touch 환경에서도 compact visual density와 40px target을 함께 유지한다.
• layout 전환 때 같은 관계가 다른 spacing 의미로 바뀌지 않게 한다.
• browser zoom과 큰 글씨에서 고정 높이로 text를 자르지 않는다.

상태와 접근성

• target 사이에 오작동을 줄일 충분한 공간을 둔다.
• focus ring이 인접 component에 잘리거나 겹치지 않게 overflow와 gap을 검토한다.
• error, help, live status가 추가돼도 읽기 순서가 자연스럽다.
• spacing만으로 heading 관계를 표현하지 않고 semantic structure를 함께 제공한다.
• 좁은 간격 때문에 label과 control의 관계가 다른 field와 혼동되지 않게 한다.
• character clear space는 대체 텍스트와 인접 설명의 논리적 관계를 방해하지 않는다.

예외와 피해야 할 사용

• 5px, 13px, 18px처럼 새로운 관계값을 화면마다 만들지 않는다.
• 긴 label을 맞추기 위해 Button 높이와 target을 줄이지 않는다.
• 모든 section을 40px 이상 벌려 페이지 흐름을 끊지 않는다.
• compact density에 설명과 action을 계속 추가하지 않는다.
• card padding 중첩으로 실제 content 폭을 과도하게 줄이지 않는다.
• mobile에서 16px보다 좁은 gutter로 정보를 욱여넣지 않는다.
• character의 지정 여백을 줄여 빈 공간을 채우지 않는다.
• Glow 영역만 별도의 임의 spacing 체계를 사용하지 않는다.

검토 질문

• 각 spacing 값이 요소 사이의 관계를 설명하는가?
• section, group, component 내부 간격의 단계가 명확한가?
• border와 background 없이 spacing만으로 충분한 곳은 없는가?
• 같은 list 안에서 하나의 row density를 유지하는가?
• 모든 interactive target이 최소 40×40px인가?
• compact density가 읽기와 오류 복구를 방해하지 않는가?
• PageScaffold의 padding과 rhythm을 중복 구현하지 않았는가?
• narrow와 zoom 환경에서 text와 focus ring이 잘리지 않는가?
• character와 Glow가 기존 spacing 체계를 지키는가?
• 한 학습 고리의 결과와 다음 action이 멀리 분리되지 않았는가?