brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Dec 04. 2016

웹에 있는 박스를 풀어주세요!

UX 디자인 배우기 #88





Today UX 아티클


Medium에 올라온 Andrew Coyle의 글 Unboxthe Web!을 원저자의 허락을 받아 번역한 글입니다. 


박스 레이아웃 vs. 박스 제거 레이아웃


웹사이트나 앱의 각 구성요소 주변에 시각적 테두리를 두르는 것은 사용자 경험에 해를 끼치는 디자인입니다. 대부분의 경우 이런 스타일링은 필요하지 않거나, 행동을 유도하기 위해나 약간 필요할 뿐입니다. 


사람들이 말을 할 때는 그 메시지의 7%만이 단어로 전달됩니다. 나머지 93%는 말투나 바디랭귀지로 전달되는 것이죠. 시각 디자인은 콘텐츠의 바디랭귀지와 같습니다. 메시지의 목소리와 어조를 표현해주는 것이죠. “박싱(boxing)”으로 인한 시각적 노이즈는 마치 극성 맞은 영업사원이 제품에 테두리를 마구 두르는 것과 같습니다. 파는 것이 무엇인지 알려주고 싶었을 뿐인데 실제로는 고압적으로 전달하고 있었던 것이죠.



페이스북과 구글+는 각각의 타임라인 포스트를 뚜렷이 구분되는 시각적 카드로 만들어서 테두리를 두르고 그림자를 넣었습니다. 이런스타일링이 꼭 필요할까요? 


구글+ 옆과 구글 검색을 비교해 보면,구글 검색이 훨씬 더 보기 좋지 않나요?


분명히 구글 검색이 구글+보다 더 잘 디자인 되었습니다. 검색 결과를 “박스형”으로 보여주지 않고 있기 때문이죠. 하지만 유즈케이스가 다르다는 점은 알아두는 것이 중요합니다. 구글+는 커뮤니티 탐색에 관한것인 반면, 구글 검색은 물음에 대한 결과를 보여주는 상황이죠. 하지만 이런 차이에도 불구하고 저는 구글+의 비주얼 디자인이 박스형이 아니면 더 나을 것이라고 생각합니다. 


구글 검색 결과 박스형 vs. 박스 제거형


구글 검색 결과를 박스형으로 만들면 디자인이 개선되는지 보기 위해 실험삼아 만들어 보았습니다. 테두리를 추가하고, 그림자를넣고, 배경색을 넣었는데, 레이아웃이 개선된 것으로 보이나요? 아니면 오히려 후퇴한 것으로 보이나요? 


웹에서 디자인은 지난 몇 년간 많은 발전을 이뤘습니다. “플랫 디자인” 트렌드는 표면적인 스타일링에 의문을 제기하는 프레임워크를 제공해주었습니다. 그리고 구글의 머티리얼 디자인은 물리적 현실에서의 원칙을 디지털 인터페이스에 적용할 수 있는시각적 언어를 고안했습니다. 


프레임워크나 트렌드와 상관 없이, 웹에서의 디자인에 의문을 던지고 계석 발전시키는 것은 중요합니다. 저는 시각 디자인이 현재 일반적으로 인식되는 것 보다 콘텐츠 이해력에 훨씬 큰 영향력을 미친다고 생각합니다.


저는 디자이너들이 스스로에게 던질 중요한 질문이 “얼마만큼의 스타일링이 필요한가?”라고 생각합니다. 제 의견일 뿐이지만요. 웹에 있는 박스를 풀어주세요!


감사합니다.



라이브클래스 (줌 Live) UX 스터디 신청 프로그램 안내



1. 줌 Live!!! (실무자) 프로덕트 디자이너를 위한 UX 실무 과정: 총 26회, 총 78시간 (월/수/금 PM 8:30-11:30) 


2. 줌 Live!!! (취준생) UX 포트폴리오 부트 캠프 과정: 총 21회, 매주 토/일 PM 8:00-11:00 (OT 1회, 이론 10회, 포플 피드백 10회)


3. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 사용성에 대해 깊이 파고 들고, 프로덕트 역량 키우기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오전 10시-오후 1시)


4. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UI와 인터랙션 원칙에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (토 오후 3시-6시)


5. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 HCI와 UX 정의에 대해 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오전 10시-오후 1시)


6. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 프로세스 깊이 파고들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (일 오후 3시-오후 6시)


7. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 리서치 기초 뼈대 튼튼히 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (화 오후 8시30분-오후 11시30분)


8. 줌 Live!!! (예비 입문자) 프로덕트 디자이너를 위한 UX 원칙&디자인 가이드 뼈대 만들기 UX 스터디: 총 5회(이론 4회+과제 피드백1회), 총 15시간 (목 오후 8시30분-오후 11시30분)




라이브클래스 (VOD) 프로그램
UX 스터디 참석하지 못한 분을 위해, VOD 강의 촬영하였습니다
(일부 강좌만 VOD 오픈하였고,
그 외 강좌는 아직 VOD 편집 중이며 곧 오픈 예정입니다!!!!)


(VOD) UX 로드맵 시리즈 #1. UX 취업, 면접, 포플


(VOD) UX 로드맵 시리즈 #2. UI, 인터랙션, UX 정의


(VOD) UX 로드맵 시리즈 #3. UX 가설 설계


(VOD) UX 로드맵 시리즈 #4. 데스크 리서치


(VOD) UX 로드맵 시리즈 #5. 유저 컨텍스트 리서치


(VOD) UX 로드맵 시리즈 #6. UX 리서치 분석 및 UX 전략 수립


(VOD) UX 로드맵 시리즈 #7. UX 설계


(VOD) UX 로드맵 시리즈 #8. U8 설계 단계 리서치


(VOD) UX 로드맵 시리즈 #9. UX 디자인 가이드 원칙



매거진의 이전글 모바일 디자인 모범 사례

매거진 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari