신입 UI 디자이너를 위한 'UI 가이드라인 바로 배우기' 지침서

2015. 5. 14. 07:50ㆍUI 가벼운 이야기
알 수 없는 사용자

얼마 전 동료로부터 다음과 같은 질문을 받았습니다. 

"유리 주임님은 디자인을 전공하지 않으셨는데, 처음으로 프레임워크 스케치를 할 때 어떤 느낌이었어요?"

저의 대답은 "흥미로워 보였지만 너무 막막했어요." 였습니다. 그리고 어떻게 해결해 나갔는지를 이야기 하면서 UI 가이드라인을 공부하게 된 이유와 그 과정에서 겪은 시행착오가 생각났습니다. 이를 통해 얻은 교훈을 정리해 보고, 신입 디자이너들 중에서도 비슷한 어려움을 겪었거나 겪고 있는 분들에게 도움이 될까 하여 이 글을 쓰게 되었습니다. 

이 글에서는 각종 UI 가이드라인 링크 모음을 공유하고 그에 앞서, 가이드라인을 효과적으로 읽기 위한 올바른 방향(당시에 제가 알았더라면 정말 좋았을 것 같은)에 대해 정리해 보려고 합니다. 개인적인 경험을 바탕으로 쓴 것이니 가볍게 읽어보시길 바랍니다. ^^


필자는 심리학을 공부하다가 디자인에 입문하게 되었는데, 처음 'UI 디자인 가이드라인'이라는 것을 전해 들었을 땐 그것이 왜 중요하고 어떻게 쓸모가 있는 것인지 감을 잡을 수 없었습니다. UI를 하고자 한다면 UI 가이드라인을 공부하는 것이 많은 도움이 될 것이라는 조언을 들었기 때문에, 항상 마음 한 구석에 'UI 가이드라인을 공부해야 한다는 생각'을 가지고 있었습니다.


그러다가 가이드라인을 공부하기 위한 몇 가지 시도들을 했었는데요,

첫 번째로 pxd 블로그에서 '가이드라인'을 검색하여 관련 글을 모두 읽는 것부터 시작했습니다. 이 때는 내용의 20~30% 정도 겨우 이해하는 수준이었는데, 정말 재미없는 전공 필수과목처럼 느껴졌습니다. 굉장히 잘 정리된 글임에도 불구하고 당시 UI 가이드라인에 대한 배경 지식이 부족했고, 언제 어떻게 활용해야 하는지, 그래서 왜 필요한지를 깨닫지 못한 상태였기 때문입니다. 하지만 나중에 가이드라인을 알게된 후 아래 글들을 다시 읽었을 때 느꼈던 감탄은 잊을 수 없습니다.



이후 중요성을 깨닫고 Windows, Apple의 가이드라인을 하나 하나 읽어보자는 (많은 신입 UI 디자이너들이 그러하듯이) 계획을 세웠습니다. 하지만 적지 않은 양에 놀라고, 도대체 어디서부터 어떻게 봐야할 지 모르겠더군요. UI적으로 너무나 당연한 규칙이나 원리들을 굳이 어렵게 정리한 백과사전 같았습니다. 이 때는 읽었다기보다는 그냥 봤다고 하는 것이 맞을 것 같네요. 


아래 링크는 당시에 읽었던 책입니다. Microsoft와 Apple의 책은 오래된 것임에도 불구하고 이미 그 때 부터 사용자를 위한 UI 지침이 매우 탄탄했었다는 점을 알고 겸손하게 공부해야겠다고 생각했던 기억이 납니다.ㅎ 꼭 이 책이 아니여도 웹에 공유된 문서(글 아래 링크가 있습니다)와 책들이 많으니 참고하면 좋겠습니다.



그러던 중 UI 설계서를 영문으로 작성하면서 UI 영어 표현에 고민이 많았던 때가 있었습니다. 조언을 통해 UI 가이드라인을 레퍼런스로 활용했고, 자주 사용하는 동사나 표현 및 구절을 찾아보면서 자연스럽게 가이드라인을 상세히 읽게 되었습니다. 이쯤 되어서야 가이드라인이 어떤 목차를 가지고, 어떤 이야기를 하고 싶어 하고, 어떤 내용을 담는지 생각하게 된 것 같습니다. 동시에 UI 설계를 하면서 참고할 만한 내용이 정말 많다는 점을 깨달을 수 있었습니다.


얼마 후 한 프로젝트에서 실제 가이드라인을 작성하게 되었고, 이를 바탕으로 HCI 학회에서 사례 발표를 하게 되었는데, 이때의 경험이 가장 큰 도움이 되었습니다. 결국 프로젝트를 통해 가이드라인을 작성해 보는 것이 가이드라인을 이해하는데에 가장 빠르고 정확한 방법인 것 같습니다. 프로젝트 중의 고민하는 시간 양과 심도있는 이해를 위한 노력을 무시할 수 없더군요. 하지만 그렇지 않은 경우에는 어떻게 하면 좋을까요? 



