[PM][서비스 기획] 서비스 기획을 위한 용어 정리

UIUX 래퍼런스 사이트

https://wwit.design/ 

https://mui.com/

https://mobbin.com/browse/ios/apps?sort=publishedAt 

https://yozm.wishket.com/magazine/detail/972/

---

1,2차로 구분하여 기획서 작성하기

1차 : 스켸치

- 화면에 정의하고자 하는 내용 큰 틀로 풀어쓰기 (그림도 이미지를 덧붙여 이해하기 쉽도록)

 

2차 : 상세화 (명세서 작성)

- 디스크립션에 구체적내용 및 피드백 받은 사항 기재

- 상세 가이드를 추가하기

---

화면설계서 = SB

- 화면정의서 + 서비스 기획서 + 스토리보드

---

공통 가이드 작성 순서

- 각 화면마다의 반복을 최소 설명으로 이해시키기 위함&메뉴별 상이함을 감소시킴 

 

1. UI레이아웃, 타입 작성

 

2. 팝업 상세 정의 

- 팝업 종류 + 팝업 발생 조건 + 팝업 액션 + 팝업 오류 케이스 원인과 현상 

• 팝업 대표 종류 : 문자 입력형, 선택형, 의사 결정형, 확인형, 편집형, 토스트 팝업

3. 알림 정책 서술

- 케이스별 문구 서술, (DB담당자와 함께 고려한) 알림 배치 유지 시간 

• 알림 종류 띠 배너, 푸시 알람

4. 메뉴 & 네비게이션 서술

- 동작 가이드, 기본 법칙 서술(DEPTH ~)

 

5. 용어 정리(라벨링)

- 반복 사용 용어 통일 목적 및 생소한 약어 정리

 

6. UI flow

- 장표 추가를 통한 화면 이동 흐름 및 진입 흐름 파악

---

상세 가이드 작성 요소

- 추가 설명이 필요한 경우 기본 가이드의 뒷장에 추가하여 보충 설명

1) 인터랙션 가이드 = 동작 가이드

- 규칙 제공을 통해 다음 행동에 대한 안내를 주어 개발자들이 쉬운 이해를 도움

출처 : 모그니의 꿈꾸는 웹기획 세상

2) 콘텐츠

- 화면 특정 영역에 어떤 아이템을 배치할 것인지, 그 아이템이 가진 요소는 무엇인지 서술

 

3) 서비스 정책

- 예상되는  유즈 케이스를 기반으로 유형화하여 서술

• 사용자별 상세 유형 따른 유저별 화면 제공
  • 로그인/비로그인, 개발자/비개발자, 통합관리자/부분관리자 등등
• 오류시 노출할 화면, 데이터를 불러오기 전 화면 구성 등 DB와 API연동 고려 
• 배너 종류에 따른 배너 랜딩 조건 및 액션, 의미 서술
  • 띠 배너, 풀 팝업 이벤트 배너, 프로모션 빅 배너 등 

---

튜토리얼 

- 앱 초기 실행시 인터렉션 가이드 류의 안내 화면 (어떤 형태든 범주 포함)

- 온보딩 :사용자에게 튜토리얼 슬라이드로 기능을 순차 공개하는 방식

 

 

하드키

- 어떤 디바이스이든간에 인터페이스에서 보이는 버튼

 

 

글로벌키

- 사용빈도수가 높거나 메뉴 이동을 높이는 1Depth차원의 키 (홈 버튼, 핵심 매뉴 버튼 등)

 

 

글로벌네비게이션바(GNB)

디폴트 네비게이션바 gui

PC와 노트북 같은 데스크톱 ( 1240px 이상 크기 - 1280, 1440, 1920)	바 형태로	화면의 상단에 위치 or Navigation drawer(Side bar) or  화면의 왼쪽 위치
태블릿 (600-1239px사이 화면)	iOS는 사이드 바로 AOS 머터리얼 3은 Navigation rail로	화면의 왼쪽 위치
모바일 (320-599px사이 화면)	iOS는 Tab bar로 AOS  머터리얼 3은 Navigation bar로	화면의 하단 위치

 

 

