ZEN of UX. 12 - 디자인 루키는 못생긴 디자인을 이해해야 한다.

젊고 유능한 디자이너들이 자주 빠지는 문제라고 봐. 간지나는 멋진 디자인을 하고 싶은 욕구. 디자이너로서 당연하지만, 미적인 탐닉이 때로는 사용성을 저해하는 경우가 있다는 걸 이해 못하는 경우가 많더라구.

Artem Hertz, Maciej Dyjak - dribble에서 발췌

위 디자이너들은 양해해주길 바라. 이 글에서 '잘못된 케이스'로 예를 삼는 거지만, 그만큼 디자인이 좋다는 뜻이니까. 깨끗하고, 군더더기 없고, 감각적이고, 개성도 있고. 뭐가 문제겠어. 훌륭하지. 

하지만, 보기 좋은 디자인이라고 해서 꼭 UX에 도움이 되라는 법은 없어. 자신의 능력을 뽐내는 것과 일반인의 사용성을 보장하는 것은 완전히 별개거든. 디자인을 잘하는 루키들에게 나타나는 증상을 몇가지 유형으로 정리하면 다음과 같아.

1. 어포던스의 부족
2. 식별하기 어려운 텍스트 색상 사용과 색면 배열
3. 정지된 화면의 시각적인 완성도에 집착
4. 기성 디자인 활용에 대한 거부감, 오리지널리티에 집착
5. 제한된 포맷, 강한 톤 관리

사실, 이런 증상을 가진 디자이너들은 '디자인을 잘한다'기 보다 '디자인을 회피하는' 거라고 봐. 화면의 근사함을 위해 UX를 희생하지. 요소 간 강약을 조절하기 위해 유효한 정보를 지나치게 작게 (또는 크게) 강조하거나, 흐리게 만들거나, 버튼에 대한 안내를 소홀히 하거나, 불필요한 여백을 만들거나, 이해할 수 없는 형태를 사용하거나...

소위 '드리블 디자이너', '비핸스 디자이너'들의 문제는 명확한데, 그 이유를 한마디로 정의하면 다양성을 포용하지 않으려 하는 것이야. 각각의 요소를 조금 더 자세히 설명해 볼게.

 

728x90

 

1. 어포던스의 부족

지나치게 작은 버튼, 포인팅 영역 (혹은 탭 영역)이 협소하거나, 협소한 것처럼 보이게 만드는 것. 에드먼드 버크 등 고전 미학자들이 얘기한 것처럼, 작고 고립된 것은 나름의 숭고미를 만들기 때문에 예뻐 보이는 거지.

큰 글씨로 디자인하고 나서, 글자들을 모두 약간 작게 만들면 (행간도 조금 넓히면) 무조건 이전보다 나아 보일 거야. 각각의 요소들이 뭔가 예리해 보이고, 기호보다 덩어리가 더 잘 보이니까 뭔가 잘 정리되어 보이지. 

하지만, 유저들은 무엇을 눌러야 할지, 어디로 가야 할지를 가장 궁금해 해. 시각적인 아름다움보다 정보로서 화면을 바라보기 때문이지. 탐색은 피곤한 일이야. 유저 입장에서는 가장 가치 없는 일이기도 하고. 그냥 원하는 걸 보여주면 좋겠는데, 여기저기를 눌러야 하고 어떤 구조를 가지는지 파악해야 하고... 유저는 심란해 할 뿐이지. 작고 깔끔한 것도 좋지만, 최소한 "도대체 어떻게 하라는 거야?"라는 상황은 만들면 안되는 거잖아.

만일 포기할 수 없다면, 

solution : UI 요소를 줄이거나, 익숙한 위치에 놓도록 해. 일반적인 GUI의 배치와 유사한 위치에 두면, 유저는 위치를 하나의 기호로서 사용하게 되거든. 이를테면 네비 바와 탭 바, 화면의 위, 아래 부분에 띠로 배치된 버튼은 - 뭔지는 몰라도 가장 상위 depth를 조작하는 기능이라는 걸 경험적으로 알아차릴 거야. 카드 UI를 사용하는 경우에도 우상단은 부가기능, 하단은 세부 기능 버튼이 위치한다는 걸 유저들은 그동안의 앱 사용경험으로 대충 알고 있거든. 유저의 경험도 우리의 자산이지.

