웹 Web App UX UI 및 디자인 용어 정리

UX (User experience)

사용자가 과정에서 느끼는 감정, 태도, 인식. 모든 측면에서 사용자의 만족도와 편리성을 고려하는 UI의 상위 개념

 

UI (User interface)

사용자가 보고 사용하는 시각적인 구성 요소 GUI의 상위 개념

 

GUI (Graphical user interface)

사용자가 더 편리하게 사용할 수 있도록 그래픽으로 나타낸 것. 대표적으로 윈도우

 

 

 

CUI (Character user interface)   = CLI (Command line interface)

과거 컴퓨터에서 주로 사용된 글로만 이루어진 인터페이스. 대표적으로 도스, 명령 프롬프트

 

 

 

Header

 

메인 페이지

메인 비주얼

메인 콘텐츠

 

서브 페이지

상세 페이지

출처 : KRAFTON

 

 

GNB (Global Navigation Bar)

 

 

LNB (Local Navigation Bar)

 

 

SNB (Side Navigatiton Bar) = LNB (Left Navigation Bar)

출처 : tistory

 

 

FNB (Fotter Navigation Bar)

 

 

Pagination 페이지 네이션

 

햄버거 메뉴

 

 

Breadcrumbs 브레드크럼

 

 

 

Input Field 입력필드

Check Box 체크박스

Radio Button 라디오버튼

 

CTA (Call To Action)

사용자가 구매, 구독, 방문 등 원하는 행동을 하도록 유도하는 장치로 자극적인 문구와 눈에 띄는 시각적 요소로 구성한 버튼을 주로 활용.

 

 

 

Global Menu 글로벌 메뉴

 

Footer

 

Favicon 파비콘

웹창에 있는 작은 아이콘

 

 

 

 

Story board 스토리보드

디자이너와 개발자가 최종적으로 참고하는 설계 산출 문서

전체 콘텐츠 구성, UX UI, 와이어프레임, 프로세스, 정책, 데이터베이스 관련 정보 등 서비스를 구축하기 위한 대부분의 정보를 수록한 문서

 

요소 - 필수라고 하기에도 부가적이라고 하기에도 애매한 요소, 어쨌든 요소

1) 작업 이력

2) 목차

3) 개요

4) 화면 ID

5) IA 혹은 메뉴 구조도

6) 플로우 차트

7) 정책

 

Wire frame 와이어 프레임

레이아웃 및 전체 뼈대를 설계하는 작업

손그림으로 하는 경우도 있지만 대부분 pc 툴로 작업함

 

 

 

Proto type 프로토 타입

초기 원형 또는 스토리보드를 바탕으로 임시적으로 구현

 

Flow chart 플로우차트

화면, 기능 단위로 사용 동선 설계

 

 

IA (Information Architecture) 정보 구조

메뉴를 분류하여 트리 구조로 표현 .전체 구조를 파악 및 설명하기에 좋다. (사용하지 않는 경우가 많고 개인적으로도 사용할 일 없을 듯)

 

 

그리드

레이 아웃