전 세계 사람들을 위한 더 좋은 프로덕트 만들기

오랜만이네요..! 새로운 회사에 들어가 정신없이 몇 개월을 보내다 보니 번역 글을 연재한지도 꽤 오래되었네요. 앞으로는 더 정기적으로 업로드해볼 예정입니다. :0

Dropbox팀의 John Saito의 미디움 글 번역입니다. (원문)

모든 글의 번역은 원 저작자의 허락을 받습니다. 과도한 의역 주의.

상상해보자. 당신은 지금 어떤 신상 앱을 설치했다. 그 앱은 이미 트위터에서 사람들에게 극찬받고 있다. ‘정말 탁월하고… 스마트하고… 러블리하고… 삶을 변화시킬 것만 같고…’

자, 이제 앱을 실행해보자 :

음… 조금 이상해 보인다. 위쪽에 비디오가 있고, 비디오 위의 캡션은.. 어느 나라 말인지도 모르겠다. 문법도 이상하고, 버튼의 텍스트는 튀어나가 있다. 어떻게 사람들이 이걸 보고 좋다고 하는 걸까..?

이 앱은 당신이 쓰는 언어로 만들어지지 않은 것으로 드러났다. 엘프어(Elvish)로 만들어졌고, 그다음 영어로 변환한 것이다. 대부분의 사람들은 엘프어 버전을 사용하기 때문에, 영어 버전은 어떻게 보일 것인지 모른다.

믿거나 말거나, 이 이야기는 비 영어권 사용자들에게는 꽤 익숙할 것이다. 대부분의 앱들이 영어로 먼저 만들어지기 때문이다. 다국어 상황을 따로 챙기지 않는다면, 영어가 아닌 다른 언어로 변환되었을 때의 디자인 디테일들을 놓치기 쉽다.

위의 상황들을 대비하기 위해 염두에 두고 작업해야 할 몇 가지 팁들을 소개한다.

1. 길어질 글줄에 대비하여 넉넉한 텍스트 공간을 마련하자.

가장 빈번한 다국어 변환 문제는, 늘어나는 글줄에 대비한 충분한 공간이 없다는 것이다.

“NEW!”라는 라벨을 예시로 들어보겠다. 영어로 느낌표까지 4자이다. 하지만 불어로는 “Nouveau !” 9자로, 영어의 두배가 넘는다. (불어 문법에서는 느낌표 앞에 띄어쓰기가 있어야 한다)

시안에 텍스트로 된 버튼이나 라벨이 있다면 글줄이 길어졌을 때를 대비해서 공간을 충분히 줘야 한다. 그렇지 않으면 텍스트가 겹쳐지거나 잘릴 수 있다.

나는 번역시의 글줄 길이를 대략적으로 알기 위해 구글 스프레드 시트를 이용한다. GoogleTranslate 함수를 이용하면, 한 번에 여러 언어의 번역 결과를 얻을 수 있다. 단 몇 초만에, 각각의 언어로 번역했을 때의 길이를 대강 알 수 있는 것이다.

IBM’s globalization site에서는 여러 가지 언어가 영어에 비해 얼만큼의 여유 길이가 필요한지 퍼센티지로 볼 수 있는 유용한 차트가 있다.

2. 좁은 단에 텍스트를 넣는 것은 피하자.

다단 레이아웃은 콘텐츠를 분류하는 좋은 방법 중 하나이다. 구조, 균형감, 리듬감을 주기 때문이다. 다단 레이아웃은 잘 만들어진 그리드 시스템 안에서 가장 효과적이다.

만약 글줄의 길이를 예측할 수 없는 상황에서는 어떻게 될까? 번역 중에 일어날 수 있는 상황이다. 한 줄이 두 줄이 되고, 세 줄이 되는 순간, 신중하게 맞춘 레이아웃의 균형이 급 박살 난다.

좁은 열에 텍스트를 넣게 되면, 번역을 거치면서 줄 수가 늘어나는 경우가 생긴다. 상황에 따라 좁은 열 대신 넓은 행을 사용하는 것이 안전할 수도 있다. 이렇게 하면 텍스트 길이에 구애받지 않고 레이아웃도 깨지 않을 수 있다.

3. 되도록이면 텍스트를 이미지 안에 박지 마라.

만약 이미지에 텍스트를 올려서 작업했다면 (개발로 텍스트를 올리는 것이 아니라 이미지 자체에 텍스트를 픽셀로 심었다면), 다국어 대응하는 그날이 바로 헬게이트가 열리는 날이 될 것이다. 번역자가 포토샵이나 스케치 형식의 작업 파일에서 텍스트 레이어를 일일이 수정할 수는 있겠지만, 이 과정은 꽤나 비효율적이다. 언어도 제각각 텍스트의 길이도 제각각이니 하나하나 레이아웃을 조정해주어야 하기 때문이다.

위 예시보다 효율적인 두 가지 방법이다.

• 텍스트 대신 시각적인 요소를 활용하라 : 꼭 실제 언어를 사용할 필요가 없는 경우도 있다. 아래 예시에서는 텍스트가 있어야 할 자리를 선 요소로 뭉뚱그려놓았지만, 선 요소가 일종의 텍스트 영역처럼 보인다.

• CSS로 텍스트를 올려라 : 아래 예시에서 초록색 원 안에 있는 텍스트는 이미지 안에 박혀있는 것이 아니라, css를 사용하여 추가한 것이다.

4. UI 요소들로 문장을 완성하지 말자.

UI 요소들을 여기저기 배치해보고, 가장 적절한 레이아웃을 찾는 것은 디자이너들에게 일상적인 일이다. ‘입력 필드를 여기 오른쪽에 놓아볼까, 드롭다운 메뉴를 왼쪽으로 옮겨볼까…’

하지만 단어들을 다룰 때는 더 심혈을 기울여야 한다. 텍스트가 들어간 버튼, 박스, 드롭다운 메뉴 등등을 포함하여 문장을 완성하려고 하면 문제가 발생할 수 있기 때문이다.

다국어 지원 시 문제가 생기는 몇 가지 이유이다.

