Spacing

Spacing (간격)

간격 스케일(space scale)과 스케일링 옵션의 개요예요.

출처: 문서

간격 스케일 (Space scale)

간격 값은 9단계 스케일에서 파생되며, margin과 padding 같은 props에 사용돼요. 이 props는 아래 스케일의 단계에 대응하는 "1"부터 "9"까지의 숫자 문자열을 받아요.

1

2

3

4

5

6

7

8

9

Space scale 토큰

Space scale 토큰은 CSS 변수로도 접근할 수 있어요. 이 토큰들을 사용해 커스텀 컴포넌트를 스타일링하면 테마의 나머지 부분과 일관된 모습을 유지할 수 있어요.

/* Space scale */

var(--space-1);

var(--space-2);

var(--space-3);

var(--space-4);

var(--space-5);

var(--space-6);

var(--space-7);

var(--space-8);

var(--space-9);

스케일링 (Scaling)

레이아웃에 영향을 주는 값(간격, 폰트 크기, 줄 높이)은 Theme에 정의된 scaling 값에 따라 서로 상대적으로 스케일돼요. 이 설정으로 앱 전체에서 UI 밀도를 균일하게 조절할 수 있어요.

<Theme scaling="100%">
  <Card variant="surface">
    <Flex gap="3" align="center">
      <Avatar size="3" src={person.image} fallback={person.name} />

      <Box>
        <Text as="div" size="2" weight="bold">
          {person.name}
        </Text>

        <Text as="div" size="2" color="gray">
          Approved invoice <Link>#3461</Link>
        </Text>
      </Box>
    </Flex>
  </Card>
</Theme>

90%

Danilo Sousa

Approved invoice

#3461

95%

Danilo Sousa

Approved invoice

#3461

100%

Danilo Sousa

Approved invoice

#3461

105%

Danilo Sousa

Approved invoice

#3461

110%

Danilo Sousa

Approved invoice

#3461

스케일링 계수 (Scaling factor)

스케일링 계수 토큰은 --scaling CSS 변수로 접근할 수 있어요. 앱에서 다른 스케일링 계수를 사용해야 한다면, 이 토큰을 커스텀 스타일에서 사용해 테마의 나머지 부분과 일관되게 만들 수 있어요.

.MyCustomComponent {
  width: calc(200px * var(--scaling));
}

더 알아보기 (Learn more)

• 간격은 4px 배수 기반의 9단계(--space-1~--space-9)이고, scaling으로 전체 밀도를 조절할 수 있어요.