디자이너가 알아야할 필수 UI 용어 1편

UI용어를 알아야 하는 이유가 있을까요?

1. 효율적인 의사소통을 할 수 있어요. 다른 부서 팀원들과 협업 시 특정 기능에 대한 이야기를 하며 명확하게
전달하여 오해의 빈도를 낮출 수 있습니다.

2. 화면 설계서 작성 시 어떤 부분의 기능이나 오류를 설명할 때 빠르고 명확하게 전달할 수 있습니다.

3. 사용자 인터페이스가 어떻게 이루어지고 있는지 알 수 있어 구조를 잘 이해할 수 있어요.

기획을 하면서 알게 된 용어들을 하나씩 공유해 보려고 합니다.

메뉴/컴포넌트

01. 헤더(Header): 웹 또는 앱 최상단에 노출되는 영역으로 로그인, 회원가입, 검색 등이 노출됩니다.

02. GNB(Global Navigation Bar): 대메뉴, 메인메뉴라고도 불리며 모든 페이지를 모아놓은 메뉴가 노출됩니다.
이용빈도가 높고 중요한 콘텐츠로 연결된 링크일수록 좌측에 배치합니다.

03. GNB를 헤더로 노출시키는 경우

04. LNB(Local Navigation Bar): 드롭 다운 리스트(Drop Down List)라고도 불리며 버튼을 클릭하거나 커서를
올렸을 때(Hover) 하위 카테고리 항목들이 펼쳐지는 것을 의미합니다.

05. FNB(Foot Navigation Bar): 푸터(Footer)라고도 불리며 헤더에 나와있는 정보 외 부가적인 정보(저작권, 이용약관, 관련 사이트 링크 등)들을 노출시킵니다.

01. 브래드크럼(Breadcrumb): 사이트 이동경로라고도 불리며 현재 사용자가 어떤 위치에 있는지 나타냅니다.
현재 페이지 경로를 구분하여 보여주는 것이 좋습니다.

02. 페이지네이션(Pagination): 콘텐츠를 여러 페이지로 나누어 이전 또는 다음 페이지로 이동할 수 있는 버튼

[화면설계 디스크립션 예시]

공통사항

✅ Head라인 우측 사용자 위치 네비게이션 노출. 현재위치 볼드처리

✅ 게시글 노출 영역

- 각 항목 클릭시 해당페이지(ACC-01-01)로 이동

- 15개 단위로 페이징 처리하여 노출

✅ 페이지네이션

- 총 5개 단위로 버튼 노출

- 클릭시 해당 페이지(Page Number)로 이동

버튼 종류

01. Elevated Button: 시각적으로 배경과 분리가 필요한 경우 사용하는 그림자가 적용된 버튼

02. Filled Button: FAB 다음으로 눈에 띄이는 버튼

03. Filled tonal Button: Filled Button보다 시각적으로 덜 돋보이는 버튼으로 주로 온보딩 플로우에서
'다음(Next)'와 같은 경우에 사용

04. Outlined Button: 주요 동작이 아닌 경우 사용

05. Text Button: 문자 형태의 버튼으로 '옵션'과 같은 낮은 강도의 동작에 사용

06. FAB(Floating Action Button)

버튼 상태(Button States)

01. Enabled: 디폴트(Default)라고도 부르며 기본상태, 버튼을 누를 수 있는 상태를 의미합니다.

02. Disabled: (어떤 이유로)동작할 수 없는 비활성 상태, 선택 불가능 상태를 의미합니다.

03. Hover: 마우스 또는 포인터가 올려진 상태

04. Focused: 키보드 또는 음성 등 입력 장치를 통해 선택 된 상태

05. Pressed: 마우스 또는 포인터로 클릭된 상태(버튼을 누른 상태)

06. Loading: 프로그래스(Progress)라고도 불리며 버튼을 누른 후 로딩이 진행중인 상태를 의미합니다.

대부분의 버튼은 사용자의 목표달성을 위한 버튼 CTA(Call To Action)으로 활용합니다. 어떤 버튼이 어느 위치에
있는지, 문구와 색상은 적절한지 등 브랜드 성격에 맞게 고려하여 매력적인 CTA 버튼을 만들어 보는 것도 좋을 것
같아요. 버튼 상태에 대한 내용을 끝으로 1편을 마무리하고 다음주에 2편으로 또 만나요.

<참고자료>

1. 구글 머티리얼 디자인

2. 전자정부 웹사이트_ UI/UX 가이드라인, 행정안전부(2019)