약간 다른 얘기지만 재밌어서^^ - © 9gag

 

2. 식별하기 어려운 텍스트 색상 사용과 색면 배열

굳이 Color Accessibility를 지키라는 얘기는 아니야. 실제로 유저는 나름 산전수전(?)을 겪으며 UI를 사용해 왔기 때문에, 핸드폰 글자를 키우던 손으로 그늘을 만들던... 어떻게든 익숙하게 정보를 확인할 수 있어. 어느 정도는.

그런데 그 범위를 넘어서서 #DDDDDD 이상의 밝고 얇은 서체를 사용하거나, 색면간의 컨트라스트를 지나치게 작게 나누거나 하는 경우를 자주 보게 돼. 뭔가 민감해 보이고, 화면의 강약을 극대화할 수 있거든. 

그런데 이건 솔직히, 디자이너로서 민감떠는(?) 거야. "나는 이렇게 민감하게 색상을, 서체를, 형태를 구분하여 사용할 줄 안다"고 과시하는 거지. 폄하해서 미안.

어느정도 이해는 해. 디자이너는 실제로 민감하다고 스스로는 생각하지만, 막상 같이 일해 보면 그렇지도 않은 경우가 많거든.

게다가 이런 색상이 나오는 건, 간지나는 디자인을 하기 위해서이기도 하지만, 위계 관리를 못하는 상황 때문에 불가피하게 생기는 문제이기도 해. 이것도 중요하고 저것도 중요하니, 덜 중요한 것들을 약하게 만드는 걸 반복하면, 와이어프레임 상에서는 전혀 문제가 안되는데 자기가 판 무덤에 갇혀서 필요치도 않은 단계가 겉잡을 수 없을만큼 많이 생기곤 하지.

© Lory Brantz

solution : 형태를 잡은 후 색상을 고민하는 걸 추천해. 좀 더 확실히 하려면 블랙/화이트로만 와이어프레임을 잡아보는 것도 방법일 거야. 가장 좋은 방법은 화면의 가장 중요한 것과 가장 하찮은 것을 정하고, 그 사이의 단계를 (최대) 2.5 단계 이하로 만들어 보는 걸 추천해. 물론 UI를 건드리는 상황이라서 협업할 때는 어려울 수 있어. (그런데 말이지... 이런 문제가 생기는 경우, 대부분은 디자이너가 가해자인 경우가 많더라구. 나도 디자이너지만 이런 경우엔 편을 들어주기 힘들어.) 그리고 또 하나 조언하자면, 한 화면에 빠지지 말고 큰 그림을 봤으면 좋겠어. 그러면 문제가 단순해 지거든. '좋아요 버튼' 보다 '조작 영역', 각각의 '페이지'보다 '프로세스' 단위로 생각하기.

 

3. 정지된 화면의 시각적인 완성도에 집착

누구나 알지. 우리가 하는 일이 정적인 화면을 그리는 게 아니라 'Path'를 만들어나가는 'Navigate(항해)'라는 걸. 하지만 프로덕트로서 시장에 나오는 경우를 제외하고는, 회의때나 포폴에나 '정지된 화면'으로 공유되기 때문에, 디자이너는 자칫 한 화면의 아름다움에 집착하는 경우가 많아.

그런데 이건 디자이너의 잘못이라기 보다, 프로세스의 잘못이자 생물학적인 본성에 가깝기 때문에 각 구성원들의 훈련이 필요한 문제야. 시안을 확인할 때도 몇 장의 페이지로 보고, 각 페이지 사이의 연결성을 보기는 어려우니까. 

작가미상

