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

2015.05.14 07:50UI 가벼운 이야기
by 정 유리

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

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

저의 대답은 "흥미로워 보였지만 너무 막막했어요." 였습니다. 그리고 어떻게 해결해 나갔는지를 이야기 하면서 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이지만 책의 거의 모든 내용이 정리되어 있습니다.)


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


  • 프로필사진
    지나가는 이2015.05.14 10:14 신고

    포스팅 정말 잘 읽었습니다. 감사합니다!

  • 프로필사진
    아이딘2015.05.14 16:57 신고

    UI UX에 관심이 많은데 좋은글 잘 읽고 갑니다 :)

    • 프로필사진
      정유리2015.05.14 18:07 신고

      관심이 많으시다니 도움이 되었으면 좋겠습니다. 감사합니다. ^^

  • 프로필사진
    지나가는 삼2015.05.14 19:11 신고

    어디서 어떻게 링크를 눌렀는지 모르겠지만 , 사무실에서 정독 하였습니다. 계속 좋은글 기대하겠습니다. - 지나가는 기획나부랭이..

  • 프로필사진
    지나가는 사2015.05.15 11:46 신고

    심리학을 전공하고 UX 기획자로 입문한지 얼마 안 된 지나가는 사입니다. UI에 대해 너무 몰라서 설계를 할 때에나 디자이너분들과 커뮤니케이션이 어려웠는데 써주신 글을 보고 차근차근 공부해보기로 했습니다. 좋은 글 감사합니다.

    • 프로필사진
      정 유리2015.05.15 21:21 신고

      같은 전공자를 만나니 반갑네요~^^ 부족한 부분을 채우려 노력하시는 자세가 멋집니다. 저도 비슷한 경험이 있어 더욱 공감이 되기도 하고요. 제 글이 얼마나 도움이 될 수 있을지 모르겠지만 꾸준한 노력을 이길 수 있는건 없다고 생각합니다. 더불어 비전공자가 부족한 점도 있지만 반대로 좋은 장점을 가질 수 있다는 점을 잊지 않는것도 중요하다고 생각합니다 ㅎ

  • 프로필사진
    밤주니2015.05.21 16:15 신고

    비전공자가 ux 기획자가 되려면 어디서부터 시작해야 할까요?
    현재 직장인인데 이 분야가 너무 끌려서요.. 어떤 경로로 해야 하는지 알려 주셨으면 좋겠어요

    31인데 나이가 많이 중요한가요? ux 분야에서 일하고 싶네요



    • 프로필사진
      정 유리2015.05.28 14:37 신고

      비전공자라면 어떻게 해야한다 라는 정해진 방법은 없는 것 같습니다. :)
      pxd 블로그의 '디자인 비전공자들은 어떻게 UX 디자인의 길로 들어서게 되었을까?' 라는 글을 한 번 읽어보시는 게 어떨까요? (http://story.pxd.co.kr/942) 저도 이 글에서 인터뷰를 참여했었기 때문에 충분히 설명이 될 거라고 생각합니다.
      이 외에도 디자인 비전공자와 관련된 글이 많습니다.
      이재용 대표님이 쓴 '디자인 비전공자로 UX하기' http://story.pxd.co.kr/696
      비전공자를 위한 포트폴리오 작성 요령 http://story.pxd.co.kr/993
      UX 교육과정 선택하기 http://story.pxd.co.kr/713
      감사합니다.

  • 프로필사진
    인터페이스2015.05.27 13:35 신고

    ux와ui는 비슷하면서도 공존하는 관계인데 ux를 알려면 ui를 알아야하고 ui를 알려면 ux를 알아야하는게 맞는가요?? 서로 어떤 관계를 이루고 어떻게 접하는게 맞을까요?

    • 프로필사진
      pxd UX Lab.2015.05.27 22:40 신고

      설명이 길어질 것 같아서 글을 추천해 드립니다
      UI와 UX에 관한 블로그 글들이 아래와 같이 있습니다.
      참고하시고 도움이 되시길 바랍니다.
      http://story.pxd.co.kr/549
      http://story.pxd.co.kr/565
      http://story.pxd.co.kr/562
      http://story.pxd.co.kr/567
      http://story.pxd.co.kr/568
      고맙습니다.

  • 프로필사진
    조명국2015.05.28 16:32 신고

    유리주임님 잘 보고 갑니다. 또한 계속 들어와서 보고 가겠습니다. 마침 딱 UI 디자인을 해야 하는 상황인데, 좋은 글을 만난 것 같습니다. 어떤 방향으로 역량을 키워야 할지 방향을 잡을 수 있는 좋은 글이었습니다! 좋은 글 계속 올려주세요

    • 프로필사진
      정 유리2015.05.28 21:22 신고

      저도 글을 쓰면서 다시 한 번 정리하는 기회가 되었는데, 보탬이 될 수 있다니 더 기쁘네요~ 더불어 저도 더 노력해야겠다는 생각이 듭니다^^ 감사합니다.

  • 프로필사진
    jessi2015.08.01 01:49 신고

    포스팅 잘 읽었습니다. 신입디자이너로 갈피를 못잡고 있었는데 도움이 많이 되는 글이네요. 감사합니다:)

  • 프로필사진
    영준2015.10.11 00:07 신고

    잘읽었습니다!