이 글은 폴란드의 디지털 에이전시인 inFullMobile의 UX/UI디자이너인 Wojciech Zieliński "How to use typography in UI Design"을 번역하여 작성하였습니다(원저자에게 허락을 받았으며, 의역이 있습니다).




들어가며

타이포그래피는 UI 디자인에서 가장 어려운 부분이라해도 과언이 아닙니다. 우리는 오랫동안 다양한 방식으로 타이포그래피 작업을 해온 결과로 여러 규칙, 이론과 실제를 경험하게 되었는데요. 이 글에서는 따로 작업이 어려운 분들을 위해 프로젝트에 사용할 수 있는 몇 가지 실용적인 팁과 비결을 알려드리겠습니다.


예시로 보여드릴게요

타이포그래피는 재미있는 주제이긴 하지만, 이론적인 부분을 얘기하지는 않겠습니다. 문자 해부학이나 활자보다 바로 적용가능한 부분을 이야기해보겠습니다.


그래도 이론적인 부분이 궁금하다면 이걸 보세요.


사용자에 대한 고려

디자인에서 미학적 측면 외에도 사용자가 존재한다는 것을 기억해야 합니다. 고해상도의 주력 상품을 위해서만 디자인하는 것은 아니니까요...



폰트는 더 유연하게 다양한 두께, 더 많은 특수기호를 제공해야 하며, 레티나에서도 잘 적용되어야 합니다. 나의 무심함으로 인해 사용자가 어려움을 겪지 않도록 특히 신경써야 하는 부분입니다. 좋은 타이포그래피는 독자에게 “명쾌함"으로 인식되겠지만, 그 반대의 경우 화면 속 난장판의 주역이 될 것입니다.

가독성이 좋은 활자의 특징을 이해하면, UI를 위한 폰트를 고를 때 무엇을 살펴야 하는지에 관한 총체적인 관점을 얻을 수 있습니다.


판독성(Legibility)

특정한 서체에서 개개의 글자를 얼마나 쉽게 구별할 수 있는지의 정도를 판독성이라고 합니다. 서체와 글자, 디테일에 중점을 두는 것을 마이크로 타이포그래피(Micro-typography)라고 하는데요. 가장 기본적인 요소 중 하나이지만, 모든 서체가 판독성을 주된 디자인 기능으로 하여 만들어지지는 않습니다. 가장 흔한 문제는 대문자 I와 소문자 I의 구분이 없다는 것입니다. 이런 폰트는 작은 화면에서 읽기 어려우므로 피하는 것이 좋습니다.


1) 엑스 하이트(x-height*)

영문에서 우리가 읽는 글자의 95%는 소문자입니다. 대문자에 비해 소문자 x높이의 비율이 클수록 서체가 더 읽기 쉬워지는 경향이 있습니다.

*x-height: 폰트의 하나. 기준선(base line)에서 소문자 x의 높이를 말한다(역자 주).




2) 카운터(Counter)

글자는 여백을 가지고 있기도 합니다. 예를 들어 ‘o’, ‘u’, ‘d’를 보세요. 이 알파벳 안의 공간들을 카운터라고 합니다. 타이포그래피 전문가들은 이 공간이 많을수록 글자를 알아보기 쉽다고 말합니다.




3) 두께(Weight)

보통은 얇은 서체가 굵은 서체보다 판독성이 좋습니다. 이는 카운터와 관련 있으며, 문자 안의 공백을 넓게 하므로 서체를 수정할 필요가 없습니다.


어떤 것이 더 읽기 쉬울까요?


가장 이상적인 문자 획의 두께는

폰트 높낮이의 약 18%입니다.


4) 넓은 면적(Wide proportion)

높이와 연관된 글자의 너비는 면적으로 설명할 수 있습니다. 일반적으로 면적이 넓은 글자가 좁은(condensed) 글자보다 알아보기 쉽습니다.