리본 메뉴

- 1차 홈 메뉴 아래에 depth2 까지 노출되는 형태

---

 

트리 테이블 메뉴

- Hierarchy 확인

 

 

Read 관련 기능

- only + disabled : 데이터 출력 이후, 또 다른 뒤에 기능이 없는 경우

- enabled : 데이터 출력 이후, 또 다른 기능이 있고 인풋 필드도 제공하는 경우

 

---

로컬키

- 디바이스 사용 중, 다른 디바이스를 연결하는 경우를 설명하는 use case UI

- 윈도우에서 / 로컬에서 구분 CASE 작성 필요

** 로컬 = 작업중인 컴퓨터의 환경
** 윈도우 = 실제 구현 환경이 아니라 네트워크, 외부 서버로 접속

---

도움말 = 툴팁UI

---

앱 푸시

- 이벤트 성 콘텐츠, 적립, 사용 등 앱이 유저를 인입하고 싶은 요소를 표현하려 할 때 노출 = 상세 기획 중요

---

서브화면

- 메인화면 외의 화면

- 보통 백버튼 제공

- 기존 정책에 의거하여 설계를 하는 것이 중요함 (닫기 & 뒤로가기 & 홈 중 무엇을 선택할 것인지)

---

레이어 팝업

* 팝업 = 브러우저 위에 새로운 브라우저 페이지를 생성

- 보통 닫기 버튼 제공

- 기존 정책에 의거하여 설계를 하는 것이 중요함 (닫기 & 뒤로가기 & 홈 중 무엇을 선택할 것인지)

---

푸터

- 모든 페이지 하단에 표시되는 콘텐츠 영역

- 다른 페이지로 이동을 유도하여, 서비스 이탈 방지

 

 

시스템 팝업

(형태 레이어 팝업과 동일, 사용 정책에 따른 분류)

- OS(안드, IOS)에서 제공하는 팝업 

- 보통 안내성 내용을 포함

• EX) 툴팁 버튼 선택 시 팝업, 서브화면 대체의 풀레이어 팝업 

---

디폴트 뷰

- 추가 체스쳐(스크롤, 탭=Flick)없이 보여지는 최초의 화면 = GUI 설계의 핵심

---

검색어 입력창 (텍스트 필드)

- 텍스트를 입력하는 창

---

소프트키

출처 : 뉴스토마토

- 물리적으로 존재하지 않는 UI 속 버튼

---

글로벌키

- 사용 빈도수가 압도적으로 높은 키 , 메뉴 이동성을 높이기 위해 만들어진 키

EX) 홈 버튼, 마이페이지 버튼, 검색 버튼, 정액권 확인 버튼 등 

---

아코디언 UI

출처 : dribbble.com

- 초기 고정영역에서 많은 정보를 보여주고 페이지 전환없이 상세 정보를 확인시킴

- 법에 따라 반드시 열린 상태로 고지해야할 경우가 있기 때문에 관련 법령 준수 기반 기획 필요

- 고정 초기영역에 정보를 다양하게 보여준 뒤, 콘텐츠 섹션 확장 및 축소를 통해 빠른 자료 탐색 실현

---

INDICATOR 

출처 : vectorstock.com

- 사용자 안내를 위한 UI

•  DOT INDICATOR : 다수 AD 모임 영역 중 기준한 콘텐츠의 순서에 다다르면 노출되는 UI로 가장 유명 종류

---

SORTING UI

출처 : dribble.com

- FILTER UI라고도 부름

- 아이콘 버튼 클릭시 하단 영역에 다른 영역(옵션, 슬라이드) 노출 및 호출되는 경우

---

타 디바이스 연결 UI FLOW

- 특정 버튼 선택 시 타 디바이스로 연결되는 경우 명시 필요

