웹을 통해 새로운 창조를 꿈꾸는 인간 - kimdirector
www.kimdirector.co.kr Photo by unsplash.com
kimdirector
Creative Web & Mobile UI/UX Planner and Designer
Humans dreaming of new creation through the UI/UX



WEBDESK
Web Plan Report
HOME WEBDESK Webplan Report
새내기 UI 기획자를 위한 A guide to the guide
Posted by kimdirector | 2014.11.21 | Hit : 5138
UI 기획자 guide 화면설계 파워포인트
목록보기이전보기

최근 함께 프로젝트를 진행하는 새내기 기획자의 작업과정을 지켜보다 입사 초기 새내기 시절이 문득 생각났습니다.
 
성과를 내보고 싶은 간절한 마음에 비해, 그에 따르지 않는 좌/우 뇌의 회전 속도, 한 없이 메뉴를 찾아다니는 마우스 위의 손가락, 그리고 차마 피드백을 주지 못할 정도로 지저분한 화면 설계 문서들... 누구나 겪어본 새내기들의 고충을 알기에 선임 기획자로서 화면설계 과정과 깔끔한 문서 정리에 도움이 될만한 업무 팁들을 정리해 보았습니다. 이전에 바이널엑스 블로그를 통해 다양한 프로토타입 툴들을 소개해드린 적이 있지만 실제 업무 현장에 주로 쓰이는 마이크로소프트(MS) 社의 파워포인트의 PPT문서를 기준으로 간단한 팁들을 소개하도록 하겠습니다.
 
 
논리적인 화면설계의 시작은 인덱스 정리
 
다양한 디자인 프로세스를 통해 도출된 UX 디자인 컨셉은 '화면 설계 문서'로 제작되며 이를 통해 클라이언트 및 디자이너, 그리고 개발자들이 소통하게 됩니다. 즉, 기획 업무에서 화면 설계 문서는 최종 디자인 결과물이자, 프로젝트 참여자들이 실제 서비스 구현을 위해 각자의 작업을 진행하게 되는 청사진이 되는 것이지요. 그 만큼 화면 설계 문서는 이전 단계에서 고민했던 서비스 전략과 디자인 컨셉들이 논리적인 구성과 구체적인 화면 요소로 잘 드러나 있어야 합니다.




 
보통 화면 구성에 대한 인덱스(Index)는 해당 서비스가 어떤 기능(Feature)을 가지고 어떤 기능들을 제공할지 결정된 이후 각 기능과 메뉴에 따라 작성하게 됩니다. 이에 따라 복잡하고 다양한 기능을 지닌 서비스이거나 프로젝트의 규모가 큰 경우, 화면 설계 문서의 분량이 우후죽순으로 늘어날 수 밖에 없는데요. 이런 경우, 원하는 페이지로 이동하거나 수정을 하기 위해서는 손목이 아플 정도로 계속 스크롤을 하거나 검색에 걸리는 많은 정보를 일일이 확인하는 수 밖에 없습니다. 문서 천장이 넘는 규모의 프로젝트를 진행하다보면 컴퓨터가 갑자기 다운되어 그야말로 '멘붕'을 경험할때도 있지요. 이러한 수고를 줄이기 위하여 파워포인트는 ‘구역’이라는 기능을 제공하고 있습니다.




 
 
위 화면의 포인트 영역을 (섬네일 영역) 마우스 우 클릭하면 다음과 같이 간단히 문서를 정리할 수 있는 ‘구역 추가’ 버튼 있습니다. 여기에서 제공되는 인덱스는 상황에 따라 접거나 펼쳐볼 수 있기 때문에 작업자를 포함한 다른 프로젝트 참여자들이 중복 작업을 최소화할 수 있고, 또 어떤 부분에 변경 사항이 발생하였는지 빠른 파악이 가능합니다. 특히 UX 프로젝트는 대부분 협업을 통해 이뤄지기 때문에 인덱스를 통해 구역을 정리하고, 주어진 문서 포맷과 서비스 Feature를 중심으로 자신이 맡은 부분을 작업한 후, 동료들과 함께 크로스체크를 통해 반드시 문서를 꼼꼼하게 검토해야 합니다. 이와 같이 프로젝트 초반 협업 과정에서 같은 ‘Goal’을 바탕으로 효율적으로 작업할 수 있는 기준점을 세우는 과정인 인덱스 구축은 매우 중요한 과정 입니다.
 
 
효율적이고 깔끔하게 시각화하기
 
