🚨 UI 용어를 반드시 정리해야 할까요?

🎈 한 줄 요약 - 팀 내, 타 부서와의 원활한 소통을 위해 UI 용어를 통일해야 한다. ✔️ UI 컴포넌트 용어, 상당히 다르게 불리는데요. 제가 다양한 오픈 채팅방에 속해 있는데, 한 가지 UI 컴포넌트를 물어보면 다양한 용어가 올라와요. '우리 팀에서는 이케이케 말해요.', '우리 팀에서는 이케이케 말하는데, 저렇게도 말해요.' 등 공통된 UI를 다르게 말하죠. ✔️ 이러한 용어 차이가 회사가 달라서 발생하는 게 아니에요. 저희 UX Writer들끼리도 다른 용어로 설명하고 있거든요. 뿐만 아니라 리서처분들과 이야기할 때도, 혼용된 용어로 이야기를 나누곤 해요. 그럴 때마다 다시 한번 컴포넌트를 찾아보게 되는 불상사(?)가 발생하기도 하더라고요. ✔️ 그렇게 되면 커뮤니케이션 비용이 증가하게 되고, 비효율적인 업무를 진행하게 되는 거죠. 그런 측면에서 UI 용어를 한 번쯤은 통일하고, 전사적으로 일관된 용어를 사용한다면? 비대면 커뮤니케이션도 충분히 효율적으로 운영할 수 있는 거죠. ✔️ 한편으론 이 용어를 정리해서 배포해야 하는 팀은 어디일까하는 점이에요. 보통 와이어프레임을 짜가지고 전달하는 쪽은 기획팀이고, 그걸 유형화하는 쪽이 디자인팀인데, 시안은 항상 바뀌기 마련이기 때문이죠. ✔️ 제가 생각하기에 디자인 스타일 가이드를 만드는 곳이 디자인팀이기에 UI 용어도 통일할 수 있는 팀이 디자인팀이 아닐까 해요. 그렇다고 전체를 다 디자인팀에게 맡기는 것이 아니라, 기획팀과 활발한 논의를 통해 결정지을 필요가 있는 거죠. ✔️ 여튼, 원활한 소통을 위해선 UI 컴포넌트 용어를 통일할 필요가 있다는 거고요. 다음으론 어떻게 통일해야 할까라는 문제가 남아요. 이 아티클이 이 문제에 대해 일정 부분 해소해주지 않을까 싶어서 가지고 왔어요. __________________ ✅ UI 컴포넌트 1. GNB: 웹사이트 최상위 메뉴를 GNB라 불러요. 모든 페이지에서 공통적으로 보이는 메뉴바죠. 2. LNB: GNB 메뉴를 클릭 혹은 마우스를 올려뒀을 때, 나오는 서브메뉴를 의미해요. 3. SNB: 상단 메뉴를 제외한 왼쪽에 붙은 메뉴바를 의미해요. SNB 또는 LNB(Left Navigaiton Bar)라고 하죠. 4. FNB, Footer: 최하단 메뉴로 FNB로 불러요. 로고, 주소, 전체메뉴, 고객 센터, 사업자 등을 나타내죠. 5. Tab Menu: 병렬형 콘텐츠를 보여줄 때, 상단에 Tab으로 나타나요. 보통 탭을 통해 다른 카테고리로 이동하죠. 6. FAB: 플로팅 버튼을 의미해요. 오른쪽 하단에 주로 배치해요. 최상단 페이지로 이동하거나, 채팅 기능을 주로 넣어요. 7. Splash Screen: 앱이 시작할 때 보여주는 화면이에요. 앱의 로고나 서비스 특징을 나타내는 콘텐츠를 보여주죠. 8. Hamburger: 웹이나 모바일 상단에 위치해 있어요. 이 버튼은 보통 전체 메뉴를 품고 있어요. 9. Drawer: 드로어는 평상시 닫혀 있다가 누르면 퐁! 하고 튀어나와요. 보통 앱의 상단에 위치해 있어요. 10. Accodian: 이름처럼 내용을 펼쳤다 접을 수 있는 컴포넌트죠. 모바일에서 리스트 형싱을 효과적으로 표현할 수 있어요. 11. BTN, Button: 버튼은 보통 두 가지로 표현돼요. 활성화, 비활성화가 있죠. 그 외에는 호버, 클릭 등 사용자의 행동에 따른 다양한 상태도 표현할 수 있어요. 12. Label: 레이블이라 불리며, 입력 필드 상단이나 좌측에 입력할 정보에 대해 설명해줘요. 13. Text Field: 한 줄 텍스트를 입력하는 폼 필드죠. 텍스트 입력의 기본이라 할 수 있어요. 14. Place Holder: 텍스트 필드 안에 짧은 힌트를 보여주는 기능이에요. 예시 또는 사용자의 입력을 유도하죠. 15. Text Area: 주로 긴 문장의 텍스트를 입력하는 창을 의미해요. 16. Place Holder Images: 사용자가 이미지를 입력할 수 있는 공간을 플레이스 홀더 이미지 또는 아바타라고 불러요. 17. Check Box: 중복 선택이 가능한 선택 수단이에요. 18. Radio BTN: 라디오 버튼은 중복 선택이 불가능해요. 19. Toggle: 껐다, 켰다 두 가지 상태를 표현할 때 사용해요. 20. Slider: 양쪽 끝에 위치한 아이콘을 선택하여 움직이며, 수치 값이나 카테고리 배율 등을 지정하여 표현해요. 21. Select Box: 사용자에게 특정 값을 선택하게 할 때 사용해요. 22. Drop Down: 버튼 뒤로 숨겨진 메뉴를 표현할 때는 드롭다운 메뉴를 사용해요. 23. Progress Bar: 사용자가 작업의 진행 상태를 확인할 수 있게 도와줘요. 24. Loader: 화면이 진행 중일 때 보이는 표현 방식으로, 보통 5초 내외를 표시해요. 25. Tooltip: 툴팁은 레이블, 아이콘 등에 간단한 설명 텍스트가 필요할 때 사용해요. 26. Carousel: 하나의 화면에 두 가지 이상의 콘텐츠를 보여줄 때 사용해요. 27. Navigation: 앱 하단에 위치한 내비게이션으로 보통 4~5개를 카테고리+레이블 형태로 보여줘요. 28. Breadcrumbs: 웹 혹은 앱에서 현재 위치를 표현해주는 내비게이션이에요. 29. Pagenation: 콘텐츠가 많을 때, 스크롤이 길어지면 페이지네이션으로 표현해요. 점이나 페이지 수 등으로 표현하죠. 30. Favicon: 특정 웹 사이트에 방문했을 때, 웹 사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘이에요. 회사의 로고를 주로 사용하죠.