NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

기획

기획 용어 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 요소/영역 별로 나뉘어 관리되기도 합니다. 실제로 몇 가지 타입을 나눠 상품을 분류하여 상품 상세페이지를 관리합니다. 특정 상품 상세페이지가 개별로 디자인 관리되는 것이 아닌, 한 템플릿 형태로 관리되며, 끌어오는 이미지나 상세 콘텐츠만 다르게 노출됩니다. 대형 서비스인 경우, 관리하는 상품이 많은 만큼, 해당 용어의 인지와 활용은 필수입니다.

댓글 0

NINA.C

UX를 전공하고 UXUI, 서비스 기획자, 강사, 작가 활동을 하는 NINA입니다. 대중성 있는 UX를 연구하며 디자인 비즈니스를 구상하고 있습니다.

당신이 사인하기 전에 알아야 할 것들: ②일을 맡길 때

아웃소싱

당신이 사인하기 전에 알아야 할 것들: ①일을 할 때

아웃소싱

2022년 주목해야 할 IT 키워드 10가지

기획

비정규 직원과 커뮤니케이션 툴로 협업하는 방법

아웃소싱

UX측면에서 잘 만들어진 B2C사례 9부, 텍스트 콘텐츠 플랫폼의 UX는?

디자인

초보자를 위한 스토리보드 작성 팁

기획

외주 잘 맡기는 방법 3부: 외부 업체와 Co-working 하기

아웃소싱

ERP 중심의 물류전산화 2부, ERP 제품 집중 분석

프로덕트

UX측면에서 잘 만들어진 B2C사례: 8부, 피그마와 캔바

디자인

UX측면에서 잘 만들어진 B2C사례: 7부, 노인을 위한 UX는 있다

디자인

UX측면에서 잘 만들어진 B2C사례: 6부, 테슬라의 경험디자인

디자인

외주 잘 맡기는 방법 2부: 분쟁과 리스크를 줄이는 9가지 팁

아웃소싱

기획 용어 10부, JD로 보는 직무 개념 및 용어

기획

기획 용어 9부, AI 음성인식 기획 기초 용어

기획

ERP 중심의 물류 전산화 1부, ERP 가볍게 다가가기

프로덕트

기획 용어 8부, 팝업과 오류 유형 정리

기획

기획 용어 7부, 메뉴 혹은 내비게이션 개념 정리

기획

기획 용어 6부: 시작하기 프로세스 기초개념 알기

기획

외주 잘 맡기는 방법 1부: 외주 계약 전에 꼭 보세요!

아웃소싱

코로나로 인해 고용 및 비즈니스 환경은 어떻게 변화하고 있을까?

아웃소싱

UX측면에서 잘 만들어진 B2C사례: 5부, 교통서비스와 길안내

디자인

화면 정의와 기능 정의 3부, 유용한 상세 가이드 꿀팁

기획

기획 용어 5부: 인터랙션/제스처 알아가기

기획

‘아웃소싱’ 하기 전에 꼭 알아야 할 것들

아웃소싱

어디까지 왔나요? AI 적용사례

개발

프리랜서가 겪는 문제와 해결방안

프리랜싱

알아두면 좋을 IT관련 웹사이트들: 5부, IT 채용 정보 웹사이트

아웃소싱

화면 정의와 기능 정의 2부, 기획자를 위한 디스크립션 작성 원칙

기획

UX측면에서 잘 만들어진 B2C사례: 4부, 나이키 러닝 NRC & Fitbit

디자인

알아두면 좋을 IT관련 웹사이트들: 4부, UX디자이너가 포트폴리오를 만들 때

디자인

기획 용어 4부: 검색 기획/설계를 위한 기본 용어 알고 가기

기획

왜 아웃소싱인가?

아웃소싱

알아두면 좋을 IT관련 웹사이트들: 3부, 기획자의 웹사이트 10개

기획

UX측면에서 잘 만들어진 B2C사례: 3부, 카카오 모빌리티와 이브이패스

디자인

화면 정의와 기능 정의 1부, 기획자를 위한 화면 정의 원칙

기획

알아두면 좋을 IT관련 웹사이트들: 2부, IT 트렌드 세터를 위한 웹사이트 추천

기획

자율주행 기술의 현황: 3부, 자율주행차 디자인이 다른 점은?

개발

알아두면 좋을 IT관련 웹사이트들: 1부, 성장러를 위한 IT 웹사이트

기획

기획 용어 3부: 이커머스 페이지 기획 시 알아야 하는 기본 용어

기획

자율주행 기술의 현황: 2부, 움직이는 스마트폰, 무인 자동차!

개발

UX측면에서 잘 만들어진 B2C사례: 2부, 토스와 기업은행 아이원뱅킹

디자인

기획 용어 2부: UI 기획 시 알아야 하는 기초 용어

기획

자율주행 기술의 현황: 1부, 완전 초짜들을 위한 자율주행 이해하기!

개발

UX측면에서 잘 만들어진 B2C사례: 1부, 디터람스 제품 디자인

디자인

프리랜서와의 프로젝트를 안정감 있게 이어가려면

기획

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.