디바이더, 선 잘 긋는 방법

디바이더의 사용방법과 좋은 사례

Feb 27. 2025

디바이더의 구성

디바이더(Divider, 구분선)는 콘텐츠나 섹션을 시각적으로 구분하는 역할을 하는 선입니다. 일반적으로 가로 또는 세로로 배치되며, 레이아웃의 가독성을 높이고 정보의 그룹화를 명확하게 합니다. 디바이더는 디바이더 단독으로만 구성되며, 본 글에서는 디바이더의 사용방법과 좋은 사례에 대해 알아보겠습니다.

❶ 디바이더 (Divider)

디바이더의 종류

디바이더는 컴포넌트를 시각적으로 그룹화하고 계층 구조를 만드는 방법 중 하나입니다. 또한 부모-자식 관계가 중첩되어 있음을 암시하는 데도 사용할 수 있습니다. 디바이더는 두 가지 유형이 있습니다.

❶ 전체형 (Full width)

❷ 여백형 (Inset)

전체형 디바이더

전체형 디바이더는 서로 관련이 없는 큰 섹션을 구분하는 데 사용됩니다. 이는 배경 위에 직접 배치하거나 카드나 리스트 같은 다른 컴포넌트 내부에서 사용할 수 있습니다. 또한 전체형 디바이더는 인터랙티브 영역과 비인터랙티브 영역을 분리하는 데도 활용됩니다. 이 디바이더는 시각적 요소들을 그룹화하고, 상호작용 관점에서 요소들이 서로 연관되어 있음을 나타내는 역할을 합니다.

전체형 디바이더를 사용하여 카드와 같은 컨테이너 내부에서 인터랙션 가능한 영역과 불가한 영역을 구분합니다. 그러나 전체형 디바이더는 아껴서 사용해야 합니다. 디바이더가 너무 많으면 화면이 어수선해 보일 수 있습니다.

여백형 디바이더

여백형 디바이더를 사용하여 섹션 내의 콘텐츠를 구분합니다. 기본적으로 화면 양쪽에서 동일하게 들여 쓰기 됩니다.

좌측은 관련 항목 리스트의 여백형 디바이더이며, 우측과 같이 레이아웃 중앙에 배치하여 본문 텍스트와 칩과 같은 요소를 구분할 수 있습니다.

두 가지 유형의 디바이더 사용

두 가지 유형의 디바이더가 한 화면에 사용되는 경우, 서로 다른 섹션 내의 정보 계층 구조를 강화해야 합니다.

❶ 다른 유형의 콘텐츠를 구분하려면 전체형 디바이더를 사용합니다.

❷ 중첩된 콘텐츠 항목을 구분하려면 여백형 디바이더를 사용합니다.

반복적인 형식을 가진 리스트 항목에는 여백만을 사용하여 항목 간 디바이더를 사용하지 않아도 됩니다.

수직 디바이더

수직 디바이더는 더 큰 화면에서 콘텐츠를 배열하는 데 사용할 수 있으며, 예를 들어 문단의 텍스트와 미디어를 분리하는 데 사용할 수 있습니다.

디바이더의 좋은 사례

디바이더 컴포넌트의 좋은 사례를 다양한 특징별로 선별해 보았으니, 참고하여 활용하면 좋겠습니다.

Discord

내비게이션 리스트 중 관련 있는 항목끼리 그룹화하여 전체형 디바이더로 구분하였습니다.

Flighty

복잡도가 높은 우측 정보 단에만 디바이더를 사용하였습니다. 여백형 디바이더 같아 보이지만, 우측 정렬된 전체형 디바이더로 보입니다. 이러한 구성은 구분이 필요한 섹션에만 사용되어 피로도를 낮추고 화면을 더 간결하게 만들어줍니다.

Public

리스트 내 중첩된 동일 콘텐츠에 전체형 디바이더를 사용하여 구분하였습니다. 같은 항목이 반복되어 헷갈릴 수 있는 항목에 대하여 전체형 디바이더를 통해 더욱 명확히 구분한 것으로 보입니다.

Atoms

메인 페이지 내 콘텐츠 간 구분에 전체형 디바이더를 사용하였습니다. 타이틀과 카드형 콘텐츠로 구성된 리스트에서는 굳이 디바이더가 없어도 구분이 되지 않을까 싶습니다만, 두 콘텐츠를 명확히 나누고자 하는 의도가 반영되어 있어 보이기도 합니다.

Google Fit

타이틀과 항목을 전체형 디바이더로 구분하였습니다. 타이틀과 유사한 여러 항목을 구분하려는 목적으로 보이지만, 멀리서 보면 상단 항목과 하단의 타이틀이 하나의 그룹으로 느껴질 수 있습니다. 이러한 경우 디바이더의 위치를 항목 간으로 변경하거나 상하 여백을 줄여 그룹핑을 명확히 하여 개선할 수 있습니다.

마치며

디바이더는 단일요소로 구성되며, 상황에 따라 두 가지 유형을 골라 쉽게 사용할 수 있습니다. 이를 통해 콘텐츠를 시각적으로 구분하고 콘텐츠의 위계를 명확하게 표현할 수 있습니다.

반면, 쉽게 표현할 수 있는 만큼 과도한 사용 시 시각적 부담을 줄 수 있습니다. 또한 적절한 간격, 컬러를 사용하지 않으면 화면이 전체적으로 일관되어 보이지 않을 수 있습니다. 그러므로 꼭 필요한 경우에만 사용하고, 근접성의 원리를 통한 그룹핑으로 최대한 여백과 대비만을 활용해 자연스럽게 콘텐츠를 구분하는 것을 고려해야 합니다.