(내가 보려고 만든) Web/App UI 용어 & Component 정리

🥲 계기

 

프론트엔드 개발자로 일하다보면 디자이너&퍼블리셔 뿐 아니라 개발 용어에 무지한 팀원들과도 소통을 해야 할 때가 많았다. 예를 들어 이번에 배포하면서 수정되는 UI나 주요 Feature에 대해 정리하여 전달해야 하는데, Header, Footer, Radio 등등 퍼블리싱 경험을 통해 얻은 용어를 무의식적으로 사용하다보면, 의사소통이 원활하게 느껴지지 않는다고 느꼈다.

 

 

이번 프로젝트에서 실제 발생한 대화를 극단적인 케이스로 각색해 공유해보겠다.

 

🧑🏻‍💻 개발자 : 이번에 요청주신 기획안 바탕으로 Header 영역을 개편하는데, 링크 버튼을 몇개로 줄이고 대신 메인 영역에 Primary Button을 추가하기로 했습니다.

🧑🏻‍🎨 디자이너 : 상단 메뉴바의 GNB 개수 수정하고, CTA를 메인으로 옮긴다고 이해하면 되나요?

🥺 기획자 : ??? 그럼 그냥 결과 화면으로 보여주세요..

 

 

돌이켜보면 아주 불친절한 의사소통이었다. 그래도 퍼블리싱 용어에 대해 어느정도 이해가 가능한 디자이너님은 개발자가 한 말에 대해 어느정도 이해를 하셨지만, UI/UX 용어에 이해가 부족한 팀원의 경우 정확히 어떤 것을 말하는 지 이해하기 힘들었을 것이다. 심지어 개발자와 디자이너 간의 대화에서도 서로 이해한 용어가 다르면 의사소통에서 미스매치가 발생할 수 있다는 위험이 있다.

 

 

이런 경험을 통해 Web/App에서 사용하는 용어에 대해 정리하여 소통하는 것이 올바른 소통 방식일 것이라는 생각이 들었다. 사실 이런 내용들은 이미 정리된 바이블이 많다. 문제는 해석하기에 따라 같은 뜻이지만 다른 용어로 사용하는 경우가 많다는 것이다.

 

 

여러 팀원이 모여 의사소통을 하다 보면 이런 형태의 UI를 누구는 모달, 누구는 다이얼로그, 누구는 팝업창, 누구는 알롯창이라고 표현한다(실제로 있었던 경험이다).

대략적인 뜻은 통할 수 있겠지만, 보다 확실한 의사소통을 위해서는 통일하여 사용할 필요가 있는 것이다. 브랜딩의 핵심은 일관성이기 때문에, 용어를 정해놓고 자유자재로 소통이 가능해야 그 사이트만의 브랜딩이 원활하게 진행되기 때문이다.

 

 

가비아의 경우를 참조해 보면, 가비아는 Design/UI/UX 용어를 팀원끼리 정의하여 사용한다. 

design.gabia.com/wordpress/?p=32927

UI Pattern 용어 정리 #1

 

가비아 뿐 아니라, UI/UX Pattern을 팀마다 정의해놓고 사용하는 경우는 매우 많다. 이런 경험을 바탕으로 우리 팀원들도 용어를 통일하여 사용해보는 것도 좋은 챌린지가 될 것이라고 느꼈다.

 

 

 

---

서론에서도 남겼지만 결국 이런 용어들은 정답이 없다. 아주 대중적인 Material, Bootstrap 등의 대형 프레임워크에서도 몇몇 용어는 미세하게 다르게 사용하는 경우가 있기도 하기 때문이다. 따라서 나는 다음의 가이드라인을 따라 용어집을 작성하였으며, 해석하는 것에 따라 다른 용어로 사용될 수 있다는 점을 남기고 싶다.

 

Web UI/UX 용어

- 클래스101에서 강의중이신 리베하얀님의 레퍼런스를 참조하였다

www.youtube.com/watch?v=Eiv7SbKHUDw&t=557s

 

Web UI/UX 컴포넌트

- 모바일/데스크탑에서 모두 반응형으로 대응하는 일관된 가이드라인인 구글의 Material Design을 참조하였다. 

