형태

형태 (Shapes)

형태(shapes)는 UI를 사람답게(personable) 만들고, 처리하기 쉽게 하며, 한눈에 알아볼 수 있게 도와줘요. 컴포넌트에 올바른 형태를 선택하면 일관된 시각적 어휘와 내러티브가 만들어져요.

형태를 정의하는 데 쓰이는 속성은 폼(form), 코너 반경(corner radius), 그리고 스트로크(stroke)예요.

출처: 문서

본문

폼 (Forms)

Fluent 컴포넌트는 사각형(rectangle), 원(circle), 알약(pill), 부리(beak)의 네 가지 단순한 폼을 사용해요.

사각형 (Rectangle)

사각형은 버튼, 텍스트 영역, 메뉴, 카드, 이미지 같은 대부분의 일반적인 컴포넌트와 컨테이너의 기본 형태예요.

원 (Circle)

원은 아바타와 사람을 표시하거나 표현하는 다른 컴포넌트에 사용돼요.

알약 (Pill)

알약은 슬라이더의 트랙이나 토글의 채널 같은 경로를 표현할 수 있어요. 알약은 태그, 키워드, 또는 목록에서 선택된 항목을 보여줄 수도 있어요.

부리 (Beak)

부리는 콜아웃(callout)이나 팝오버(popover)처럼 단일 객체와 연결된 플로팅 표면에 참조점을 제공해요.

폼은 그 주변과 구별되기 위해 채우기(fill)나 테두리(border)를 사용해요.

채우기 (Fill)

채우기 스타일은 형태를 정의하고 강조할 수 있어요.

테두리 (Border)

테두리는 카드처럼 채워지지 않은 형태의 경계 컨테이너를 식별해요.

코너 반경 (Corner radius)

대부분의 경우 사각형 형태의 코너 반경은 기본적으로 4픽셀이에요. 32픽셀보다 작은 형태는 코너 각이 2픽셀로 줄어들어요. 크고 매우 큰 컴포넌트에서는 8픽셀과 12픽셀의 각이 사용돼요. 모바일에서는 iOS와 Android 지침을 따라주세요.

코너 반경 토큰 (Corner radius tokens)

요소의 코너 반경을 바꾸려면 다음 반경 토큰을 사용하세요.

Fluent는 UI 컴포넌트의 세 영역에서 둥근 코너 스타일을 사용해요. 사각형 요소, 플라이아웃(flyout) 요소, 그리고 알약 모양이나 둥근 요소죠.

둥근 코너를 피해야 할 때 (When to avoid rounded corners)

기본적으로 컴포넌트의 코너를 둥글게 하지 말아야 하는 경우가 있어요. 예를 들어 어색한 틈이 생길 때가 그렇죠.

불필요한 공간 피하기 (Avoid unnecessary spaces)

단일 컨테이너 안의 여러 UI 요소 사이 공간을 반드시 배제하세요. 예를 들어 스플릿 버튼(split button)의 양쪽 부분이 그렇죠.

화면 가장자리의 둥근 코너 건너뛰기 (Skip rounded corners at the screen's edge)

화면 가장자리에 닿는 컴포넌트에는 둥근 코너가 필요하지 않아요.

스트로크 (Stroke)

선, 화살표, 테두리, 벡터 네트워크를 만들려면 스트로크 속성을 적용해요. 스트로크의 두께(weight), 색상, 분포, 엔드포인트 속성을 제어할 수 있어요.

스트로크 두께 (Stroke Thickness)

스트로크 토큰으로 선 두께를 변경하세요.

올바른 시각적 두께를 얻으려면 스트로크 두께를 결정할 때 요소의 크기를 고려하세요. 예를 들어 아바타 활동 링에서는 작은 아바타의 2픽셀 링에서 큰 아바타의 4픽셀 링으로 스트로크가 확장돼요. 요소가 커지거나 작아질 때 시각적 두께가 일관되게 느껴지죠.

스트로크 대시 배열 (Stroke dash array)

스트로크는 형태를 외곽선으로 그리거나 브러시로 사용할 때 쓸 대시와 틈의 패턴을 나타내는 이중(double) 값을 모을 수 있어요. 각 대시 배열에 대해 다음의 간단한 방정식에 따라 스트로크 두께(n)에 비례해 모든 것을 확장하세요.

스트로크 캡 (Stroke caps)

일관된 느낌을 위해 스트로크의 캡을 둥글게 하려면 나열된 반경 토큰을 사용하세요.

둥근 코너 사용하기 (Use rounded corners)

사각형 스트로크 캡 피하기 (Avoid square stroke caps)

더 알아보기 (Learn more)

• 소재 (Material)
• 타이포그래피 (Typography)
• 색상 (Color)