• 언어별로 어순이 다름 : 각각의 언어는 어순이 다르다. 예를 들어 “셔츠 3개 구매”라는 문장을 영어로 바꾼다면, “구매”에 해당하는 영어 단어가 문장 맨 앞으로 위치가 바뀌게 된다. 텍스트를 포함한 디자인 요소의 순서가 고정된다면 모든 언어를 커버하지 못할 것이다.
• 복수화 : 영어에서는 대부분의 명사가 단수 형태 하나, 복수 형태 하나이다. (예 : “1 picture”와 “ ~pictures”) 하지만 러시아어에서는 앞의 숫자에 따라 무려 세 가지의 명사 형태가 올 수 있다. 그렇기 때문에 사용자가 문장 중간에 숫자를 넣는다면, 입력된 숫자에 따라 그 문장은 문법적으로 틀릴 가능성이 크다.
• 성별 : 일부 언어는 남성형/여성형 명사나 형용사를 사용한다. 프랑스어에서는 어떤 대상을 수식하느냐에 따라 “large”라는 단어가 “grand”, “grande”, “grands”, “grandes” 등으로 바뀔 수 있다. 만약 당신이 문장 중간에 드롭다운 메뉴를 넣는다면, 문장 안에 있는 단어에 따라 그 문장은 문법적으로 틀릴 가능성이 크다.

이러한 문제가 발생하지 않게 하려면 어떻게 하면 좋을까? UI 요소들을 문장 안이 아닌 밖으로 배치하는 것이다.

5. 메타포(비유)를 조심하자.

제품 디자인은 비유에 관한 것이다. 모든 아이콘과 버튼, 인터랙션은 현실 세계에 있는 무언가를 투영한 결과물이다. Dropbox 로고의 메타포는 보관함이다. 클릭 앤 드래그 인터랙션은 손으로 어떤 것을 집어서 옮기는 것과 같다.

그러나 어떤 메타포는 문화권에 따라 다른 의미를 가진다. 미국에서 부엉이는 현명함을 상징하지만, 핀란드나 인도에서는 멍청함을 상징한다.

사물의 생김새 역시 각각 다르다. 대부분의 미국인들은 아래 그림을 백이면 백 우편함으로 인식한다. 하지만 전 세계 사람 모두가 그렇지는 않다. 미국을 제외한 대부분의 나라는 우편함에 깃발이 달려있지 않다. 그렇기 때문에 이 메타포는 모두를 위한 것이라고 할 수는 없다.

6. 기능 이름은 설명이 포함된 것으로 짓는다.

마케팅적인 관점에서 ‘기능 이름을 재미있게 지으면 바이럴이 잘 되지 않을까?’라는 생각을 했다. 하지만 재미있는 이름은 느낌을 잘 살려 번역하기가 어려웠고, 다른 언어로 번역했을 때 의미가 아예 없어지기도 했다.

몇 년 전 드롭박스는 파일의 버전 히스토리를 무한으로 제공하는 기능을 소개했다. 처음에 우리는 이 기능을 “Packrat”이라고 불렀다. (산림 쥐 : 쥐같이 생긴 북미산의 작은 동물. 작은 막대기 같은 것들을 물어다 굴 안에 모아 놓는 습성이 있음. 영미권에서는 별로 필요 없는 것들을 모으는 사람이라는 의미가 있음)

이와 같은 문제를 피하려면 기능 이름을 좀 설명적인 단어로 구성하는 편이 안전하다. 설명적인 단어는 조금 지루해 보이지만, 다국어 상황과 사용성 모두를 고려했을 때는 더 나은 선택지일 수도 있다.

7. 의역을 위한 다른 대안을 제공한다

일반적으로 번역을 염두에 둔 글을 작성할 때는 정확하고, 중립적이고, 둘러말하지 않는 것이 좋다. 그러나 브랜딩을 위해 약간의 재미 요소를 첨가해야 할 때도 있기 마련이다.

이와 같은 경우에는 영어 버전과 직역 혹은 의역을 위한 설명 버전, 총 두 가지를 준비하면 좋다.

번역하기 애매한 단어가 있을 때, 번역자를 위한 코멘트를 따로 달아서 의역에 대한 자유도를 주는 것이다. 예를 들어, 우리는 지금 드롭박스에서 사용되는 스티커들을 라벨링 하는 작업을 하고 있다. 그리고 아래 스티커를 “OMG 냥이”이라고 이름 붙이기로 결정했다.

번역자를 위해 OMG냥이와 함께 ‘놀란 고양이’라는 코멘트를 달았다. 번역자는 ‘놀란 고양이’라는 설명을 보고, 각 언어에 맞도록 자유롭게 의역을 할 수 있을 것이다. 물론 필요한 경우에는 직역을 할 수도 있겠다.

위의 팁들이 도움이 되었기를 바란다. 만약 이것 외에도 다른 팁이 있다면 서로 배울 수 있도록 언제든 아래에서 자유롭게 의견을 주길 바란다. 이 글이 전파되면서 우리가 전 세계 사람들을 위한 더 좋은 제품을 만들 수 있기를 바란다.

*추가

IBM의 디자이너 Tom Roach가 공유해준 구글 스프레드시트로 약 60개가 넘는 언어의 줄글 길이를 테스트해볼 수 있다. 매우 유용!

다국어 상황을 고려한 UI 디자인 was originally published in UI / UX 번역 매거진 on Medium, where people are continuing the conversation by highlighting and responding to this story.

실제로 무언가를 세상에 소개하기.

GRAPHIQ의 디자이너 Samantha Zhang의 Side Project에 관한 글입니다(원문). 아이디어가 생각나서 해보고 싶은 것들은 많은데, 막상 실행에 옮기기는 어렵네요. 사이드 프로젝트를 통해 관심 분야의 사람들과 소통하고, 점점 커져서 더 좋은 기회로 거듭난 경우들을 보면 더욱 동기 부여가 됩니다. 부담 없이 이런저런 아이디어를 실험해보거나 관심 있는 분야를 꾸준히 아카이빙 하는 것만으로도 의미 있는 사이드 프로젝트가 될 것 같습니다.

브런치나 미디움에 올리는 번역 포스트도 나름의 소소한 사이드 프로젝트입니다.

UI/UX 번역 매거진

당신이 나와 비슷하다면, 언젠가는 해보고 싶은 수많은 사이드 프로젝트들의 목록을 가지고 있을 것이다. 머릿속에 있을 수도 있고, 어딘가에 디지털 형식으로 있을 수 있다.

내 리스트는 보통 이런 모습이다.

• 카운트 다운 시계와 투두 리스트가 결합된 앱 만들기
• 실제 3D 테트리스 게임 만들기
• 사람들이 자신의 아이디어를 투척할 수 있는 아이디어 병 만들기
• 사용자가 운동할 때, 활기찬 음악이나 오디오 북을 재생해주는 앱 만들기
• UI 키트를 만들고 조금씩 수익 얻기

이런 식으로 쭉쭉 진행된다.

이들 중 몇 가지는 어떤 날 오후 4–5시간 정도 뜰 때 시작해본다. 하지만 결국 대부분은 미완성된 채로 내 로컬 컴퓨터에 한해 두 해 넘어가도록 잠들어있고, 나머지는 심지어 시작도 하지 못한다.