• 윈도우 혹은 로컬

---

LBS

출처 : dribble.com

- 탐색(위치 탐색, 날씨 랜딩, 매장 안내) 후 해당 서비스 안내로 이어지는 형식

- 짝꿍으로 컨펌 혹은 알럿창 필

 

 

HISTORY BACK

 

- BACK KEY 호출 시, 이전 화면을 기억하여 따로 UI를 구성하여 유저에게 보여줌 

 

 

INPUT CONTROLS

- 대화형 요소로 사용자가 시스템 인터페이스에 정보를 입력하게 함 (체크박스 , 필터버튼 등)

---

READ

- 데이터가 출력된 이후 다른 기능이 없는 상태 = 정상적으로 데이터 출력됐나 확인 목적

---

UI 타입

- 특정 기능을 선택할 경우 받을 수 있는 이득을 시물레이션으로 확인할 수 있는 기능 

---

GUI

- 디자인을 입힌 UI

---

알럿과 컨펌의 구분

알럿	확인 버튼만 제공
컨펌	확인 취소 버튼 제공

---

토스트 팝업

- 작은 팝업으로 간단한 피드백을 도출, 단순 정보성 팝업

- 시간에 따라 사라짐 

---

스낵바

 

- 하단 메세지로 간단 피드백 도출

- 시간에 따라 사라짐 

- 사용자와 상호작용하여 결정한 결과에 대해 간단한 메세지를 팝업

---

다이어로그

- 앞으로의 정보를 기반하여 추가 선택권, 결정권을 요구하는 창

- 즉각 응답 목적의 팝업

---

모달

* 브러우저 페이지에 레이어를 쌓음

- 화면 위 화면을 만들어 부가적인 행동 처리 팝업

= 다이어로그

 

 

* 모달과 팝업의 구분 (https://brunch.co.kr/@8eaf677337d14e8/14) 

모달 : 브라우저 위 "레이어" = 종속 관계

ㄴ 모달)  모달창을 종료하지 않는 이상 기존 화면 동작 불가

ㄴ 논모달 =  모달창을 종료하지 않아도 기존 화면 동작 가능 (EX_스낵바)

모달 종류

 

팝업 : 브라우저 위 "브라우저" = 독립 관계 

=> 이는 브라우저 자체 옵션을 통해 컨트롤이 가능해지기 때문에, 트래픽이 증가되는 단점 발생

 

 

---

TAB

- 한개 페이지에서 여러 주제 랜딩

 

 

TAB BAR (https://brunch.co.kr/@chulhochoiucj0/29) 

- A모바일 앱에 최적화된 글로벌 탐색 컨트롤로 화면 하단 레이아웃

- 버튼 Button과 같이 명칭이 통일되어 있지 않는 인터페이스 요소

• iOS : Tab bar
• AOS 머터리얼 2 : Bottom navigation bar
• AOS  머터리얼 3 : Navigation bar (Bottom navbar라고 부르기도 한다. )

 

- 기본 구성

1. Icon

2. Label text

3. Container

4. Badge area(optional)

5. Active indicator

---

슬라이딩 메뉴

- 숨겨있다가 특정 버튼 누를 시 메뉴가 나옴 

 

 

 

(+) 그 외 다양한 버튼 지식

 

https://chobotogosu.tistory.com/132 

[PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #1] 세그먼트 버튼 1

 

 

 

 

 

 

 

출처 : https://dipbluc.tistory.com/97 ,  https://yozm.wishket.com/magazine/detail/645/  , https://dipbluc.tistory.com/97, https://yozm.wishket.com/magazine/detail/623/ ,   https://yozm.wishket.com/magazine/detail/901/

https://www.ascentkorea.com/what-is-gnb/ ,

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mogni&logNo=220668686110 

https://velog.io/@whdudals1212/%EA%B8%B0%EC%97%85%EC%9D%B8%ED%84%B4%EC%89%BD-2%EC%A3%BC%EC%B0%A8-4