이 플립북에서 보듯, 한장 한장은 아무 감흥이 없는 그림이지만, 연결되면서 생명을 얻게 되지. 우리 업무도 마찬가지야. 유저의 조작 전후, 탐색의 과정을 파악하는 게 중요해.

이런 에러 중에 가장 웃겼던 건 - '이것도 중요하고 저것도 중요하다'라는 HIPPO의 논리 때문에, 분명히 뎁스를 이동했는데도, 이전 화면이 70% 이상 똑같이 그려진 거였어. 각 정보들은 심도에 맞게 정보의 깊이나 선택의 범위가 바뀌어야 하는데, 앞에서 얘기한 정보, 앞에서 누를 수 있었던 버튼이 다음 페이지에도 그대로 그려진 거지. 데자뷔인 줄 알았어. ^^

한 장 단위로 집중하는 데서 오는 문제 중에 는 스크롤 이슈도 제법 많아.
긴 스크롤이라서 화면에는 일부분만 보이는 상황인데, 보고자료나 공유할 때는 전체 화면을 한 장의 이미지로 공유하는 경우가 많잖아. 폰 사이즈의 서너배를 넘는 긴 화면을 통으로 보는 건 아무 의미가 없음에도 불구하고, 편하다는 이유로 그렇게 공유할 거야. 그런데 디자인 루키는 첫 스크롤에 대응하는 요소를 세번째 스크롤에 두기도 해. 한 화면에서 볼 때는 뭔가 서로 하모니가 생기거든. 한 화면에 안잡혀서 문제지. ^^

solution : 앞에서도 말했지만, 이 문제의 8할은 시스템의 문제, 인지능력의 한계야. 이걸 피하려면 프로토타입으로 공유하는 게 최선이겠지. 하지만 그게 쉽나. 스크롤이나 모션을 염두에 두고 디자인을 할 수 밖에 없는데, 그건 리서치의 경험, 제작의 경험이 가장 도움이 되지. 

 

4. 기성 디자인 활용에 대한 거부감, 오리지널리티에 집착

우리가 하는 디자인이 사실은 탐색이고 정보라는 건 앞에서도 말한 바 있고, 유저의 경험과 익숙함이 우리의 부족함을 보완해 주는 자산이라는 점도 위에서 얼핏 얘기한 것 같아. 하지만 이런 사실들을 무시하고, 오리지널리티를 위해서 익숙하지 않은 기호를 사용함으로서 탐색을 어렵게 하는 경우도 제법 많아. 조금 짬이 되고 열정도 있는 디자이너가 하는 실수지.

미니멀하지만, 생물을 못배운 사람은 어쩌라고? - 출처미상

이건 에러는 다른 경우들보다 흔하지 않은데, 치명적인 경우가 많아. 특히 아이콘의 경우에 자주 나타나지. 브랜딩에서는 좀 더 흔하고. 

오리지널리티를 강조하다보면, 모든 요소를 강하게 통제하고 싶어져. 톤을 유지해야 하니까. 아이콘에 개성을 부여하겠다고 선을 조각내거나, 톤이 미니멀해야 한다고 해서 인풋을 모두 흐린 라인으로 만들거나, 아예 인풋 영역을 안보이게 처리하거나. (이렇게 말하고 보니 의외로 흔하네)

오리지널리티는 많은 경우 유저의 익숙한 경험과 부딪히지. 하지만 동시에 다른 사람에게 다가서려는 노력도 필요하다고 생각해. 

요즘 많은 서비스들이 그래픽 요소로서 이모지를 사용해. 이건 개인적으론 괜찮은 생각같아. 저작권도 없는데다 퀄리티도 우수하고, 대중이 쉽게 이해하는 형태로 만들어졌으며, 유저들도 경험이 많으니까. 하지만, 자신의 브랜드랑 안맞는다며 거부하는 곳도 많지. 당연히 이해할 만한 상황이지만... 대개는 브랜딩이 속좁은 형태이기 때문이더라고. 

이모지도 물론 케바케. 이걸 하이파이브로 쓰는 사람이 많다는 걸 듣고 첨엔 정말 놀랐어.

