시각 디자인의 기초: 레이아웃
사용자를 화면의 가장 중요한 부분으로 원활하게 안내하세요.
레이아웃은 인터페이스에서 독자를 안내하기 위해 요소를 배열하는 방법입니다. 레이아웃은 사용자 측의 디자인 생산성과 효율성을 향상하기 위해 다양한 의도를 만들어내는 다양한 상황에서 사용될 수 있습니다.
우리가 외부 세계에서 찾을 수 있는 가장 유명한 레이아웃 중 하나는 맥도널드가 만든 패스트푸드 조립 라인인데요. 회사의 효율과 수익을 증가시키는 생산 시간을 향상하려는 의도로 역할, 작업 및 시간을 지정합니다.
출처: Pearson Education Inc.의 McDonald's Assembly Line그리드 시스템을 포함하지 않는 레이아웃에 대한 이야기는 없습니다. 디자이너는 그리드 시스템을 구조로 사용하여 디자인에 구체적이고 일관된 측정값을 제공하는 레이아웃을 생성하며, 이는 디자인이 여러 기기에 표시되는 데 도움이 됩니다. 레이아웃은 디자이너가 콘텐츠 표시 방법과 인터페이스 동작 방법을 정의할 수 있는 부동의 프레임워크입니다.
모듈식 레이아웃은 디자인 캔버스(아트보드, 페이지, 화면 등)를 독립적으로 작동하고 여러 디자인에 걸쳐 생성, 교환, 재배열할 수 있는 더 작은 하위 구분으로 분할하는 방식입니다.
출처: 99designs의 Layout design다양한 플랫폼을 설계할 때에 모듈은 중요합니다. 모듈은 다양한 기기에 표시되도록 디자인을 재배치할 수 있게 합니다. 모듈의 크기는 콘텐트의 의도, 강조점, 우선순위에 따라 달라질 수 있으나, 컬럼 수에 맞춰 설정해야 하므로 그리드 시스템을 먼저 설정하는 것이 중요합니다.
시장에서는 다양한 디스플레이 해상도를 찾을 수 있으며, 이것이 바로 우리가 이를 통해 작동할 수 있는 그리드 시스템을 만드는 이유입니다. 가장 일반적인 그리드 시스템은 12 컬럼 그리드 시스템입니다. 그 이유는 유연성과 6개의 가능한 대칭(1, 2, 3, 4, 6 및 12열로 나눔) 및 훨씬 더 비대칭적인 레이아웃으로 분할할 수 있는 기능 때문입니다.
출처: 99designs의 12 column gridUI를 보면 레이아웃이 분할된 컬럼 수를 식별할 수 있지만 사용된 그리드 시스템을 알아야 합니다. 다음 예에서는 6 컬럼 레이아웃이 표시되지만 배경에는 여전히 12 컬럼 그리드 시스템이 남아 있습니다.
6 컬럼 레이아웃
출처: Behance6 컬럼 레이아웃과 마찬가지로 우리가 디자인할 수 있는 여러 레이아웃 구성이 있지만 꽤 일반적인 구성도 있습니다.
1 컬럼 레이아웃 - 디스플레이
이 디자인에서는 사용된 레이아웃에 단 1개의 컬럼(전체 12 컬럼 그리드)이 있음에도 불구하고 여러 섹션이 강조 표시됩니다(빨간색 윤곽선). 이는 내부 요소가 테이블이나 동적 측정 및 정렬이 있는 내비게이션 바와 같은 고정된 구조를 가지지 않기 때문이며, 내용에 따라 혼란을 피하고 화면의 실제 상태를 적절하게 중화하는 1 컬럼 레이아웃을 사용하는 것이 좋습니다.
2 컬럼 레이아웃
아래 예와 같이 화면을 두 개의 동일한 부분(6/6)으로 나눌 때 이 레이아웃은 대칭이 될 수 있습니다.
출처: Arnas Jonikas의 Iot Nation Companies그리드를 사용하면 섹션의 요구 사항이나 목적에 따라 컬럼의 크기를 조정할 수 있다는 것이 장점입니다. 아래 예에서 디자인은 2 컬럼 레이아웃을 사용하지만 공간이 비대칭으로 분포되어 있습니다(9/3). 이는 구성 요소에 더 많은 계층 구조가 있고 디자인의 주요 상호 작용 부분이기 때문입니다.
출처: Michal Parulski의 Smart Home App2 컬럼 레이아웃 — 변형
동일한 2 컬럼 레이아웃 내에서도 기준선은 그리드에서 사용할 컬럼 수를 수정하고 여전히 2 컬럼 레이아웃을 반영할 수 있습니다. 아래 예에서는 상단에서 (7/5), 하단에서 (9/3)을 사용하지만 여전히 2 컬럼 레이아웃을 전달합니다. 이 모든 것은 콘텐트와 동일한 목적에 의해 제공됩니다.
출처: vevotpl의 Weather dashboard다중 컬럼 레이아웃
이전 예제는 모든 수준에서 사용할 수 있습니다. 화면의 복잡성에 따라 그리드 및 레이아웃 사용에 더 많은 유연성을 제공합니다. 아래 예는 온라인 학습 플랫폼의 홈 화면입니다. 단일 레이아웃이기 때문에 탐색하기가 매우 지루해집니다. 디자이너는 디자인에 대한 역동성과 참여를 유도하기 위해 다양한 레이아웃 배열을 사용하여 탐색하는 경향이 있습니다.
출처: Shah Alam의 Online Learning Platform복잡성이 증가할수록 그리드는 더욱 유연해져야 합니다. 대시보드와 같은 사용 사례에서는 일부 영역에서 복잡한 레이아웃에 대한 탐색이 필요할 수 있습니다.
출처: Max Panchyk의 H-care — Medical App셀 수 없이 많은 레이아웃 구성이 있습니다. 디자이너로서 우리는 어떤 종류의 구성을 적용할지 정의하기 위해 디자인에 표시될 요구 사항과 정보를 식별해야 합니다. 레이아웃은 접근성과 생산성 측면에서 디자인을 향상해야 합니다.
레이아웃은 페이지의 텍스트, 모양, 이미지 및 네거티브 공간을 배열하여 요소가 리듬을 갖고 매끄럽게 되도록 하는 균형 있고 조화로운 시각적 효과를 생성하여 사용자가 효율적이고 효과적으로 작업을 수행할 수 있도록 하는 중요한 역할을 합니다.
출처: Dubberly Design의 The 892 unique ways to partition a 3 x 4 grid레이아웃이 그리드 시스템 위에 설정되면 디자인 요소를 배치할 컨테이너가 생성됩니다. 이를 위해 네거티브 스페이스(Negative Space)는 컨테이너 내부의 균형을 유지하는 핵심적인 역할을 하게 됩니다. 또한 컨테이너는 유연성을 높이기 위해 내부 그리드를 가질 수 있으며 내부 그리드는 메인 그리드와 동일한 방식으로 작동하여 일관성을 유지하려고 노력합니다.
레이아웃을 구현하는 모범 사례로서 컨테이너 또는 상자 처리 시 다음 요소를 고려하는 것이 중요합니다.
박스 모델
이 모델은 디자인에 맞게 박스가 갖춰야 할 모든 사양을 포함합니다. 이는 개발자가 코드로 디자인을 구성하는 데 사용할 사양이기도 합니다.
출처: Spec의 Box model여백(Margins): 컨테이너 경계와 컨테이너를 둘러싸는 요소 사이의 공간입니다.
테두리(Borders): 컨테이너 가장자리 주변의 획 두께이며 일부 요소에는 테두리가 없습니다.
패딩(Paddings): 컨테이너 경계와 내부 요소 사이의 공간입니다.
크기(Dimensions): 너비와 높이로 측정된 요소의 크기입니다.
일관성을 유지하세요!
크기 정의: 측정값과 정렬은 일관되고 합리적이어야 합니다. 첫 번째 단계는 화면의 모든 측정 및 정렬에 대한 숫자의 배율을 정의하는 것입니다.
출처: UXReactor모범 사례에서는 8의 배수를 사용하여 그리드 시스템과 일치시키므로 모든 컨테이너, 다양한 구성 요소, 정렬이 8로 나누어져 시스템이 따라야 합니다.
UI에서 규칙 정의: 디자인 전체에서 일관성을 유지하려면 모든 크기, 여백, 패딩 및 간격을 해당 유스 케이스와 함께 정의하고 문서화해야 합니다. 모범 사례로서 규칙의 동작을 전달하는 유스 케이스와 시각적 예시를 갖는 것이 좋습니다. 아래에서 규칙 문서의 몇 가지 예를 볼 수 있습니다.
출처: UXReactor섹션들의 우선순위를 지정하세요.
레이아웃 변형을 제공하려면 화면이 나누어진 섹션을 이해하고 각 섹션에 백분율을 지정하여 우선순위를 지정합니다. 이는 화면에서 차지할 공간의 양을 나타내며 위치를 조정하고 백분율을 변경하여 모든 관점을 이해하고 당신의 디자인 요구 사항에 가장 적합한 관점을 결정하세요.
효율성을 높이기 위한 템플릿을 정의하세요.
여러 시나리오에서 유사하게 여러 화면에 적용할 수 있는 레이아웃을 생성하고, 일관성을 유지하며, 표준 규칙을 생성하여 디자인 팀의 시간과 노력을 줄여보세요.
팁 / 모범 사례
박스 모델을 기반으로 컨테이너를 만드세요.
규모에 8의 배수를 사용하세요.
다양한 경험에 사용할 수 있는 템플릿을 정의하세요.
항상 아래 놓인 그리드에 레이아웃을 맞추세요.
체크리스트
먼저 그리드 시스템을 설정하세요.
8의 배수를 측정하는 상자 모델을 기반으로 레이아웃을 설정하세요.
컨테이너와 섹션의 우선순위를 지정하세요.
유스 케이스에 따라 크기와 규칙을 정의하세요.
