🎨 23 디자인 카타 "리스트 컴포넌트 분리 어떤 유형을 선호하시나요?"

A. 구분선(Divider)이 좋은 이유

• 항목 간 구분이 명확해 정보 인식이 빠름
  → 리스트 항목 간 혼동을 줄여줌, 특히 콘텐츠 양이 많을 때 유리

• 복잡한 화면에서 정돈된 느낌을 줌
  → 항목 단위로 빠르게 인식 가능

B. 여백(Spacing)이 좋은 이유

• 미니멀하고 세련된 인상을 줌
  → 최근 UI 트렌드에 더 부합, 깔끔하고 여유로운 느낌

• 시각적 피로 감소
  → 구분선보다 덜 답답하고 부드러운 사용자 경험 제공

실제 디자인에서는 여백과 구분선을 적절히 조합하는 방식이 가장 균형 잡힌 접근일 수 있다고 생각한다. 너무 많은 구분선은 시각적 피로를 줄 수 있고, 여백만 사용할 경우 경계가 모호해질 수 있으므로 사용 맥락(정보량, 사용자 환경, UI 밀도 등)에 따라 유연하게 조합하는 것이 이상적이지 않을까❓

라고 생각했는데 뒤늦게 저 이미지가 이메일 UI 예시라는 것을 발견하고, 당연히 이메일에는 구분선이 흔히 사용되지 않나?라고 생각했다. 그런데 실제 이메일이나 대화 목록을 찾아보니, 대부분 구분선 없이 여백만으로 구성되어 있다는 걸 발견하고 놀랐다. 나는 당연히 구분선이 기본일 거라고 생각했는데...😧

조사해본 결과 이는 디자인 트렌드가 변화했기 때문이라는 걸 알 수 있었다.
예전에는 구분선이 있어야 정보 구조가 명확하다고 여겨졌지만, 요즘은 더 심플하고 감성적인 UX가 선호된다. ‘꼭 필요하다고 생각한 시각적 장치’가 실제로는 없어도 무방한 경우도 많고, 사용자들은 생각보다 빠르게 적응하며, 오히려 과한 시각적 힌트를 원하지 않는 경우도 많다는 점도 흥미로웠다.

그러다 나는 주로 노트북에서 이메일을 본다는 사실을 떠올렸고 실제로 데스크탑 버전 이메일 UI를 확인해보니 구분선이 존재했다. 아마도 내 기억은 여기서 비롯된 것 같다..!

그렇다면 왜 데스크탑 UI에는 구분선을 사용하는 걸까?

• 한 화면에 더 많은 정보를 담아야 해서, 여백만으로는 구조를 정리하기 어렵고
• 마우스를 사용하는 환경에서는 hover 효과와 함께 명확한 시각적 구분이 필요하기 때문이라는 결론에 도달했다.

반면 모바일은 화면이 좁고 터치 기반이기 때문에 구분선을 많이 넣으면 오히려 답답해 보일 수 있을 것 같다.

나는 사실 지금까지 디바이스에 따라 디자인이 달라지는 걸 크게 체감한 경험이 많지는 않은데, 이렇게 직접 발견하고 관찰해보니 신기하고 흥미로웠다.