solution : 다른 사람들에 대한 관심, 일반인(?)에 대한 이해. 디자인도 나름 특수직인 걸 이해하고, 디자이너 사이에선 일반적이라도 일반인들에겐 낯설 수 있다는 걸 꼭 알아줘.

 

5. 제한된 포맷, 강한 톤 관리

이건 4번과 비슷하지만 약간 기능적인 이야기야. 처음의 이미지로 되돌아가 보자구.

맨 위 이미지

가장 흔한 경우가 사진 포맷이야. 

@ 화방넷

그림을 그리는 캔버스도 위와 같이 용도에 따라 3가지 이상의 포맷이 있는데, UI의 이미지 비율도 각각의 특성에 맞게 만들어야 한다고 봐. 그런데 대개는 컨텐츠를 생각하지 않고 자기가 원하는 비례로 형태를 잡는 것 같아. (특히 요즘은 정사각형) 요즘 드리블에서는 정말 감각적인 디자인을 위해 길쭉한 이미지 포맷을 쓰기도 하던데 - 정말 예쁘긴 하지만 이미지가 바뀌면 어떻게 될까 의심이 드는 경우가 많았어.

우리가 하는 디자인의 특징이, 컨텐츠의 통제가 어렵다는 점이야. static한 정보가 아니라 dynamic한 정보라는 점에서 편집 디자인이나 제품 디자인과 달라. 그렇기 때문에 다양한 경우를 염두에 두고 테스트를 해봐야 해. 무엇보다도 컨텐츠를 이해하려는 노력이 필수적이야.

텍스트가 두 줄만 놓여 있는게 예쁘기 때문에 글의 길이를 조정해 달라고 하거나, 짧은 인풋이 보기 좋아서 인풋 필드 안에서 텍스트가 잘리는 경우가 생기거나... 포맷에 대한 이해 부족 때문에 생기는 에러지. 디자이너로서의 톤 관리도 중요하지만, 그게 데이터에 한계를 만들어서는 안돼. 

화면의 빈 곳이 생기거나 균형을 맞추기 위해 버튼을 추가하거나 메타를 더 나열하는 것도 '간지 디자이너'들이 흔히 하는 짓이야.

꼭 텍스트로 안내해야 하는 버튼인데 영역의 문제를 구실로 아이콘화 하거나, 꼭 함께 제시해야 하는 메타인데 레이아웃을 이유로 분할해서 배치하는 것 등등...

앞에서 얘기한 항목들은 (같은 디자이너로서) 어느 정도 이해해 줄 수 있는 내용인데, 이 5번 항목은 쉴드를 쳐 줄 수가 없어. 디자이너라면 의례 당연한 욕구이겠지만, 편협한 심보, 좁은 시야, 얕은 수라고 생각해. 게다가 거의 대부분의 경우, 이것들은 디자이너에게 부메랑이 되어 돌아오게 마련이야. 처음에는 좋겠지만, 나중에 확장될 때 필연적인 문제를 만들고, 하지 않아도 될 수고를 들여야 하지.

이건, 솔루션이 없어. 자신에게 솔직해지고, 깊게 몰입하는 게 방법이라면 방법인데, 이게 몇마디 말로 조언이 가능하겠어?

 

결론

그럼에도 불구하고 디자이너는 즐겁고 재밌는 직업이라서, 나름 화려하기도 하고 허세를 부려도 괜찮은 직업이지. 매력적이야. 그런데, 다양성에 대한 포용심이 없이 대충 때우려는 사람에게는 답이 없는 직종이기도 해. 어떻게 보면 자신의 욕망을 관조적으로 바라보는 데 이만한 직업이 없는 것 같기도 하고. 

결론은 인성교육같지만, 어쩔 수 없어. 간지와 허영만 쫓는 건 필패라고 봐. 
(그리고 여전히, 이 글을 읽은 디자이너 중 다수는, 자신은 해당되지 않는다고 생각하겠지. ^^)