레이아웃
레이아웃 (Layout)
Fluent의 레이아웃 시스템은 앱이 공간을 사용해 컴포넌트 간 관계를 만들고, 가장 중요한 것을 강조하며, 어떤 화면에서든 사람들이 편안하게 결정을 내리도록 돕는 방식을 정의해요.
출처: 문서
본문
간격과 근접성 (Spacing and proximity)
디자인에서 가까이 있는 요소들은 의미 있게 관련된 것으로 보여요. 요소 사이에 공간이 추가될수록 인지된 관계는 약해져요. 같은 간격 패턴으로 배열된 요소들은 동일한 무게와 암시된 연결을 가진 관련 조각으로 보여요.
공간은 연관된 정보의 그룹을 나타내는 데 사용돼요. 올바르게 사용하면 간격은 선이나 다른 그래픽 요소를 구분자로 사용하지 않고도 페이지에 논리적인 콘텐츠 섹션을 만들어요.
빈 공간으로 계층 만들기 (Creating hierarchy with empty space)
주변에 더 많은 간격이 있는 UI 요소는 더 많은 주의를 끌고, 주변에 간격이 적은 요소보다 중요도가 더 높은 것으로 인식되는 경향이 있어요. 실제로 서로 가까이 배치된 UI 요소는 간과될 수 있어요. 사람들은 그룹핑을 알아차릴 수 있지만 각 항목을 개별적으로 처리하지는 않을 수 있어요.
너무 많은 밀집된 정보도 혼란스럽고 압도적일 수 있어요. 여백(white space)은 눈을 쉬게 하고 사람들이 정보를 처리하게 해요. 간격을 사용해 넉넉한 시각적 리듬과 집중 영역을 만들어요.
전역 간격 램프 (Global spacing ramp)
Fluent의 전역 간격 램프는 일관된 간격을 최대한 활용하면서 각 경험의 요구에 맞게 유연하게 유지하도록 설계됐어요. 기본 단위는 4픽셀이며 지원되는 크기의 배율을 허용해요. 4x 시스템은 혼란을 줄이면서 구현하기 쉽죠.
전역 간격 램프는 멀티플랫폼이에요. 기기나 환경과 무관하게 익숙하고 응집력 있는 제품 경험을 만들기 위해 모든 컴포넌트와 레이아웃에서 사용돼요. 램프의 값은 네이티브 플랫폼 스케일링과 픽셀 밀도를 따릅니다. iOS에서 값은 포인트(PT), Android에서는 밀도 독립 픽셀(DP), Web React에서는 픽셀(PX)로 측정돼요.
일관성을 만들기 위해 램프는 4픽셀 단위에서 벗어나는 값도 포함해요. 2, 6, 10 값은 Fluent 아이콘의 추가 패딩을 설명하고 아이콘을 4픽셀 그리드에 정렬하는 데 도움을 줘요. 공간은 요소의 경계 상자(bounding box)에서 측정돼요.
| sizeNone | 0 | |
|---|---|---|
| size20 | 2 | |
| size40 | 4 | |
| size60 | 6 | |
| size80 | 8 | |
| size100 | 10 | |
| size120 | 12 | |
| size160 | 16 | |
| size200 | 20 | |
| size240 | 24 | |
| size280 | 28 | |
| size320 | 32 | |
| size360 | 36 | |
| size400 | 40 | |
| size480 | 48 | |
| size520 | 52 | |
| size560 | 56 |
Fluent 간격 적용하기 (Applying Fluent spacing)
전역 간격 램프는 광범위한 요구에 걸쳐 디자인에 쉽게 적용돼요. 여기 Fluent 간격이 Fluent 컴포넌트와 레이아웃 전반에 적용되는 몇 가지 예가 있어요.
컴포넌트 간격 (Component spacing)
컴포넌트 안에서는 더 작은 스페이서를 사용해 각 요소 간 강한 암시적 관계를 보장하면서도 구별되고 인지 가능하도록 해요.
패턴 간격 (Pattern Spacing)
패턴에서 일관된 간격은 제품 전반에 걸쳐 익숙한 시각적 리듬과 디자인 응집력을 만드는 데 중요해요. 사람들이 빠르고 쉽게 뛰어들 수 있게 하죠.
레이아웃 간격 (Layout spacing)
레이아웃에서 공간을 사용해 중요한 영역으로 눈을 이끌고, 사람들이 다음에 볼 필요가 있는 곳으로 안내하세요.
반응형 간격 (Responsive spacing)
반응형 시나리오에서는 다양한 기기의 스케일에 맞추기 위해 컴포넌트, 패턴, 레이아웃 안의 간격 변경을 고려하세요.
램프는 요구를 수용하도록 유연하다는 점을 기억하세요. 일관성을 만들기 위한 도구로 스페이서를 사용하는 것이 중요하죠. 맹목적으로 일관된 스페이서를 사용하는 것보다요. 예를 들어 목록을 만들 때 스페이서를 조정해 텍스트를 왼쪽 정렬하고 아이콘을 가운데 정렬하세요. 스페이서는 또한 모바일 기기의 최소 터치 타깃(iOS & Web [44 x 44], Android [48 x 48])을 수용할 충분한 공간을 제공해요.
일관된 시각적 리듬을 위해 스페이서 조정하기 (Adjust spacers for consistent visual rhythm)
패턴을 깨뜨린다면 같은 스페이서를 사용하지 않기 (Don't use the same spacers if it breaks a pattern)
그리드 (Grid)
그리드는 시각적 요소를 배치하기 위한 기본 토대를 제공해요. 그리드 위에서 작업하면 제품 전반에 걸쳐 창의적 결정의 표준 방향과, 서로 다른 기기에서 디자인의 반응형 프레임워크를 보장해요. 앱을 응집력 있게 보이게 하고, 시각적 계층을 강화하며, 디자인을 균형 있게 만들어요.
하나의 크기가 모든 경우에 맞는 그리드 동작은 없어요. 서로 다른 콘텐츠 유형은 고정(fixed), 늘리기(stretch), 하이브리드(hybrid) 그리드 모델을 사용할 때 더 잘 렌더링될 수 있어요. 다음 안내를 사용해 애플리케이션에 가장 좋은 접근 방식을 결정하세요.
그리드 해부 (Grid anatomy)
모든 그리드는 칼럼(columns), 거터(gutters), 마진(margins)의 세 요소로 구성돼요.
칼럼 (Columns)
칼럼은 그리드의 구성 블록이고 요소가 배치되어야 할 위치를 표시해요. 12칼럼 프레임워크는 유연성과 쉬운 분할로 흔히 사용돼요. 레이아웃에 매우 합성적이고 화면 크기에 따라 반응적으로 업데이트될 수 있어요.
거터 (Gutters)
거터는 칼럼 사이의 음수 공간(negative space)이고 그 너비는 기본 단위의 배수여야 해요. 주어진 화면 크기에 더 잘 적응하도록 거터 너비는 다른 브레이크포인트에서 변경될 수 있어요.
마진 (Margins)
마진은 그리드 칼럼과 행 밖의 공간이에요. 마진 너비는 고정되거나 백분율 기반일 수 있고, 다른 브레이크포인트에서 변경될 수 있어요.
영역 (Regions)
영역은 컴포지션의 요소를 형성하는 칼럼, 행, 또는 모듈의 그룹핑이에요. 가장 중요한 요소와 콘텐츠 조각은 그리드에서 가장 큰 부분을 차지해요.
그리드 유형 (Grid types)
다른 그리드 레이아웃을 만들기 위해 칼럼, 거터, 마진을 결합하는 많은 방법이 있어요. 앱을 쉽게 훑고 탐색할 수 있게 하는 익숙한 패턴을 만드는 데 일관성이 핵심이에요. 좋은 그리드는 또한 다양한 화면 크기와 방향에 적응해 환경 전반의 응집력을 보장해요.
기준선 그리드 (Baseline grid)
기준선 그리드는 텍스트에 정렬 및 간격 지침을 제공하는 밀집된 가로 행으로 구성돼요. 기준선을 특정 절대 그리드에 정렬하면 수직 리듬(vertical rhythm)을 만들죠. 인간의 뇌가 훑기 더 쉬운 패턴이에요. 기준선 그리드는 여러 칼럼에 걸친 콘텐츠에 특히 유용해요.
칼럼 그리드 (Column grid)
칼럼 그리드는 웹 애플리케이션에 가장 흔한 레이아웃이에요. 그리드는 프레임을 객체가 정렬되는 균등하게 간격을 둔 수직 필드로 분할해요. 이 그리드는 보통 12칼럼으로 구성되며, 반응형 화면 크기를 설계할 때 반, 1/3, 1/4, 1/6로 나눌 수 있어요.
원고 그리드 (Manuscript grid)
원고 그리드는 마진으로 둘러싸인 큰 연속 텍스트 블록에 의해 정의되는 일차 구조를 가져요. 단일 칼럼 그리드로 생각하면 돼요. 이 스타일은 최적의 줄 길이를 제공하도록 콘텐츠를 통합해 가독성을 보장하는 데 도움을 줘요.
모듈식 그리드 (Modular grid)
이것은 칼럼 그리드의 변형이에요. 모듈식 그리드는 서로 교차해 셀 또는 모듈의 매트릭스를 만드는 수직 칼럼과 수평 행을 모두 가져요. 이 모듈들은 단일 단위로 또는 결합 시 더 큰 블록으로 추가 레이아웃 지침을 제공해요.
정렬 (Alignment)
정렬은 전경의 활성 요소를 예측 가능한 시각적 패턴으로 조정하고 위치시켜 집중 영역을 강조해요. UI를 조직하고 균형 잡으며 중요한 시각적 계층과 관계를 확립할 수 있어요. 예를 들어 일관된 수평 리듬은 레이아웃의 가독성과 사용 용이성에 영향을 미쳐요. 컴포지션 정렬은 세부 사항에 세심한 주의가 필요한 미묘한 기술이에요.
요소의 시각적 위치를 생각할 때 각각 반대 축을 가리키기 때문에 수직 정렬과 수평 정렬을 혼동하기 쉬워요. 수직 및 수평 정렬의 차이를 기억하는 좋은 팁은 객체가 어떻게 움직이는지 고려하는 것이에요.
수직 정렬 (Vertical alignment)
수직 정렬은 상단, 중앙, 하단 요소의 배치가 같은 수평 평면에 함께 정렬되는 것이에요.
수평 정렬 (Horizontal alignment)
수평 정렬은 컴포넌트의 왼쪽, 가운데, 오른쪽 가장자리의 정렬이에요.
객체 정렬 (Object alignment)
UI 객체에는 이미지, 그래픽, 또는 아이콘이 포함될 수 있는데, 이들은 보통 너비와 높이가 일관되지 않아요. 객체를 콘텐츠와 결합할 때는 객체를 가운데 정렬하고 텍스트를 왼쪽 정렬하는 것이 좋은 팁이에요.
중앙 정렬 (Central alignment)
중앙 정렬은 일반적으로 다른 인터페이스 요소에서 멀리 특정 위치로 사용자 초점을 집중시키는 것이 의도라면 좋은 관행이에요.
반응형 디자인 (Responsive design)
반응형 디자인은 다양한 기기(모바일, 태블릿, 데스크톱 등)에서 디자인을 가능하게 하고, 디자인이 화면 크기, 플랫폼, 방향에 따라 사람들의 행동에 응답해야 한다고 제안하는 접근 방식이에요. 반응형 레이아웃 기법은 창이나 기기 크기에 걸쳐 적응하는 효율적이고 효과적인 경험을 제공하고 정보에 대한 동등한 접근을 제공해요.
브레이크포인트 (Breakpoints)
브레이크포인트는 반응형 디자인의 구성 블록이에요. 이들은 반응형 레이아웃이 기기나 뷰포트 크기에 걸쳐 어떻게 동작하는지 결정해요. 브레이크포인트는 또한 공통 기기 또는 뷰포트 차원의 하위 집합을 나타내요. 모든 사용 사례를 겨냥하지는 않아요. 대신 결정된 범위는 거의 모든 기기에서 구축할 강력하고 일관된 토대를 제공해요.
| 브레이크포인트 | 범위 | 조건 |
|---|---|---|
| small | 320-479 | < 479픽셀 |
| medium | 480-639 | < 639픽셀 |
| large | 640-1023 | < 1023픽셀 |
| x-large | 1024-1365 | > 1024픽셀 |
| xx-large | 1366-1919 | > 1366픽셀 |
| xxx-large | 1920 이상 | > 1920픽셀 |
레이아웃 구성하기 (Composing layouts)
레이아웃은 정의된 규칙과 콘텐츠의 의도적인 조직의 결정체예요. 콘텐츠를 신중한 구조로 가져오는 것이 핵심이지만, 플랫폼과 화면 크기 전반에 걸쳐 명확한 계층으로 모두 흐르게 만들려면 스케일링 로직이 필요해요. 개별적으로 적응형(adaptive)과 반응형(responsive) 디자인이 각각 이 문제를 해결할 수 있어요. 어떤 경우에는 적응형과 반응형 디자인의 혼합이 올바른 선택이에요.
반응형 (Responsive)
반응형 디자인은 콘텐츠가 유동적이고 변경되는 형식 크기에 적응할 수 있는 하나의 레이아웃만 사용해요. 이 설계 기법은 미디어 쿼리를 사용해 주어진 기기의 특성을 검사하고 그에 따라 콘텐츠를 렌더링해요. 반응형 디자인을 사용하면 기능을 한 번 만들고 모든 화면 크기에서 작동할 것으로 기대할 수 있어요.
적응형 (Adaptive)
적응형 레이아웃은 제시된 형식에 따라 완전히 변경되는 레이아웃이에요. 적응형 디자인은 여러 고정 레이아웃 크기를 가지며 사용 가능한 공간에 따라 만들어진 특정 레이아웃을 로드하도록 브라우저를 트리거해요. 적응형 디자인으로 구축된 사이트는 반응형 디자인과 유사하게 브레이크포인트를 읽기 위해 미디어 쿼리를 사용하고, 기기의 능력에 따라 추가 마크업을 사용해요. 이 과정은 "점진적 향상(progressive enhancement)"이라고 불려요.
반응형 기법 (Responsive techniques)
반응형 디자인은 텍스트나 이미지 같은 콘텐츠를 스케일링하고, 재배치하며, 더 많거나 적게 보여줌으로써 달성돼요. 화면 크기와 무관하게 사람들이 있는 곳에서 만나도록 해주죠.
재배치 (Reposition)
페이지 요소의 위치 변경하기 (Alter the position of page elements)
창 크기가 커짐에 따라 컴포지션을 최적화해 콘텐츠를 조직적이고 읽기 쉽고 균형 있게 유지하세요. 예를 들어 세로로 쌓인 요소를 자연스러운 왼쪽에서 오른쪽 읽기 순서를 따르도록 가로로 재배치하고, 디자인에 균형을 만들며, 중요한 페이지 요소에 시각적 초점을 유지하세요.
크기 조정 (Resize)
페이지 요소의 크기와 마진 조정하기 (Adjust the size and margins of page elements)
창 상단에 더 많은 콘텐츠를 표시하고 세로 스크롤을 줄여 풍부한 사용자 경험을 위해 페이지 요소의 크기를 조정하세요. 컴포지션에 여백과 균형을 더하기 위해 페이지 마진을 조정하세요. 이렇게 하면 콘텐츠가 숨 쉬어 더 시각적으로 매력적인 디자인이 돼요. 예를 들어 히어로(hero) 컴포넌트는 배경 이미지를 더 많이 보여주기 위해 창의 전체 너비로 늘어날 수 있어요. 사진 아래의 콘텐츠도 더 많이 보여주기 위해 늘어날 수 있지만, 다른 마진을 사용해 컴포지션에 다양성을 더하고 시각적 계층을 정의하는 데 도움을 줘요.
리플로우 (Reflow)
페이지 요소의 흐름 최적화하기 (Optimize the flow of page elements)
리플로우는 콘텐츠를 재배치해 창 크기와 방향을 고려해 페이지 요소가 완전히 렌더링되도록 최적화해요. 예를 들어 작은 창의 단일 칼럼 콘텐츠는 큰 창에서 두 칼럼의 텍스트로 표시되도록 리플로우될 수 있어요. 이렇게 하면 더 많은 콘텐츠가 "접힌 부분 위(above the fold)"에 표시될 수 있어요.
표시/숨기기 (Show/hide)
창 크기와 방향에 맞게 콘텐츠 최적화하기 (Optimize content for the window size and its orientation)
페이지 요소를 표시하거나 숨겨 창 크기와 방향에 맞게 콘텐츠를 최적화하세요. 이 반응형 기법은 사용자가 보는 방식에 따라 올바른 양의 정보와 최적의 사용자 경험을 제공해요. 예를 들어 작은 화면에 나타나는 카테고리는 이미지, 제목, 링크 같은 제한된 메타데이터를 보여 더 많은 것을 볼 수 있고 사용자가 집중하도록 도와요. 큰 화면에서는 카테고리가 페르소나, 날짜, 짧은 설명 같은 추가 메타데이터를 보여줄 수 있고 여전히 뷰포트에서 볼 수 있어요.
재구성 (Re-architect)
중요한 정보와 동작에 초점을 유지하기 위해 페이지 요소와 콘텐츠 포크(fork) 또는 축소하기 (Fork or collapse page elements and content to retain focus on important info and actions)
이것은 디자인에서 "점진적 공개(progressive disclosure)" 관행을 따르는 것과 유사하지만, 다른 창 크기와 방향을 위한 것이에요. 이 예에서 창을 확장하면 항목 목록이 세부 사항 옆에 표시돼 콘텐츠를 시각적으로 연결하고 사용자가 쉽게 다른 항목을 선택하게 해줘요. 작은 화면에서는 주요 정보 표시에 초점이 유지돼요.