모두 바쁘다. 우리 모두가 바쁘다. 개인적인 목표, 친구들, 가족, 직업 이외에도, 우리는 사이드 프로젝트 같은 것들을 통해 즐거움을 찾으려고 노력하고 있다. 새로운 가능성에 대한 탐구에 희열을 느끼기 때문일 것이다. 주변엔 너무나도 많은 아이디어들이 있고, 이것들을 모두 실현해보고 싶을 것이다. Pieter Level의 블로그를 보면, 우리도 12개월 동안 12개의 스타트업을 런칭 할 수도 있을 것이다.

대단하다! 하지만 이게 모든 사람들에게 적용되는 것은 아니다.

우리는 이 놀라운 목록들 중 단 한 개의 아이디어조차 실제로 실현시키지 못할 수도 있다.

왜 그럴까?

개인적인 경험에 의하면 크게 두 가지 이유가 있다.

1. 선택의 모순

어떤 것을 작업할 것인지 선택하는 것은 그 자체로 부담이고 에너지를 소모하는 일이다. 재미있는 무언가를 할 시간이 생기면 나는 나의 리스트를 열어본다. 하지만 바로 시작하는 것 대신, 나는 이것을 위해 어떻게 시간을 쓸지에 대해 더 많이 생각하게 된다.

이 생각은 바보같이 들리겠지만, 실제로는 어쩔 수 없이 이렇게 하게 된다. 이 아이디어에 대한 리서치를 시작하고 잠재성을 평가하는 동안 시간은 흘러간다. xkcd에서 이것에 대해 정확하게 표현해냈다. 실제로 나는 어떤 것을 선택할 것인가에 대해 더 많은 시간을 할애하고 있었다.

선택은 지연을 불러오고, 이것이 반복되면 결국 어떤 일도 마칠 수 없다.

2. 마감일의 부재

“이것은 사이드 프로젝트일 뿐이다. 휴식을 달라!” 자기 자신에게 자주 말했다. 데드라인을 정하는 것(적어도 단계를 정하는 것) 대신 그냥 흘러가는 대로 대로 진행했다. 이 방법이 더 느긋하기도 하고 진행과정 중에 다른 흥미로운 것들을 발견하게 될지는 몰라도, 실제로 일을 마치는 데에는 별로 도움이 되지 않는다.

또 다른 귀여운 차트가 있다.

데드라인은 우리에게 엄청난 동기를 부여한다. 어떤 일을 완수할 때 가장 큰 동기부여가 아닐까 싶다. 데드라인을 설정하지 않는다면 일을 끝까지 마무리 지을 수 있는 에너지가 생기지 않을 것이다.

그래서, 뭘 어떻게 해야 할까?

개인적인 제안은, 일 년에 하나의 사이드 프로젝트에 도전하라는 것이다. 이것은 프로젝트 중 무언가를 계속 골라야 하는 부담을 완화시켜 줄 것이고, 일 년이라는 데드라인을 설정해 줄 것이다.

규칙은 단순하다.

- 1월 1일이 되기 전에 한 개의 사이드 프로젝트 주제를 고른다. 면밀한 계획은 필요는 없지만 작업을 진행할 수 있을 만큼은 구체적이어야 한다.

- 1월 1일에 시작하고 12월 31일에 끝맺어야 한다. 끝맺는다는 것은 프로젝트를 출시하거나, 수익이 생기거나, 출간하거나 등등이다.

- 바로 시작할 필요는 없다. 처음 1~2달 정도는 리서치를 진행하고 아이디어를 입증하는 것 만으로 충분하다.

- 월 말마다 프로젝트의 상황에 대해 블로그에 게재하고 다음달의 목표에 대해 정한다. 그러면 데드라인에 대해 압박을 느낄 것이고 매월 생산성이 향상될 것이다.

나의 계획

2015년에는, Parse.js의 튜토리얼을 Tuts+에 올리는 사이드 프로젝트에 대부분의 시간을 썼다. 이것이 도움이 된다는 것을 알게 되었고, 실제로 10개의 시리즈를 끝냈다. 나의 첫 번째 튜토리얼이었고, 가장 길었던 여정이었다. 엄청난 뿌듯함을 느꼈다.

2016년에는 드래그 앤 드롭을 이용하여 빠르게 웹 페이지를 제작할 수 있는 빌더를 만들기로 계획하고 있다. Designmodo의 Startup Framework Generator 같은 것이다. 서비스를 만들어 오픈하고 디자이너들이 누구나 참여할 수 있게 되면, 사용자들은 각각 다른 세트에서 가져온 블록들을 쉽게 조합할 수 있을 것이다. 일단 무료 HTML 탬플릿들, 그리고 PSD 형태의 파일을 HTML로 바꾸는 것에서부터 시작할 것이다. 또한, 여기에 가치를 더하기 위해 하나 혹은 두개의 세트를 직접 제작할 것이다. 최종적으로, 다른 디자이너나 개발자에게도 오픈하여 참여할 수 있게 하고, 이 플랫폼을 통해 수익을 낼 수 있게 하고 싶다.

이 아이디어를 검증할 것이고, 다른 몇몇 아이디어를 2016년 1월 전까지 탐색해 볼 것이다. 그리고 이 모든 프로세스가 진행되는 것에 대해 글을 작성할 것이다.

커뮤니티

한 술 더 떠서, One Side Project Challenge라는 미디움 퍼블리케이션을 만들었다. 우리의 모든 사이드 프로젝트에 대해 아이디어를 나누고, 향후 업데이트에 대해 공유할 수 있도록 만들 것이다.

이제 당신 차례이다.

사이드 프로젝트를 수행하는 시간을 어떻게 만들 것인가? 도전에 대해 어떻게 생각하는가? 할 것인가? 2016년의 계획은 무엇인가?

지금 참여해보자. 퍼블리케이션을 팔로우 하고 당신의 아이디어와 생각을 남겨보라.

One Side Project Challenge

일 년에 한 개의 사이드 프로젝트 was originally published in UI / UX 번역 매거진 on Medium, where people are continuing the conversation by highlighting and responding to this story.

이 글은 InVision팀이 미디움에 기고한 ‘4 tips on typography in UI design’ 을 번역한 글 입니다.

원문은 링크에서 확인하실 수 있습니다.

커뮤니케이션은 디자인에 있어서 중요한 역할을 한다. 웹디자인, 모바일 앱 혹은 웨어러블 UI 등 어떤 것을 디자인하더라도, 창작물은 명확하게 그 의도와 목적을 전달해야한다. 커뮤니케이션에 있어서 텍스트는 매우 중요한 역할을 하기 때문에, 디자이너는 타이포그래피에 대한 단단한 이해가 필요하다.

