컨텐츠 분리하기

구분선을 사용하여 컨텐츠 계층구조 만들기

서핏

5 min readJul 8, 2019

이 글은 저자의 동의를 얻어 번역한 글입니다.
도움이 되셨다면 👏🏻 한 번씩 부탁드려요 :)
© Linzi Berry, design systems manager at Lyft

Separating Content

Establishing content hierarchy with divider lines

medium.com

구분선(Divider)은 디자인 타입에 상관없이 컨텐츠의 계층구조를 만들거나 테마를 분리할 때 사용됩니다. 쉽게 말해, 구분선은 여러분들의 브랜드 비주얼 스타일에 큰 기여를 하는 기본적인 요소 중 하나라고 할 수 있겠죠.

컨텐츠 타입

먼저 간단하게 정적 컨텐츠를 세 가지로 구분해 봅시다:

동일한 컨텐츠는 타이포그래피 크기, 글씨의 굵기, 단락 및 여백을 사용하여 동일한 내용을 여러 포인트로 구분합니다.
비슷한 컨텐츠는 컨텐츠 내용이 비슷하지만 정확히 동일하지는 않을 경우 항목 구분선를 사용합니다.
관련 컨텐츠는 컨텐츠 내용이 서로 연관은 되어 있지만 각자의 독립된 내용으로 되어 있는 경우 섹션 구분선을 사용합니다.

상호 작용 (Interactivity)

구분선은 탭 크기에 비례하여 상호 작용 영역을 한 눈에 알아볼 수 있도록 컨테이너를 만듭니다. 이 시각적 컨테이너로 목록이 탭 가능하다는 것을 인식할 수 있습니다. 또한, iOS에서는 이 액션을 향상시키기 위해 V 아이콘(chevron)를 주로 사용합니다.

시각적 디자인

여러분들은 단순하고 실용적인 선만 사용하는 것이 아니라 그보다 더 많은 선택사항을 가질 수 있습니다. 예를 들어, 현대적인 가구 회사는 백그라운드 색상을 바꿀 수도 있고, 고급 시계 브랜드는 더 많은 장식을 사용할 수 있겠죠.

여러분들의 브랜드에는 어떤 옵션을 사용하면 좋을까요?

만약 선을 이용하고자 한다면(우리도 아래와 같이 선을 이용하였으며, 사용에 대해 옳고 그름을 판단하려는 것은 아닙니다), 아래 몇 가지 유의해야 할 것들있습니다:

항목 구분선

항목 구분선은 일반적으로 내용이 아직 연결되어 있다는 것을 표현할 수 있습니다.

시작 부분 인셋 (inset — 안쪽으로 여백을 주는것)

Apple의 HIG(Human Interface Guidelines)와 Material Design 모두 텍스트의 시작 부분에서의 항목 구분선을 권장합니다. 이는 이미지 공간을 만들기 위해서라고 생각하지만, 하나의 화면에서 아이콘이 포함된 텍스트와 다른 항목이 함께 사용된 경우에는 일관성이 없기 때문에 좋은 방법으로 생각되지 않습니다. 이 방법은 아이콘이 있는 그룹이 아닌 그룹보다 더 많이 연결되어 있는 것처럼 생각될 수 있습니다.

구분선을 항상 같은 시작점에서 인셋하면, 보다 일관된 레이아웃이라는 느낌을 줄 수 있겠죠.

끝 부분 인셋

상호작용(Interactive) 요소는 모두 화면 끝부분으로 이어지는 구분선을 권장하며, 정적(Static) 요소는 Android는 끝부분에 인셋을 권장합니다. 이렇게 하는 것은 정적 요소와 상호작용 요소를 명확하게 구분짓기 위해서라고 생각되지만, 사용자가 이런 작은 차이를 인지하기 쉽지 않고 화면에 비대칭만 만드는게 아닌지 의문이 듭니다.

상호작용 및 정적 구분선 모두를 인셋 처리하면 좀 더 대칭적이고 일관성 있는 레이아웃이 가능합니다.

예외

구분선 인셋에는 몇 가지 예외가 있습니다:

버튼, 특히 모달에서는 항목을 구분하기 위한 전체 너비의 구분선을 가집니다.
연결된 목록 항목은 연결된 아이콘 ‘스파인(spine)’이 깨지지 않도록 텍스트 시작부분에 구분선을 넣습니다.
이미지가 포함된 단일 목록이 화면 상의 유일한 항목인 경우에 해당 이미지에 더 많은 공간을 제공하기 위해 텍스트 시작부분에 구분선을 넣을 수 있습니다.