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

두 번째, UI 화면 Description에 들어가는 기초 용어 알아가세요!

기획 용어 시리즈물 그 두 번째 시간! UI 스토리보드, UI 가이드라인 문서 등 여러 문서들이 작성할 필요가 있어요. 웹과 앱의 UI Description을 설계하기 위해 알고 있어야 할 기초 개념들이 필요합니다. 최근 GUI 디자이너분들이 피그마, 어도비 XD, 스케치 같은 여러 툴로 UI 기획, UI 플로우를 잡아 디자인 가이드 과정이 이전보다 축소되고 있습니다. 

NINA는 이 시기를 과도기적 상황이라고 보는데요, 아직은 개발자분들이나 디자이너분들이 아직도 명확한 이해를 위해 전문화된 화면 기획 문서가 별도로 필요합니다. 처음은 빠르게 그림(화면)을 보지만, 명확하게 이해되지 않으면, UI Description을 보시는데, 인터렉션은 프로토타입 목업으로 보여드리면 되면서 기획자는 점차 수고스러운 문서 작성은 줄어들겠지만, 이해하기 쉬운 UI Description의 수요는 줄어들지 않을 것입니다. 따라서 기본 글 구조를 익히고, 용어를 명확하게 알 필요는 있습니다. 웹과 앱 기획의 기초적인 단계로 용어를 확인하는 과정을 위해 마련된 이번 편에서 실제 케이스를 함께 확인해보며 설계를 위한 기초 UI와 UI 요소에 해당되는 용어를 알아보겠습니다. 

Default(고정)이란? – Default값, Default view

#2가지 케이스 #UI Description 

화면을 설계할 때 가장 많이 나오는 용어가 바로 "Default(디폴트)"입니다. 때로는 "고정"이라는 말로도 커뮤니케이션합니다. 디폴트 값, 고정값은 예를 들어, 카카오톡을 최초 가입 후 처음 나타나는 프로필 사진 이미지가 있죠? 사진 없이 사람 아이콘만 제공하고 있습니다. 이렇듯 사용자가 수정 또는 입력 없이 초기 설정된 상태, 기본 상태를 Default(고정)으로 보시면 됩니다. 

그리고 Default view가 있습니다. Scroll, 또는 Flick 같은 사용자의 추가 제스처 없이 보여지는 초기 화면을 말합니다. 보통 가장 중요한 컨텐츠가 이 초기화면 뷰에 보여지도록 설계를 하죠? 

하드키 & 소프트키

#앱에 H/W 연동 #H/W 연동 없는 일반 앱

하드 버튼 또는 키는 문서에서 약자 형태로 H/W 또는 Hw key로 명시되고 있습니다. 하드키는 물리적으로 만져지는 리모컨, 또는 버튼을 의미합니다. 소프트키는 하드키를 설명하는 연장선에서 사용되지만, 소프트 키라는 표현보다 인터페이스에서 보이는 버튼을 의미합니다. 주로 하드키는 하드웨어 컨트롤러가 있는 경우에 인터렉션 상세 시나리오가 필요하다고 이해하시면 되겠습니다

글로벌키

#사용 빈도수 가장 높은 키(버튼),

어느 디스플레이의 UX UI기획을 하시던, 글로벌 영역, 글로벌 키라는 개념이 등장하는데요, 사용 빈도수가 높거나 메뉴 이동을 높이기 위한 1 Depth메뉴 버튼을 의미합니다. 보편적으로 메뉴를 호출하는 버튼, Home 버튼 등 주요 기능 버튼을 말합니다.

아코디언 UI

#확장 #공지사항, 뉴스, 게시판 UI에 활용

아코디언 UI는, 보통 고정 초기 영역에 많은 정보를 보여주고 사용자가 페이지 전환 없이 상세정보를 확인하도록 돕는 UI입니다. 디폴트로 보여질 때, 접혀있는지 열려있는지도 상세히 기획하실 필요가 있는데요, (준법 심의) 해당 내용이 반드시 열린 채로 제공해야 하는 경우도 있습니다.  UI 표현 형식은 “+” “-“ 형식으로 또는 접힘/펼침 형식이 있습니다. 추가로! 아코디언으로 스크롤이 길어질 경우, 모바일 화면에서 자동으로 최상단에 “픽스” 기능 추가는 개발자와 상의 후! 사용성을 위해 추가 기획해주세요! 

시뮬레이션 UI
#UI타입

사용자가 직접 UI를 조정하여 가상의 상태를 만들어보는 케이스를 말합니다. 멤버십 화면에서 등급이나 혜택을 예상해볼 때 가상으로 시뮬레이션하여, 자신의 예상 등급이나 받을 혜택을 가늠해보는 경우에 적용하거나 만기 적금 금액을 시뮬레이션할 때도 사용됩니다. 보통 개발자 공수가 드는 영역이며 모바일 UI인 경우, Drag & Drop, Tap 등 비교적 다양한 인터렉션을 적용해볼 수 있습니다. 

Disabled & activated

#버튼 UI #가이드