UI 가이드라인 효과적으로 읽기


UI 가이드라인을 더욱 효과적으로 읽기 위한 방법을 세 가지로 정리해 보았습니다. 


첫 번째. 큰 줄기를 이해하며 다가가기

많은 내용을 담고 있는 가이드라인 각각의 세세한 규정을 읽어보기 전에 큰 골격을 이해하는 게 우선되어야 한다고 생각합니다. 가이드라인의 목적, 용도, 시대적/역사적 배경 등에 대한 기본적인 이해가 필요합니다. 또한 여러 유관 부서 사이의 관계와 가이드라인의 역할에 대해서도 알고 있는 게 좋습니다. 가이드라인이 누구를 대상으로 쓰여졌는지를 알고, 가이드라인을 사용자 입장에서 볼 필요가 있습니다. 이렇게 머리 속에 어느 정도 가이드라인의 역할과 관계도의 그림이 그려지고 나면, 업무 흐름의 큰 줄기를 이해하면서 자연스럽게 가이드라인의 중요성을 깨달을 수 있을 것입니다.



두 번째. 내용을 면밀히 살펴가며 읽기

이제 자세한 내용을 살펴 볼 차례입니다. 우선 목차를 통해 정리된 기준을 살펴보고 어떤 내용이 있을지 미리 예상해 보는 게 좋습니다. 각각의 OS, 플랫폼이 무엇을 중요하게 생각하느냐에 따라 목차와 내용 구성이 달라지기 때문입니다. 

상세 규정을 읽어볼 때는 해당 내용이 어떤 근거로 작성된 것인지 항상 염두에 두며 읽을 필요가 있습니다. 규정은 심리학적 측면을 근거로 할 수도 있고 트렌드, 제품 특징, 브랜드 이미지, OS 일관성 등을 이유로 할 수도 있습니다. 이를 이해하면, 해당 가이드라인을 지켰을 때 결과적으로 제품/서비스에 어떤 영향을 미칠 수 있는지를 함께 생각해 볼 수 있을 것입니다.

또한 정책의 표현 방식에도 관심을 기울일 필요가 있습니다. 같은 내용이더라도 Do/Don't를 명확하게 정리하기도 하고, 유려한 표현을 빌려 읽는 사람이 제품의 감성까지 느끼도록 하기도 합니다. 개인적으로는 Apple의 가이드라인을 보면서 매번 감탄을 합니다. 아이폰이 많은 사람들을 놀라게 했던 것 처럼, Apple은 UI 가이드라인에서도 정체성을 드러내려는 것 같다는 생각이 듭니다. 그만큼 가이드라인이 제품의 성격을 잘 담아내고 계승할 수 있도록 만드는 도구로 중요한 역할을 한다고 볼 수 있습니다.



세 번째. 여러 가이드라인을 비교하며 읽어보기 & 활용하기

내용을 읽어보는 것에서 멈추지 않고 디바이스 별, OS 별 여러 가이드라인을 비교하며 읽어보는 것을 권장하고 싶습니다. 내용의 차이를 비교하며 각각의 제품/서비스가 어떤 전략을 가지고 있는지를 살펴보거나, 가이드라인의 작성 방식이나 표현적 차이를 비교하며 그들만의 색깔을 느껴보는 것도 꽤 재미있습니다. 현재 진행중인 프로젝트가 있다면 관련 가이드라인을 통해 아이디어를 얻기에도 아주 좋은 도구입니다. 예를 들어 지난 원형 UI 디자인 가이드라인 포스팅을 작성할 때에는 원형 디스플레이를 가진 Smart Watch UI 가이드라인을 보며 영감을 얻기도 했습니다. 

내부 혹은 외부 관계자와의 커뮤니케이션 과정에서 디자인을 설득하기 위해 가이드라인이 활용될 수도 있습니다. 가이드라인 각각의 근거를 이해하고 나면, 디자인 타당성을 높이기 위한 방법으로도 유용한 도구가 됩니다. 표준 UI가 가진 권위와 절대적인 가치를 활용하는 것은 디자이너의 몫입니다.



UI 가이드라인이 아직도 낯설고 어렵다면, 위의 내용을 참고하며 읽어보시면 좋겠습니다. 덧붙여 지금까지 정리해 둔 현재 공개된 여러 OS 및 제조사의 UI 가이드라인 링크를 공유합니다.



UI 가이드라인 모음


Mobile & Desktop


TV


Wearable


Other

  • iPod nano 6th generation User Guide (UI 가이드는 아니지만 작은 화면의 인터페이스 특성을 중심으로 참고해볼 만 합니다.)
  • Google Cast 
  • Designing Interface (Designing Interface책이 없다면 이 웹사이트를 참고하세요. First Edition이지만 책의 거의 모든 내용이 정리되어 있습니다.)


[참고##가이드라인##]


관련글

댓글 17

티스토리툴바