[ 서비스 기획 / PM ] 서비스 기획 용어 정리.
∇ 기본 용어
√ UI ( User Interface )
- 사용자가 프로덕트/서비스를 사용할 때 마주하는 시가적인 디자인 요소들 및 화면
√ UX ( User Experience )
- 사용자가 프로덕트를 사용하는 동안 편리한 사용감을 느끼도록 사용자 중심적으로 설계된 디자인 및 기획.
-> 쉽게 비유하면, UI는 포장, UX는 내용물 및 배달과정 등의 전체 과정.
√ 인터페이스 ( Interface )
- 사용자가 프로덕트를 사용하는 동안 일어나는 상호작용을 매개하는 다양한 기기 및 장치.
√ 인터렉션 ( Interaction )
- 사용자와 프로덕트/서비스의 상호작용 과정.
- 더 나아가, 인터렉션 디자인은 사용자와 프로덕트의 상호작용 과정을 디자인하는 것 입니다.
√ 애니메이션( Animation )
- 다양한 모션을 이용한 동적 인터페이스 구현 ( 프로덕트 내에 움직이는 효과 구현 )
∇ 기획 단계 용어.
√ 벤치마킹 ( Benchmarking )
- 경쟁사나 특정 도메인에서 우수한 상대를 표적으로 삼아 성과 차이를 비교하며 분석.
√ 와이어프레임( WireFrame )
- 스토리보드 제작의 전 단계로,
서비스 레이아웃을 구상하는 단계에서 손으로 그리거나 다양한 툴로 간단하게 그림 그림.
-> 대략적인 흐름과, 배치도를 보고자 그리는 과정.
√ 스토리보드( = 화면 설계서 = SB(Story Board) )
- 디자이너/개발자가 각자의 업무를 수행하기 전 이해하고 숙지해야 할 작업 지시서로,
페이지별 구성요와 상세 기능들을 화면의 흐름에 따라 표현한 최정적인 산출 문서.
√ 프로토타입( ProtoType )
- 사전 설계 작업이 끝난 화면을 가지고, 사용자가 프로덕트를 사용할 때 대략적으로 어떻게 구동되는지
직접 실행해 볼 수 있는 데모.
√ 플로우 차트 ( Flow Chart ) = 화면 흐름도
- 화면을 사용한 사용자의 활동 흐름을 특정한 순서도 기호를 사용해서 도식적으로 표현한 다이어그램.
√ IA ( Information Architecture ) = 정보구조
- 메뉴를 분류/그룹화하여 Depth 구조로 분류하여, UX를 높일 방법을 고민하는 것.
- 제품의 뼈대.
∬ 화면 흐름도와 IA의 차이.
: IA는 메뉴를 분류/그룹화하여 Depth 구조로 설계.
화면흐름도는 화면, 기능 단위로 사용 동선 설계.
√ 페르소나
- 어떤 제품이나 서비스를 사용할 만한 목표 연구 집단 안에 있는 다양한 사용자 유형을 대표하는 가상 인물.
√ 백오피스(=BackOffice, 어드민페이지(Admin) )
- 프로덕트 서비스 운영을 위한 관리자 페이지로, 서비스 운영과 사용 통계 등과 관련된
모든 작업을 수행할 수 있는 페이지.
∇ UI 요소 관련 용어.
√ 팝업 / 모달/ 얼럿
- 팝업 : 새 브라우저 창이 띄워지는 일반 팝업. - 주로 광고, 알림, 다른 페이지로의 이동
- 모달 : 현재 머무는 브라우저 창 위에 띄워지는 레이어 팝업.
- 주요 작업용으로 쓰이며, 중요한 정보를 저장,제공하거나, 추가 작업을 수행하기 위해
- 페이지 작업 완료전까지는, 다른 페이지 상호작용 불가.
- 얼럿 : 알림/ 경고창 등을 뜻하는 시스템 팝업.
- 사용자에게 주의 사항이나, 확인 사항을 안내하는 용도로 사용.
- 짧고 중요한 메시지를 전달하며, 사용자로 하여금 즉각적인 반응을 유도.
√ 라이트박스(=Dimed)
- 모달창이나 얼럿 창이 뜨는 동시에 백그라운드 화면이 어두워지거나 밝아지는 효과.
√ 토스트 팝업
- 주로 모니터 우측 하단에서 몇 고간 나타났다가 사라지는 팝업 메세지.
√ 드롭다운 메뉴.
- 메뉴 제목이 표시된 곳을 선택하거나, 호버하면 메뉴가 아래로 펼쳐지는 스타일.
√ 드롭다운 리스트.
- 메뉴만 펼치는 드롭다운 메뉴와 달리, 값을 선택해야 하는 목적으로 많이 사용됩니다.
√ 토글 ( = 토글 버튼 = 토글스위치 )
- on/off를 설정할 때 컨트롤.
√ 라디오 버튼
- 중복 선택 불가능한 동그랗게 생긴 버튼형 선택 수단.
√ 체크 박스
- 중복 선택이 가능한 선택 수단.
[ 복수 선택뿐만 아니라, on/off 개념으로 사용하기도 합니다. ]
√ 콤보 박스
- 드롭 다운 리스트와 입력 필드 기능을 결합한 형태.
[ 드롭 다운 박스 내에서 검색이 가능. ]
√ 입력 필드
- 사용자가 키보드로 직접 텍스트를 입력하는 곳(개발자와 관점이 다르니, 주의 요망)
√ 레이블
- 입력 필드 상단 혹은 좌측에 입력할 정보가 무엇인지 설명해주는 문구창.
√ 플레이스 홀더 ( =Input Prompt )
- 입력 필드 안에 짧은 구문 형식으로, 입력창에 대한 정보를 제공.
- 문자 입력시 사라지는 형식,
√ 파비콘 ( =Input Prompt )
- 주소창 옆의 작은 아이콘.
√ 툴팁
- 마우스를 호버할 경우 1~2초 뒤에 메뉴에 대해 말풍선으로 나오는 설명창.
√ 탭 메뉴.
- 탭 (클릭)을 했을 때 화면이 전환하는 인터페이스.
(제한된 공간에 콘텐츠를 구분하여 숨길 수 있습니다. )
√ 페이지네이션.
- 페이지의 일련번호를 정하는 것.
√ 프로그래스 바.
- 현재까지 진행되는 정도와 퍼센트를 모두 확인하기 위해 제공되는 지표창.
√ 플로팅 버튼.
- 주로 앱개발에서 사용되며, 우측 최하단에 떠있는 버튼
√ 캐서렐 효과.
- 주로 메인페이지에서 마케팅 정보를 보여주는 방법 중 하나, 자동으로 컨텐츠가 좌우로 슬라이드.
'UX Director.' 카테고리의 다른 글
| [ 서비스기획 & UX ] UIUX원칙 #2 : 회원 가입을 유도하는 10가지 UX 원칙 가이드라인들. (7) | 2024.10.09 |
|---|---|
| [ 서비스기획 & UX ] UX 설계자가 알아야 할 심리학 원칙. (3) | 2024.10.08 |
| [ 서비스기획 & UX ] UIUX원칙 #1 : 모바일 사이트 디자인의 12가지 UX 원칙 가이드라인. (9) | 2024.10.07 |
| [ 서비스기획 & UX ] HCI 개론 1장 : HCI & UX의 개념정리. (6) | 2024.10.06 |
| [ 서비스기획&UX ] UI&UX 기초 용어 모음집. (6) | 2024.08.14 |