UI 기획 및 설계를 하다 보면, 반드시 숙지하고 있어야 하는 개념 중에 하나입니다. UI가 활성화되어 있는지 아니면 비활성화되어 있는지 항상 유념하시고 기획을 해줍니다. 이를테면, 일반적으로 검색바는 보통 비활성 된 상태인데 선택을 할 경우 비활성화되어 있던 검색바가 활성화되며 검색바에 포커스가 되어있고 키패드가 호출됩니다. 또한 커서가 깜박거리며 검색이 가능함을 사용자에게 알려줍니다.

Read – only & Disabled

#버튼 UI #가이드 #UI Element

데이터가 출력되어 다른 기능 수행이 없는 경우를 일컫습니다. 데이터가 정상적으로 출력되는지 확인만 해주며 Disabled(비활성화된 UI)와 다르게 인풋 필드도 제공하지 않는 케이스입니다. 

Focus move

#버튼 UI #가이드 #H/W #S/W #인터렉션

보통 포커스라는 개념은 IPTV나 자동차 내비게이션 등 하드웨어 컨트롤러로 메뉴나 아이템을 이동시키는 과정. 즉, 리스트 항목을 탐색하는 과정에서 나타나는 UI 아웃라인을 의미합니다. 

그 밖에 PC나 모바일에서도 UI의 아웃라인이 노출되는 경우가 있습니다. PC 같은 경우 마우스가 아닌 키보드로 이동할 경우, 혹은 웹 접근성을 고려한 UI 제공 시, 포커스 무브가 노출됩니다. 마지막으로 모바일 화면 같은 경우, 입력 중 오류가 났을 경우나 정보 입력 중 입력이 필요한 특정 필드를 나타날 때 제공되고 있습니다. 

Indicator & Dot Indicator

#가이드 #UI Element 

시각적인 지침, 즉 사용자에게 안내하는 UI를 의미합니다. 형태는 다양할 수 있지만, 가장 일반적으로 Dot Indicator를 사용하는 빈도가 높습니다.  Dot Indicator란 흔히 다수의 광고 배너나 콘텐츠를 한 영역 안에 보여질 때 현재 몇 번째 콘텐츠인지 보여질 때 노출되는 UI입니다. 

이 UI는 기능성을 포함하고 있을 수도, 아닐 수도 있습니다. Dot Indicator영역을 선택하며 다음 콘텐츠로 회전할 수도 있고, 아님 몇 번째 콘텐츠인지만 나타내는 기능만 제공드릴 수도 있습니다. 

Sorting & Filter UI

#가이드 #UI Element 

소팅 또는 필터라고 부르는 이 UI, 많이 접해보셨을 거예요. 보통 아이콘 형태의 버튼을 선택 시, 아래 하단 영역에 옵션 조절하는 영역이 열리거나, 슬라이드(레이어)가 좌에서 혹은 우 방향으로 노출되거나 혹은 바텀 시트가 위로 호출되는 방식입니다. 원하시는 정렬에 맞춰서 맞춤형으로 상품을 정렬하여 결과를 확인하실 수 있습니다. 서비스가 고도화될수록 이 기능이 많고 복잡한 UI 구조임을 알 수 있습니다. 

디바이스 연결 – 윈도우? 로컬 기기?

#가이드 #UI Flow #UI Use case 

PC에 저장된 문서나 이미지를 업로드하실 때 윈도우에서 파일을 업로드하시거나 자동차 AVN에 아이폰의 블루투스를 연결해서 노래를 들으시죠? 그밖에도 사이니지 같은 큰 디스플레이에 제 모바일에 있는 그림을 보여주고 싶을 때도 있을 거에요. 

이렇게 특정 서비스 사용 중 다른 디바이스를 연결하는 경우, UI Flow를 꼭 설계해주세요!! "윈도우에서” 또는 “로컬에서”로 명시하시면 됩니다

디바이스 연결: 스피커, 자동차 AVN, IPTV, 사이니지, PC 

디바이스 연동 – E.G.LBS

#가이드 #UI Flow #UI Use case 

LBS 기능은 실제 많이 사용하는 대표적 기능입니다. 적용되는 케이스로는 현재 위치를 탐색하여 날씨를 알려주거나 가까운 매장을 안내하는 케이스가 있어요. 주로 위치 탐색을 허용해주시는 컨펌 창이 노출되고 확인 후 해당 서비스 안내로 이어지는 형식입니다. LBS, BT 기능을 사용하실 때 컨펌 또는 알럿 창 기획 잊지 마시고 기획해주세요!

기능: LBS, Pedometer.

History Back

#가이드 #H/W #S/W #개발자와 상의 필요

히스토리백이란, 서브 화면 위 상단 타이틀바에 “Back”버튼을 누르거나 OS에서 제공되는 “Back Key”를 호출하셨을 때 이전 화면을 기억하는 경우를 말합니다. 특히 검색 고도화 과정에서 검색 결과를 기억하는데 적용되며, 그 밖에 서비스 전체를 기획할 때 이전 화면 기억 유무를 꼭 지정해주시기 바랍니다. 참고로 유사 경쟁 서비스가 이전 화면을 몇 개정도 기억하는지 리서칭 후, 개발자에게 제안할 것을 추천드립니다.

아래와 같이 히스토리백은 이전 화면과 이전 검색 화면이 기억하는 것을 의미합니다. 아래 사례인 카카오 선물하기에서는, 검색 이력이 남은 것 외 시작점인 메인 화면까지 기억되었습니다!