by
Dec 10. 2023
UIUX 용어 정리집
[Zerobase] 얼리버드 챌린지 5
Intro
UIUX는 처음 배우다 보니 사실 모르는 단어들이 굉장히 많다. 그렇기 때문에 모르는 단어를 알기 위해, 그리고 틈틈이 모르는 단어가 나오면 스스로 찾아보는, 사전적인 용도로 UIUX 단어를 정리해두려고 한다.
아래의 사이트에서 많이 참고하여 적었다:)
[참고글]
1.
https://brunch.co.kr/@bundi/41
2.
https://brunch.co.kr/@heaven/1115
단어 정리
기본적인 단어정리
UX란? 사용자 경험
User experience의 약자
사용자가 어떤 시스템, 제품을 사용하면서 느낀 총체적 경험 / 기능과 절차상의 만족뿐 아닌 참여, 사용, 관찰, 상호교감 속 가치 있는 경험
[참조: 정자정부 웹사이트 UIUX가이드라인]
내 생각> 사용자가 제품을 사용하는 과정에서 느낄 수 있는... user centered mind
사용자 중심적 가능한 한 만족 느끼며 새롭게
ex) 과거 복잡한 연말정산이 ui였다면
어떻게 하면 좀 더 사용자가 편하게 연말정산을 할 수 있을까?> 하고 생각하는 생각은 UX적 마인드
UI란? 사용자 인터페이스
User interface의 약자로 사용자와 서비스의 웹과 모바일 사이에서 의사소통을 할 수 있도록 만들어진 물리적 가상적 매개체
[참조: 정자정부 웹사이트 UIUX가이드라인]
내 생각 및 강의 > ui는 하나의 서비스를 사용자에게 보여주기 위해서 만들어진 것 제일처음 만들어진 게 ui 라면 그게 점점 사용자 친화적으로 가게 된 게 ux 즉, 좀 더 기본적 원형의 프로그래밍에 가까움 = 기능
Interface 인터페이스
사물 간 또는 사물과 인간 간의 의사소통이 가능하도록 일시적 혹은 영속적인 접근을 목적으로 만들어진 물리적* 가상적 매개체
[참조: 정자정부 웹사이트 UIUX가이드라인]
내 생각> 상호작용을 도와주는 도구 or 방법
상호대화방법 inter(상호) + face(창구)
핸드폰에서 인터페이스= 버튼
Ex) 사람이 핸드폰의 기능을 사용하기 위해서는 버튼을 눌러야 한다. 기기와 사람 간의 상호작용을 할 수 있게 이어주는 창구
GUI 그래픽 사용자 인터페이스
Graphic User Interface ) 버튼이나 메뉴, 창 등의 그래픽요소를 사용해서 사용자가 소프트웨어와 상호작용하는 방식
> 간단한 동작으로 소프트웨어를 조작할 수 있도록 설계/ 위의 예시에서 말한 핸드폰에서의 버튼은 인터페이스 중에서도 GUI에 속한다고 이야기할 수 있다. 이러한 인터페이스에는 조건이 있다고 할 수 있는데 바로 직관적이어야 한다는 점이다. 굳이 글이 아니라 그래픽으로 표현하는 데에는 사용자를 위함이 포함돼 있다고 생각이 든다. 하지만 사용자를 위해서 그래픽으로 표현했지만 그게 사용자를 더욱 헷갈리게 만든다면 GUI존재의 이유에 대해서 고민하게 만들지 않을까?
Usability 사용성
쌍방향 제품인 interactive product의 이용과정에서 사용자가 원하는 목적을 제대로 달성하였는지, 목적을 가능한 편리하게 수행하였는지, 전반적인 사용만족도는 어떠한지와 같은 요소들로 측정될 수 있는 복합적인 이용편의성을 의미한다.
[참조: 정자정부 웹사이트 UIUX가이드라인]
> 제일 이해하기 어려워서 일단은 정의를 그대로 적어본 usability 적으면서 세 번 정도 읽어보았다.
'목적의 방향성' '만족도' '이용 편의성'
이와 관련된 사용자 조사방법을 얻을 때
어떻게 하면 편할까요? > 이건 순수한 답변을 얻기 어려움
불편하죠? > 편향된 답을 얻을 수 있음
최대한 공정한 질문을 통해 사용자 조사 설계를 통해 사용성에 대한 자료를 얻을 수 있다고 생각한다.
User journey map 사용자 여정 지도
사용자의 서비스 또는 제품 사용과정을 지도화하여, 사용자의 행동*감정 등을 시간 흐름에 따라 가시화한 지도 또는 그래프를 말한다.
[참조: 정자정부 웹사이트 UIUX가이드라인]
https://www.questionpro.com/blog/how-to-create-a-customer-journey-map/내가 생각했을 때 깔끔하게 표현돼서 한눈에 알아볼 수 있도록 표현된 유저저니맵
그리고 이러한 유저저니맵을 이용하여 실제로 카톡 선물하기 과정을 표현을 깔끔하게 올려준 어느 블로거분
https://m.blog.naver.com/tabpink123/223095829621사용자가 하나의 서비스를 사용하게 되는 과정부터 서비스를 사용한 결과 도출까지 보여주는 과정이 깔끔하게 정리돼있다.
> 태스크 플로우랑 좀 헷갈림
시간순서인 점에서 비슷하지만 저니맵이 더 큰 개념
에스노라피
집단 구성원의 삶의 방식, 행동 등을 그들의 관점에서 이해하고 기술하는 연구 방법이다. 문화의 고유성을 인정하고, 사람들이 어떻게 지각하고 행동하는가를 그들이 속한 일상적 · 문화적 맥락 속에서 파악한다.
[참조 : 에스노그라피 (광고 연구의 질적 방법론, 2015. 5. 20., 정승혜)]
> 목표시장에 대한 지식이 없거나 특정 시장이나 소비자 행위에 대한 새로운 통찰을 얻고자 할 때 주로 사용
[Mariampolski, H.(2006.). Ethnography for marketers: A guide to consumer immersion. Sage Publications.]
> 내 생각에 에스노그라피를 이용한 직접적인 현장조사는 사용자 조사에 있어서 효과적이다. 하지만 집단을 설정할 때 집단의 범위를 공정하게 설정해야 편향되거나 전혀 다른 방향의 조사결과가 나오지 않을 것 같다. 그래서 파일럿 조사가 필요하지 않을까?
Navigation 내비게이션
하이퍼링크를 따라 웹 공간의 정보를 요청하고 받아오는 웹 브라우징 행위를 의미,
[참조: 정자정부 웹사이트 UIUX가이드라인]
웹사이트를 탐색하기 위한 도구
참고글에서 알려준 잘 정리된 내비게이션 바 용어
https://hanyonghee9264.github.io/front&design/2019/12/28/Front&Design-Web-Design(GNB-LNB-SNB-FNB)/
> GNB LNB SNB FNB는 하단에 구체적인 용어 설명에 설명할 예정이다.
우리가 일상적으로 이야기하는 자동차 내비게이션처럼 내비게이션은 우리가 찾고 싶은 정보를 알려주는 이정표 역할을 한다고 생각하면 된다고 느꼈다.
Utility nevigation 유틸리티 메뉴
연락처, 도구, 저장, 로그인, 공유, 보기변경, 인쇄와 같은 보조 작업 및 도구로 구성된 메뉴
[참조: 정자정부 웹사이트 UIUX가이드라인]
> 말 그대로 utility (편리한, 유용한 시스템)과 navigation(길잡이)가 합쳐진 말 사람들이 자주 사용하는 메뉴바이기 때문에 여정이 복잡하지 않게 첫 화면에서 한 번에 이동할 수 있는 편리한 메뉴바라고 생각이 된다.
Accordion 아코디언
제한된 공간에 정보를 표현하고, 사용자가 원하는 정보만 선택적으로 볼 수 있게 접을 수 있는 내용 패널
[참조: 정자정부 웹사이트 UIUX가이드라인]
다른 용어들은 일상적인 용어에서 연상이 되었다면 아코디언은 악기로만 생각했던 단어라 연상은 되지 않았다. 하지만 아코디언 악기의 모습을 생각해서 생각해 보니 쉽게 어떤 것인지 이해할 수 있었던 용어.
https://www.nngroup.com/articles/accordion-icons/> 숨겨져 있다가 아래로 펼쳐지는 메뉴라고 생각하면 되는 아코디언
Label 레이블
입력폼을 구성하는 다양한 입력필드를 식별하기 위해 사용하는 명칭
> 텍스트 필드 좌측에 단어로 제공 / 사용자가 변경불가한 영역
쉽게 이야기하면 우리가 알고 있는 라벨지라고 생각하면 된다. 물건을 살 때 이것의 이름과 가격이 적혀있는 라벨지는 이 상품이 무엇인지 설명을 해준다. 서비스에서도 같은 의미를 가진다. 이 버튼이 무슨 버튼인지 이 컨테이너가 무엇을 입력해야 하는 박스인지 알려주는 것이다.
https://brunch.co.kr/@august9/283
UIUX 구체적인 용어 정리
[출처: https://brunch.co.kr/@bundi/41]
Selection
:옵션을 선택하는데 주로 쓰이는 요소
Drop-down List : 밑으로 쏟아지는 옵션
Combo Box : 검색가능한 드롭다운리스트
Radio Button : 한 가지 옵션 선택할 때
Check Box : 다수의 옵션 선택할 때
Toggle box/ switch : 상태 on/off 전환
Tools
:입력, 선택, 조정 등 상호작용이 만드는 요소
Butcon : 아이콘 형태의 버튼 (toolbar)
Tooltip : 버튼에 올려놨을 때 안내메시지
Spinner : 숫자 입력 컨트롤
Dial : 스피어모피즘> 현실의 라디오 다이얼 조작방식 그대로 가져옴
Slider : 직관적인 바 컨트롤 유튜브 재생바 생각하면 됨
Text lnput Field : 텍스트를 입력할 수 있는 영역 (= 편집필드, 텍스트상자)
Menus
: 메뉴 구조와 관련된 요소
Drop-down Menu : 아래로 쏟아지는 메뉴
Ribbon Menu : 툴바에 탭을 접목 아이콘+라벨
Tree Menu : 구조를 파악하기 쉬운 메뉴 탐색기
Navigations
: 메뉴를 담고 있는 내비게이션과 관련된 요소
GNB (Global Navigation Bar) : 사이트 공통메뉴바
LNB (Local Navigation Bar) : GNB를 눌렀을 때 나오는 소제목 내비게이션바
SNB(Side Navigation Bar) : 사이드 메뉴 소제목 안으로 들어갔을 때 옆쪽에 나와있는 메뉴바
FNB (Foot Navigation Bar) : 이름 그대로 직관적으로 하단메뉴, 하단로고, 주소, 카피라이팅 영역
Communication
: 시스템적 소통, 결정에 관련된 요소
Dialog box : 팝업이라고도 불림
기타
WSG (web style guide): 한 웹페이지의 일관성 부여를 위한 스타일가이드
Toast pop-up : 알림을 위해 만들어진 팝업의 일종
Light box : 팝업이 뜰 때 팝업 배경이 어두워져서 팝업이 잘 보이는 기능
단어 정리를 하면서 느낀 결론
UIUX가 사용자에게 직관적인 이해를 돕는 서비스여서인지 실무 단어 역시 직관적으로 구성되있다는 생각이 들었다