언뜻 보기에는 차이가 별로 없어 보입니다.



5) 자간(Letter spacing)

글자 간격을 계산하는 궁극적인 방법은 없지만, 대부분의 경우 글자 크기가 클수록 필요한 자간이 더 작아집니다. 안 그러면 서체가 많이 벌어져 보일 수 있고, 이에 따라 수동으로 간격을 조정해야 하기 때문입니다. UI 디자인에서 이 정도 크기는 보통 헤더(header)에 해당하는 부분입니다.


이것도 작은 차이입니다.



가독성(Readability)

가독성(Readability)은 총체적인 읽기 경험입니다. 얼마나 쉽게 텍스트 레이아웃, 제목(header)과 부제(subheading), 문단(paragraphs)과 단락(blocks)을 구별할 수 있는지를 의미합니다. 마이크로 타이포그래피는 텍스트를 시각적으로 매력적으로 만들어 사람들이 더 잘 읽도록 유도합니다. 대비, 색상, 사이즈, 구성, 작은 디테일을 통해 더 좋은 읽기 경험을 가능하게 하는 일종의 예술인 셈입니다.


1) 세리프(Serif) vs 산세리프(Sans Serif)

역사적으로 보면 세리프가 더 읽기 쉽습니다. 오랜 시간 인쇄에 사용되었으며, 긴 텍스트에서의 가독성이 많이 개선되었기 때문입니다. 세리프는 눈이 텍스트의 흐름을 쉽게 타도록 합니다.


그러나 웹과 모바일에서는 다릅니다. 가독성이 좋은 여러 개의 산세리프가 존재하며, 오늘날의 시각디자인은 보다 심플한 글자 모양(letterforms)을 선호하기 때문입니다. 실제로 웹, 특히 모바일에서는 산세리프체가 훨씬 많습니다. 게다가 디스플레이는 종이가 아니고, 보통 웹에서 긴 텍스트는 읽지 않습니다. 특히 앱에서는 더욱 그렇습니다.


트위터 앱에는 세리프를 찾아볼 수 없으나 미디엄에는 있네요.


이는 각자가 제공하는 프로젝트에서 사용자들이 콘텐츠를 어떻게 읽는지에 따라 다를 것입니다. 예로, 보통 미디엄에는 대부분 긴 것을 읽기 때문에 세리프가 많습니다. 이것이 좋은 디자인 접근방식일테니까요.



2) 행간(Line height)

행간(줄 높이)의 경우 황금비율을 사용하시는 것을 강력히 권해드립니다.


글자크기에 1.618을 곱하면

완벽한 행간이 나옵니다.


여기(링크)에서 높이를 계산해보세요.


더 경험이 많은 사람이라면 감으로 조정할 수도 있습니다. 물론 이 규칙에도 예외는 있으며 상황에 따라 대처하면 되겠습니다.


작은 차이지만, 가독성에는 큰 영향을 줍니다.



3) 텍스트 블록 너비(Text block width)

살얼음에 발을 디디는 것과 같은 부분입니다. 텍스트 블록이 너무 넓으면 눈이 다음 줄을 찾기가 어렵습니다. 라인이 너무 좁으면 줄이 너무 자주 바뀌어서 읽기 리듬이 깨지겠지요.


우리의 무의식은 다음 줄로 넘어갈 때 힘을 얻습니다.(너무 잦지 않으면) 독자들에게 계속 글을 읽게 할 에너지를 주려면, 텍스트 라인은 50~75자 정도(영문 기준)가 적당합니다.



4) 색상(Colors)

물론 작업물의 특성에 따라 다르지만, 팁 하나를 공유하자면, 순수한 그레이(또는 검정)를 사용하기보다, 주색상을 고르고 아래와 같이 주변에서 선택하는 것입니다.


분홍색 삼각형을 주목하세요.


이는 일반적인 #CCC를 사용하는 것보다 더 매력적이고 독특할 것입니다. 작은 디테일은 시각적으로 돋보일 수 있게 만듭니다.



