신입 디자이너를 위한 GUI가이드라인 Tip

신입 디자이너를 위한 GUI가이드라인 Tip

신입 디자이너를 위한 GUI가이드라인 Tip
Category
Share Story

GUI 디자이너라면 한 번쯤은 들어보고 경험했을 GUI 개발 가이드라인. 처음 접하게 되면 어떻게 해야 할지도 모르겠고 이런 문서 작업을 하기 위해 내가 디자인을 시작했나 하는 생각도 들곤합니다. 또한 GUI가이드라인에 대하여 알려주거나 얻을 수 있는 정보는 극히 제한적입니다. 그렇기 때문에 더욱 신입디자이너분들이 GUI가이드라인에 대하여 막막하게 느끼고 가이드라인때문에 디자이너로서의 직무에 종종 회의감을 가지는 경우도 보였습니다.

저 또한 신입 디자이너 시절 하루에 수십장씩 추가, 수정되는 GUI가이드라인에 부담감을 많이 느꼈고 내가 지금 하는일이 과연 디자이너로서의 업무 인지도 깊게 고민했던 시절이 있었습니다. 더군다나 요즘은 다양한 가이드 툴로 인하여 제 신입 시절과는 상황이 많이 달라져 가이드의 중요성을 망각하는 경우가 늘어가는듯 하여 일견 아쉬움이 생깁니다. 언젠가는 GUI가이드 문서 작업이 필요 없는 시기가 분명 올 것입니다. 하지만 GUI가이드 라인 문서 작업만큼 GUI에 대하여 깊게 공부할 수 있는 왕도는 없다고 생각합니다. 그래서 신입 디자이너분들을 위해 GUI가이드라인이 무엇인지, 그리고 좋은 GUI가이드 문서를 작성하기 위한 팁을 알려 드리려고 합니다.

 

GUI가이드라인이란?

GUI가이드라인은 내가 한 디자인이 원하는 결과대로 개발될 수 있게 해주는 개발자와 디자이너가 소통하는 문서입니다. 아무리 멋진 디자인을 하더라도 개발과정에서 잘못 이해하거나 표현한다면 그 결과물은 생각하지 못하였던 전혀 다른 결과물이 나오게 될 것입니다. 그래서 저는 가이드 업무가 디자이너에게 있어 디자인만큼이나 중요한 역할을 한다고 생각합니다. 이러한 가이드 문서는 상황에 따라 다르긴 하지만 크게 2가지로 구분합니다.

첫째는 공통적인 요소들을 정리하는 공통가이드로 Win-set Guide Line, Common Guide Line, Principle Guide Line 등 다양한 이름으로다불립니다. 불리는 명칭은 다르지만 공통적이 부분을 정의한다는 목적은 동일합니다.
두 번째는 각각의 요소들의 위치와 화면을 정의하는 상세 가이드입니다. 공통적인 요소들이 모두 정리가 되었다면 그 요소들을 어디에 어떻게 쓰일지를 알려주는 문서입니다.

경우에 따라 두 문서가 하나의 문서로 나갈 때도 있고 더 다양하게 세분화되기도 합니다.
gui_guideline_01

 

GUI가이드라인의 답은 없습니다.

가이드라인에서 수치값이라던지 이미지리소스등의 정답은 존재합니다. 하지만 가이드라인은 개발환경, 개발자의 성향, 업체 마다의 방식에 따라 달라지는 것이라 이렇게 가이드를 진행하는 것이 정답이라고 할 수 없습니다. 이러한 이유로 지금 제가 가이드문서는 이렇게 작성하는 것이 맞는다고 말할 수는 없습니다.

 

정답은 없지만 좋은 GUI가이드라인은 있습니다.

가이드라인 문서는 단순히 요소들의 위치 값과 그에 맞는 리소스를 만드는 작업이 아니라 GUI디자인의 최종 결과물이라는 것을 알고 내가 디자인한 결과물이 완성도 높게 나 올 수 있도록 상세하게 나의 생각을 담아낸 문서가 좋은 가이드 문서 입니다. 그렇기 때문에 좋은 가이드 문서를 만들기 위해서는 해당 프로젝트을 완벽하게 이해하고 있어야 합니다. 각 요소들이 어떠한 피드백을 하고 어떠한 방식으로 위치할 것인지, 왜 이 요소들은 여기에 배치되어야 하는지, 가변적인 화면에서 어떠한 위치에 자리 잡을 것인지 등등 모든 사항을 고려하고 가이드를 진행하여야 최종결과물이 내가 원했던 방향으로 개발될 것입니다.

가이드 문서 작성을 사람이 하듯 가이드 문서를 보는 개발자 또한 사람입니다. 그렇기 때문에 한 장에 모든 정보를 담기보다 장수가 늘어나더라도 보기 편하게 정보들을 묶고 정리해줄 필요가 있는 것입니다. 이것 또한 GUI작업이라 생각할 수 있습니다. 이렇게 문서 만으로도 최종결과물이 내가 생각한 방향과 동일 하게 나온다면 그것이 바로 좋은 가이드일 것입니다.

 

