디자인 쉽게 정리하기
아래와 같이 해석했습니다.
Declutter: (문제를) 없애기, 해결하기, 정리하기
Cluttered: 조잡한, 어수선한, 번잡한
calls-to-action(CTA): 행위 유발을 유도하는 버튼이나 문구
단순함은 예술 양식(art form)이라 하는데 UI 디자인에서 이만큼 잘 어울리는 사례는 없습니다.
완벽한 세상
현실적으로 보시죠. 랜딩 페이지(큰 이미지, 가입 폼, 카드) 경우 편하게 작업은 쉽게 할 수 있는 이는 일반적인 사례는 아닙니다.
*랜딩페이지는 UI를 원활하게 작업하기 좋은 환경을 빗대어 얘기.
현실
디자인을 구성하는 요소가 많이 있는데 대부분의 "현실 세상의 웹 애플리케이션"은 정보를 담을 많은 공간을 필요로 합니다. 텍스트, 미디어, 배너 그리고 다단계 내비게이션 영역(네비 바, 푸터, 사이드바, 콘텐츠 버튼)들을 담을 공간을 필요로 합니다. 뿐만 아니라 알림, 폼 양식 그리고 게시판 글 내 하위 콘텐츠, 댓글, 메타 데이터를 위한 공간을 찾는 시나리오가 있기도 합니다. 이런 한 것은 progressive web apps의 새로운 세계의 더 큰 도전이 되기도 합니다.
복잡한 디자인 정리하기
명확하게 말하자면, 제가 만약 "디자인을 정리하자"라고 얘기한다면 그 뜻은 디자인의 비주얼과 가독성 측면만을 얘기하는 것으로 나중에 성능, 팽창(bloat), SEO(검색엔진 최적화)에 영향을 미치는 것들은 배제합니다. 제가 사용하는 몇몇 방법 중 일부는 레이아웃 작업과 프로토타이핑 단계이며 디자인이 거의 마무리되어 다른 작업을 정리할 때 적용합니다. 디자인 프로세스의 일부인 거처럼 정리하기(decluttering)는 반복되는 작업입니다.
1. 공백(whitespace)
저는 시간이 흐를수록 공백의 소중함을 얻었습니다. 공백은 단언컨대 미니멀 디자인에서 가장 중요한 요소입니다. 특히 여백이 정말 대박인 건 콘텐츠가 엄청 많이 있다 해도 여백을 이용하여 개선할 수 있다는 것입니다.
많은 웹 디자인은 수평 공백(horizontal whitespace)을 잘 활용한다는 것입니다. 좌우 여백을 많이 수용한 가로 고정 페이지 컨테이너를 생각해 봅니다. 그러나 스마트폰 같은 작은 디스플레이에서는 적용이 안될 수 있습니다.
양 사이드 수평 공백은 디자인을 정리(declutter)하는 데에 도움을 주며 메인 콘텐츠를 더욱 가독성 높게 만들어 줍니다.
메인 콘테이너 사이 공백저는 보통 중앙 정렬된 콘텐츠를 선호하는데 사용자의 시선이 자연스럽게 화면 중앙으로 향하기 때문입니다. UI 요소 사이의 수평 공백 역시 중요합니다.
수직 공백(Vertical whitespace) 역시 중요한데 대부분 이를 간과합니다. 마진(margin)을 증가시킬 때 paragraph와 line-height가 어떻게 변하는지 확인해보세요.
margin, padding, line-height로 수직 공백을 늘리는 경우레이아웃이 "번잡"해질수록 공백은 (콘텐츠의) 포커스 및 가독성에 향상하여주는 큰 변화를 줍니다.
2. 컬러
컬러 팔레트 작업 시 저는 항상 "심플함이 최고다"라는 얘기를 듣습니다. 3개를 넘지 않는 2개 색상을 웹 디자인할 때 적용하는 게 이상적이라고 합니다. 저는 중립 배경색(neutral: 흰색, 회색, 검은색)을 제외한 "엑센트 색상"을 참조하는데 HSB 혹은 컬러 구성 조합은 또 다른 요인(factor)입니다. 여기서 우리는 C 팔레트 신경 쓸 필요가 있습니다.
*HSB: hue / saturation / brightness
색상의 빈도수와 근접성 역시 중요합니다.
여기서 빈도수(frequency)란 뷰 포트에서 색상이 얼마나 자주 사용되었는지 유무이고 근접성(proximity)은 엑센트 색상 주위에 배치된 다른 색상들을 말합니다. 뷰 포트를 정리하는 수단으로 색상의 빈도수와 근접성을 고려해봐야 할 것입니다.
*뷰포트(viewport): 화면에 노출되는 영역
Cluttered:
적용된 색상이 화면을 조잡하게 보인다.Decluttered:
목적과 의도를 고민한 색상의 빈도수와 근접성을 적용하니 정리되어 보인다.사이드 바 요소는 노란색을 유지했고 파란색은 상단 내비게이션 바 링크의 기본 탐색에 사용되고 빨간색은 요소 서로 가까이에 배치(적용)했습니다.
3. 라인과 보더
다른 사람들과 마찬가지로 저 역시 상자 안에 갇혀버리는 안 좋은 습관이 생기기도 합니다.
처음에는 선명한(clear) 보더와 박스 라인들이 콘텐츠 영역을 구분 짓는데 도움을 줄거라 생각했습니다. 그런데 그렇게 적용하고 보면 보더와 박스 라인들이 너무 많아 결국 시각적으로 조잡하게 됩니다.
보더와 박스 라인은 화면을 번잡하게 보이게 한다.수평 규칙을 통해 공백 적용:
라인을 제거하니 보기 좋다.라인과 보더 대신 중립 색을 적용하여 콘텐츠 간 항목 분리:
라인과 보더를 전부 제거하니 최고네..최근에 새로 개편한 format magazine은 라인과 보더 없이 복잡한 레이아웃을 깔끔하게 처리한 좋은 사례입니다.
4. 꼭 필요한 것 vs. 부수적인 것 (TMI)
(디자인) 정리하기를 고려하는 것은 사용자 경험과도 엮여있는데 보통 프런트 앤드에서 중요한 재구성하는 경우에 필요로 하는데 사용성 관점에서 역시 많은 사상(schools of thought)이 있습니다.
그러나 저희가 포커스 하는 (디자인) 정리 하기인 경우, 관계없는 정보를 최소화(collapse) 하려고 고민하거나 콜 투 액션을 줄이는 방법을 생각합니다. 처음에는 필요한 콘텐츠만 노출하고 사용자가 상세 정보를 알기를 원하는 경우가 아닌 경우엔 감추거나 최소화시켜줍니다.
콘텐츠의 문맥 중요성에 우선순위를 매기는 것은 사용자에게 UI를 계속 노출할 필요가 있는지 여부를 판단하는데 도움이 될 것입니다.
서브 내비게이션과 콘텐츠 메타데이터는 처음 접근 시 사용자에게 숨겨도 될 콘텐츠 구성의 좋은 예입니다.
*TMI(too much information): 과하게 많은 정보
많은 메타데이터와 버튼은 화면을 지저분하게 만든다.
가능한선에서 메타데이터와 버튼을 최소화하는게 좋다.또한 이것은 사용자 인터랙션에 기반한 정보를 표시하여 한 발 앞서 나가게 합니다. 최근에는 이것을 단계적 공개(Progressive Disclosure)라고 부릅니다. 저는 그것을 개념상 순차적 "마법사"로 생각합니다. 이것은 워크플로우에 기반하여 사용자에게 콘텐츠를 노출하는 것입니다.
단순하게 조금 관련 콘텐츠를 상세 드릴다운(예: 모달 창, 탭 혹은 아코디언 패널)으로 옮기거나 다른 페이지로 분기시키는 것으로 정리할 수 있습니다.
5. 크기와 비율
당연히 폭넓은(broad) 디자인 콘셉트에서 크기와 비율(scale)은 앞서 언급한 공백 적용하는 것과 유사합니다. 물론 균형을 맞추는 것이 관건이겠지만요. 웹 브라우저의 뷰포트의 UI를 정리하기 위해 , 뷰포트 화면 폭이 최근에는 생각보다 아주 크다는 것을 잊지 마세요.
프로그레시브 웹은 작은 스마트 폰에서 고해상도 데스크톱에 이르기까지 모든 것에 걸쳐있습니다.
과할 정도로 많고 다양한 종류의 디바이스의 크기와 비율을 제어하기 위한 방법 중 하나는 반응형 디자인(responsive design)이라는 게 있는데 그래서 이제는 UI 요소를 상대적 크기로 맞춰주는 EM과 미디어 쿼리(media queries)를 이용하여 UI 요소를 상황(=디바이스 해상도)에 맞게 동적으로 크기를 맞춰 사용할 수 있기 때문에 이를 십분 활용하여 디자인을 정리할 때 사용해보세요.
EM: px는 고정이나 em은 해상도에 맞춰 비율(%)로서 상대적으로 크기를 설정하는 수치.
http://blog.naver.com/acaladlfdlrh/220650635773 참조
특히 크기와 비율은 텍스트 크기를 제어할 때 적합합니다. 만약 폰트가 모두 비슷한 크기라는 걸 알았다면 크기와 비율에 관해 재고해야 할지 모릅니다. 각각의 반응형 중단점(responsive breakpoint)에서 중간 크기의 폰트를 2~3개 정도 찾아보세요. 그리고 당연히 발 변한 폰트들은 제목, 부제목, 본문 텍스트에 이론적으로 크기에 맞게 적용할 수 있을 겁니다. 그리고 서로 다른 스타일로 구성되도록 1~2 종류의 서체를 사용하면 과감한 텍스트(boldness of text)를 적용할 수 있을 겁니다. 중요한 텍 스튜 얼 콘텐츠를 위해 차이(contrast)를 적게 만들어야 합니다.
크기와 비율에 대해 몇 가지 당연한 요점을 말하자면:
중요한 요소와 콜 투 액션은 크게 하고
부수적 요소(사이드 바, 메타 테이터, 서브 내비게이션)는 작게 하세요
그래서 내용을 정리하자면:
메인 콘텐츠 사이드에 공백 적용(모바일 제외)
항목간 수평/수직 공백 수치 증가(텍스트 블럭, 카드)
패러그래프 높이(line-height) 증가
다른 색상들의 빈도수와 근접성 관련하여 엑센트 색상를 효율적으로 사용.
최소한의 보더와 라인 차이(contrast)
필요한 요소 vs. 추가 정보(콘텐츠) 정리 및 그에 따른 보여주기/감추기 구성
단순하게 작업하거나 콜투액션(콘텐츠 내 버튼) 우선순위 적용
꼭 필요한 요소와 부가적인 요소 포함 모든 요소 항목들의 크기와 비율을 고려
일반적으로 '정리하기' 결과는 미비할 수도 있지만 개선된 균일성(uniformity)과 일관성(consistency) 있는 디자인을 경험할 것입니다.
...
정리하기(decluttering) 혜택에 대해 언급하질 않았는데 상황에 따라 해석하기가 다 다르기 때문입니다. 제가 개인적으로 생각하는 것은:
가독성과 콘텐츠 집중(focus) 향상
사용성과 사용자 경험 개선
전환율과 ROI 향상
사이트 이탈률 감소
반응형 웹은 어떤 콘텐츠이냐에 따라 꿀이 아닌 독이 될 수 있습니다. 왜냐하면 초기 목적인 데스크톱과 모바일 두 가지 조건을 하나로 충족시켜주는 목적으로 생겼지만 콘텐츠 구조가 복잡하면 할수록 오히려 관리 포인트가 두배 세배 이상 늘어날 수밖에 없습니다.
그래서 무조건 글 내용을 맹목적으로 따르지 말고 스스로 걸러내는 시야를 가질 필요가 있는 거 같습니다.