물론, UI를 디자인하는 것은 ebook이나 블로그 테마를 디자인하는 것과는 다르다. 그러나 글자 중심이라는 원칙은 똑같이 적용된다. 결국, 화면에서의 커뮤니케이션은 텍스트를 통해 일어나고, 글꼴은 언어의 UI인 셈이다.

Oliver Reichenstein 는 그의 주요 에세이에서 “ 웹디자인의 95%는 타이포그래피” 라고 말했다.

타이포그래피를 최적화하는 것은 가독성, 접근성, 사용성 뿐만 아니라 전반적인 그래픽 발란스를 맞추는 것이다.

즉, 타이포그래피를 최적화시키는 것은 곧 당신의 UI를 최적화시키는 것이라 할 수 있다. 이를 위한 4가지 팁과, 더불어 서체를 잘 활용한 3가지 예시에 대해서도 소개하려한다.

UI에서 타입 세팅을 위한 4가지 팁들

타이포그래피 거장 로버트 브링허스트는 그의 대표작, 타이포그래피 스타일의 요소 (The Elements of Typographic Style) 에서 다음과 같이 말한다.

타이포그래피는 컨텐츠를 존중하기 위해 존재한다.

모든 인터페이스는 사용자가 직접 결정하고 선택할 수 있는 요소가 있다. 타이포그래피는 사용자가 인지 부하를 일으키지 않는 선에서 컨텐츠를 보여주고, 사용자의 의사결정 과정을 도와주어야 한다. 위대한 타이포그래피는 독자를 컨텐츠로 이끄는 것이지, 서체 그 자체에 집중하게 하면 안된다.

1. 다양한 사이즈에 대응할 수 있는 서체를 고르자

대부분의 UI는 다양한 크기의 텍스트 요소로 이루어져있다(버튼 카피, 필드 라벨, 섹션 해더 등등). 모든 크기에서 가독성과 사용성을 유지할 수 있도록, 다양한 크기와 웨이트에서도 잘 읽힐 수 있는 서체를 골라야한다.

예시 : Avenir, Univers, Lato

2. 활자끼리 쉽게 구분될 수 있는 서체를 고르자

많은 서체들은 비슷한 글자 형태끼리 헷갈리기 쉽다. 예를들어 대문자 ‘I’ 와 소문자 ‘L’은 매우 비슷해 보인다. 또, 소문자 ‘r’과 ’n’이 함께 쓰였을 때는 소문자 ’m’ 으로 보이기 쉽다. 그러므로 이러한 글자 형태의 구분이 확실한 서체를 골라 사용자들에게 의미를 명확하게 전달해야한다.

3. 텍스트를 UI로 생각하자

‘ 좋은 디자이너는 텍스트를 컨텐츠로 생각하지만, 위대한 디자이너는 텍스트를 UI로 다룬다.’

미국의 디자이너 카메론 몰이 거의 10년 동안 해왔던 말이다. 장황하게 들리겠지만, 이것은 인터페이스를 디자인할 때 정말 맞는 말이다. 텍스트가 어떠한 기능적인 역할을 할 때, 그것은 UI가 된다. 모든 UI 디자인은 텍스트와 관련이 있다. 만약 납득이 가지 않는다면, ‘미세요’라고 적힌 당기는 문 손잡이를 보았을 때 느끼는 혼란에 대해 생각해보면 된다.

4. 사용자의 진정한 목적을 생각하자 (Job to be done)

JTBD란 사용자의 진정한 니즈를 위한 디자인 관점이다. 사용자가 문제를 해결하는 과정을 어떻게 디자인적으로 도와줄 수 있는지 계속 질문을 던져야 한다. 이 질문에 대한 답은 당신의 UI에 반영되어야 한다. 타이포그래피도 포함해서 말이다.

팀브라운은 이렇게 말했다.

서로 다른 서체들은 다른 역할을 한다.

Instapaper는 사용자의 진정한 목적과 그에 맞는 서체를 잘 조합하여 좋은 작업물을 만들어냈다.

Instapaper의 웹과 모바일앱은 크게 두 가지 기능으로 나눌 수 있는데,

1. 사람들이 웹 컨텐츠를 저장하고
2. 후에 그것을 읽을 수 있도록 하는 것이다.

Instapaper의 UI는 대부분 텍스트 기반이고 읽는 것에 초점이 맞춰져있기 때문에, 디자이너들은 두 가지의 다른 서체를 선택했다.

: 컨텐츠를 위한 텍스트는 세리프 서체인 Lyon과 디스플레이에 적합한 웨이트를, 그리고 UI 에서는 산세리프 서체인 JAF Bernino Sans를 사용한 것이다. 이는 사용자가 즐겨야할 컨텐츠와, 그 외의 것들(UI 요소들)을 명확하게 구분지을 수 있었다.

사용자의 기대에 부응하는 이러한 서체의 선택은 굉장한 효과를 가져왔다. 그동안 우리는 수 천권의 책, 잡지 그리고 신문들에서 세리프 서체를 통해 장문의 컨텐츠를 소비하곤 했다. 최근의 산세리프 스타일은 웹의 출현을 통해 더욱 두드러졌고, UI 요소로서 자연스럽게 자리잡은 것이다.

배울만한 좋은 예시들

고맙게도, 우리에게 영감을 줄 만한 아름답고 유용한 타입세팅을 가진 UI 사이트는 아주 많다. 여기 글쓴이가 가장 좋아하는 3가지의 예시를 보자.

Medium (미디움)

미디움은 “UI로서의 텍스트” 라는 컨셉을 아주 훌륭하게 소화했다. 읽고 쓰는 플랫폼 답게, 미디움은 타이포그래피를 가장 중요시한다. 다른 글쓰기 플랫폼이나 CMS들은 미디움의 예시를 참고하면 좋을 것 같다.

미디움은 Freight Text Pro와 JAF Bernino Sans 두가지 서체를 사용한다. 게재된 컨텐츠들은 매우 아름답고, 읽기 쉽도록 사용자를 섬세하게 배려했다. (두가지의 스타일의 인용문도 쓸 수 있다!) 더군다나, 글을 쓸 때에는 퍼블리싱이 완료 되었을 때와 똑같은 모습으로 보여지기 때문에, 두 가지 모드(글쓰기 모드와 미리보기 모드)를 왔다갔다 할 필요가 없다. — 당신이 보는 그대로 업로드할 수 있는 것이다.

