📝 기획자들이 알아야 할 UI 기본 용어 🎈 한 줄 요약 - 전문직 대표님이 PM을 맡고 계신데, UI 용어를 1도 몰라 정리했습니다. ✔️ 우리 대표님은 변호사다. 지금 회사를 만든 지 1년 6개월 됐다. 그동안 변호사 업무만 해서 IT 업계에 대한 정보를 모른다. 헷갈려하는 것도 아니고 1도 모른다. 다양한 자료를 종합해서 보내드려도, 책을 추천해 드려도 읽지 않는다. 금세 또 물어본다. ✔️ 그렇다고 대표님이 나이가 많은 게 아니다. 이제 37살, 하지만 변호사로 커리어를 쌓고, 열심히 살아왔기 때문에 모르는 거 인정한다. 업계에 있어도 용어는 모르는 사람들 많으니까 그 정도는 그럴 수 있지 생각한다. 또한, 팀이나 부서마다 지칭 용어가 가끔 다르기 때문에 이해한다. ✔️ 하지만!! 적어도 정리했거나, 만들었거나, 전달한 자료는 읽어야 하지 않을까? 마음속으로 생각도 해봤다. '내가 정리를 제대로 못 했나? 혹시 이거 때문에 안 읽으시나?' 이런 마음을 한편에 가지고 있다. 그래서 오늘도 이렇게 정리를 해본다. ✅ 자주 사용하는 UI 요소와 컴포넌트 정리 1. GNB (Global Navigation Bar) - 일반적으로 웹사이트 최상단에 있는 최상위 메뉴를 지칭해요. 웹사이트 전체에서 공통적으로 노출되는 메뉴이고, 주요 메뉴로 빠르게 이동할 수 있는 링크를 포함하죠. 아티클에서는 웹의 이탈률과 전환율에 큰 영향을 미치므로 배열 순서를 충분히 고려해야 한다고 합니다. 저는 보통 'Depth1'로 봐요. 2. LNB (Local Navigation Bar) - GNB 메뉴를 누르거나 마우스 오버 상태일 때 발생되는 메뉴예요. Sub Menu라고도 말하죠. 이 메뉴를 통해 최상위 카테고리 바로 아래 메뉴로 이동할 수 있어요. 저는 보통 'Depth2'로 봐요. 3. Main Banner (Hero Banner) - 통상적으로 웹사이트 메인 상단에 위치하는 배너예요. 보통 웹사이트에 접속했을 때, 등장하죠. 여기에는 영상도 넣고, 이미지도 넣고, 슬라이드 형태로 하기도 하고, 각 브랜드의 특성에 따라 효과를 주죠. 이 배너는 "헤더 영역에 눈에 띄게 배치되기 때문에 사용자의 주목을 끄는데 효과적"이에요. 또한, "가장 중요한 콘텐츠를 등록"하죠. 4. Drop Down List - 드롭 다운 리스트는 버튼을 클릭하거나 오버했을 때, 세부 항목들이 펼쳐지고 그중 하나를 선택하는 요소예요. 많은 값 중 하나를 택해야 할 때 사용되죠. 다른 말로는 Pulldown Menu라고도 해요. 여러 항목을 숨겨두고 나열된 상태가 아니기 때문에, '간결하게 표현'하기 좋아요. 5. Modal, Popup (모달, 팝업) - 모달은 기존에 열려있던 페이지 위에 새로운 레이어를 덮는 기능을 의미해요. 모달과 팝업의 큰 차이점은 다음과 같아요. · 모달: 기존에 열려있던 페이지 위에 새로운 레이어를 덮는 기능 · 팝업: 페이지 위에 또 하나의 브라우저 페이지를 띄움 아, 모달의 경우, 뒷 페이지가 비활성화되는 경우가 많아요. 모달로 띄운 페이지에 집중할 수 있도록 만들기 때문이죠. '두 창 모두 주의사항이나 공지 등 유저의 이목을 끌고 중요한 정보를 전달할 때 사용'해요. 6. 스낵바, 토글, 툴팁 · 스낵바: 유저가 수행한 작업에 대한 결과(피드백)를 간단한 텍스트 레이블 형태로 보여주며, 대략 4초 뒤 화면에서 자동으로 사라지며, 액션 버튼이 함께 표시된다는 점에서 흔히 말하는 토스트 팝업과 차이가 있습니다. · 토글: 스위치(Switch)와도 많이 통용되며, 설정 켜기/끄기와 같은 항목에 적용할 수 있습니다. · 툴팁: 특정 화면 요소에 마우스를 가져가면 나타나는 설명입니다. 마우스를 올려놓은 상태에서는 계속 유지되며, 부연 설명을 표시할 때 유용한 요소입니다. 7. Input Field와 유효성 검사 - 인풋 필드는 사용자가 텍스트를 입력하고 편집할 수 있는 입력란입니다. 텍스트 필드, 넘버 필드 등 다양한 것이 있어요. 만약 텍스트 필드에 유효한 내용을 입력하지 않거나, 생략 등을 하면 유효성 검사를 통해 오류 상태를 표시하여 양식에 맞는 데이터 입력을 유도해요. 8. Checkbox - 체크박스는 여러 개의 목록에서 값을 다중 선택해야 할 때 자주 사용해요. 체크박스와 다르게 여러 개의 선택지 중 하나만 선택해야 할 경우 '라디오 버튼'을 사용해요. 설문조사로 예를 들면, 다중 선택지를 제공하면 체크박스, 단일 선택지를 제공하면 라디오 버튼으로 제공하면 돼요. 9. Accordion - 내용을 펼쳤다가 접을 수 있는 컴포넌트예요. 리스트를 접기, 펼치기의 형태로 표현할 수 있는데, '>'를 많이 사용하기도 해요. CTA 버튼에도 '>'를 많이 사용하는데, 이는 행동 유도로 이어지지만, 메뉴에 있는 '>'는 리스트를 접고 펼치는 형태로 표현돼요. 10. Bread Crumb - 브레드 크럼은 빵 부스러기라는 이름처럼 사용자가 지나온 위치, 현재 위치를 시각적인 계층 구조로 나타내는 내비게이션이에요. 구분자, 아이콘 등을 통해 웹 사이트의 정보 구조를 보여주고, 상위 또는 하위 페이지로 손쉽게 이동할 수 있게 도와줘요. 보통 'PC 웹 환경에서 자주 활용되는 정보 구조 기법'이죠. ✔️ 이상 내용 정리를 끝낸다. 다시 한번 대표에게 전달할 예정인데, 이번에는 읽어보겠지? 더 읽어보지 않으면? 뭐 어쩌겠어, 또 다른 내용을 찾아서 정리해야지. 안 그렇습니까? 😂