5) 여백(White space)

여백에 관련된 많은 책과 출판물이 있지만, 타이포그래피에서는 이 한 가지를 기억해야 합니다.


여백의 주요 역할은

사용자들이 동시에 보는 텍스트의 양을

줄이는 것입니다.


이는 레이아웃을 더 효율적으로 볼 수 있게 하며, 콘텐츠가 과부하 되지 않게 도와줍니다. 여백은 레이아웃 쪽으로 시선을 끌며 잘 정돈된 느낌과 정교함, 우아함을 선사합니다.


Luxy — Tablet by Nguyen Le



6) 위계(Hierarchy)

위계는 콘텐츠를 읽는 법을 정의합니다. 계층은 제목, 부제목, 본문을 구분할 수 있게 도와줍니다. 우리는 다양한 대비(contrast), 글씨 크기(text sizes), 패딩(padding), 마진(margins)등을 사용하여 위계를 완성할 수 있습니다. 훌륭한 가독성을 만들기 위해서 반드시 마스터해야하는 테크닉입니다.


디테일을 주목하세요. 날짜와 서술한 부분의 색상이 다른데, 처음에는 차이가 잘 보이지 않습니다.

(Event_Discovery_App by Jakub Antalík)



7) 세퍼레이터(Separators)

콘텐츠를 섹션별로 나누는 좋은 방법은 세퍼레이터를 사용하는 것입니다. 가장 많이 쓰이는 것은 라인입니다. 다소 애매한 방법이지만 가독성을 높이는 데에 큰 역할을 합니다.


또 다른 방법은 요즘 인기있는 카드형식을 사용하는 것입니다. 이것은 전체 내용과는 분리된 콘텐츠에 사용하기 좋습니다. 모바일과 큰 썸네일에 사용하기 좋으며 레이아웃을 더 잘 감별할 수 있게 하기도 합니다.


두 예시를 함께 보여드릴게요. (왼쪽하단의 카드형식과 오른쪽의 라인 세퍼레이터)

nearby attractions by me



8) 반복과 리듬

이 부분은 UI 디자인에서 가장 많은 시간이 소요됩니다. (적어도 저한테는요) 반복되는 요소들은 통일감을 줍니다. 포지셔닝(positioning), 글씨 크기, 색상, 패딩, 마진, 규칙 사용, 배경, 박스들이 포함됩니다. 예컨대 저는 보통 패딩이나 여백의 사이즈를 5로 주어 일관성을 지킵니다. (제 규칙 중 하나입니다) 반복은 리듬을 만듭니다.


avsc by me



마치며

타이포그래피를 배우는 일은 실력을 향상시키면서 멋진 문구와 만족스러운 뷰를 만들어내는 매력적인 여정입니다. 실력은 블로그 글을 읽는다고 늘지 않습니다. 직접 배우고 연습해보세요. 스케치(Sketch)를 켜(포토샵 사용자들에게는 미안하지만) 멋진 작업물을 만들어보세요.


예술의 훌륭함은

흔한 것이 아닌 독특한 것을 찾는 것이다.

– Isaac Basyenis Singer (1904-1991)


ps. 이번 토픽은 이전 게시글에 대한 Viki G의 코멘트에 의해 만들어졌습니다.



원문 보러 가기





Posted by slowalk

흰 종이에 줄을 맞춰 글자를 쓰기란 생각보다 힘이 듭니다. 그렇지만 종이에 일정한 간격의 수평선이 그어져 있다면 보다 쉽고 깔끔하게 글을 쓸 수 있습니다. 우리가 흔히 사용하는 유선노트와 같이, 그리드(grid)는 더 나은 문서를 만들 수 있게 해줍니다.