UI에 사용된 서체를 살펴보면 Bernino라는 서체를 사용하였는데, 컨텐츠의 제목과 같은 서체이다. 그러나 UI 에서는 더 작은 사이즈를 써서 직관적으로 구별할 수 있다.

Slack (슬렉)

슬렉에서도 텍스트는 중요한 컨텐츠다. 슬렉은 팀 협업 커뮤니케이션 플랫폼인데, 여러 인터렉션이나 구성 요소들을 보면 슬렉이 텍스트 기반이라는 것을 알 수 있다. Buffer(버퍼) 처럼, 슬렉은 하나의 서체(Lato)를 고수하지만 이를 최대한 잘 활용하고 있다.

테두리, 다양한 웨이트와 색상, 그리고 여백에 대한 고심을 통해 슬렉의 디자이너들은 방향성을 잃지 않으면서도 쉽게 컨텐츠를 읽을 수 있는 플랫폼을 개발해냈다.

Rdio (알디오)

음악 앱으로써, 알디오는 텍스트의 영향을 가장 적게 받는다. 그러나 우리는 이 작은 텍스트도 UI의 한 부분으로 여긴 것과, 서체 (Whitney)가 다양한 크기에서도 잘 어우러지는 것을 볼 수 있다.

(번외) Lato 와 Whitney 서체 모두 대문자 ’I’ 와 소문자 ‘L’이 구분이 가지 않는다는 단점이 있다. 서체를 고를 때에는 서체의 모든 글자들을 반드시 확인하고, 이것이 당신의 프로덕트에 얼마나 영향을 끼치는지 평가해보아야 할 것이다.

UI 서체를 정하는 것

어떤 프로젝트건, 타이포그래피는 당신의 UI에 있어서 중요한 역할을 할 것이다. 서체를 잘 설정하면 사용자를 도와주지만, 잘못 설정한다면 오히려 사용자를 방해한다. 그러니 이 가이드라인을 숙지하고 충분한 연습을 한다면, 더 좋은 결과로 사용자에게 다가갈 수 있을 것이다.

원문 출처: blog.invisionapp.com on April 6, 2015.

UI 디자인에서 타이포그래피를 위한 4가지 팁 was originally published in UI / UX 번역 매거진 on Medium, where people are continuing the conversation by highlighting and responding to this story.

Luke Jones가 Medium에 기고한 ‘Optical Adjustment’라는 글의 번역입니다. 기본적인 내용들이지만, 다시 한 번 정리해보는 의미로 번역해봅니다. 학창시절에 교수님께서 항상 말씀하셨던, ‘Believe your eyes’가 생각나는 글입니다.

디자인을 시작한 지 얼마 안되었을 때였다. 나는 포토샵이나 CSS가 말해주는 정보에 의존했다. 포토샵이 두 개의 도형이 정렬되어있다고 하면, 그럼 그냥 정렬되어 있는 것이었다. 두 개의 다른 도형이 같은 사이즈라고 하면, 그것도 그저 맞는 것이었다. 만약 두 개의 색상이 같은 hex값을 가지고 있으면, 그건 같은 색상으로 보였다.

이런 접근은 논리적인 것 같지만 사실은 옳지 않은 방식이다.

소프트웨어가 하는 계산은 이성적이지만, 인간이 모양, 색상, 크기를 인지하는 방식은 계산에 포함되지 않는다. 소프트웨어는 물체 사이의 관계, 시각 언어 상에서의 맥락, 혹은 인간이 물체를 인식하는 방식에 대해서 이해할 수 없다는 것이다.

어떤 것이 시각적으로 맞는지 틀린지는 사람이 판단해야 한다. 우리는 컴퓨터와는 달리 맥락과 환경을 이해하고, 볼 수 있기 때문이다. 이 미묘한 차이를 이해하고 조절한다면 더 나은 디자이너가 될 것이다. 시각 보정을 거친 예시는 종종 있지만, 많은 경우가 그렇지 않다고 할 수 있다.

몇 가지 예시를 살펴보자.

1. 정렬 + 시각적 무게 중심

컴퓨터는 시각적인 무게 중심이 어디에 위치하고 있는지 정확하게 계산해 낼 수 없다. 그것은 단지 넓이, 높이, x/y 좌표 같은 정보에 의존할 뿐이다. 디자이너로서 우리는 시각 보정을 통해 이를 보완할 필요가 있다.

재생 아이콘의 삼각형은 원과 중앙 정렬되어있을까? 아니다. 아이콘 위에 사각형을 그려보면, 이것이 중심에서 벗어나 있다는 것을 알 수 있다.

왼쪽의 아이콘은 정렬된 것처럼 보이지만 사실은 정렬이 맞지 않다. 심지어 좀 많이 안 맞는다. 하지만 이게 맞아 보인다. 왜 그럴까? 시각적인 무게 중심 때문이다. 위 삼각형의 무게가 약간 왼쪽으로 치우쳐 있기 때문에 중심이 맞아 보이는 것이다.

이것을 해결하기 위해서는 중앙 정렬인 것처럼 보일 때 까지 삼각형을 옮겨야 한다.

2. 색상

색상 보정은 조금 더 미묘하다. 다시 한번, 시각적인 보정은 형태의 무게감에 관한 것이다.

요약 : 아이콘과 텍스트에 같은 그린 색상을 사용했지만, 이들 중 하나는 다른 하나보다 옅어 보인다.

아주 미묘하지만, 아이콘이 텍스트보다 조금 더 ‘무거워’ 보인다는 것을 알 수 있다. 이것의 균형을 맞추기 위해서는 아이콘의 색상을 조금 더 ‘가볍게’ 만들거나 텍스트의 색상을 ‘무겁게’ 만들어야 한다. 어느 쪽을 조절하든지 상관없다. 이러한 과정을 통해 당신은 WCAG에서 AA 등급을 받을 수 있을 거라고 생각한다.

RGB 대신 HSB 값을 조절 하는 것을 추천한다. 이렇게 하면 손쉽게 색상의 명도를 바꿀 수 있다.

3. 크기

크기는 우리의 뇌가 물체의 크고 작음을 어떻게 인지 하는지에 대한 것이다 (텍스트도 마찬가지이다). 이 원과 사각형을 보자. 가로 세로 120 X120 픽셀의 사각형은 가로 세로 120 X120 픽셀의 원보다 넓은 면적을 차지하게 된다. 이를 같은 크기로 보이게 하기 위해서 원의 크기가 아주 조금 더 커져야 한다.

왼쪽의 세트는 둘 다 가로 세로 120 X120 픽셀 크기이다. 하지만 원이 조금 더 작게 느껴진다. 오른쪽 세트의 원은 126 X126 픽셀이다. 사각형과 비슷한 크기로 보이게 하기 위해 면적을 조금 더 넓힌 것이다.

