작성자가 모르는 용어 위주로 정리된 포스팅입니다. 추가용어들은 ref. 링크들을 참고해주세요!
🤔 시작하며
최근 프로젝트를 시작하며 기획 및 디자인컨셉 회의를 진행하게 되었는데 낯선 디자인 용어들 때문에 소통에 어려움을 겪었습니다. 웹 프론트엔드 개발자로서 웹 UI 컴포넌트 용어들을 알아두면 기획자, 디자이너와 더 원활한 소통을 할 수 있지 않을까 하는 생각에 생소한 용어들 위주로 정리해 보았습니다!
🔍 자세히
1. 와이어프레임
와이어 프레임은 웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합입니다.
2. UI / UX
UI UX는 단어는 익숙히 알고 있었는데 둘의 차이가 뭐야? 라고 묻는다면 명확하게 대답하기 어려웠습니다. 둘의 차이는 뭘까요?
- UI(USER INTERFACE)
UI는 사용자가 제품/서비스를 사용할 때, 마주하게 되는 면 입니다. 즉, UI 디자인은 폰트, 칼라, 레이아웃과 같이 사용자가 마주하게될 시각적인 디자인을 말합니다. - UX(USER EXPERIENCE)
UX는 사용자 경험의 약자로, 사용자가 어떠한 서비스/ 제품을 직간접적으로 이용하면서 느끼는 종합적인 만족을 의미합니다.
사용자의 경험, 사용성 등을 고려하여 좋은 UX디자인을 만들고 이를 바탕으로 UI 디자인이 이루어지는 것입니다.
3. GNB / LNB
GNB(Global Navigation Bar)
전체 사이트에서 사용되는 공통 메뉴 바 , 사이트 최상위 전체 공통네비게이션 입니다.
LNB(Local Navigation Bar)
GNB를 누를 경우 소제목 형식으로 나오는 메뉴 바, 현재 서비스 영역(Local)만 해당되는 네비게이션 입니다.
4. 브레드크럼(Breadcrumb)
브레드크럼이라고 불리는 UI 요소는 유저가 사이트 구조상 어디에 위치하고 있는지 알려줍니다. 헨젤과 그레텔에서 길을 잃지 않기 위해 빵 부스러기를 길에 흘려놓은 것에서 명칭이 유래된 것 같습니다.
5. 페이지네이션(Pagenation)
콘텐츠를 여러 페이지로 나누어 다음 또는 이전 페이지로 이동하거나 특정 페이지로 이동할 수 있는 요소입니다. 리스트가 많아 한 화면에 과도한 스크롤 발생이 예상되는 경우 적용합니다.
6. 플로팅
주로 모바일 앱에서 사용되며 최근 챗봇같은 서비스들이 플로팅버튼 형태로 웹 화면 우측하단에 자리하고 있습니다. 화면에 항상 떠있다(float)하여 플로팅 이라고 부릅니다.
7. 플랫디자인
입체감이 없는 2차원적인 디자인을 지칭하는 용어입니다.
8. 모달과 팝업의 차이
가장 혼용되기 쉬운 단어들입니다. 아래사진과 같은 형태의 UI를 누구는 모달, 누구는 팝업창, 누구는 알롯창이라고 표현합니다. 차이가 무엇일까요?
- 팝업(popup) : 특정 웹사이트 혹은 브라우저에서 또 다른(새로운) 브라우저 페이지를 띄우는 것. 현재 의도하는 목적과 상관없이 뜨는 창.
- 모달(modal) : 페이지 위에 하나의 layer을 쌓아서 보여주는 창. 다음 진행으로 넘어가기위한 필요에 의해 사용되는 창.
팝업은 사용자가 브라우저 설정으로 팝업차단을 할 수 있기때문에 반드시 노출해야하는 부분은 모달창을 사용하는 것이 좋습니다.
9. 토스트 팝업(Toast popup)
주로 모바일 앱에서 사용되며 갑자기 나타났다 정보를 보여주고 사라지는 팝업입니다. 나타나는 모양새가 토스터기에서 토스트가 나오는 모습과 비슷하여 토스트 팝업이라 합니다.
10. 툴팁(Tooltip)
툴팁은 유저가 해당 영역이나 아이콘을 호버했을때 인터페이스를 이해할 수 있게 도와주는 작은 힌트를 제공합니다.
11. 캐러셀(Carousel)
한 화면에서 두 개 이상의 여러 콘텐츠를 보여줄 때 사용합니다. 주로 슬라이드 형태로 이미지 혹은 영상 등을 순환하며 노출시키는 형태로 이커머스 메인 페이지에서 가장 흔히 볼 수 있습니다.
12. 스켈레톤(Skeleton)
스켈레톤은 실제 데이터가 렌더링 되기 전 화면에 보이게 될 윤곽을 그려주는 로딩 애니메이션입니다. 와이퍼 프레임과 같이 레이아웃을 먼저 보여주어 사용자에게 렌더링 과정을 더 부드럽게 보여주기 위함입니다.
마무리
사소해보이지만 말하고자하는 UI요소를 통일된 용어로 지칭하는것은 소통에 효율성을 높여줍니다. 가령 플로팅버튼을 만들고자 하거나 수정하고싶을때 '우측하단에 항상 고정으로 있는 버튼' 보다는 '플로팅버튼' 이라고 말하면 훨씬 직관적이고 오해될 가능성도 줄어듭니다!
ps.디자인 용어들을 알려주신 저희 프로젝트 디자이너님께 감사드립니다...😘
ref.
UI 기획 시 알아야하는 기초 용어
프론트엔드 개발자라면 반드시 알아두어야 할 32가지의 UI 요소 (번역)
(내가 보려고 만든) Web/App UI용어&Component 정리