그리드 시스템을 사용하면 정보에 질서와 구조를 부여할 수 있습니다. 의미 있고 논리적으로 콘텐츠를 구성할 수 있도록 도와줍니다. 편집 디자인에서 주로 다루던 그리드를 이제는 웹과 모바일 앱에서도 당연하게 사용합니다. 그리드 시스템은 어떻게 만들어야 할까요? 영국의 디자이너 Tom Newton이 말하는 그리드 시스템 가이드를 소개합니다.





1. 고려 사항

그리드를 고려할 때는 첫 번째로 문제 해결, 두 번째로 미학에 초점을 맞추어야 합니다. 그리드는 요소들의 디자인과 배치에 도움을 주는 프레임 워크이지만, 모든 것에 두루 적용되지는 않습니다. 기본적으로 내용 구성에 있어서 풀어야 할 문제를 먼저 생각해야 합니다.  


기술적인 제약 및 지침

구글의 Material Design을 보면, 어플리케이션 디자인에서 8dp의 사각형 격자를 기준으로 하는 그리드 시스템을 사용하지만, 타입과 툴 바의 아이콘에는 4dp 사각형 격자 기준의 그리드를 적용합니다. 



웹에서는 그리드 규칙에 더 많은 와일드 카드가 있지만, 반응형 웹에서 그리드가 어떻게 반영되어야 할지도 고민해봐야 합니다.


비즈니스 제약

브랜딩은 주요한 제약 조건입니다. 그리드에 브랜드 자산을 맞춰보았을 때 규칙에 벗어나는 그리드를 만드는 것은 아무 소용이 없습니다. 대부분의 브랜드는 특정한 간격이나 사용 규칙이 있는 로고를 갖고 있는데, 이를 그리드의 유닛에 적용할 수 있습니다. 


콘텐츠 제약

그리드 작업에 앞서, 어떤 콘텐츠가 담기는지 고려해야 합니다. 그 내용이 기사인지, 쇼핑몰인지에 따라 그리드를 다르게 설계해야 합니다. 또한 고정된 광고 영역이 있는지, 요소들의 크기가 변경될 수 있는지 생각해봐야 합니다.

처음에는 이러한 제약 사항들이 귀찮을 수도 있지만, 이것으로 더 쉽게 그리드 시스템을 구축할 수 있습니다. 제약 사항이 곧 그리드의 기준이 될 수 있기 때문입니다. 



2. 그리드 용어

그리드는 칼럼, 베이스 라인처럼 간단하지 않습니다. 사실, 같은 주제를 다루는 많은 책에서 용어의 차이가 있지만, 전반적으로 동일한 것을 설명하고 있습니다.


유닛 (UNITS)

유닛은 페이지에서 가장 작은 수직적 구분으로, 대개 어떤 의미 있는 콘텐츠를 수용하기에는 작지만 그리드를 구축하기 위한 가장 기본적인 그리드입니다.




칼럼, 열 (COLUMNS)

칼럼은 그룹으로 묶인 유닛의 집합입니다. 예를 들어, 기본 12개 유닛의 그리드 시스템에서 6개 씩 2열로 묶거나 4개 씩 3열, 또는 2개 씩 6열로 묶어 나눌 수 있습니다. 칼럼의 크기가 작을수록 다양한 측정이 가능합니다.




영역 (REGIONS)

영역은 페이지 레이아웃의 기초를 형성하는 칼럼의 그룹입니다. 예를 들어, 8개의 칼럼으로 구분된 16 유닛 그리드 시스템은 6개의 칼럼과 2개의 칼럼, 두 영역으로 나눌 수 있습니다. 이렇게 하여 본문과 사이드 영역이 있는 기본적인 페이지 레이아웃을 구성할 수 있습니다.




베이스 라인 (BASELINE)

베이스 라인은 서체가 놓이는 수평선을 가리키는 타이포그래피 시스템입니다. 콘텐츠에 수직 방향의 리듬감을 주며, 그리드에 포함되는 유용한 도구입니다. 




필드 (FIELDS)