다른 것들과 마찬가지로 굉장히 작은 차이지만, 시각 보정은 전체 디자인의 균형을 잡아준다. 이것은 시각적으로 균형이 맞을 때까지 1픽셀씩 움직여보는 정말 미세한 조정이다.

Didot에 베이스 라인과 x-height 선을 그어보았다. 이 선을 넘는 문자 7개를 볼 수 있다. (n, o, b, g, a, t, r)

이것은 타이포그래피에서도 마찬가지다. Cap-height 나 베이스라인의 아래로 떨어지거나 위로 솟아오르는 곡선들을 보면 알 수 있다. Garamond로 줄 글을 쓰고 베이스라인과 x-height를 따라 선을 그어보자. 여기저기 돌출된 곡선들을 볼 수 있을 것이다. 만약 이것들이 없다면, 각각의 글자는 주변의 글자들보다 작게 느껴질 것이다.

4. 대문자 텍스트

마지막으로, 시각 보정이 필요한 빠른 예시를 들어보겠다. 일반 영문 텍스트 (대문자, 소문자 혼용) 옆에 대문자 텍스트가 있을 때이다. 대문자 텍스트는 일반 텍스트보다 두드러져 보이기 때문에 보정할 필요가 있다.

첫번째 예시에서는, 같은 폰트 크기를 사용했지만 일반 텍스트보다 대문자 텍스트가 더 커보인다. 두번째 예시는 대문자를 2픽셀 줄인 것이다. 이제야 크기가 같아보인다.

대문자가 더 커보여야 하는 디자인적인 의도가 아니라면, 대문자 텍스트는 조금 더 작을 필요가 있다. (16px에서 14px로, 혹은 12px에서 11px로.)

인터페이스를 디자인할 때 이런 작은 디자인 디테일들을 다듬는 것 만으로도, 전반적인 웹사이트의 느낌에 영향을 미친다. 작은 것에까지 신경을 쓴다면 결국 좋은 디자인을 만들 수 있을 것이다.

이것이 디자인 과정의 일부가 되면, 텍스트 크기를 2px 줄이는 것이나 삼각형의 크기를 10px 줄여서 균형을 잡는 것 때문에 분명 추가적으로 시간이 소요된다. 하지만 이 과정을 통해 보다 완벽한 균형의 디자인이 완성된다.

컴퓨터, 심지어 인공지능일지라도 디자인적인 맥락에 대해서는 완벽히 이해하지 못한다. 때문에 디자이너들이 직접 보정 하는 것이 더 정확할 수 밖에 없다. 컴퓨터가 전반적인 디자인 언어 안에서 개별적인 요소의 맥락을 이해할 수 있을 때 까지, 컴퓨터의 계산을 무작정 따를 수는 없다.

우리는 컴퓨터의 결정 대신, 눈과 본능적인 감각을 이용해야 한다. 디자이너들은 일하는 동안 그들의 감각을 꾸준히 연마해야 하고, 그것이 컴퓨터의 계산과는 다를지라도 우리는 그것을 믿어야 한다.

시각적인 보정 was originally published in UI / UX 번역 매거진 on Medium, where people are continuing the conversation by highlighting and responding to this story.

제가 즐겨보는 구글 디자인 팀의 Medium 페이지에 ‘PRIMER’라는 어플리케이션의 UX 작업기가 올라와서, 부족한 실력이지만 프라이머 팀의 리드 디자이너인 원작자 Sandra의 동의를 얻어 번역해봅니다. 모바일로 디지털 마케팅에 대한 레슨을 제공하고, 어떻게 하면 사용자들이 쉽게 배우게 할 수 있는지 UX적으로 해결한 작업기입니다. 개인적으로 PRIMER는 요즘 가장 인상깊에 본 어플리케이션 중 하나입니다. ios, ios 패드, 안드로이드용으로 어플리케이션이 출시되었으니, 관심 있는 분은 다운받아보시길 권합니다. :)

PRIMER 공식 홈페이지 : https://www.yourprimer.com/

원문 : https://medium.com/google-design/designing-a-ux-for-learning-ebed4fa0a798

원작자 Sandra : https://medium.com/@snambomb

구글의 ‘Primer’ 앱 팀의 UX 접근법

디자인으로 지루하지 않은 학습을 도와줄 수 있을까?

쉽게 배우게 하기라니.. 정말 쉬워 보이지 않는다. 사람들은 정말 전력을 다해 새로운 것을 배우지 않으려고 한다. 조사에 따르면, 미국 성인의 오직 3%만이 매일 무언가를 배우기 위해 시간을 쓴다.

잠깐 생각해보자. 이제 손 끝으로 모든 정보에 접근할 수 있고, 하룻밤 자고 일어나면 온갖 새로운 기술들이 모습을 드러낸다. 그럼에도 불구하고, 97%의 사람들은 자기계발을 위해서 새로운 정보를 찾아보는 데에 시간을 전혀 쓰지 않는다는 것이다.

이것은 5분 이내에 디지털 마케팅을 배울 수 있게 도와주는 앱 제작을 막 시작한, 구글 Primer 팀의 도전과제가 아닐 수 없었다.

도전과제의 핵심은 UX였다. ‘배움’은 몇 가지 초기 장벽을 가지고 있다. 사용자는 무엇을, 어디서, 어떻게 배우고 싶은지 알아야 하고, 시간과 돈, 그것을 끝낼 수 있는 에너지가 필요하다.

UX가 두 가지를 충족시켜야 했다. 첫째로, 앱은 직관적이며 실행해보고 싶어야 한다. 둘째로, 사람들이 배우지 못하게 하는 요인들을 극복해야 한다.

도전을 시작하며, 사용자들이 앱에서 머물 세 가지 주요 장소에 대해 생각했다. 대시보드, 레슨, 활동이다.

1. 대시보드

대시보드는 정말로 중요하다. 앱을 처음 실행했을 때 보이는 화면이기 때문이다. 몇 개월 동안 서로 다른 대시보드의 프로토타이핑을 반복했다. 많은 아이디어들이 있었다. 레슨 패키지, 사용자가 세 개의 랜덤 레슨 중에 고르게 하기, 수업 주제와 관련된 이벤트에 대한 위치 정보, 제휴 브랜드와 전문가들에 관한 특별한 위젯 등이다. 가능성은 무한했다.

기준이 필요했다. 그래서 사용자에 빙의하여 생각해봤다. 그리고 앱을 시작한 사용자들이 세 가지 그룹 중 하나에 속할 것이라고 정의했다.

- 수동적 사용자 : 이들은 앱을 살펴보고 둘러볼 것이다.

