UI 디자인 가이드 : 시각적인 디자인 보정
조금은 기본적인..
디자이너라면 아마도 꽤 진지한 마음을 담아 정확히 픽셀 단위로 디자인을 할겁니다.
한치의 어긋남도 없이 좌우대칭과 여백과 정확한 컬러 가이드에 맞추어가면서요. :)
그러나 때로는 정확히 계산된 작업이라 하더라도 실제 사람의 시각이 가진 착시나 기타 이유로 인해 의도와 다르게 보이는 일이 발생하고 말죠.
그래서 디자인을 하다보면 가이드를 따르는 것이 물론 중요하지만, 시각적 보정은 필수적으로 뒤따르게 됩니다. 아래 본문에서는 왜곡되어 보이는 디자인을 눈에 편안하도록 보정하는 법에 대해서 설명할겁니다.
먼저 아주 일반적인 4가지 항목입니다.
1.
버튼과 같은 색상을 사용하는 경우
텍스트 라벨의 컬러가 더 밝아보여요.
솔리드 컬러의 버튼 옆에 동일한 컬러의 텍스트를 배치하는 경우 버튼보다 텍스트의 색상이 더 밝아 보인다는 걸 알고 계신가요?
텍스트가 원래 색상보다 더 밝게 느껴지도록 하는 Font Smoothing Effect 때문입니다. 폰트가 작고 얇은 경우 이 효과는 더 강해지고맙니다.
왼쪽 - 동일한 녹색이지만, Label이 Button보다 더 밝아 보이죠?
오른쪽 - Text Label의 컬러를 조금 더 어둡게 처리해서 시각적으로는 동일한 컬러로 보일 수 있게 보정합니다.
2.
작은 텍스트(Small Text Label)는
더욱 스키니 해보입니다.
작은 텍스트를 활용한 각종 레이블은 최근 UI에 자주 사용되므로 제대로 디자인하는 게 중요합니다.
아시다시피 UX 라이팅과 마이크로 카피는 이제 UX에서 빠질 수 없는 베이직한 아이템이기도 하고,
마이크로 카피는 전환율을 높이는 아주아주 효과적인 방법으로 사용되기 때문이죠.
디자인할 때 특정 폰트 패밀리에서 작은 사이즈를 사용하게되면 시각적으로는 Font-Weight가 얇고 반투명하게 느껴집니다. 작은 사이즈 폰트 사용이 꼭 필요한 경우 생각한 것보다는 조금 더 볼드하게 디자인하는 것도 방법입니다.
굵은 글꼴을 사용하여 디자인이 선명해지고 글자가 작아도 눈에 더 잘 띄고 읽기 쉬워진답니다.
3.
배경으로 이미지를 사용할 때는 텍스트 사용에 주의하세요.
(Unreadable text over a background image)
배경으로 사용된 이미지 위의 텍스트가 읽기 힘들어지는 경우를 말합니다. 이미지 위에 텍스트를 배치하는 건 아주 흔한 패턴입니다. 그러나 이미지가 동적으로 변경되는 UI인 경우 배경이미지의 색상에 관계없이 텍스트의 가독성을 유지하는 장치가 필요합니다.
이럴 때는 Gradient Background Color을 통해 해결할 수 있습니다.
반투명한 그라디언트 레이어(A semi-transparent gradient layer)를 통해 밝은 색상의 배경 이미지 위에 텍스트가 배치된 경우에도 손쉽게 가독성을 높여줄 수 있습니다.
4.
텍스트가 많은 경우 줄 간격에 주의하세요.
(Wrong leading space)
UI상에서 많은 내용의 텍스트를 처리할 때 라인간의 여백(Line-height)이 가독성에 문제가 될 수 있습니다.
가장 간단한 공식은 폰트 사이즈보다 간격을 2-5pt 크게 설정하는 겁니다.
그리고 추가적인 착시효과들입니다.
음.. 먼저..
뮐러-라이어 착시(Müller-Lyer illusion)를 아시나요?
독일의 심리학자 프란츠 뮐러-라이어(Franz Carl Müller-Lyer)에 의해 처음 고안된 것으로, 동일한 길이를 가진 두 수직선이 화살표의 방향에 따라 원래 길이보다 더 짧거나 길어 보이는 착시 현상을 말합니다.
이처럼 서로 다른 모양을 나란히 배치하는 경우에 예상치 못한 착시 현상이 발생할 수 있습니다.
뮐러-라이어 착시 (Müller-Lyer illusion)로 잘 알려진 예시입니다.
먼저, 윗줄의 2개 모양은 완벽하게 정렬되어 있지만 정렬되지 않은 느낌을 굽니다.
아랫줄의 화살표 두 개는 선의 길이가 완전히 동일하지만 다른 것처럼 느껴집니다.
때때로 이러한 착시 현상으로 인해 디자인이 부정확하게 느껴질 수 있습니다. 이는 열심히 노력한 디자인이라는 걸 감안할 때 매우 안타까운 일이기도 하고요.
이러한 경우에는 일부 요소를 약간 수정하는 게 좋습니다. 선 중 하나를 다른 선보다 길게 수정하는 겁니다.
시각적 왜곡을 제거하고 정렬된 것처럼 보이도록 하는 데 필요한 방법이죠.
이제 아래에서 실제 UI 예제를 통해 살펴볼게요.
5. 착시로 인해 아이템이 정렬되어 보이지 않은 경우
왼쪽 - 버튼에 사용된 라운드 효과로 인해 광학적 오정렬 효과가 나타납니다.
오른쪽 - 'Overshooting'이라는 방법을 사용하는데, 버튼을 왼쪽으로 약간 이동해서 정렬되어 보이지 않던 착시를 수정하는 걸 말합니다. 폰트에서 종종 사용됩니다.
6. 형태가 일관적이지 않게 정렬된 경우
형태가 다른 요소(모양, 테두리 또는 수평 정렬이 다름)를 사용하는 경우에도, 착시 현상이 발생하여 시각적으로는 잘못 정렬된 느낌이 들 수 있습니다.
왼쪽 - 모든 요소의 디자인이 약간씩 다르며(일부는 둥근 테두리가 있고 일부는 그렇지 않음) 정렬을 했음에도 시각적으로는 정렬되지 보이지 않습니다.
오른쪽 - 방법 중 하나로 모든 둥근 모서리를 각진 모서리로 바꾸고 모든 레이블을 테두리에 맞추도록 변경합니다.
Form에서는 왼쪽 정렬이 더 잘 작동하고 전체 양식이 더 깨끗하고 잘 디자인된 느낌이 들거예요.
자세한 내용은 다른 아티클을 참고하세요.
아이콘 작업 시에도 주의할 것들이 있어요.
사용 중인 아이콘이 잘못 정렬된 것 같다고 느낀 적이 있나요? 다음은 모두 동일한 컬렉션에서 가져온 몇 가지 아이콘입니다. 실제 크기와 정렬은 동일하지만 각 아이콘의 특성(및 시각적 무게)때문인지 컬렉션은 그다지 정렬된 것처럼 보이지 않죠.
7. 정렬되지 않은 아이콘
때로는 정렬된 느낌을 주기 위해 일부러 일부 아이콘을 이동하거나 크기를 조정하는 등 변경해야 합니다.
왼쪽 - 일부 아이콘은 너무 크게 느껴지고(전화, 라디오) 일부 아이콘은 디자인과 물리적 중심이 다르기 때문에 정렬되지 않은 느낌(손)이 들죠.
오른쪽 - 이런 경우에는 유사한 모양을 공유하는 아이콘을 선택하여 더 일관성 있게 보이도록 정리합니다.(예: 원 모양 아이콘 세트)
또 다른 솔루션(위에 제시됨)은 나란히 배열할 때 더 잘 보일 수 있도록 각 아이콘의 사이즈나 무게 중심을 약간씩 보정하는 것입니다. 실제로 디자인 아이콘 작업 시 일부를 수정하고 디자인이 완벽해 보일 때까지 이 작업을 반복하게 됩니다. 수치보다 시각적 보정이 중요하니까요.
8. 비대칭 모양
삼각형과 같은 비대칭 형태로 작업할 때 기하학적 중심으로 인해 모양이 잘못 배치된 것처럼 느끼게 하는 착시 현상을 일으키는 경우도 있습니다.
다음은 비대칭 형태의 전형적인 예시인 삼각형의 '재생 버튼' 인데요.
왼쪽 아이콘이 보시다시피 기하학적으로는 실제로 완벽하게 중앙에 있음에도 불구하고,
오른쪽 예시가 시각적으로 더 편하게 보이죠. 해결방법은 역시
시각적으로 정렬되어 보일 때까지 비대칭 요소를 조금씩 이동해서 보정하는 것 뿐입니다.
디자이너 여러분의 눈을 믿으세요. :)
9. 다양한 아이콘 테마
기성(ready-made)아이콘을 사용하는 경우 동일한 컬렉션 팩에서 가져온 것처럼 비슷한 분위기의 아이콘을 선택하는 것이 중요해요. 디자인을 하다보면 가장 잘 보이는 아이콘을 찾는 길고긴 탐색의 여정에 빠지게 되는데요. 이 때 각 아이콘 간의 시각적 차이에 충분한 주의를 기울이지 않으면 왼쪽과 같은 상황에 직면하게 될겁니다. >_<
위의 예에서 볼 수 있듯이 다른 컬렉션(different shapes / different weights)의 아이콘을 사용하면 UI는 전문적이지 않게 느껴지게 되겠죠.
사용자는 무엇이 잘못되었는지 말하지는 못하겠지만, 묘하게 별로라는 건 느끼게 될거예요.
동일한 색상 팔레트, 테마 모양, 두께 및 선 너비를 공유하는 아이콘을 선택해서 작업하는 건 기본입니다.
10. 멀티라인 버튼 레이블
디자인이 때로 긴 카피보다 나은 효과를 보입니다. 다음이 바로 그 예시인데요.
물론 "즐겨찾기에 추가"라는 텍스트가 "즐겨찾기"보다 버튼의 동작을 더 직관적으로 표현하겠지만,
우리 디자이너들은 버튼 아래에 2줄의 텍스트가 있는 것을 용납할 수 없죠. (가이드는 1줄!)
왜냐하면 정렬되지 않은 것처럼 보일 뿐만 아니라 이 버튼들의 아래에 콘텐츠가 배치되는 경우에는 UI가 더 어수선해질 수 있거든요. 프로젝트 중 이러한 충돌이 발생하면 디자인이 이기는 게 좋습니다. 디자인 가이드에 맞추어 텍스트를 변경하고요. 모든 버튼의 레이블을 2줄에 맞게 변경하거나 "즐겨찾기에 추가" 레이블을 "즐겨찾기"로 줄이는 방법 등으로요.
11. 지나치게 긴 카피
그리고 마이크로 카피에 대해 말하자면 UX 작성은 디자인 프로세스의 일부여야 합니다.
디자인을 할 때에 미리 텍스트 길이를 결정하거나, 텍스트를 정할 때 디자인을 고려할 수도 있을거예요.
어쨌든 일반적으로 텍스트는 다음과 같이 간결한 편이 좋습니다.
12. 탭 영역이 너무 작습니다.
가끔 디자이너(및 개발자)는 탭 하기에 너무 작은 버튼을 만드는 경우가 생기고맙니다.
Nielsen Norman에 따르는 말씀이 아니더라도 인터랙티브 요소는 FAT-Finger Error를 방지하기 위해 최소 1cm × 1cm(0.4in × 0.4in)이어야 한다는 것을 이젠 다들 알고 계시겠죠?
12년 전부터 애플이 말했지만, 여전히 쉽게 누르기 힘든 버튼을 찾는 것은 꽤 쉽습니다.
수정 사항은 분명합니다. 버튼 크기는 시각적 콘텐츠 크기(아이콘 또는 텍스트) 보다 크게 만들면 됩니다.
13. Border Radius 왜곡
Jastrow 착시 (일명 부메랑 착시)에 대해 들어본 적이 있으신가요?
위의 그림에서 안쪽 라인의 Radius값이 더 높을 것 같지만 그건 착시효과랍니다.
사실, 두 Radius는 값이 동일하지만 시각적으로 알아채기 힘듭니다. 둥근 프레임 안에 둥근 버튼을 배치할 때에 이와 같은 일이 발생해서 시각적인 혼란을 가져옵니다.
위의 예시에서 프레임과 버튼은 둘 다 같은 둥근 모서리를 가지고 있지만 일관성이 없어 보이잖아요?
이런 경우 가장 쉬운 치트는 프레임에 아예 다른 모서리 반경을 사용해서 착시를 제거해버리는 겁니다.
14. 혼란스러운 Border (일반적인 경우)
보더(Border)에 대해 간단히 말하자면, 일단 디자인에서 선이 너무 많은 경우 시각적으로 복잡해보입니다.
디자이너들은 여백에 대해 많이 이야기하지만 제품이 발전하고 새로운 기능이 추가되면(때로는 적절한 디자인 프로세스를 거치지 않고) 프레임과 테두리가 일단 추가되어 버리기도 합니다.
테두리를 없애는 대신 공백(Space)의 차이를 사용하여 불필요한 어수선함을 만들지 않으면서 각 요소 그룹을 분리할 수 있을겁니다.
15. 회색대신 불투명한 아이템으로 변경하세요.
수많은 디자인에서 다양한 회색 음영을 사용하여 제목, 자막 및 본문 텍스트 사이에 하이라키를 만들곤합니다. 하지만 불행히도 텍스트가 다채로운 요소(예: 배경 이미지) 위에 배치되면 회색은 더 이상 세련되지 않은 경우가 생깁니다.
차라리 투명도가 있는 흰색을 사용하여 해당 요소가 배경색을 자연스럽게 표현하도록 하는게 시각적으로 보기가 좋아집니다.
투명도가 없는 회색 대신 투명도를 사용하면 요소가 배경색과 결합되어 더 자연스러워집니다.
그리고 마지막으로
Bonus Track : 다크 모드에서의 컬러 사용에 대해...
iOS 13 이후로 다크 모드가 추가되었습니다.
Apple은 "화면의 모든 요소를 눈으로 쉽게 볼 수 있도록 세심하게 설계했다"라고 합니다만, 처음 다크 모드를 한동안 사용했다면 마냥 그렇지만은 않다는 것을 눈치챘을지도 모릅니다. 그 이유는 iOS 다크 모드는 순수한 검은색을 배경으로 사용했고, 순수한 검은색은 사실 눈의 피로를 유발하기 때문입니다.
UX Movement에 따르면 "흰색은 100% 색상 밝기를 말하고 검은색은 0% 색상 밝기입니다. 색상 밝기의 이러한 큰 대비는 사용자가 보는 밝기의 차이로 이어집니다. 그래서 눈은 화면을 보면서 밝기에 적응하기 위해 더 많이 움직이게 되는 겁니다."
이에 대한 해결책은 순수한 검정 대신 어두운 회색을 사용하는 겁니다.
어두운 회색 배경을 사용하여 다크 모드를 적절하게 구현한 Slack 및 Notion을 참고해보시는 건 어떨까요?
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
