웹에 있는 박스를 제거합니다
UX 디자인 가이드라인 배우기 #2
웹에 있는 박스를 제거합니다
저는 오늘날 웹 디자인의 변화와 그에 따른 새로운 트렌드에 대해 이야기하고자 합니다. 특히, 전통적인 디자인과 미니멀리즘 디자인을 비교하며, 그 변화가 우리에게 어떤 의미를 가지는지 깊이 있게 살펴보겠습니다.
사진: Unsplash의Evie S.먼저, 우리가 알고 있는 전통적인 웹 디자인을 떠올려 봅시다. 과거에는 화면의 각 영역을 명확히 구분하기 위해 테두리나 경계선을 사용하는 것이 일반적이었습니다. 이는 게슈탈트 법칙 중 '폐쇄성의 법칙'과 깊은 연관이 있습니다. 폐쇄성의 법칙은 인간이 불완전한 형태를 완전한 형태로 인식하려는 경향을 설명하며, 이러한 시각적 구분은 사용자가 정보를 쉽게 조직화하고 이해할 수 있도록 돕습니다.
예를 들어, 과거의 YAHOO.COM을 떠올려보십시오. 개편 전 야후의 메인 페이지에서는 상위 뉴스와 하위 뉴스 사이에 실선 경계선이 있어 콘텐츠를 명확히 구분할 수 있었습니다. 이러한 디자인은 사용자가 각 뉴스 항목을 독립적으로 인식하는 데 도움을 주었습니다.
개편전 야후그러나 시간이 흐르면서 디자인 트렌드는 크게 변했습니다. 플랫 디자인과 미니멀리즘이 대세가 되면서, 웹 디자인에서도 박스나 경계선을 제거하고 화면 구성 요소를 더 간결하게 표현하는 방향으로 변화했습니다. 이는 단순히 미적 취향의 변화가 아니라, 사용자 경험과 인터페이스의 효율성을 극대화하기 위한 전략적 선택입니다.
개편된 야후의 메인 페이지를 다시 한 번 살펴봅시다. 이제는 콘텐츠 사이에 경계선이 없어 화면이 훨씬 깔끔하고 세련된 느낌을 줍니다. 이러한 변화는 사용자로 하여금 더 자연스럽고 직관적으로 콘텐츠를 탐색할 수 있게 합니다. 미니멀리즘 디자인은 불필요한 요소를 제거하고 핵심 정보에 집중하게 함으로써 사용자 경험을 향상시킵니다.
개편 후 야후이제 다음 포털 사이트의 사례를 통해 이러한 변화를 구체적으로 살펴보겠습니다.
첫 번째 사례로, 개편전 다음 포털 사이트의 로그인 영역을 들 수 있습니다. 개편전에는 회원가입과 아이디 영역 사이에 구분선이 있어 각 요소를 분리하여 인식할 수 있었으나 뭔가 로그인 영역이 복잡해 보입니다.
개편 전 다음 포탈 로그인 영역 그러나 개편된 디자인에서는 이러한 구분선을 제거하여 화면이 훨씬 깔끔하고 직관적으로 변했습니다. 이는 사용자로 하여금 더 빠르고 쉽게 수행할 수 있도록 로그인을 유도합니다.
개편 후 다음 포탈 로그인 영역
최근 다음 포탈 로그인 영역사례 2.
두 번째 사례로, 개편전 다음 포털 사이트의 키워드 검색 영역을 살펴보겠습니다.
개편 전에는 추천 키워드 사이에 구분선이 있어 각 키워드를 독립적으로 인식할 수 있었습니다.
개편 전 다음 포탈 추천 키워드 영역 그러나 개편된 디자인에서는 이러한 구분선을 제거하여 사용자에게 더욱 깔끔하고 연속적인 검색 경험을 제공합니다. 이는 사용자가 더 많은 키워드를 한눈에 파악하고 선택할 수 있게 합니다.
개편 후 다음 포탈 추천 키워드 영역최근 다음의 키워드 검색 창 하단 영역은 추천 키워드를 모두 제거하여 더 깔끔해 보입니다.
사례 3.
세 번째 사례로, 개편된 다음 포털 사이트의 쇼핑 영역을 들 수 있습니다. 이전에는 실시간, 소호, 전문샵, 위메프 등 탭 메뉴 사이에 구분선이 있어 각 메뉴를 명확히 구분할 수 있으나 답답해 보입니다.
개편 전 다음 포탈 영역 그러나 개편된 디자인에서는 실시간, 소호, 전문샵, 위메프 탭 메뉴 사이에 이러한 구분선을 제거하여 화면이 훨씬 통일감 있고 세련된 느낌을 줍니다.
개편 후 다음 포탈 쇼핑 영역 최근 다음 쇼핑 영역은 '실시간, 소호, 전문샵, 위메프' 4개를 깔끔하게 제거하고, '옥션과 G마켓' 2개만 노출하는 등 이전에 비해 더 시원스럽게 보입니다.
사례 4.
네 번째 사례로, 개편된 다음 포털 사이트의 카테고리 영역을 살펴보겠습니다. 개편 전에는 다음 포탈 카테고리 영역은 카드 디자인 형태로 제공되고 있지만, 콘텐츠가 박스에 갇혀있어 조금 답답해 보입니다. 또한, 디자인 구성도 똑같은 크기로 제공되어 있어 사용자 처지에서 보면 관심을 가져야 하는 콘텐츠인지 한눈에 잘 들어오지 않습니다.
개편 전 다음 포탈 카테고리 영역그러나 개편된 디자인에서는 이러한 박스를 제거하고 중요한 콘텐츠는 이미지를 크게 배치하여 리듬감 있는 디자인을 구현했습니다. 이는 사용자가 중요한 정보를 더 쉽게 인식하고 접근할 수 있게 합니다.
개편 후 다음 포탈 카테고리 영역 최근 다음 포털 카테고리 영역은 '관심 키워드'를 중심으로 각 섹션마다 카드 이미지 형태와 텍스트 중심의 스토리(예. 힐링되는 동물 이야기) 형태로 조합하여 리듬감있게 보여주고 있습니다.
최근 다음 포털 '관심 키워드' 영역이처럼, 최근의 웹 디자인 트렌드는 박스나 경계선 등을 제거하거나, 화면 영역마다 컨텐츠 수를 줄이는 등 화면을 더 깔끔하고 직관적으로 만드는 방향으로 변화하고 있습니다. 이러한 변화는 단순히 미적인 측면을 넘어, 사용자 경험을 극대화하고 정보의 접근성을 높이는 데 중요한 역할을 합니다.
오늘 저는 여러분께 이러한 디자인 변화가 단순히 유행이 아니라, 우리 일상 속에서 어떻게 더 나은 사용자 경험을 제공하는지, 그리고 이러한 변화가 우리에게 어떤 의미를 가지는지 깊이 있게 전달하고자 했습니다.
디자인은 단순히 아름다움을 추구하는 것을 넘어, 사용자의 삶을 더 편리하고 풍요롭게 만드는 중요한 도구입니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