- 궁금해하는 사용자 : 이들은 배울만한 것을 찾겠지만, 음.. 확신이 없다.

- 적극적 사용자 : 이들은 배우고 싶은 게 있다.

수동적 사용자를 위해, 바로 배울 수 있는 다섯 가지 추천 레슨이 뜨는 Featured 페이지를 만들었다.

궁금해하는 사용자가 레슨을 쉽게 찾을 수 있도록 주제별로 나뉜 (광고, 콘텐츠, 측정, 전략) Category 페이지를 만들었다.

적극적 사용자를 위해 Queue를 만들었다. 여기서는, 사용자들이 일종의 “재생목록”을 만들고 원하는 레슨을 쉽게 추가하고 제거할 수 있게 하였다.

2. 레슨

다음 앱의 요소는 레슨이다. Primer의 레슨은 시간 때우기에 아주 좋다. 사용자들은 기차에서 혹은 아이들이 만화를 볼 때 등 레슨을 볼 수 있다.

그러나 ‘배움’은 일종의 약속 같은 것이 필요하다. 사용자들이 의식 없이 화면을 휙휙 넘기게 둘 수 없다.

우리의 솔루션에 리드믹 러닝이라는 이름을 붙였다. 모든 레슨 요소들, 각각의 스와이프, 카드 묶음, 일러스트레이션은 콘텐츠를 통해 사용자들을 리드미컬하게 안내하도록 설계되었다

스와이프 제스처는 각각의 카드 묶음을 왠지 완수해야 할 것만 같은 느낌을 준다. 문서 형식으로 된 글줄의 정보들은 한 눈에 보기에는 벅차지만, 이것이 카드 안에 나뉘어 들어가면 더 쉽게 느껴진다. 이 카드들은 3에서 7개로 묶여있고, 마지막 카드를 스와이프 하면 다른 카드 묶음이 나타난다. 카드 묶음을 끝내는 행위는 작은 성취감이 되기 때문에, 레슨이 완전히 끝나서 무언가를 배웠다! 하고 느끼게 될 때까지 기다릴 필요가 없다.

3. 활동

세 번째, 그리고 마지막 UX 요소는 ‘활동’이다. 우리는 세 가지 타입의 인터랙션을 만들었고, 이것들은 각각 다른 타이밍에 쓰인다. 레슨 첫 부분에 등장하는 빠른 시작, 레슨 중간에 등장하는 중간 점검, 마지막에 나오는 당장 해라이다.

빠른 시작은, 컨셉을 보여주는 것을 통해 사람들이 이 레슨을 바로 시작할 수 있도록 도와준다. 예를 들어 ‘검색 광고’ 레슨의 첫 부분에서는, 옷 더미 사이의 줄무늬 양말을 찾게 한다. 이 ‘월리를 찾아서’ 같은 활동은 검색 결과의 상단 노출에 대한 가치를 설명해준다. 다른 옷에 파묻혀 잃어버린 양말 한 켤레와는 달리, 검색 광고는 검색 결과 중에서 단번에 눈에 띈다. 이 활동은 시험이 아니라 주제에 대해 생각해보게 하는 한 방법이다.

중간 점검은 이름에서도 느껴지듯이, 레슨 중간에서 잠깐 멈추고 새로운 방식으로 주제를 생각하게 하는 것이다. 어떤 레슨에서는, ‘프로그래머틱 바잉’에 관한 퍼즐을 맞추게 하는 것이 특징이다. 다른 레슨에서는, 복잡한 목적을 재구성하여 한다/안한다 의 양식으로 만들었다. 예를 들어, 모바일에서의 사용자에게 동기 부여를 하기 위해 푸시 알림이라는 방법을 쓸 것인지 말 것인지 물어본다. 답은 누가 봐도 명백하다. 이것이 포인트이다. 이 인터랙션은 사용자에게 자신감을 심어줄뿐더러, 직관적이고 쉽게 생각하게 하여 그 지식을 습득하게 한다.

마지막으로, 당장 해라 기능은 자신의 비즈니스에 바로 적용할 수 있는 적당한 주제를 제공해준다. 당신의 웹사이트 통계 추적을 어디에서부터 시작해야 할까? Programmatic Buying(데이터를 기반으로 한 자동 인벤터리 매입)에 준비가 되어있는가? 이러한 것들은, 레슨을 좀 더 개인적이고 행위 지향적으로 만들어준다. 우리는 연습을 통해 지식을 쌓는 것이 무언가를 배우는 데 있어서 가장 최고의 방법이라고 믿는다. 그것이 아주 사소한 것이라도 말이다.

프라이머는 다른 모든 모바일 앱들처럼, 관심을 끌기 위한 치열한 경쟁 속에 놓여있다. 그것은 재미있고, 빠르고, 유용한 사용자 경험을 디자인해야 하는 중요한 이유이다.

프라이머의 UX 디자인은 즐거운 학습을 하게 하는 것을 목표로 한다. 뭔가 스트레스로 가득 찬 하루 중간에 하고 싶게 하는 것. 사용자들이 이 새로운 형식의 진가를 알아보길 바란다. 아침에 커피를 기다리는, 의무적이고 지루해 보이는 바로 이 시간이, 뭔가를 시작할 수 있는 시간이다.

디자인으로 ‘쉽게 배우게’ 하기 was originally published in UI / UX 번역 매거진 on Medium, where people are continuing the conversation by highlighting and responding to this story.

icon finder blog의 Scott Lewis 글 번역

개인적으로 재미있게 본 프로젝트와 글이라서 발번역해봅니다.

반응형 아이콘은 정말 필요한가?

반응형 아이콘(Responsive icon)은 벡터형 아이콘과 반응형 웹 디자인이 결합한 결과물이다. 최근 우리는 반응형 아이콘에 대한 여러가지 흥미로운 예제들을 볼 수 있었다. 그러나 모든 새로운 것들과 마찬가지로, 반응형 아이콘이라는 새로운 기술의 장단점을 고려해보아야 한다.

최근에 우리는 iconic 의 킥스타터 프로젝트 에 대해 Waybury의 설계 기술자 PJ Onori 을 인터뷰했다. 프로젝트의 목표는 CSS와 자바스크립트의 조작 가능한 ‘스마트’ 아이콘을 만드는 것이었다.

이 프로젝트의 보조적 측면은 다양한 사이즈의 디스플레이에 대응하여 최적화된 3가지 사이즈의 반응형 아이콘 세트를 만드는 것이다. 반응형 아이콘은 적어도 기능적인 면에서 반응형 이미지와 동일하다. 사용자가 이 기술이 적용된 사이트에 접속하면, 그들의 스크린 사이즈에 최적화된 이미지(아이콘)를 보게 되는 것이다.