UX 프로젝트에서 클라이언트를 설득하기 위해서는 다학제적(Multi-disciplinary)인 능력외에도, 문제의 본질을 잘 시각화하는 디자인 과정이 필수적입니다. 아무리 문제를 잘 발견하고 그것을 사용자에게 필요한 기능이나 요소로써 문제를 해결할지라도 화면 컨셉이 잘 드러나지 않거나, 지저분한 화면으로 인해 함께 일하는 프로젝트 동료나 클라이언트를 설득하지 못한다면 그대로 아이디어는 사장되기 마련입니다. 그럼 새내기 기획자가 문제를 잘 시각화하고, 문서를 빠르고 깔끔하게 정리하기 위해  필요한 것은 무엇일까요? 저는 다음의 세 가지를 말씀 드리고 싶습니다.
 
 
1. 양질의 Reference
 
새내기 기획자들이 문서를 제작할 때 가장 어려워하는 점은 ‘어떻게 화면을 구성해야 할 지 모르겠다'를 비롯한 막막함입니다. 이러한 막막함을 해결해 줄 수 있는 가장 좋은 해답은 바로 자신만의 레퍼런스 라이브러리(Reference library)를 만드는 것입니다. 최근 하드웨어의 퍼포먼스가 급속하게 향상되며 이전에는 보지 못했던 다양한 트랜지션 및 비주얼 레이아웃들이 적용되는 모습을 여러 곳에서 발견할 수 있습니다. 이러한 트렌드를 발빠르게 빠르게 습득하고 자신의 것으로 만들어 표현하기 수 있는 기획자가 되기 위해서는 최대한 양질의 레퍼런스를 많이 탐색해보고, 이해하여 바로 적용할 수 있도록 미리 파악해 두는 습관이 필요합니다.
 

레퍼런스 사이트 핀터레스트(Pinterest)와 드리블(Dribbble)
 
위의 두 사이트는 제가 컨셉 작업을 진행할 때 자주 참고 사이트입니다. 검색어만 잘 입력하면 간단한 화면 전환 효과도 GIF 파일로 바로 확인해볼 수 있습니다. 평소에 자주 들러 좋은 디자인 사례를 탐색하고 적용하여 미리 습득하는 센스가 필요합니다!
 
 
2. 단축 기능 활용을 통한 작업 효율 높이기
 
레퍼런스 탐색 과정을 통해 어떤 레이아웃으로 화면을 시각화 할 것인지, 어떤 컴포넌트와 디자인 요소로 기능을 제공할 것인지에 대한 고민을 마쳤다면, 문서 작업을 시작해야 합니다. 우선 적용해야 할 단말의 플랫폼이 무엇인지 파악해보고, 해당 단말 사이즈에 맞게 제작 틀을 동료들과 공유합니다.
 

[Android 단말 기준 문서 Format 예시]

 
그리고 제작 틀을 바탕으로 자신이 스케치했던 화면 레이아웃과 컴포넌트를 구체화합니다. 화면 설계 과정에서 빠르게 작업하기 위해서는 자주 사용하는 기능은 밖으로 빼놓고 단축키를 적절히 사용하여 소모적인 단계를 줄이는 것이 좋습니다. 파워포인트에서는 리본메뉴를 통해 각각의 Tab으로 기능들을 그룹핑하여 제공하기도 하고, 제작한 컴포넌트를 우클릭하여 관련 기능들을 추출할 수 있는데요. 3-4 단계의 Depth 진입 또는 섬세한 마우스 이동과 클릭을 통해서만 실행 가능한 기능들도 있기 때문에 자칫 조그마한 부분과 기능 설계 시, 의도치 않게 시간을 많이 허비할 수도 있습니다.
 

파워포인트 리본메뉴

[마우스 우 클릭 예시 화면]
 
[빠른 실행 도구 추가]
 

이러한 때에는 자주 사용하는 기능을 한 번에 컨트롤할 수 있도록 ‘빠른 실행 도구’ 기능을 통해 단축키, 단축 버튼을 설정하면 됩니다.
 
원하는 기능을 리본메뉴에서 찾아서 마우스 우클릭하거나 빠른 실행 도구 모음 사용자 지정을 하면 쉽게 원하는 기능들이 리본 메뉴 아래쪽에 바로 노출됩니다. 또한 이렇게 빠른 실행 도구를 설정해 놓은 후 Alt + 숫자를 누르면 빠른 실행 도구 설정 순서대로 자동으로 단축키가 생성되어 더욱 빠르게 작업할 수 있습니다.이렇게 빠른 실행 도구를 설정해놓은 후 리본 메뉴를 숨겨놓으면 더 넓은 화면 화면을 사용할 수 있다 점도 장점이 입니다.
 
