기획 용어 1부: 웹, 앱 UI 설계 전 알아야 하는 기본 개념

첫 번째, 화면 및 팝업 관련 기본 용어 알기

구글링을 해도 명확하게 뜻이 나오지 않거나 선배 동료에게 물어보기에 애매한 용어들이 있으시죠? 실제 프로젝트를 진행하거나 Teaching을 하면서 입문자들이 가장 많이 물어보시는 부분과 실제 작업 시 필수 Use case 위주로 용어의 의미와 활용에 대해 소개해드리려 합니다.

기획 용어 시리즈물 그 첫 번째 시간! 웹과 앱을 기획, 설계하기 위해 스토리보드나 가이드라인을 작성 전, 화면 목록을 작성하는 시간이 있습니다. 공통 화면, 팝업 페이지 작성을 위한 기초 용어를 알아봅니다. 

비슷한 성격? 튜토리얼 & 도움말 & 온보딩의 차이

1. 튜토리얼

튜토리얼 화면은 코치 마크라고 하여, 서비스 앱 초기 실행 시, 인터렉션 가이드나 해당 서비스를 안내하는 화면을 말합니다. 그밖에 도움말은 물음표 버튼을 선택 시, 레이어 팝업 형태로 특정 기능 혹은 콘텐츠에 대한 추가 안내 혹은 설명을 할 경우에 제공되는 기능을 말합니다.

2. 도움말

UI가 위젯에 늘 제공하는 경우도 있고, 때로는 도움말 메뉴를 별도로 제공하는 서비스도 있습니다. 특정 기능에 대한 사용자의 학습성, 인지성을 고려하여 위치와 세부 UI를 결정하는 것으로 이해하시면 좋을 것 같습니다. 툴팁 UI라고도 불립니다.

3. 온보딩

온보딩이란, 사용자가 처음 접하는 시스템에 적응하도록 돕는 과정을 말합니다. 슬랙의 슬랫봇처럼 점차적으로 익숙하게 하나씩 알게 합니다. 하나하나씩 사용자에게 가이드를 주는 것을 말하지요. 튜토리얼 슬라이드 몇 장으로 안내하는 것으로 기능을 순차적으로 적시에 공개합니다.

UI&UX 설계 시, 로딩?

로딩 화면은 개발 퍼포먼스에 따라 사용자 화면에서는 충분히 생략될 수 있는 화면 또는 단계입니다. 그러나 불러오는 데이터가 무거운 경우, 시스템 환경 상 즉각 데이터가 노출되지 않는 경우를 대비해서 서비스 별로 제공하는 UI가 다양합니다. Skeleton Screen기법으로 UI 프레임이 먼저 노출되고 데이터를 차츰 노출되는 방식, 혹은 재미있는 유머를 섞은 다소 친밀한 카피나 일러스트를 제공하는 사례도 있습니다.

기획은 비교적 쉬움 그러나 개발 시 은근히 까다로운 그대, 앱 푸시

앱 푸시는 개인 모바일에서 푸시받기 설정 시, 나타나는 UI입니다. 보통 푸시 알림이라고 하며, 이벤트성 콘텐츠, 혹은 사용, 적립, 그 밖의 이슈 발생 시, 노출됩니다. 해당 UI를 Tap하여 선택 시, 상세화면으로 진입되는 구조이며, 서비스 사용 중 또는 다른 서비스 사용 시, 앱 푸시가 노출되면 앱 푸시 화면 UI 노출 시 상세 정책을 기획해줄 필요가 있으며 푸시 안의 메시지 문구를 기획하는 것도 고민해주세요. 덧붙여, 신규 상품 가입 혹은 해지 시, 문자 혹은 카카오톡 메시지를 통해 알림을 제공할 것인지, 제공하면 어떤 내용이며 몇 초 후에 보낼 것인지 등 안내 정책을 상세 기획합니다.

서브 화면 & 레이어

서브화면과 레이어 팝업을 명시해주는 것은 화면 목록 문서에 명시해주는 작업과도 연관이 있습니다. 추가로 서브 화면 상단에는 백버튼을 제공해주고 있고, 레이어 팝업은 닫기 버튼이 위치합니다. 대체로 안내성 성격이나 간단한 UI스텝인 경우 레이어 팝업을 사용합니다. 각 서비스의 기존 정책을 보면 준수하고 있는 Rule이 있으므로 해당 규칙에 따라 설계해주십시오. 신규 서비스인 경우, 관련 서비스 화면 설계를 참조하여 설계해주시기 바랍니다!