영국의 디자이너 Joe Harrison은 심플하고 인상적인 ResponsiveIcons.co.uk를 통해 그만의 정교한 컨셉을 보여주었다. Waybury와 Joe Harrison, 두 디자이너는 반응형 아이콘에 대해 서로 독립적인 생각을 가지고 있다. Waybury의 주요 관심사는 반응형이 아니라 CSS와 자바스크립트로 접근 가능한 SGV 아이콘의 표준을 만드는 것이고, Joe Harrison의 사이트는 시각적인 반응형 아이콘 자체에 촛점을 맞춘 것이다.

반응형 아이콘의 예시

• Waybury
• Joe Harrison

Waybury와 Joe Harrison은 반응형 아이콘에 대해 각각의 예시를 만들었다. Waybury는 세가지 아이콘 사이즈로 다양한 단계적 디테일을 보여주고, Joe Harrison은 크기에 따라 점진적으로 디테일이 생기는 것을 보여준다.

반응형 아이콘에 대한 엇갈린 의견들

반응형 아이콘에 대한 의견은 엇갈렸다. 아이디어를 지지하는 디자이너들도 있었지만 대부분은 아니었다. 아이콘은 UX에서 매우 중요한 요소이며 상황에 따라 아이콘의 모습이 바뀌는 것은 오히려 사용성을 떨어트릴 뿐만 아니라 사용자들에게 일관성 없는 경험을 준다는 것이었다. 나는 상황에 따라 달라지는 아이콘의 모습은 사용성 오류라는 이 반대 의견에 어느정도는 동의한다. P. J. Onori는 우리와의 인터뷰에서 이렇게 말했다. “컴퓨터 인터페이스에서 아이콘은 공용어가 될 것이다.”

여기에 명확하게 말하자면, 나는 반응형 아이콘에 대해 반대 입장이 아니다. 오히려 그 정반대이다. 내가 오직 반대하는 것은 상황에 따라 시각적인 표현이 크게 달라져버리는 것이다. 이것은 각각의 다른 파일을 제공하는 것과는 다른 문제이다.

반응형 아이콘의 적절한 사례

우리의 최근 인터뷰에서, 아이콘 디자이너 Tom Nulens는 로고, 서체 디자인 분야와 아이콘 디자인 분야를 비교했다. 아이콘 디자인은 두 디자인 영역의 많은 법칙들에 영향을 받고 있다. 왜냐하면 아이콘은 디스플레이 환경에 따라 크기가 매우 달라질 수 있고, 하나의 아이콘만으로는 모든 크기의 상황에 적합하지 않을 수 있기 때문이다.

노련한 로고 디자이너와 아이콘 디자이너들은 로고나 서체가 어떤 크기로 보여지느냐에 따라 미묘한 혹은 미묘하지 않은 시각적 차이가 발생한다는 것을 통감할 것이다. 이때문에 아주 작은 크기에서 서체 획의 굵기를 두껍게 하거나 작은 사이즈에서 자간을 넓히는 것 등의 작업이 종종 필요하다.

이와 비슷하게 아주 큰 크기나 아주 작은 크기에 대응하기 위해 선 굵기나 비율, 서체, 화이트스페이스를 조정해야 할 때가 있다. 아주 작은 화이트 스페이스를 다크 스페이스가 메워버릴 때도 있고, 작은 크기에서 얇아보였던 선도 큰 크기에서는 다소 굵어보일 수 있다.

아래의 예를 보자. 작은 사이즈에서 자의 눈금 부분은 알아볼 수 있을 정도의 비율이지만, 크기가 커질수록 주변의 검은 부분만큼 눈에 확 띄게 된다.

그렇다면 이들 전체의 흰 선을 얇게 만들어보자. 큰 사이즈에서 아이콘은 시각적으로 괜찮아 보이겠지만, 작은 사이즈에서는 눈금을 읽기 어려울 정도로 얇아진다.

반응형 아이콘은 아이콘의 시각적 기능을 유지하면서 비율과 선 굵기를 상대적으로 최적화 시키는 것이다. 우리는 아이콘의 의미를 바꾸지 않았고 심지어 모습도 바꾸지 않았다. 사실 대부분의 사용자들은 첫번째와 마지막 아이콘 사이의 변화를 알아채지 못할 것이다. 아래의 예시가 바로 반응형 아이콘에 대한 유용함을 나타내준다.

결론

아이콘 디자인 전문가로써 나는 나의 아이콘이 최고가 되기를, 그것들이 할 수 있는 한 가장 유용하게 쓰이길 원한다. 반응형 아이콘 기술이 이 글에 나타난 예시대로 쓰인다면 아이콘 디자이너들에게 아주 유용한 툴이 될 것이다. 이 기술은 다른 도구들과 마찬가지로 장점과 단점이 둘다 존재한다. 끝으로 이들을 요약해본다.

단점

• 시각적으로 (티나게) 다른 아이콘 때문에 생기는 사용자의 혼란
• 여러 버전의 아이콘 디자인을 하기 위한 디자이너의 작업량 증가
• 페이지 사이즈가 더 다양화 되면서 남용이 될 가능성

장점

• 여러 디스플레이 환경에 대응하는 시각적 보정을 할 수 있다.
• 안드로이드, 윈도우, ios 등등 각기 다른 디바이스의 각기 다른 그리드에 최적화 될 수 있다
• 수학적 크기 조절이 아닌 다른 사이즈를 위한 시각적 보정이 가능하다

반응형 아이콘이 계속해서 주목받을지는 모르는 일이다. 우리는 아직 이 새로운 아이디어에 대해 데이터를 기반으로 도출된 결론을 보는 것은 고사하고, 기술적으로 완성하여 적용된 예시를 본적도 없다. 그러나 이 아이디어가 긍정적이든 부정적이든 잠재적인 영향을 이해하고 탐구할 가치가 있다.

다양한 생물종들이 진화 및 적응을 해 나가는 것처럼 혁신은 시작 단계에서는 실패하지만 자신의 환경에 적응하는 방식을 통해 의외이면서도 이익이 되는 방향으로 향하게 된다. 결국 어떤 새로운 사물의 수명(지속성)을 결정하는 것은 그 사물의 유용성이다.

반응형 아이콘에 대해 섣불리 어떠한 결론을 내리기 전에, 앞으로 이 아이디어가 어떻게 발전해 나가는지 지켜봐야 하겠다.

반응형 아이콘(Responsive icon)은 정말 필요한가? was originally published in UI / UX 번역 매거진 on Medium, where people are continuing the conversation by highlighting and responding to this story.