🚨 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: 특정 웹 사이트에 방문했을 때, 웹 사이트 주소 옆이나 브라우저 탭에 나타나는 작은 아이콘이에요. 회사의 로고를 주로 사용하죠.

UI 용어를 정리해야 하는 이유

Brunch Story

UI 용어를 정리해야 하는 이유

다음 내용이 궁금하다면?

지금 간편 가입하고 다음 내용을 확인해 보세요!

또는

이미 회원이신가요?

2022년 11월 30일 오후 4:26

 • 

저장 16조회 1,383

댓글 0