크게 보고 크게 생각하여야 합니다.

신입 디자이너들에게 가이드 업무를 맡겨보면 초반에 가장 많은 오류가 정지된 화면이라고 생각하고 한 화면씩 가이드를 진행하는 것입니다. GUI디자인이라는 것은 정지되어있는 화면이 아닙니다. 제작된 모든 페이지들은 하나로 연결되어있고 이 모든 페이지들이 하나의 GUI디자인 입니다. 그렇기 때문에 한장 한장 보는 것이 아니라 전체를 보고 이해해야 합니다. 이때 설계 문서가 있다면 같이 보며 분석하는 것이 좋습니다.

gui_guideline_02

또한 각 요소들이 어느 곳에 속하여 단위를 이루고 있는지 파악하는 것이 중요합니다.

예를 들어 다음과 같은 리스트를 가이드 할 경우를 가정해 보겠습니다.

gui_guideline_03

신입 디자이너의 경우 처음 가이드 업무를 진행할 경우 이렇게 아이콘 따로 텍스트 따로 버튼 따로 간격을 표시하고 가이드 하는 모습을 종종 보입니다. 이러한 가이드가 틀린 것은 아닙니다. 하지만 조금 더 크게 본다면 아이콘과 텍스트, 버튼은 하나의 기능을 가고 있는 하나의 요소인 리스트가 됩니다. 이렇듯 한 리스트가 동일한 간격으로 나열되어 있는 상태이니 당연히 그 안의 요소인 아이콘, 텍스트, 버튼은 동일한 간격을 가지게 됩니다. 그러니 다음과 같이 정의할 수 있을 것입니다.

gui_guideline_04이렇듯 좋은 GUI가이드라인 문서 작성을 위해서는 한장 한장이 아닌 전체를 보고, 요소 요소들 보다 그 요소들이 모여서 이루는 기능을 파악하고 묶어주는 능력을 키워야 합니다.

 

공통된 요소를 찾으세요.

공통 요소들을 찾아서 정리하는 것이 문서를 만드는 데는 꼭 필요하지는 않지만 나중에 수정 작업이나 추가 작업에서 용이하게 사용됩니다. 하지만 이렇게 가이드문서를 정리하면 1장으로 끝날 수 있는 내용이 여러장으로 정리하게 됩니다. 그렇기 때문에 간단한 작업에서는 이러한 작업을 하지 않는 경우도 있습니다.

gui_guideline_05

위의 가이드를 자세히 보면 아래 하나의 리스트가 반복적으로 사용되고 있습니다.

gui_guideline_06

이러한 공통적인 요소들을 찾아 모아둔 가이드가 앞서 이야기한 공통 가이드입니다.

공통가이드는 마치 웹 코딩에서 html의 css같은 역할을 합니다. 웹 코딩에서 css는 꼭 있어야 하는 것은 아니지만 대부분 사용을 하고 있습니다. 그 이유는 효율성 때문입니다.

예를 들어 아이콘의 크기가 변경되었다고 가정했을 때 위의 가이드에서는 A의 8개 값을 모두 변경해 주어야 합니다. 하지만 아래의 가이드라면 A 2개만 수정되면 됩니다. 예시에서야 8개이지만 가이드 문서가 100장를 넘어갈 경우를 생각해 보세요.
이러한 공통가이드를 작성하기 위해서는 정말로 해당 프로젝트를 전반적으로 이해하고 각 요소들에 대하여서도 모두 알고 있어야 하는 일로 사실 빠른 시간에 작성한다는 것은 몹시 어려운 일입니다. 만일 자신이 공통가이드를 만들 수 있다면 벌써 가이드 전문가라고 생각하셔도 될 것입니다.

 

가이드를 이해할 수 있여야 GUI전문가라고 할 수 있습니다.

아무리 이쁜 디자인을 하는 디자이너라 하더라도 사용성이 확보하지 못하고 개발이 불가능한 디자인 산출물만 만들어 낸다면 좋은 GUI디자이너가 될 수 없습니다. GUI라는 것이 아트웍이 아니기 때문입니다. 좋은 GUI디자인을 위해서는 그에 따르는 전문적인 지식과 경험이 필요합니다. 그 중 지식과 경험을 쌓기 가장 좋은 작업이 GUI가이드라인 작업이라고 저는 생각합니다.

사실 문서작업 이라는 것이 아무리 열심히 하여도 그다지 티가 나지도 않고 참 힘들고 어려운 일입니다. 그렇다고 이러한 일을 ‘어떻게 피해 갈까?’ 가 아니라 ‘어떻게 하면 더 효과적으로 빨리 잘 할 수 있을까?’ 를 고민해 보는 것은 어떨까요? 가이드 업무가 숙달이 된다면 GUI디자인 작업함에 있어 이것이 개발 가능한지 사용성에 문제가 없는지 쉽게 파악할 수 있게 될 것입니다. 이렇듯 GUI가이드 업무는 나의 전문성을 키워주는 일이며 이러한 업무를 하는 자신은 전문가임을 꼭 기억하고 잊지 마시길 바랍니다.

 

-가치디자인그룹 윤종선