Divider

1. 가로 디바이더

콘텐츠나 레이아웃을 위와 아래로 나누는 디바이더입니다.  

2. 세로 디바이더

콘텐츠나 레이아웃을 왼쪽과 오른쪽으로 나누는 디바이더입니다.

서로 다른 콘텐츠를 구분할 때

각 콘텐츠 영역 간의 경계를 명확하게 드러내기 위해 M사이즈 디바이더를 사용합니다. M사이즈 디바이더는 양옆에 여백이 생기지 않도록 화면 가로폭에 맞춘 길이만 적용합니다.

여러 개의 위젯을 연속으로 노출할 때 

위젯 아래 에  화면 가로폭에 길이를 맞춘 M사이즈 디바이더 를 배치합니다.

성격이 다른 정보 영역을 구분할 때 

상품 상세 페이지 (SDP) 등에서 서로 다른 정보를 구분할 때도 각 영역 사이에 M사이즈 디바이더를 배치합니다.

같거나 비슷한 콘텐츠를 구분할 때

S사이즈 디바이더를 사용합니다. 단, 디바이더 길이는 다음과 같이 상황이나 목적에 따라 다르게 적용합니다.

• 풀 블리드 Full-bleed : 디바이더의 길이를 화면 가로 폭에 맞춥니다. 서로 비슷한 성격의 콘텐츠일지라도 각 요소를 낱개로 명확히 구분해야 할 때 사용합니다.
• 이너 Inner : 디바이더의 길이를 콘텐츠 영역 폭에 맞춥니다. 공통된 주제나 목적으로 묶인 하나의 영역 안에서 세부 요소를 구분할 때 사용합니다.

검색 결과 페이지 (SRP) 에서 각 상품을 구분할 때 

각 상품이 낱개의 검색 결과로 명확히 구분되도록 S사이즈 풀 블리드 디바이더를 배치합니다.

하나의 위젯 안에서 각 상품을 구분할 때 

각 상품을 낱개로 구분하지만 동시에 같은 위젯으로 그룹화된 콘텐츠임을 알 수 있도록 S사이즈 이너 디바이더를 배치합니다.

리스트 안의 각 항목을 구분할 때 

같은 리스트 영역 안의 세부 항목을 구분할 때도 S사이즈 이너 디바이더를 배치합니다.

디바이더를 쓰지 않는 상황 

여백이나 컬러 대비 등으로 인해 레이아웃의 구획이 명확할 때는 불필요한 디바이더 사용을 최소화합니다.

헤더와 하위 콘텐츠를 구분할 때 

헤더와 하위 콘텐츠 사이는 여백으로 인해 시각적 경계가 자연스럽게 나타나기 때문에 가급적 디바이더를 배치하지 않습니다.

배너와 다른 콘텐츠를 구분할 때 

배너는 이미지, 배경색 등으로 인해 다른 콘텐츠와 명확하게 구별되기 때문에 배너 위와 아래에 디바이더를 배치하지 않습니다.