|
읽는 디자인, REASIGN입니다. 구독해주셔서 감사합니다. 매주 화/목(주 2회) 해외 디자인 아티클을 읽기 쉽게 번역하여 보내드립니다.
|
|
이것만 지켜도 똥은 안 싸는, 5분 디자인 가이드(feat.비전공자)
목차
1. 풍부한 대비 활용하기
2. 완전 검정색보다 진한 회색
3. 중요한 콘텐츠 먼저
4. 모든 것을 배열하기
5. 자간을 고려한 폰트 사이즈
6. 순서가 중요하다면 목록형 보기
7. 먼저 흑백으로 디자인하고, 컬러는 추후에 추가하기
8. 안정된 디자인 하기
9. 컬러 팔레트 활용하기
10. 애플과 구글 OS 기존 리소스 사용하기
|
|
|
디자인을 배울 수 없다고 믿는다면, 레전설 David Eric Grohl이 한 말을 기억하자.
나느 드럼을 배운 적이 없다. 기타를 배운 적도 없다. 그냥… 저절로 알게 됐다. 우리가 무언가에 열정을 가지고 있고, 미쳐있고, 그것만 생각한다면, 원하는 모든 것을 해낼 수 있다.
-밴드 Foo Figheter, Dave Grohl
|
|
1. 풍부한 대비 활용하기
배경색과 폰트 컬러는 눈의 피로도를 유발하지 않기 위해서, 반드시 달라야 한다. 일반적으로 하얀색 배경 위의 검정색 텍스트는 가장 또렷해보이는 경향이 있다. 연회색, 노란색, 초록색은 피하는 게 좋다. 눈을 가늘게 뜨고 찡그리며 본다는 건, 읽는 데에 문제가 있다는 뜻이다.
|
|
2. 완전 검정색보다 진한 회색
텍스트 색을 골라야 한다면, 완전 검정 대신 #333333 RGB (51,51,51)를 사용해 보는 것을 추천한다. 하얀색 배경 위의 완전 검정색은 눈에 자글자글한 잔상을 남겨서 글자에 집중하기 어렵게 만든다.
|
|
3. 중요한 콘텐츠 먼저
앱이나 웹의 주요 쓰임새를 명확하게 표시하기 위해, 가장 중요한 콘텐츠를 맨 위에 배치하기. 중요한 콘텐츠를 확대나 스크롤링/클릭 없이도 볼 수 있어야 한다.
|
|
실제로 시각적 위계질서가 잘 잡힌 사례를 살펴보자.
인스타그램(좌)은 유저가 업로드한 사진/영상에 초점을 맞췄다. 핀터레스트(우)는 검색 바를 최상단에 놓음으로써 시각적 위계질서를 형성했다. 핀터레스트는 의도적으로, 페이지의 첫 번째 요소를 검색 박스로 선택했다.
검색은 앱의 핵심 기능이며, 사람들은 핀터레스트를 검색하고 훑어보는 용도로 사용한다.
|
|
|
|
(좌)인스타그램 (우)핀터레스트
|
|
사례 두 가지를 더 살펴보자.
Spotify(좌)는 앨범 아트워크와 곡명을 가장 먼저 배치하고, 앱 사용 버튼은 두 번째로 배치했다. 앱 사용 버튼이 두 번째라 하더라도, Spotify는 재생과 일시정지, 이전 곡/다음 곡 버튼에 힘을 실었다.
페이스북(우)은 인스타그램과 매우 비슷한데, 친구의 콘텐츠를 앞으로 당기고, 중간에 배치했다.
|
|
4. 모든 것을 배열하기
필요 없거나 질이 좋지 않은 것들을 정하는 가장 빠른 방법은 배열에서 제거해보는 것이다. 디자이너들이 “그리드”를 사용해야 한다고 말하는 건, 팀에게 잘못된 배열 문제에 대해 이야기하려는 것이다.
배열을 조정하는 것은 우리가 모든 앱/웹을 처음 만들 때나, 10배 쯤 좋아보이게 만드는 가장 쉬운 개선 방법이다.
|
|
또 다른 배열 사례를 보자. 이번엔 미디엄이다.
이 사진은 내가 약간 변형을 가한 미디엄 웹 레이아웃이다. 어떤 느낌이 드는가? 없애야 할 것이 보이는가?
힌트: 좌측 가장자리의 배열을 보라. 어떤 느낌이 드는가?
|
|
|
좌측에 잘못된 배열로 인한 불필요한 여백(visual river)을 표시해보았다. 오른쪽에는 간단하게 주요 내용들을 재배열해본 것이다.
|
|
|
|
(좌)불필요한 여백을 만드는 불안정한 배열, (우)일정한 배열
|
|
|
|
(좌)배열의 나쁜 예, (우)수정된 배열
|
|
5. 자간을 고려한 폰트 사이즈
우리는 개미를 대상으로 디자인하는 게 아니다.
폰트 사이즈를 키우는 것은 내용을 읽기 쉽고 행간을 자유롭게 쓴 글을 소화하기 쉽게 만들어준다.
|
|
|
|
좋은 텍스트 사이즈 vs 나쁜 텍스트 사이즈:https://developer.apple.com/design/tips/
|
|
6. 순서가 중요하다면 목록형 보기
대부분의 웹/앱은 검색 바를 갖고 있고, 이를 어떻게 배치할 것인지에 대한 건강한 토론이 오가고 있다.
순서가 중요하다면, 목록형 보기(list view)가 가장 효과적이다.
순서가 별로 중요하지 않고 검색을 장려하고 싶다면(핀터레스트나 에어비앤비처럼), 유저들이 검색 바를 찾게 하기 위해 액자형 보기(grid view)가 더 유용할 것이다.
|
|
7. 먼저 흑백으로 디자인하고, 컬러는 추후에 추가하기
흑백으로 디자인하는 것은 앱에서 핵심 경험을 디자인 하는 것과 풀어내는 것에 초점을 맞추게 해준다.
컬러는 강한 감정적 반응을 일으키고 종종 핵심적인 디자인 문제에 집중하는 것을 방해하기도 한다.
|
|
8. 안정된 디자인 하기
손에 무리를 주는 디자인은 매우 중요한 이슈다. 하단 Luke Wroblewski의 엄청난 아티클에 있는 그래픽에 대해 생각해보자: Responsive Navigation: Optimizing for Touch Across Devices.
Luke 가장 접근하고 사용하기 쉬운 방법으로 휴대폰 레이아웃을 설정했다(적어도 오른손잡이들에게는).ㅡ나는 오른손잡이용에서 왼손잡이용으로 인터페이스를 바꿀 수 있는 설정을 가진 앱을 좋아한다.
많은 효율적인 모바일 앱들이 네비게이션과 핵심 동작들을 하단에 위치시킨다.
|
|
9. 컬러 팔레트 활용하기
컬러는 일종의 정해지지 않은 어둠의 마법과도 같다. Dribbble에 무작정 들어가서 “Color Palettes”를 찾거나 Coolors나 Color Claim같은 컬러 팔레트를 제공하는 사이트를 이용할 것을 강력 추천한다.
끝없는 토론이나 근거 없는 추측에 시간을 낭비하지 마시길.
|
|
10. 애플과 구글 OS 기존 리소스 사용하기
애플과 구글은 아무나 안드로이드/iOS를 위한 소프트웨어를 만들 수 있도록, 믿기 어려울 정도의 리소스를 만들었다.
예를 들어, the Google Material spec 은 앱의 디자인을 한 층 점핑 시켜줄 가이드라인, 리소스, 컬러, 아이콘, 구성요소 등을 제공한다.
Apple has the HIG — their Human Interface Guidelines는 iOS 앱을 디자인할 때 알아야 할 모든 것들의 개요를 알려준다.
|
|
|
|
Google Material Design, The Apple Human Interface Guidelines에서 가져온 사진들
|
|
기억하자, 디자인은 연습이다.
디자인 문제를 찾기 위해 눈을 훈련하는 것은 약간의 시간과 연습을 요하지만, 위의 팁들이 어떤 디자인이든 훨씬 더 낫게 만들어준다는 것을 알게 될 것이다.
이 글이 도움이 되었다면 좋아요 눌러주시고, 필요한 친구들에게 공유해주셨으면 한다!
|
|
지난 콘텐츠 보기 >>
2018.07.05 <UI디자인 꿀팁 TOP 10> http://bit.ly/2MOU9dL
2018.07.03 <디자인 퀄리티를 높이는 7가지 실용적인 팁> http://bit.ly/2NrPBv5
|
|
|
|
|
