brunch

You can make anything
by writing

C.S.Lewis

by 길리 Mar 23. 2018

10분 만에 더 나은 UI 디자인 만들기

5가지 실용적인 방법

2008년 즈음, UX 디자이너를 부르는 다른 이름으로는 '그림을 못 그리는 디자이너'였다. 다른 말로 하면 비주얼 그래픽을 만들어 내는데 어려움을 겪을수도 있다는 말을 돌려서 말한 것일 테다. 그때 당시에는 비주얼 디자이너와 UI 디자이너의 구분이 완전히 명확했었다. 각각의 태스크에 요구되는 스킬 셋이 다르다고 판단한 것이고, 실제로도 그랬었다. 하지만, 요새 즈음 Visual design/ UI designer/ Interaction designer와 같은 직함은 사라지고 점점 비주얼과 UI 디자이너의 구분이 합쳐진 Product designer/ UX designer와 같은 이름으로 바뀌어 가고 있다. 이런 직함의 변화는 산업계에서 디자인을 어떻게 바라보는지에 대한 시각을 명확히 반영하고 있다고 생각한다. 디자이너는 이쁜 걸 만드는 사람이 아니다. 하지만, 이쁜 걸 만드는 것은 중요하다.

아마 공대나 마케팅 같은 곳에서 디자이너 산업계로 넘어온 사람들은 디자인적 의사결정의 근거/데이터 마련, 논리적인 디자인 씽킹 같은 곳에서는 두각을 나타낼 수는 있겠지만, 비주얼 그래픽을 만들어 내는 일은 어려울 수밖에 없다. 비주얼을 잘 하기 위해서는 공식 같은 것도 없고, 오랜 시간 동안 색에 대한 감각, 레이아웃에 대한 감각 같은 것들이 훈련이 되어야 하기 때문이다.

하지만, 요새처럼 UI디자인에 있어서는 어느 정도의 디자인 가이드라인이 제공되서 처음부터 그림을 그려서 그래픽을 만들어야 하지는 않는다. Google의 Material design guideline과 Apple의 Human Interface guideline을 따라야 하고, 일관성이나 사용 편의성을 위해서는 개인 디자이너의 독특함이나 디자인 색은 오히려 배제되어야 한다. 그래서 준비했다. 우리나라처럼 족집게로 딱딱 골라서 공식처럼 나타내기를 좋아하는 문화도 별로 없지 않은가. 아래 5가지의 항목에 의거해서 본인의 디자인을 한번 다시 보자.

1. 텍스트 사이즈보다는 색깔과 Bold를 이용해서 계층 나타내기

PM이나 개발자 혹은 디자인을 잘 모르는 의사결정권자들과 디자인 리뷰를 하다 보면 이런 요청들을 받곤 한다.

"그 글자 좀 더 크게 할 수 없어?"

옛날에 공간의 제약이 별로 없는 워드 문서에서나 글자를 더 크게 하면 주목이 갔었지만, 지금은 제약된 상황 속에서 Typography Hirarchy를 만들 수 있는 방법을 강구해야 한다. 그래서 글자 크기를 통해서 내용을 강조하기보다는 색을 다르게 하여 Typohraphy Hirarchy를 나타내 보아라.

오른쪽 그래픽은 2개의 텍스트 사이즈를 사용했고, 왼쪽 그래픽은 4개의 텍스트 사이즈를 사용했다. 단, 오른쪽의 그래픽에서 콘텐츠 영역의 모든 텍스트의 사이즈는 동일한데, 계층을 나타내기 위해서 색을 사용했다.

간단히 이야기하면 공식은 다음과 같다.