GUI와 UI의 차이

사전적 의미로, Graphic User Interface (그래픽 유저 인터페이스)입니다. UI란, 사용자가 직접적으로 접촉하게 되는 매개체이며, 대중에게 가장 익숙한 UI가 GUI라고 말씀드린 바 있습니다. 시각적으로 보여지는 UI로, 실무에서 UX, UI기획보다는 UI 디자인 즉, 칼라링을 입히고, 비주얼적으로 그래픽 요소를 디자인하여 넣는 과정에서 사용하게 됩니다.

System Popup & Layer Popup의 차이

시스템 팝업과 레이어 팝업의 차이에 대해 인지하고 있을 필요가 있습니다. 시스템 팝업이란, 를 OS(ios / Aos)에서 제공하는 팝업을 의미합니다. 레이어 팝업은 보통 안내성 콘텐츠를 담고 있거나 풀팝업 형태로 제공하는 레이어를 뜻합니다. 팝업 형태는 성격별로 매우 세세하게 나눌 수 있습니다. 툴팁 버튼을 눌러 나타나는 도움말 레이어 팝업, 혹은 서브화면 대시 노출되는 풀레이어 팝업 등. 마지막으로 시스템 팝업과 레이어 팝업에 나타나는 Text는 기본적으로 UXUI기획에 포함되는 작업 범위라는 것을 잊지 마세요!

Alert창인가요? Confirm창인가요? 

알럿 창과 컨펌 창의 의미를 혼동하여 사용하는 초보 UX, UI 디자이너 혹은 기획자가 간혹 계십니다. 알럿 창은 “확인”버튼만 제공하여 사용자에게 확인을 요하는 경우를 말하며, 컨펌 창의 취소와 확인 버튼 2개를 제공하여 사용자로 하여금 해당 기능을 수행하기 전 의견을 묻는 형식이라고 보시면 좋겠습니다.

Native & Hybrid & Custom의 차이를 알아봅시다!

네이티브 앱 설계는 OS별로 특화된, 최적화된 UI를 설계하는 경우를 말합니다. 모바일로 보면, 안드로이드 스토리보드, ios 스토리보드 별개로 제공되는 경우를 의미합니다. 커스텀 형태로 제공하는 경우, 이 두 가지 UI 형태를 적절히 조합하여 한 벌의 스토리보드로 제공하는 경우를 말합니다. 이 경우 생산성이 높다고 판단되는데요, 다만 설계 시, UI Flow는 상이할 수 있으므로 커스텀 형태로 나갈 수 없는 Flow는 별도로 꼭 서술해줍니다. 그밖에 하이브리드 웹은 네이티브만큼 OS에 최적화된 상태는 아니지만 수정 보완작업 측면에서 생산성과 효율성이 높은 방식입니다.

그대의 이름, 라벨링? 혹은 레이블링?

사전 의미 그대로, 용어를 의미합니다. 기획 설계 시, 해당 용어를 영문으로 표기할 것인지, 한글로 표기할 것인지 정하고, 영문으로 제공 시, 대소문 표기법을 정해줄 필요가 있습니다. 기획 설계 시, 메뉴 레이블링, 혹은 소제목 타이틀, 버튼명, 등급 표기방법 등을 포함하겠죠? 명칭이라는 게 다양하게 존재할 수 있는데요, 해당 문서에서는 어떻게 제공할 것인지 약속하는 의미로, UI 가이드라인 문서를 검토하기 전, 기획서 앞장에 제공되고 있습니다.

UI 템플릿

UI 템플릿은 패턴의 규격이 반복되는 경우 개별로 작업하지 않고, UI와 레이아웃을 유형화하여, 기획 및 설계하는 케이스를 말합니다. 백오피스에서는 특정 UI템플릿 형태가 UI 요소/영역 별로 나뉘어 관리되기도 합니다. 실제로 몇 가지 타입을 나눠 상품을 분류하여 상품 상세페이지를 관리합니다. 특정 상품 상세페이지가 개별로 디자인 관리되는 것이 아닌, 한 템플릿 형태로 관리되며, 끌어오는 이미지나 상세 콘텐츠만 다르게 노출됩니다. 대형 서비스인 경우, 관리하는 상품이 많은 만큼, 해당 용어의 인지와 활용은 필수입니다.