필드는 페이지를 수평으로 분할한 것입니다. 요소를 수직적으로 배치하고 섹션을 동일하게 분할하는 기준으로 베이스 라인 그리드를 사용합니다.




거터 (GUTTERS)

거터는 요소 사이의 빈 공간, 유닛과 칼럼, 영역 사이의 수직적 빈 공간, 필드 사이의 수평적 공간을 말합니다. 



3. 그리드를 그리는 방법

이 방법은 최종 개발 단계 보다, 포토샵/스케치에서 그리드를 만드는데 적합합니다. 

첫 번째로 제약 조건을 따져봅니다. 페이지 한 켠에 구글 애드센스의 큰 유닛(336px X 280px)이 있는 블로그의 그리드를 생성하는 예를 들어보겠습니다. 앞서 말한 바와 같이, 이 제약 조건은 그리드 시스템을 만드는데 좋은 출발점이 됩니다. 이 광고 유닛을 중심으로 그리드를 생성합니다. 

모바일보다도 오히려 최대 너비의 디바이스를 기준으로 두는 것이 좋습니다. 보통, 모바일에서는 하나의 컬럼에 콘텐츠를 쌓는 구조로 만들기 때문에, 보다 그리드를 고민해야하 하는 큰 디바이스에 콘텐츠를 배치하는 것이 좋습니다. 


이번 예에서는 사이트의 컨테이너 폭을 표준 모니터 크기(1280px * 1024px)에 적절하고 기수 4로 잘 분할할 수 있는 크기인 1200px로 가정해보겠습니다.

기수 4는 사이트에 사용되는 모든 계산에서 16px(4 * 4 = 16)의 표준 em 크기로 나눌 수 있어야 한다는 디자인 개념입니다. 예를 들면, 1em(16px)인 글꼴의 line height는 글꼴 크기의 150%인 24px(4*6=24)이어야 한다는 규칙이 있습니다.


1200은 기수 4로 아주 깔끔하게 나뉩니다 :  


1200/4 = 300, 1200/8 = 150, 1200/12 = 100, 1200/16 = 75 


유닛의 가로폭 계산을 위해 간단한 공식을 사용할 수 있습니다.


(전체 페이지 너비 / 유닛의 수) - 거터 폭 = 합

((합 * 유닛의 수) - 거터 폭) / 유닛의 수 = 유닛의 폭


8개의 유닛으로 나뉘고 16px의 거터로 구성된 전체 1200px 너비의 페이지를 예로 들면,  다음처럼 계산할 수 있습니다 : 


(1200 / 8) - 16 = 134


최종적으로 유닛의 폭을 구하려면 유닛의 수로 합계를 나눠야 합니다. 유닛의 폭은 132px인 것을 알 수 있습니다.


((134 * 8) - 16) / 8 = 132


이제 페이지에 고정된 제약 요건인 광고 유닛을 16px의 거터와 4개의 컬럼을 사용하는 가장 기본적인 그리드에 배치할 수 있습니다.



두 개의 칼럼 영역에 광고 배너가 자리잡았습니다.  그러나 두 개의 칼럼을 합친 영역 너비와 실제 광고 영역의 너비가 맞지 않아 여백이 많이 생기게 됩니다. 이 그리드를 8개의 칼럼, 12개의 칼럼으로 바꿔봅시다. 




12개로 변경한 결과, 유닛의 폭이 소수점으로 떨어집니다. 이럴 때는 거터를 16px에서 12px로 줄여 유닛의 가로폭을 정수로 얻을 수 있습니다. 

더 균형 있는 모습을 위해 유닛들을 크게 3개의 칼럼으로 나눠 칼럼 2개는 본문 영역으로, 나머지 칼럼은 aside로 사용할 수 있습니다. 