빠른 실행 도구와 함께 작업의 효율을 높이는 또 하나 비결은 단축키 사용입니다. 처음에는 습득하기 어렵겠지만 문서를 작업할 때마다 단축키를 활용하려 노력하다보면 어느샌가 단축키 사용의 달인이 되어 있는 자신을 발견하실 수 있을 것 입니다.
 
 제가 주로 사용하는 단축키는 다음과 같습니다.
- Ctrl + [ 또는 ] : 텍스트 크기 조절
- Ctrl + G : 그룹 설정
- Ctrl + Shit + G: 그룹 해제
- Shit + 방향키 : 도형 및 텍스트 박스 미세 이동
- Ctrl + Shit + C 또는 V : 서식 복사 및 붙이기
 
 
3. 컴포넌트의 강약 조절
 
‘보기 좋은 떡이 먹기도 좋다’라는 옛말이 있지요. 아무리 화면 설계 문서로 그려진 제품이나 서비스 컨셉이 그래픽 작업을 통해 생명력을 얻게 된다 할지라도, 디자이너가 보기 싫으면 디자인도 예쁘게 나오지 않을 것 같습니다 . 다음의 두 예시를 보시고 각자 여러분들이 어떻게 화면을 그리는 것이 보기 좋을지 생각해 볼까요.
 

[새내기 기획자의 컨셉 안]

[선임 기획자의 컨셉 안]
 
물론 위의 두 컨셉 안은 다른 서비스 플랫폼에 대한 화면 설계 화면이지만, 컴포넌트의 정렬, 텍스트와 라인의 색상 및 굵기 조절 등 디자인 강약 조절에 대한 완급의 차이가 느껴집니다. 통일된 라인과 색, 선 굵기, 레이아웃 정렬은 협업에서 컴포넌트에 대한 이해를 돕고 효율적인 작업의 기본이 되기 때문에, 컴포넌트의 강약 조절 역시 신경써야할 중요한 부분입니다.

 
지금까지 새내기 기획자들에게 해주고 싶었던 이야기를 작성해보았습니다.
누구나 그렇듯 시작은 힘들어도 본인을 믿고 매일의 작은 노력을 게을리하지 않으면 언젠간 여러분이 꿈꾸는 UX 분야의 롤 모델이 바로 본인이 될 수 있을 것이라 생각합니다. 저도 마찬가지로 좀 더 깊이 있는 전문성을 갖춘 Senior가 될 수 있도록 노력하겠노라 본 포스팅을 통해 다짐해봅니다. 아무쪼록 열정과 투지가 불타오르는 바이널 새내기 기획자들이여, 영원하라!!! 혹시 포스팅을 보시고 더 좋은 아이디어나 노하우가 있으신 분들은 댓글로 함께 참여해 주셔서 내용을 더 풍성하게 만들어주세요!
 
Posted by kimdirector | 2014.11.21 | Hit : 5138
Origin http://blog.naver.com/PostView.nhn?blogId=vinylx&logNo=20209674498
Tags UI 기획자 guide 화면설계 파워포인트
Trackback http://www.kimdirector.co.kr/bbs/zerotb.php?id=webplan&no=240

COMMENT
목록보기 이전보기
WEBDESK
Design Review
Webdesign Report
Web Plan Report
Design Inspiration
Mobile Life
Web Standard
Recommend Site
Insight Story
Best View Contents
Category Cloud
About us Review Portfolio Design Review Leaders Story Mobile UXD  IT Information Web Identity Everyday Story Mobile Life Webdesign
Web Standard Homepage Work Web Plan Report Practical Use Tip Inspiration Download Recommend Site
Tags
시간관리 단어 스크롤 트렌드 이벤트 Logo 솔루션 프로젝트 관리자 모바일 UI 창작 구글 웹사이트 로고 웹디자인 홈페이지 생산성 관리자 조직 블로그 조나단 아이브 프로젝트매니저 인터넷 디자인 비밀번호 UI UI Kit 스크롤링 프로그래머 노하우 CIP CI 유튜브 리뉴얼 클라우드 컬러 디지털 혁명 플래시 애플리케이션