brunch

매거진 UX 디자인의 모든 것

라이킷 23 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Jul 28. 2022

가능한 화면 요소를 덜어내고 덜어내자

UX 디자인 원칙

라이브 클래스 PM VOD 패키지(리서치/분석/전략/설계)

178여개 UX 강좌(총 300시간) PM VOD 패키지 98% 할인 이벤트!!!! 매일 하루에 딱 한명만!!!! 선착순 1명!!!!

https://ebprux.liveklass.com/

PM이 반드시 알아야 UX강좌 VOD 패키지(178개 UX 강좌 묶음)

ebprux.liveklass.com

가능한 화면 요소를 덜어내고 덜어내고 덜어내자

전통적인 웹 디자인에서는 화면 영역을 명확히 구별하기 위해 테두리를 두는 등 시각적 구분을 명확히 했습니다. 이는 게슈탈트 법칙 중 폐쇄성의 법칙과 연관성이 있습니다.

하지만 디자인 트렌드가 많이 바뀌었습니다. 플랫 디자인과 미니멀리즘이 디자인 트렌드가 된 지 어느 정도 시간이 많이 흘렀습니다. 이에 맞춰 웹에 있는 박스나 구분 선을 제거하는 등 화면 구성 요소를 더 간결하게 보여주고 있습니다.

예를 들어 YAHOO.COM 사례를 살펴보겠습니다. 이전 (미니멀리즘 이전) 야후의 메인 페이지를 살펴보면 상위에 있는 뉴스와 바로 아래 있는 뉴스 사이에 실선의 경계선으로 상위 컨텐츠와 하위 컨텐츠 여부를 시각적으로 구분해 줬습니다.

개편 전 야후

반면, 지금 야후의 메인 페이지를 보면 콘텐츠 사이에 실선의 경계선이 없어 화면 영역이 깔끔하다는 인상을 갖게 합니다.

이처럼 박스나 경계선을 없애는 것은 미니멀리즘 디자인 원칙을 잘 따라가고 있는 사례로 보시면 될 것 같습니다.

다음 포털의 PC 버전의 개편 사례를 통해 화면 영역에서 구분선과 박스를 어떻게 제거했는지 한 번 살펴보도록 하겠습니다.

사례 1.

이전 다음 포탈 로그인 영역을 보면 '회원가입'과 '아이디 비밀번호 찾기' 사이에 구분선이 있었습니다.

개편 전 다음 포탈 로그인 영역

이후 개편된 다음 포털 사이트의 로그인 영역을 보면 '회원가입'과 '아이디 비밀번호 찾기' 영역을 보면 구분 선이 없어 깔끔합니다.

개편 후 다음 포탈 로그인 영역

지금의 다음 포털의 로그인 영역은 필요한 요소만 남겨 놓았습니다.

훨씬 이전에 비해 깔끔해 보입니다.

사례 2.

예전 포탈 추천 키워드 영역을 보면 키워드와 키워드 사이에 구분 선이 있었습니다.

개편 전 다음 포탈 추천 키워드 영역

이후 개편된 다음 포털 사이트의 키워드 검색 영역을 보면 추천 키워드가 제공되는데, 키워드 사이에 구분선이 없어 깔끔해 보입니다.

이후 개편 후 다음 포탈 추천 키워드 영역

사례 3.

예전 다음 포탈 쇼핑 영역을 보면 쇼핑홈, 소호, 21드레스, CJmall, 롯데닷컴 등 탭 메뉴에 구분 선이 있었습니다.

개편 전 다음 포탈 영역

이후 개편된 다음 포털 사이트의 쇼핑 영역을 보면 실시간, 소호, 전문샵, 위메프 탭 메뉴 사이에 구분 선이 없어 깔끔합니다.

개편 후 다음 포탈 쇼핑 영역

최근 다음 포털 사이트의 쇼핑 영역은 G마켓, 옥션만 있습니다.

이전에 비해 더 간결해졌습니다.

최근 다음 포털 쇼핑 영역

사례 4.

예전 다음 포탈 카테고리 영역은 카드 디자인 형태로 제공되고 있지만, 콘텐츠가 박스에 갇혀있어 조금 답답해 보입니다. 또한, 디자인 구성도 똑같은 크기로 제공되어 있어 사용자 시각에서 보면 어떤 컨텐츠에 관심을 가져야 하는지 한눈에 인지가 되지 않습니다.

예전 다음 포탈 카테고리 영역

이후 개편 후 다음 포털 사이트의 카테고리 영역에서 다양한 콘텐츠를 제공하고 있는데, 중요 콘텐츠는 이미지를 크게, 전체적인 디자인 구성이 리듬감이 있어 보입니다. 또한, 개편 전에는 콘텐츠와 콘텐츠를 구분하기 위해 박스 형태로 제공되어 뭔가 답답해 보였는데, 개편 후에는 과감히 박스를 제거한 것이 이전과 큰 차이점이 있습니다.