목표는, 가능한 가장 간단한 그리드(가장 적은 수의 유닛 / 칼럼 / 영역)를 사용하여 그리드를 만드는 것입니다. 우리는 16/20/24 등으로 유닛을 늘릴 수 있지만, 콘텐츠를 배치할 때 너무 많은 경우의 수를 주는 것이 오히려 함정이 될 수 도 있습니다. 디자인에서 말하는 less is more는 여기에서도 적용됩니다. 



4. 그리드 생성을 돕는 도구 

웹 페이지의 그리드 생성을 돕는 도구도 있습니다. 수식 계산이 필요 없이 간단하게 원하는 너비와 칼럼 수로 그리드를 만들어줍니다.



Grid.guide는 그리드 생성을 돕는 좋은 온라인 리소스입니다. 단순히 전체 폭과 열의 수를 입력하면 자동적으로 거터 너비 별로 그리드의 수치를 계산하여 보여줍니다. 





Guide Guide는 포토샵 익스텐션으로, 원하는 다양한 설정으로 포토샵에서 그리드를 쉽게 생성할 수 있습니다.


그리드를 생성하는 방식이 다소 복잡해 보일 수도 있지만, 충분히 고민해 볼 부분입니다. 디자인 초기 단계에서 그리드 시스템을 사용한다면, 보다 일관되고 정보 전달에 효과적인 레이아웃을 설계할 수 있으며, 웹 페이지 제작을 빠르고 쉽게 할 수 있습니다.



출처 : Tom Newton Blog


by 비숑 발자국

Posted by slowalk

웹사이트 디자인을 처음 계획해보거나 리뉴얼을 생각하는 분들께 도움이 되는 글을 모았습니다. 웹디자인의 역사를 포함해 홈페이지 방문자 수를 늘리는 7가지 팁까지, 웹디자인에 대한 다양한 글을 읽고 웹디자인에 대한 이해를 높여보세요.



1. 짤방으로 이해하는 웹 디자인의 역사 


웹디자인의 역사는 어떻게 발전해왔을까요? 웹의 암흑기부터 반응형 디자인까지 거쳐온 웹디자인의 발전을 간단한 짤방으로 이해할 수 있습니다.


짤방으로 이해하는 웹 디자인의 역사 (→글 읽기)



2. 움짤로 이해하는 반응형 웹디자인의 9가지 요소 


반응형 웹디자인이라는 말 많이 들어보셨을 텐데요. 다양한 디스플레이 환경에 대응할 수 있는 반응형 웹디자인에 대해 정확히 이해할 수 있도록 돕는 글입니다. 아직도 반응형 웹디자인의 개념이 모호하다면 꼭 읽어보세요.



움짤로 이해하는 반응형 웹디자인의 9가지 요소 (→글 읽기)



3. 우리 홈페이지, 어떻게 만들어 활용할까? 


웹사이트 제작을 고민하는 분이라면 꼭 읽어 보아야 할 내용입니다.

1편은 웹사이트, SNS, 블로그 이 세가지 온라인 매체를 자세히 소개

2편은 온라인 콘텐츠의 성격과 순환구조, 특징에 따른 자원목록화(보유자원감사) 방법

3편은 웹사이트의 개발 및 운영에서 필수적으로 알고 있어야 할 사항을 설명합니다.



우리 홈페이지, 어떻게 만들어 활용할까? 

