스페이서
스페이서 (Spacers)
PatternFly 디자인은 스페이서를 사용해 UI 요소 사이의 고정된 공간을 정의해요. 스페이서를 활용하면 시각적으로 균형 잡히고 일관성 있는 디자인을 만들 수 있어요. 스페이서는 PatternFly 컴포넌트에 내장되어 있고, Figma의 auto layout 시스템 안에서 사용할 수 있는 토큰으로도 제공돼요.
출처: 문서
본문
스페이서 크기 (Spacer sizing)
다른 치수(dimension) 토큰처럼 스페이서도 픽셀 대신 rem 단위의 크기를 사용해요. rem은 웹페이지 HTML 문서의 루트 요소 크기를 기준으로 크기를 조정하는 상대 단위예요. 예를 들어 루트 크기가 10px이면 1.5rem은 15px이 돼요.
PatternFly의 기본 루트 요소 크기는 16px이에요. 이 기본값을 바꾸면 아래 표의 픽셀 측정값은 더 이상 정확하지 않게 되지만, rem 값은 그대로 유지돼요.
PatternFly 스페이서 (PatternFly spacers)
우리 스페이서에는 다음 크기가 있어요:
| 스페이서 (Spacer) | 토큰 (Token) | 크기 (Size) |
|---|---|---|
| xs | --pf-t--global--spacer--xs |
.25rem (4px) |
| sm | --pf-t--global--spacer--sm |
.5rem (8px) |
| md | --pf-t--global--spacer--md |
1rem (16px) |
| lg | --pf-t--global--spacer--lg |
1.5rem (24px) |
| xl | --pf-t--global--spacer--xl |
2rem (32px) |
| 2xl | --pf-t--global--spacer--2xl |
3rem (48px) |
| 3xl | --pf-t--global--spacer--3xl |
4rem (64px) |
| 4xl | --pf-t--global--spacer--4xl |
5rem (80px) |
스페이서 토큰 (Spacer tokens)
스페이서 토큰은 앞의 표에 있는 값을 기반으로 하지만, 더 구체적인 토큰과 일치하는 특정 사용 사례가 있어요. 이런 시나리오에서 스페이서를 사용할 때는 전역 스페이서 토큰 대신 항상 더 구체적인 의미 토큰을 사용하세요.
- 액션 스페이서 (Action spacers): 버튼 같은 액션 안에서 가로·세로 패딩을 설정하는 데 사용해요. 액션 스페이서 토큰은
--pf-t--global--spacer--action으로 시작해요. - 컨트롤 스페이서 (Control spacers): 메뉴 토글, 텍스트 입력 같은 컨트롤 안에서 가로·세로 패딩을 설정하는 데 사용해요. 컨트롤 스페이서 토큰은
--pf-t--global--spacer--control로 시작해요. - 레이아웃 스페이서 (Layout spacers): 페이지 안에서 간격을 정의하는 데 사용해요.
- 갭 스페이서 (Gap spacers): 요소 또는 요소 그룹 사이의 공간을 설정하는 데 사용해요. 예를 들어 여러 액션 사이의 간격, 그룹 안 항목 사이의 간격, 컨트롤 사이의 간격 등이에요. 갭 스페이서 토큰은
--pf-t--global--spacer--gap으로 시작해요. - 거터 스페이서 (Gutter spacer): 그리드 레이아웃에서 요소 사이의 공간처럼 레이아웃 안의 거터를 정의하는 데 사용해요. 거터 스페이서 토큰은
--pf-t--global--spacer--gutter로 시작해요. - 인셋 스페이서 (Inset spacer): masthead, 네비게이션 메뉴, 메인 페이지 콘텐츠 영역처럼 구조 요소의 내부 패딩을 정의해 올바른 정렬을 보장하는 데 사용해요. 인셋 스페이서 토큰은
--pf-t--global--spacer--inset으로 시작해요.
all tokens 목록에서 스페이서 토큰을 검색할 수 있어요.
줄 높이(line-height)와 패딩 고려하기 (Considering line height and padding)
스페이서를 PatternFly 컴포넌트와 텍스트 콘텐츠에서 흔한 다양한 줄 높이와 패딩에 적용할 때 기억해야 할 추가 고려 사항이 있어요.
컴포넌트와 함께 스페이서 사용하기 (Using spacers with components)
아이콘, 버튼, 입력 필드 같은 일부 컴포넌트는 고정된 패딩이 내장되어 있어요. 페이지에 콘텐츠를 배치할 때 이 추가 공간을 고려해야 해요. 생각만큼 가로·세로 공간이 충분하지 않을 수 있어요.
예를 들어 세로 줄임표("kebab") 아이콘 주변의 패딩은 컴포넌트 안에서 아이콘이 차지하는 공간을 늘려요. 디자인을 배치할 때 이 추가 패딩을 반드시 고려하세요.
텍스트와 함께 스페이서 사용하기 (Using spacers with text)
텍스트 기반 콘텐츠의 간격을 잡을 때는 표준 전역 스페이서 토큰을 사용하세요.
각 텍스트 줄 사이에 올바른 양의 세로 공간을 남기도록 줄 높이를 고려해야 해요.
사용하는 텍스트 종류에 따라 서로 다른 스페이서 크기를 사용해야 해요. 예를 들어 제목과 본문 사이에는 16px 스페이서를 제공해야 하지만, 글머리 기호나 번호 목록의 항목 사이에는 8px 스페이서만 있으면 돼요.
줄 높이와 텍스트 간격에 대한 자세한 내용은 타이포그래피 지침(typography guidelines)을 읽어보세요.