웹에 있는 박스를 풀어주세요!
UX 디자인 배우기 #88
Today UX 아티클
Medium에 올라온 Andrew Coyle의 글 Unboxthe Web!을 원저자의 허락을 받아 번역한 글입니다.
박스 레이아웃 vs. 박스 제거 레이아웃웹사이트나 앱의 각 구성요소 주변에 시각적 테두리를 두르는 것은 사용자 경험에 해를 끼치는 디자인입니다. 대부분의 경우 이런 스타일링은 필요하지 않거나, 행동을 유도하기 위해나 약간 필요할 뿐입니다.
사람들이 말을 할 때는 그 메시지의 7%만이 단어로 전달됩니다. 나머지 93%는 말투나 바디랭귀지로 전달되는 것이죠. 시각 디자인은 콘텐츠의 바디랭귀지와 같습니다. 메시지의 목소리와 어조를 표현해주는 것이죠. “박싱(boxing)”으로 인한 시각적 노이즈는 마치 극성 맞은 영업사원이 제품에 테두리를 마구 두르는 것과 같습니다. 파는 것이 무엇인지 알려주고 싶었을 뿐인데 실제로는 고압적으로 전달하고 있었던 것이죠.
페이스북과 구글+는 각각의 타임라인 포스트를 뚜렷이 구분되는 시각적 카드로 만들어서 테두리를 두르고 그림자를 넣었습니다. 이런스타일링이 꼭 필요할까요?
구글+ 옆과 구글 검색을 비교해 보면,구글 검색이 훨씬 더 보기 좋지 않나요?분명히 구글 검색이 구글+보다 더 잘 디자인 되었습니다. 검색 결과를 “박스형”으로 보여주지 않고 있기 때문이죠. 하지만 유즈케이스가 다르다는 점은 알아두는 것이 중요합니다. 구글+는 커뮤니티 탐색에 관한것인 반면, 구글 검색은 물음에 대한 결과를 보여주는 상황이죠. 하지만 이런 차이에도 불구하고 저는 구글+의 비주얼 디자인이 박스형이 아니면 더 나을 것이라고 생각합니다.
구글 검색 결과 박스형 vs. 박스 제거형구글 검색 결과를 박스형으로 만들면 디자인이 개선되는지 보기 위해 실험삼아 만들어 보았습니다. 테두리를 추가하고, 그림자를넣고, 배경색을 넣었는데, 레이아웃이 개선된 것으로 보이나요? 아니면 오히려 후퇴한 것으로 보이나요?
웹에서 디자인은 지난 몇 년간 많은 발전을 이뤘습니다. “플랫 디자인” 트렌드는 표면적인 스타일링에 의문을 제기하는 프레임워크를 제공해주었습니다. 그리고 구글의 머티리얼 디자인은 물리적 현실에서의 원칙을 디지털 인터페이스에 적용할 수 있는시각적 언어를 고안했습니다.
프레임워크나 트렌드와 상관 없이, 웹에서의 디자인에 의문을 던지고 계석 발전시키는 것은 중요합니다. 저는 시각 디자인이 현재 일반적으로 인식되는 것 보다 콘텐츠 이해력에 훨씬 큰 영향력을 미친다고 생각합니다.
저는 디자이너들이 스스로에게 던질 중요한 질문이 “얼마만큼의 스타일링이 필요한가?”라고 생각합니다. 제 의견일 뿐이지만요. 웹에 있는 박스를 풀어주세요!
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