(→1편 읽기) (→2편 읽기) (→3편 읽기



4. 보기 좋은 약관이 읽기도 좋다. 


회원 가입이 필요한 웹사이트라면 약관은 꼭 필요합니다. 대부분의 약관은 지루하고 이해하기 어려운데요, 사용자의 입장에서 보기 좋고 이해하기 쉬운 약관을 보여주는 방법을 알아봅니다.



보기 좋은 약관이 읽기도 좋다. (→글 읽기) 



5. 기본에 충실한 웹 사이트 만들기, (사용자를) 생각하게 하지마!


사용자에게 친절한 웹사이트는 무엇일까요? 도서 ‘(사용자를) 생각하게 하지마’에 나온 웹사이트 메뉴 위치, 메뉴명, 태그라인 선정 방법에 대해 알아봅니다.



기본에 충실한 웹 사이트 만들기, (사용자를) 생각하게 하지마! (→글 읽기)



6. 홈페이지 방문자 수를 늘리기 위한 7가지 팁


모든 콘텐츠가 홈페이지에 드러나는 것은 좋은 방법일까요? 기업과 서비스의 철학과 메시지에 맞게 방문자가 흥미를 느끼고 다시 찾아올 수 있도록 하는 7가지 팁을 전합니다. 



홈페이지 방문자 수를 늘리기 위한 7가지 팁 (→글 읽기) 

Posted by slowalk

오늘도 우리는 웹서핑을 하며 슬라이드되는 배너를 돌려보고, 복잡한 메뉴 사이를 누비며, 간혹 뜨는 팝업을 끄고 있습니다. 이렇게 무심코 사용하는 웹사이트들이 불편하신 적은 없으신가요? 우리가 무심코 사용하고 있는 웹 UX/UI 패턴들. North가 제시하는 가이드라인을 보면서 어떤 것들이 문제가 있고 어떻게 해결할 수 있을지, 우리는 무엇을 고민해야 하는지 알아봅니다. 


North는  “모바일 우선주의, 인-브라우저, 시스템 기반의 디자인과 개발”을 모토로 하는 오픈 소스 커뮤니티입니다. 얼마 전 웹 UX가이드라인을 만들어 Outdated UX pattern. 즉 구식의(?) UX들에 대해 이야기 하고 있습니다. 



1.  슬라이드 배너(Carousel)





슬라이드 배너, 롤링 배너 등으로 불리는 캐러젤. 좌우 화살표와 하단의 동전 같은 페이지 표시를 가지고 있는 이 디자인은 왜 좋지 않을까요? Brad Frost는 “캐러젤은 회의에서 서로 비난하기 위해 존재한다”며, 이를 비판하고 있습니다. 


North는 캐러젤 대신에 “콘텐츠 우선순위”를 정하라고 제안합니다. 4~5개의 콘텐츠를 같은 자리에 배치하는 것은 콘텐츠의 우선순위 파악에 실패한 것이고, 우선순위를 정하지 못한다는 것은 콘텐츠 전략의 실패이기 때문이지요. 공간에 아무 콘텐츠나 배치하지 말고 우선순위를 정해 가장 중요한 하나만 보여주는 것이 좋겠습니다.



2. 커다란 배경 사진 




최근 유행하고 있는 디자인이네요. 멋진 사진을 웹사이트 배경에 넣은 디자이너는 무얼 잘 못 했을까요? 문제는 스크린 사이즈입니다. 모두가 다 커다란 모니터에서 좋은 사진을 감상하면 좋겠지만 1024px보다 작은 모니터를 쓰는 사람도 많습니다. 보이지도 않고, 실제로 중요하지도 않은 커다란 이미지는 페이지를 느려지게 할 뿐입니다.


해결책은 상황에 맞는 이미지 사이즈 조정입니다. 여기서 상황이란 사용자의 환경이겠죠. 다양한 스크린 사이즈에 대응하기 위해 최적화된 이미지만을 보여줄 수 있는 페이지를 만들어야 합니다. Interchange가 좋은 예시인데요. 스크린 사이즈에 따라, 사용자의 접속 환경에 따라 조정된 이미지를 보여줍니다. 



3. 복잡한 메가 메뉴




메뉴에 마우스를 대거나 클릭했을 때, 하위의 모든 메뉴가 펼쳐지는 메가 메뉴를 많이 보셨을 겁니다. 사이트 전체를 한 눈에 볼 수 있어 편리한 메가 메뉴는 어떤 단점이 있을까요? North는 메뉴의 단계별로 내려가고, 작은 사이트들의 모임처럼 보입니다. 이는 사용자가 정확히 원하는 위치를 찾는데 매우 복잡합니다. 


Jared Spool은 메가 메뉴에 대해 이렇게 말했습니다. “사용자는 찾고자 하는 정보에 대해 어떤 단어나 문장을 생각하고 있는데, 이것을 트리거 워드라고 한다. 메가 메뉴는 메뉴 전체가 닫힐 때, 모든 단어, 문장이 사라지므로 사용자는 앞으로의 일을 예측하기 어렵다.(중략)“


이런 복잡성을 해결하기 위해서는 다음과 같은 배려가 필요합니다. 먼저, 메뉴 구조를 단순화하고 특히 겹겹히 싸여있는 메뉴나 4개 이상 단계가 내려가지 않도록 합니다. 그리고 사용자의 사용 흐름을 자연스럽게 구성해야 합니다. 헷갈리거나 복잡한 메뉴는 사용자에게 사용을 포기하게 만듭니다. 그들이 원하는 방향으로 똑바로 나아가도록 유도해야 합니다.



4. 이미지 속의 글자




웹사이트 구축에 있어 너무도 당연한 내용이지만 마음처럼 지키기 어려운 내용입니다. 이미지 안의 글자들은 ‘alt’ 속성 없이는 스크린 리더에 읽히지 않습니다. 또한 반응형웹이 적용된 작은 스크린에서는 글씨가 아주 작아져 사람도 읽을 수 없는 경우가 있습니다.


웹폰트가 해결책이 될 것 같은데요. Typekit, fonts.com , Typography.com, Font squirrel Web font generator 등에서 웹폰트에 대한 정보를 얻을 수 있습니다. 위 서비스에는 많은 웹폰트가 있지만 모두 영어 알파벳이죠. 그렇다면 한글은 어떻게 할까요? Google webfont의 ‘나눔글꼴’과 유료로 서비스 되고 있는 Typolink라는 서비스가 있습니다.



5. 레이어 팝업 




레이어팝업, 모달창 등으로 불리우는 이 UI는 어떤 문제가 있을까요. 다른 창을 직접 띄우는 팝업에 비해 사용자 경험에 좋은 것처럼 보이지만, 내부적으로는 여러가지 문제가 있습니다. 카보드 사용성 문제, 커서의 위치 문제, 브라우저의 크기가 달라졌을 때, 창을 종료하고 싶을 때 등 여러가지 숨겨진 문제들이 있습니다.


레이어 팝업 대신 이런 방법을 쓰면 어떨까요. 팝업의 내용을 화면에 직접 위젯과 같은 형태로 넣는 방법을 쓸 수 있습니다. 또한 새로운 페이지로 이동시키는 방법도 있습니다. 다양한 브라우저 크기를 고려해서 여기처럼 재밌는 방법을 쓸 수 있습니다.



6. 무한 스크롤 




역시나 많이 사용되고 있는 무한 스크롤은 어떤 단점이 있을까요. North는 무한 스크롤되는 페이지를 사용자가 선택하고 쓸 수 있도록 고려해야 한다고 말합니다. 즉, 사용자에게 다음 페이지를 불러올지 결정할 수 있도록 해야 합니다. 페이지 하단으로 내려가면 자동으로 내용을 불러오기 보다는 http://www.inc.com/처럼 사용자가 원할 때, 보여줄 수 있어야 합니다.


North가 지적하는 문제들과 그에 맞는 해결책을 알아보았습니다. North는 오픈소스 커뮤니티일뿐 그들의 말이 정답은 아니겠지요. 하지만 우리가 무심코 보고, 쓰고, 때로는 만드는 웹 UI에 대해 조금 더 생각해 볼 수 있는 기회였습니다. 



참고 : 

North

Outdated UX Patterns and Alternatives

6 Epic Forces Battling Your Mega Menus

Fullscreen Overlay Styles & Effects



by 북극곰 발자국




Posted by slowalk