반응형
728x170
본문의 GUI 가이드라인에 대한 정의와 내용은 Google사의 Android OS를 기반으로 정리하였으며, 각 회사 및 제조사별로 다른 부분이 있음을 미리 알려드립니다.
앞서 GUI 가이드라인 문서 작업의 기본 원칙 포스팅을 통해 가이드라인 작업에 앞서 알아야 할 개괄적인 정의 및 목적, DP개념에 대해 알아보았습니다. 이번 포스팅에서는 지난 포스팅에 이어 GUI 가이드라인 제작에 있어서의 필수사항과 참고할만한 부분에 대해 알아보겠습니다.
1. GUI 가이드라인의 역할 복습 과정
지난 포스팅을 통해 기획 및 디자인이 완료된 화면을 토대로 화면을 구성하는 각 컴포넌트(Component)들의 간격과 위치, 사용된 서체의 위치와 크기, 색상 뿐만 아니라 구성 요소들의 PNG 리소스 여부 등 해당 디자인의 개발 진행에 필요한 모든 요소들을 하나의 문서로 정리하여 디자인이 정확하게 구현될 수 있도록 하는 디자이너와 개발자간의 협업 도구로서의 역할이 GUI 가이드라인이라는 것을 아셨을 텐데요.
그렇다면 GUI 가이드라인 작업을 진행하기 이전에 어떠한 단계를 거치는지, 각각의 단계는 어떤 의미와 역할을 하게 되는지에 관해 이번 포스팅에서 살펴보도록 하겠습니다.
2. GUI Guideline 작업 전에 확인해야 할 사항
시각디자인 장르 중 광고/그래픽/편집 영역에서 디자인을 실물로 구현해주는 ‘인쇄/후가공’ 과정이 있고, 웹디자인에서도 디자인을 웹사이트로 구현해주는 ‘퍼블리싱/개발’ 과정이 있듯이 GUI디자인 또한 작업된 디자인을 실제 디바이스를 통해 사용자에게 전달해주기 위해서는 ‘개발’ 과정이 반드시 필요합니다.
디자인 프로세스에서 ‘개발’ 프로세스로 이관되는 과정에서 바로 GUI 가이드라인이 존재하게 되는데, 이 GUI 가이드라인이 디자이너와 개발자간의 원활한 커뮤니케이션을 돕는 도구로 만들기 위해서는 생각보다 신경 써야 할 부분이 많습니다. 예를 들어, 편집 디자이너가 인쇄를 염두에 두고 편집물을 디자인할 때, RGB와 CMYK 간의 차이점과 같은 기본적인 사항을 알고 있어야 하는 것과 같은 맥락이라고 할 수 있습니다. 모니터 화면 상에서 보이는 색상과 인쇄물로 나올 때의 색상 값 차이는 엄연히 다른 문제이기 때문입니다. 거기에 인쇄 과정 전반에 대한 대략적인 정보와 지식도 필요하죠. 이와 마찬가지로, GUI 가이드라인을 제작하는 것 또한 디자이너의 눈과 입장에서 화면을 설명하는 것만으로는 충분하지 않습니다. GUI 디자인의 특성 상 일회성으로 한 번 만들어서 끝나는 것이 아니라 기획 단의 기능 변경 및 추가, 디자인 요소의 수정, 사용자 피드 및 기타 오류 사항들을 반영하여 개선하거나 수정하는 것이 병행되므로, 기본적인 디자인 요소에 대한 정의는 물론이고, 변경되는 사항에 대한 업데이트 내용 또한 누가 보아도 알기 쉽도록 정의할 수 있어야 합니다.
이를 위해 먼저 클라이언트와 디자이너, 개발자간의 선(先)협의 사항에 대한 정의가 필요합니다. 예를 들어 클라이언트 측이 가진 그들만의 GUI General Rule이 있는지, 있다면 현재의 디자인과의 연관성 및 적용 항목에 대한 범위는 어디까지인지에 관한 협의가 필요한 것이죠. 사실상 이러한 클라이언트와 디자이너간 협의 사항은 일반적으로 GUI 가이드라인 제작단계가 아닌 디자인 초기 단계에서부터 협의가 되어 있어야 하는 상황이므로 가이드라인 제작 단계에서는 말 그대로 참고 사항에 가깝습니다.
오히려 더 중요한 것은 클라이언트와 디자이너간의 협의 사항보다 디자이너와 개발자간의 선 협의 사항을 충실히 반영하도록 가이드라인이 제작되고 있느냐에 대해 집중해야 한다는 것이지요.
본 단계에서는 각각의 역할을 분리할 것이 아니라 총체적으로 상호 연결되어 있는 정보와 이해관계에 따라 GUI 가이드라인을 만든다고 생각하시는 것이 맞습니다. 어떤 디바이스의 어떤 해상도를 어떻게 대응해야 하는 것인지, 그를 위해 필요한 해상도별 PNG Asset 은 몇 가지인지, GUI 가이드라인 문서의 포맷과 세부사항들은 어떻게 표현되고 전달될 것인지에 관해 클라이언트와 디자이너, 개발자 등 3자간에 면밀한 의견 교환과 끊임없는 상호 작용을 통해야 하는 것입니다.
3. GUI Guideline 문서의 구조
GUI 가이드라인은 프로젝트 및 클라이언트의 특성, 제작사 및 개발자의 작업 스타일에 따라 조금씩은 다르게 만들어집니다. 다만 어떤 경우에라도 필수적으로 제공되어야 할 핵심 정보는 방법은 달리할지언정 빠져서는 안 되는 것입니다.
바이널엑스에서는 일반적으로 다음과 같은 구조로 GUI 가이드라인을 제작하고 있습니다.
그렇다면 순서대로 각 항목이 어떤 정보를 담고, 또 어떤 역할을 하는지 알아볼까요?
첫 번째로 GUI 가이드라인 문서 표지에 해당하는 프로젝트 커버부터 살펴 보겠습니다. 프로젝트 커버는 해당 프로젝트의 타이틀과 버전 및 해상도, 해당 문서가 발행되는 일자에 대한 정보를 담아야 합니다. 또한 해당 프로젝트를 진행하는 클라이언트와 제작사의 정보도 빠져서는 안되겠죠.
(바이널엑스에서 진행한 프로젝트의 실물 가이드라인 문서는 클라이언트와의 계약 사항으로 인해 외부에 공개할 수 없는 관계로, 상기 이미지는 글쓴이의 개인 연습작을 토대로 가상으로 제작해본 가이드라인 문서 예시임을 미리 밝힙니다.)
기본적으로 들어가야 할 정보는 위의 이미지와 같다고 보시면 됩니다. 물론 프로젝트 커버뿐만 아니라 모든 페이지의 레이아웃은 프로젝트 성격에 따라, 제작사 및 클라이언트 요청 혹은 개발자와의 선협의 사항에 따라 변경될 수 있습니다.
두 번째는 히스토리 페이지입니다. 프로젝트 기간 및 범위에 따라 차이가 있을 수 있으나, 기본적으로는 최초 작업된 항목 및 추가되거나 수정된 사항에 대한 내역 정리가 히스토리 페이지의 주요 목적입니다.
GUI디자인의 특성상 기획요건의 변경 및 추가, 기능의 개선 및 오류 정정 등의 이유로 인해 업데이트가 잦은 관계로 클라이언트와 디자이너, 개발자간에 업무 혼선을 줄이고 작업 진행 상황에 대한 명확한 정보 공유를 위해 GUI 가이드라인 문서에서도 이를 명확히 표기해주어야 합니다.
세 번째는 GUI 가이드라인 문서의 인덱스 페이지, 즉 목차에 대한 설명입니다. 대학 수업 때 많이들 써보셨던 레포트를 통해서 익히 목차의 중요성을 아실 텐데요. 해당 문서의 구성과 순서에 대한 일목요연한 정리를 위해 GUI 가이드라인 문서에서도 목차는 필수입니다.
|
우선적으로 화면 전반에 반복적으로 적용되는 사항들을 Basic Rule 혹은 General Rule 로 묶어서 제일 먼저 정리를 하며, 기본적인 사항이 정리가 되었다면 대표 화면들부터 기타 세부 화면들로 정리를 해나가는 것이 일반적입니다.
네 번째는 프리뷰 페이지입니다. 프리뷰 페이지는 말 그대로 작업된 화면의 미리 보기 페이지로서, 디자인된 화면 중 개발에 필요한 화면들, 즉 가이드라인 문서 상에서 정의되는 주요 화면들을 나열하며, 개별 화면에서 추가되거나 수정되는 항목이 있다면 업데이트 라벨을 붙여줌으로써 해당 화면이 업데이트 되었음을 알려주게 됩니다.
상기 설명이나 이미지처럼 반드시 프리뷰 페이지에서 업데이트 라벨 혹은 알림 등을 통해 업데이트 내역을 공지해야 하는 것은 아닙니다만, 비교적 짧은 기간 동안 많은 항목을 개발 대응해야 하는 개발자들의 업무 특성을 고려하여 굳이 전체 가이드 페이지를 훑어 보지 않더라도 라벨이 붙은 화면을 파악하는 것만으로도 어떤 화면에서 수정내역이 발생했는지 확인할 수 있으므로 업무 효율성이 증진되리란 게 필자의 생각입니다. 물론 이런 부분은 선협의나 프로젝트 진행 중에도 의견 교환을 통해 맞춰 나갈 수 있는 부분이랍니다.
다섯 번째로, 드디어 GUI 가이드라인을 직접적으로 정의하는 Basic Rule 혹은 General Rule 페이지입니다.
전체 디자인에서 반복적으로 등장하는 범용적인 Component, Color, Font 등이 생기기 마련인데, 각 화면들에 대한 가이드라인을 정의할 때 이들을 일일이 새로 정의하게 될 경우 인력 및 시간 낭비가 상당하게 됩니다. 이를 방지하고자 나온 대책이 바로 Basic Rule 혹은 General Rule 인데요. 범용성 있는 디자인 항목들만 따로 모아 디자인의 기본 틀을 정의하는 페이지라고 이해하시면 됩니다.
Basic Rule 혹은 General Rule 을 정의한 페이지부터는 큰 부분에서 작은 부분으로, 좌에서 우로, 위에서 아래로 등등 화면을 구성하고 있는 항목들을 순차적으로 정의해 나가면 됩니다.
가이드 제작 시에는 해당 페이지에서 정의하고자 하는 화면은 무엇인지 프리뷰를 보여주어, 바로 세부 항목에 대한 가이드를 정의했을 때 발생할 수 있는 착오를 줄여주는 것이 좋습니다.
또한 화면의 일부를 할애하여 보여준 프리뷰에서도 해당 화면의 전체를 정의하기에는 문서 우측 영역의 공간이 부족할 수 있으므로, 해당 페이지에서 정의하려는 ‘특정 부분’에 대해서는 별도로 표시를 해주는 것이 복수의 페이지로 나뉘었을 때 덜 혼란스러울 수 있습니다.
반응형
'Library > Social' 카테고리의 다른 글
네이버 쇼핑 연간 트렌드 매출, 스마트 스토어 키워드 잡는 방법 (0) | 2023.02.21 |
---|---|
링크드인에서 자기 PR 끝내주게 잘하는 사람들의 공통점 (0) | 2023.01.28 |
디지털 노마드 후기 앱개발 디자이너 - 치앙마이에서 한 달 살기 (0) | 2023.01.17 |
시애틀 아마존 북스(Amazon Books) 체험기 (0) | 2023.01.16 |
평범함을 거부하는 픽사 사옥 랜선 구경 - 너무 귀여운 룩소 주니어 (0) | 2023.01.16 |
댓글