material.io/

Material Design

 

---

UI/UX 용어

- 예시를 위해 Kakao, Sendy 등의 사이트를 참조하였다.

 

Header

로고, GNB 등의 사이트 내 주요 기능과 아이덴티티가 나타나는 영역

상단에 고정되어 있어 Head를 따 Header라고 부른다.

 

Footer

약관, Copyright, 마크, 회사소개 등 사업정보에 대한 내용이 나와있다.

하단에 고정되어 있어 Foot을 따서 Footer라고 부른다.

 

Content

Header, Footer를 제외한 페이지의 주요 정보가 담기는 영역으로 컨텐츠 영역이라고 부름

 

Main(=Index) 페이지

사이트에 방문하면 최초로 도달하는 첫 페이지

웹사이트의 첫 페이지, 메인 페이지, 인덱스 페이지라고 한다.

 

GNB, LNB

Navigation: 사이트 내 특정 영역으로 도달할 수 있도록 유도하고, 다양한 컨텐츠를 탐색하고 들어갔다 나올 수 있도록 돕는 역할

GNB: Global Navigation Bar

LNB: Local Navigation Bar⇒ GNB를 누르면 소제목 형태로 나타나는 메뉴

 

Sub menu

SNB(Side Navigation Bar)

 

Tab menu

선택하는 탭에 따라 다른 컨텐츠가 나타난다

 

Location

상위/서브 페이지 구조가 복잡한 환경에서 주로 사용하며, 현재 서브 페이지가 어떤 위치에 있는 지 나타낸다.

 

Visual

첫 페이지에 있는 배너, 슬라이드, 광고, 영상 등의 역동적인 부분

사이트의 아이덴티티를 나타내는 부분이며, 보통 메인 페이지 혹은 정적인 랜딩페이지에 존재한다.

 

 

---

 

UI/UX Component

 

Button

• 형식이 자유로운(버튼 모양, 이미지, 배너 등) 동작 버튼
• 특정 링크로 이동하거나, 특정 동작을 처리한다.

 

Floating Button

• FAB(Floating Action Button) 이라고 부른다.
• 앱 UI에서 자주 사용되며, 버튼처럼 동작 처리를 진행하는 원형 버튼이다.

 

Input

• 유저로 하여금 텍스트 입력을 하도록 하는 컴포넌트.
• 텍스트를 입력받는 Text Field와 Label로 구분되어 있는 경우가 많다.
• placeholder: 텍스트 입력에 대한 힌트를 제공한다

 

Checkbox

• 유저로 하여금 하나 혹은 여러개의 아이템을 단수 선택 / 복수 선택이 가능하도록 제공하는 컴포넌트.

 

Radio Button

• 유저로 하여금 여러 Set 중 하나를 단수 선택할 수 있도록 제공하는 컴포넌트.

 

Switches

• On/Off(True/False)를 토글할 수 있는 컴포넌트

 

Slider

• 범위를 지정하여 범위에 따른 값을 선택할 수 있는 컴포넌트

 

DatePicker

• 캘린더 형태의 뷰로 날짜를 선택할 수 있는 컴포넌트

 

TimePicker

• 시간을 선택할 수 있는 컴포넌트

 

Card

• 카드 모양의 박스로, 컨텐츠나 액션을 개별적인 박스 안에 담는 형태의 컴포넌트.

Material Card 형태를 잘 활용한 blank의 언론보도 사이트(http://www.blankcorp.kr/bbs/board.php?bo_table=41)

 

Tooltip

• 마우스를 올리거나, focus 되거나, 클릭했을 경우 나타나는 말풍선 형태의 툴팁

 

Dialog

• 유저로 하여금 중요한 정보나 의사 결정이 필요한 작업에 대해 묻는다.
• 단순히 선택지에 대한 경고/확인에 대해 제공할 수도 있고, Button, Checkbox 등이 포함될 수 있다.

 

 

 📚 레퍼런스

- 리베하얀님의 실무용어 모음집

www.youtube.com/watch?v=Eiv7SbKHUDw&t=557s

- 구글 매터리얼 디자인

material.io/