‘일잘러’ 디자이너 되기 위한
UXUI 뜻&용어 가이드
글 미리보기
1. UXUI 뜻과 디자이너의 역할
2. 실무에서 사용하는 UXUI 용어
3. UXUI 디자인에서 현직자가 사용하는 도구는 무엇일까?
4. 실무에서 사용하는 UXUI 용어부터 툴까지 준비하는 방법
출처: Pexels
1. UXUI 뜻과 디자이너의 역할
UXUI 디자인은 다음과 같이 기획, 진행됩니다. 우선 프로젝트가 시작되면
UXUI 디자이너는 서비스의 비즈니스 전략에 맞추어 유저가 서비스를 마주하면서 발생할 모든 경험 즉, UX(User eXperience, 사용자 경험)을 기획
합니다. 그리고 그 기획을 유저가 마주하는 UI(User Interface, 사용자 인터페이스) 디자인으로 풀어냅니다. 개발자와 더불어 프로덕트(서비스)를 만들어내는 과정의 핵심적인 역할을 맡고 있죠.
“PM님이 전달해주신 와이어프레임 확인하고 디자인시스템 기반으로 빠르게 작업해서 프로토타이핑으로 내부 UT 먼저 진행하시죠.”
시니어 UXUI 디자이너가 PM, 개발팀과의 회의를 끝내고 파일을 전달하며 디자인 팀원들에게 전한 말입니다. 와이어프레임, 디자인시스템, 프로토타이핑, UT… 한 문장 안에 쏟아진 이 단어들은 모두 UXUI 디자이너들이 실무 속에서 아주 자연스럽게 사용하는 용어입니다.
자연스럽게 사용하는 UXUI 용어이기 때문에 속도감 있게 진행되는 실무 상황에서 기본 개념이나 지식 없이 혼란스러운 상황에 처하고 싶지 않다면 해당 UXUI 용어들을 익혀두는 것이 좋습니다.
2. 실무에서 사용하는 UXUI 용어
UXUI 디자이너, PM, 개발자는 서비스 개발을 위해서 프로젝트의 기획 및 개발 단계에 따라 다양한 작업을 통해 서비스를 기획하고 구체화하고 검증합니다. 그 과정에서 다양한 작업을 진행하게 되는데요, 그 과정에서 현직자라면 일상적으로 사용하게 되는 UXUI 용어 뜻을 몇 가지 소개해드리겠습니다.
1. 와이어프레임(Wireframe)
와이어프레임(Wireframe)이란 웹사이트 혹은 어플리케이션 등, 제작할 서비스의 사용자 인터페이스(User Interface)의 구조와 핵심 기능을 나타내는 다이어그램으로, 설계 프로세스의 첫 번째 단계로 서비스의 초기 레이아웃을 구성할 때 작업하는 일종의 초안입니다. UI디자인을 하기 전 서비스의 전체적인 레이아웃(구조)와 화면 흐름, 이동, 각 화면에서 표출되어야 하는 데이터 등이 담기도록 작업됩니다.
출처: Unsplash
2. 프로토타입(Prototype)
프로토타입(Prototype)이란, 제품 혹은 서비스의의 초기형으로 미리 만들어 본 시험용 제품이라고 할 수 있습니다. UXUI에서 프로토타입은 다양한 형태와 수준으로 개발될 수 있는데, 보통 초기 아이디어나 가설, 컨셉 등이 얼마나 잘 반영되었는지 확인하고 검증하는 과정에 사용됩니다. 프로토타입은 개발 초기에 기획에 대한 검증과 개발에 필요한 피드백을 얻는 데에 핵심적인 역할을 하며, 프로토타이핑을 통해 실제 출시될 서비스를 점검하고 수정하게 됩니다.
3. 사용성 테스트(Usability Test, UT)
사용성 테스트(Usability Test)란, 잠재 사용자들을 대상으로 테스트를 진행하여 서비스를 얼마나 쉽고 편하게 사용하는지 혹은 설정한 가설에 따라 유저가 서비스를 이용하는지 등을 평가하는 방법입니다. 사용성 테스트를 위해서는 위해 서비스의 어떤 기능 혹은 가설을 중심으로 테스트를 진행할 것인지 설계하며, 테스트를 진행할 대상자를 모집하고 구체적인 방법을 설정합니다. 이때 미리 작업한 프로토타입을 활용하여 사용성 테스트를 진행하게 되며, 이 과정을 통해 가설 또는 기능을 중심으로 개선점을 찾기도 하고, 미처 발견하지 못했던 문제점을 발견하여 수정하게 됩니다.
4. 디자인시스템(Design System)
디자인시스템(Design System)이란, 웹/모바일의 UI디자인 시 반복되어 사용되는 디자인 컴포넌트나 리소스(구성요소)들을 모아 만든 일종의 가이드라인입니다. 일반적으로 UI에서 사용되는 컬러, 텍스트 스타일, 페이지 레이아웃, 버튼, 메뉴, 인풋박스 등의 요소들로 구성되며 반복적으로 나타나는 요소들을 가이드화 하여 작업을 효율적으로 진행할 수 있게 합니다. 디자인시스템은 새로운 화면이 추가되거나, 여러 디자이너가 함께 디자인을 진행하더라도 일관성 있는 디자인을 빠르고 효율적으로 진행할 수 있다는 장점이 있습니다.
5. 정보구조도(Information Architecture, IA)
정보구조도(Information Architecture, IA)란, 서비스 전체의 흐름을 구성하고 파악하는 일종의 표 혹은 구조도입니다. 제품과 서비스를 구성하는 정보와 컨텐츠의 구조, 흐름을 설계하는 가장 기초적인 작업으로 보통 depth라는 용어를 사용하여 서비스의 단계에 따른 깊이를 표현합니다. 서비스의 주요 기능을 사용하기 위해 사용자가 수행해야 하는 행위가 얼마나 발생하는지, 기능의 성격에 따라 독립된 단계에서 존재할 건지 혹은 특정 화면에만 존재할 건지 등을 파악할 수 있는 기본 설계서라고 볼 수 있습니다.
출처: Pexels
기업에 따라 위에 설명한 다양한 작업들을 UXUI디자이너가 수행할 수도 있고, PM 혹은 서비스 기획자가 수행하는 경우도 있습니다. UXUI 디자이너가 위 작업을 직접 수행하지 않더라도 위 작업들이 어떻게 구성되고 어느 단계에서 진행되며, 서비스를 그려내기 위해 어느 정보들을 확인해야 하는지는 서비스를 제작하기 위해 필수적으로 알아야 합니다.
3. UXUI 디자인에서 현직자가 사용하는 도구는 무엇일까?
그렇다면 UXUI 디자이너는 UXUI를 설계하고 기획하는 과정에서 어떤 툴을 사용하게 될까요? UXUI 디자이너가 다양한 작업들을 수행해야 하는 만큼, UXUI 툴을 사용해 보았거나, 능숙하게 사용할 수 있는지가 직무 필수 사항 혹은 우대 요건으로 요구되고 있습니다.
일반적으로 회사에 입사한 후 새로운 툴을 여유롭게 탐구하고 공부할 시간이 주어지는 경우는 거의 없기 때문에, UXUI 디자이너 직무를 희망하시는 분들이라면 툴 사용법은 필수 요소라고 할 수 있겠습니다.
서비스의 UXUI를 설계하고 구성할 수 있는 다양한 툴이 존재하는데요, 대표적인 3가지를 소개해드리고자 합니다.
1. Figma(피그마)
피그마는 최근 UXUI업계에서 가장 많이 사용되는 디자인 툴 중 하나로, 실제 현업에서 가장 보편적으로 사용되는 디자인 툴입니다.
UXUI 디자인에 특화되어 있는 기능들과 같은 프로젝트 파일을 실시간으로 팀원들과 동시 작업 및 협업을 하기에 최적화되어 가장 편리한 툴로 꼽히고 있습니다. 웹 브라우저를 기반으로 한 툴이기 때문에 PC 사양의 한계에서 비교적 자유로우며 필수로 어플리케이션을 설치하지 않고도 사용할 수 있다는 장점을 가지고 있습니다.
2. Sketch(스케치)
스케치는 1세대 XUI 디자인 툴로, UXUI를 메인으로 한 디자인 툴의 시작점이라고도 할 수 있습니다. 역사가 길지 않은 UXUI 디자인 툴이지만, 10년 넘게 사용된 도구인 만큼 최적화된 기능과 다양한 플러그인들로 아직도 많은 디자이너에게 각광받는 툴이라고 할 수 있습니다.
다만 스케치의 경우 오랜 기간 Mac OS에서만 제공되었다는 점에서 툴 사용 기기에 제약이 있습니다.
3. AdobeXD (어도비XD)
어도비XD는 포토샵, 일러스트레이터 등으로 디자이너에게 매우 친숙한 Adobe의 UXUI 디자인 툴입니다. 맥 버전과 함께 윈도우 버전에서도 사용 가능하며, 포토샵이나 일러스트레이터와 쉽게 호환이 가능하며 같은 단축키를 공유한다는 점에서 디자이너들이 초반에 느끼는 허들도 낮은 편이죠. 디자이너라면 Adobe의 툴을 구독하는 경우가 많기 때문에, 그런 점에서 강점을 가진 도구이기도 합니다.
4. 실무에서 사용하는 UXUI 용어부터 툴까지 준비하는 방법
UXUI 디자이너들이 사용하는 용어와 도구에 대해서 알아보았습니다. 실무에서 다루는 UXUI 용어와 툴은 지금 잠깐 짚어드린 것 보다 훨씬 더 다양합니다.
또 기획 단계에서 접하게 되는 용어와 서비스의 완성도를 높이는 단계에서 사용하는 용어, PM이 주로 사용하는 용어, 개발자가 주로 사용하는 용어가 조금씩 다릅니다. 이 용어들이 의미하는 바를 살펴보면서 깨달으셨겠지만, UXUI 디자이너는 필연적으로 PM, PO, 개발자 등 다양한 직무의 인원들과 협업을 진행하게 됩니다.
서비스 제작을 위해 필요한 사항을 조율하고 논의하기 위해 다른 직무들과 함께 수행하는 업무에 대한 이해도가 있어야 원활한 협업이 진행될 수 있습니다.
단, 위에서 알아본 용어는 혼자 공부할 수 있지만 타 직무에 대한 이해도는 글로 읽어서 알기 어려운 것들입니다. 이런 경험을 실무에 들어가기 전에 미리 쌓을 수 있다면, 그 누구보다 준비된 사람으로 현직에서 빠르게 적응할 수 있을 것입니다. 패스트캠퍼스의 UXUI 부트캠프에서 현업에서의 경험을 쌓아보세요.
패스트캠퍼스의 UXUI 부트캠프는 현직 디자이너와 함께 UX 실무를 압축적으로 경험할 수 있는 기회를 제공합니다. 특히 국내 UXUI 디자인의 중심인 디자인 회사 플러스엑스 현직자와 함께 실제 UXUI 기획 플로우를 배울 수 있습니다. 또한, 현직자에게 포트폴리오에 대한 피드백과 조언을 받아 나만의 UXUI 디자이너 취업을 위한 포트폴리오를 만들 수 있습니다.
* 패스트캠퍼스 부트캠프는 '커널 아카데미'로 명칭이 변경되었습니다.
