![[PM][서비스 기획] 서비스 기획을 위한 용어 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FTiswN%2FbtsnocccPFD%2FAAAAAAAAAAAAAAAAAAAAAABVhmZxOP1QC7LHVDZRPns-FW6O4nTYWNWJ0tYUe70r%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DYukILrd3uv5HMATLY4KtgzCGyM8%253D)
UIUX 래퍼런스 사이트
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)
| 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
- 초기 고정영역에서 많은 정보를 보여주고 페이지 전환없이 상세 정보를 확인시킴
- 법에 따라 반드시 열린 상태로 고지해야할 경우가 있기 때문에 관련 법령 준수 기반 기획 필요
- 고정 초기영역에 정보를 다양하게 보여준 뒤, 콘텐츠 섹션 확장 및 축소를 통해 빠른 자료 탐색 실현
INDICATOR
- 사용자 안내를 위한 UI
- DOT INDICATOR : 다수 AD 모임 영역 중 기준한 콘텐츠의 순서에 다다르면 노출되는 UI로 가장 유명 종류
SORTING UI
- FILTER UI라고도 부름
- 아이콘 버튼 클릭시 하단 영역에 다른 영역(옵션, 슬라이드) 노출 및 호출되는 경우
타 디바이스 연결 UI FLOW
- 특정 버튼 선택 시 타 디바이스로 연결되는 경우 명시 필요
- 윈도우 혹은 로컬
LBS
- 탐색(위치 탐색, 날씨 랜딩, 매장 안내) 후 해당 서비스 안내로 이어지는 형식
- 짝꿍으로 컨펌 혹은 알럿창 필
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)
- 주요 카테고리 네비케이트 목적
- 모바일 앱에 최적화된 글로벌 탐색 컨트롤로 화면 하단 레이아웃
- 버튼 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
TOOL BAR
- 특정 화면에서 가능한 행동을 제시하는 것이 목적
> 왼쪽은 Tab Bar이므로 각 카테고리에 대한 네비게이트 역할을 수행
> 오른쪽은 Tool Bar와 혼합형으로 이미지 터치 후 액션에 대한 행동 지원을 수행
Content Views
- 특정앱에 특화된 콘텐츠를 보여주는 화면
- 사용자가 스크롤 하거나, 재배치하거나 추가 행동 등을 하는 공간
슬라이딩 메뉴
- 숨겨있다가 특정 버튼 누를 시 메뉴가 나옴
(+) 그 외 다양한 버튼 지식
https://chobotogosu.tistory.com/132
[PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #1] 세그먼트 버튼 1
헷갈리는 화면 구성 종류 - 카테고리 : 상호배타적이고 메뉴 기능 (메뉴 : 선택할 때 전체 레이아웃 변경 될 때) - 탭 : 유사성 존재 - 드롭다운 : 상호배타적이고 단위 선택 가능 - 세그먼트 : 상호
chobotogosu.tistory.com
출처 : 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
'관련 도서 및 지식 > 강의 및 인사이트' 카테고리의 다른 글
| [PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #2] 라디오 버튼 2 (0) | 2023.11.24 |
|---|---|
| [PM][서비스기획] 그럼에도 PM을 하고 싶은 이유 (1) | 2023.10.14 |
| [PM][프로젝트매니징] 근본 원인 분석 : RCA (0) | 2023.07.09 |
| [PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #1] 세그먼트 버튼 1 + 버튼 (0) | 2023.07.07 |
| [PM][서비스기획] 01_[UI 컴포넌트별 > UX 원칙 #1] 디자인 가이드 원칙 > 세부 원칙 알아보기 : 게시판 검색/ 기간 검색/ 탭 (0) | 2023.07.03 |