1. Primary content — 진한 글자색 사용하기 (그러나 #000 검은색은 사용 금지)

2. Secondary content — 진한 회색 글자색 사용하기 (날짜 정보, 시간 정보 등)

3. 부가 정보 — 더 옅은 회색 글자 사용하기 (태그, 카피 라잇 등 경험에 필수적인 정보가 아닌 것들)

2. 그림자는 펑퍼짐한것 보다는 타이트하게, 그러나 뜻은 전달할 수 있도록

UI 디자인에서 자주 사용되는 요소가 그림자인데, 그 시발점에는 Material Design을 빼놓을 수가 없다. 실제 물리적 공간에서 종이들이 겹쳐져서 그림자를 만드는 것에 착안했던 이 디자인 언어는 그림자를 통해서 UI Element가 얼마나 표면에서 올라와 있는지를 나타낸다. (참고: Google Material Design Guideline)

그림자를 사용할때 이 UI Element가 표면에서 얼마나 떠 있는지를 한번 생각해 봐라. 그러면 그림자를 쓰는데 있어서 어느정도 가늠이 보일 것이다.

UI Element에 따라 얼마나 표면에서 떠 있는지 나타내어 주는 다이어 그램 (Source: Google Material Design Guideline)

왼쪽은 조금 더 펑퍼짐한 그림자인 반면 오른쪽은 좀 더 타이트한 그림자를 사용하였다.

위 두 개의 목업 중 어느 게 더 눈에 깔끔하게 잘 들어오는가? 나는 개인적으로 타이트한 그림자를 사용해서 카드가 표면에서 얼마나 떠 있는지를 상대적으로 정확하게 나타내는 방향을 선호한다. 그림자를 사용하기 이전에 Z-Depth가 얼마나 되는지 생각해봐라. 그리고 그에 걸맞은 그림자를 사용해라.

3. Divider로 섹션을 표현하기보다는 간격을 더 주어서 표현하기

선으로 영역을 구분하는 것도 방법이지만, 그 영역을 구분하기 위하 선들도 역시나 노이즈가 될 수 있다. 한번 선을 빼고 간격을 넓혀서 영역을 구분시켜 보자. 시각적 잡음이 훨씬 줄어드는 결과를 볼 수도 있다. 물론, 이 방법은 모든 케이스에 적용하기는 힘들고, 잘 먹히는 몇개의 경우가 있다.

4. Card UI의 경우 회색을 사용해서 영역 구분하기

가까이 있는 것의 영역을 구분하기 위해서 선을 사용하거나 배경색을 달리 해서 구분을 하는 방법이 있는데, 사실 나는 선을 사용하기 보다는 배경색을 달리 해서 영역을 구분하는 방식을 선호한다. 그게 좀 더 깔끔해 보이면서도 시각적으로 충분히 구분을 지어 보여주기 때문이다. 아래의 예제처럼.

5. 뾰족한 직각보다는 코너를 둥그렇게 깎아보기

이건 약간의 호불호가 있기는 하지만, 최근의 안드로이드나 iOS UI들을 보다 보면 코너가 직각인 경우는 찾아보기 힘들다. 찔리면 아플 것 같은 카드들 보다는 약간은 둥그런 코너가 좀 더 부드러운 이미지를 준다. 일반적으로 3px을 쓰고, 좀 큰 카드의 경우는 8px을 쓰기도 한다.

위의 다섯 가지 사항을 고르면서 사실 많은 고민을 했다. 그래픽 디자인은 아무래도 호불호가 많이 갈리며, 보는 사람에 따라서 라운드 코너가 좋을 수도, 직각 코너가 좋을 수도 있기 때문이다. 더군다나 나는 비주얼을 전공한 사람이 아니기 때문에, 이런건 비주얼을 전공한 사람에게는 애기 걸음마 같은 정보일수도 있다. 그러나 이 소소한 팁들은 내 개인적인 경험과 실무에서 사용했을 때 꽤나 효과적이고 기본적인 정보였기 때문에 공유하고 싶었다. 만약 본인이 가지고 있는 팁이 있다면 댓글에서 언급해 주시면 감사하겠다.

그러나, 결국 지름길은 없다.

예전에 언니네 이발관의 보컬 이석원의 인터뷰를 듣다가 그가 '나는 음악을 시작한 이후로 음악을 단 한 번도 즐거워하며 들은 적이 없다'라고 이야기했었다. 그리고 그런 특성은 거의 모든 음악가들로부터 찾을 수 있다. 그들은 음악을 들으며 감정을 느끼기보다는 분석적으로 '아, 이런 느낌을 내기 위해서 이런 이런 테크닉을 썼구나' 라며 듣는 것이다. 그래서 음악을 들을때 감정보다는 이성이 먼저 그들의 머릿속에 차지하기 때문에 '즐거움'은 사라져 버린 것이다.

이런 것처럼 우리 디자이너들도 평소에 디자인을 사용하면서 디자인을 분석하면서 봐야 한다. 그것도 아주 디테일하게. 평소에 휴대폰을 사용하면서 한 스크린에 시선을 고정시킨 채 이런 비주얼은 이렇게 풀었구나, 모션에 이런 뜻을 담기 위해서 이렇게 풀었구나 하면서 바라볼 수 있어야 한다. 그게 우리가 디자인을 풀타임을 하는, 보통의 사람들이 보지 못하는 구석을 보는 연습을 계속하여야만 결국 좋은 디자인을 만들 수 있을 것이다. 약간의 직업병을 가지자.

글을 잘 쓰려면 책을 많이 읽어야 하고, 발표를 잘 하려면 좋은 발표를 많이 봐야 하고, 음악을 잘 하려면 좋은 음악을 많이 들어야 하고, 좋은 미각을 키우려면 다양한 음식을 먹어봐야 하는 것처럼, 디자인도 별반 다르지 않다. 본인이 만드는 디자인은 결국 본인이 얼마나 디자인을 분석적으로 바라보는지에 달려 있다 해도 과언이 아니다.

오늘부터 휴대폰을 사용하면서 그림자를 어떻게 사용하였는지, 색은 어떻게 사용하였는지, 카드 UI의 일관성은 어떻게 지켜 내었는지, 모션에는 어떤 뜻을 담고자 하였는지, 영역의 구분은 어떻게 지었는지, 타이포그래피 계층은 어떻게 나타내었는지, 주요 정보와 부수 정보를 어떻게 구분하였는지 디자이너의 눈으로 살펴볼 수 있기를 바란다. 그러다 보면 그 숨은 실력은 무조건 빛을 발휘하리라고 내 보장하며 말하겠다.

그럼에도 불구하고,

위의 팁들이 도움이 되었으면 좋겠다. 그러나 위의 팁은 임시방편적인 도움만 될 뿐, 결코 장기적인 도움이 되지 못할 것을 알고 있다. 마치 골목식당에서 백종원이 가게 사장님에게 레시피를 알려주고서 일시적으로 음식 맛을 끌어올릴 수는 있어도, 그것을 유지하는 것, 그 레시피보다 더 나은 음식을 만들어 내는 건 결국 그 가게 사장님의 역할이다. 그것처럼, 본인의 디자인 실력을 장기적으로 끌어올리는 건 바로 당신의 역할이다. 본인만의 방식을 찾을 수 있기를 바란다.

예제들은 만드는데 시간이 좀 걸렸습니다. 여기까지 긴 글 읽어 주셔서 너무 감사합니다. 공유, 댓글, 라이크는 저에게 꽤나 큰 힘이 된 다는 걸 알았습니다. 고맙습니다.

저, 길리는 현재 미국 시애틀에 머무르며 디즈니에서 프로덕트 디자이너로 일하고 있습니다.

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