UI/UX 용어 및 앱 설계 용어 정리

용어는 중요하다.

하나의 서비스가 만들어짐에 있어 디자이너, 기획자, 개발자간의 소통은 필수적이다. 서로 부르는 명칭이 다르다면 의사소통이 원활하게 진행되기 힘들기에 용어를 정해놓는것이 여러모로 유리하다.

또, 개발을 함에 있어 중요한 부분에는 구글링, 네이밍 등이 있는데 용어를 제대로 알고 있지못하다면 이 부분에서 크게 스트레스를 받을 수 있다. (검색을 해야하는데 뭐라고 검색해야하지...?와 같은..🥲)

웹 개발만 하던 나에게 당혹스러운 사건이 있었던 적이 있다.

첫번째 사건은 IOS에서 스크롤시 하단에 생기는 bounce영역 색상을 커스텀 해야했을때다. (사실 지금도 이부분 이름을 명확히 모르겠다. 그저 가리려면 bounce false로 해당 영역을 막을 수 있어 이렇게 부르고 있을뿐.. 아시는 분은 댓글 남겨주세요.. )
이 부분을 사람들이 어떻게 부르는지 찾고싶어서...구글에 구구절절 검색을 하였다.

IOS....당겼을때....밑에보이는 영역 이름이 뭔가요...

🍳

이 사건 이후로 용어 정리를 한번 제대로 해야겠다고 느껴서 명칭 정리를 쭉 한번 해보고자 한다.

---

UI/UX 용어

 

1.  Bars
   1. StatusBar : 상태창
   2. NavigationBar : 
   3. TabBar : 앱의 주요 카테고리들을 네비게이트 하는 것이 목적
      - 전체보기, 검색, 알림 등 카테고리로 나를 네비게이트
   4. ToolBar : 특정 화면에서 가능한 행동(action)을 제시
      - 특정 콘텐츠에서 좋아요, 공유하기 등의 액션을 지원
      - tabBar, toolbar 기능 같이 넣고 쓰기도 한다.
2. 스플레시 화면 (Splash Screen)
   - 앱 실행시키고 본 화면에 들어가기 전 짧게 나오는 화면
   - 1 ~ 5초정도 노출
   - 첫 화면 로드하거나 첫 방문자, 재방문자 등 사용자를 구분하여 랜딩시키는동안 앱을 준비하는 용도로 사용됨
3. 코치마크 ( Coach Mark)
   - 앱을 처음 사용하는 사람들을 위해 도움말을 제공하는 패턴으로, 홈 화면 위로 반투명한 화면을 덮어 그 위에 메뉴 설명
4. 월크스루 ( Walkthroughs)
   - 메뉴얼이나 초기세팅에 필요한 상세 도움말을 단계별로 제공해주는 페이지뷰
   - 코치마크보다 더 많은 정보 제공
   - 이미 알고 있는 사용자를 위해 SKIP버튼 필요
5. Temporary View
   - 사용자에게 중요한 정보가 가능한 대안을 보여주기위한 뷰
   - 팝업 형태로 나타나는 경고창이 대표적
6. Header
   - 로고 GNB등 사이트 ㄴ 주요 기능과 아이덴티티가 있는 영역
7. Footer
   - 약관, Copyright, 마크, 회사소개 등 사업정보가 정의
8. Content
   - Header, Footer을 제외한 페이지의 주요 정보
9. 내비게이션
   
   • GNB (Global Navigation Bar):  어느 화면에나 상단에 고정되어있어 특정 메뉴로 바로 이동가능한 상단 메뉴
     • 메인 네비게이션, 상단 네비게이션 등 다양한 이름으로 불리므로 협업하는 사람끼리 용어정리가 필요하다.
   • Bottom Navigation : 하단 네비게이션으로 상단에 담지 못하는 내용 많이 담음
     
     • 보통 아래에 있으면 그냥 바텀 네비라고 부르는것 같다.
   • LNB (Local Navigation Bar) : 서브 메뉴로 좌측에 주로 위치
     
     • 사이드 네비게이션, 서브 메뉴, 이런 형태의 디자인을 보통 드로워 메뉴라고도 부릅니다. ( Drawer )
10. Location 

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

UI/UX Component (https://m3.material.io/components)

1.  Badges
2.  Progress Indicators
3. Snackbar
4.  BottomSheet
5.  Cards
6. Dialogs
7. Divider
8. List
9. BottomAppBar
10. Top App Bar
11. navigator bar
12. Navigation Drawer
13. Navigation rail
14. Tabs
15. Chips
16. Date Pickers
17. menus
18. Radios
19. Sliders
20. Switch
21. TimePickers
22. ActionSheet (https://www.zehye.kr/ios/2020/04/09/11iOS_alert_action_sheet/)
23. Alert

 

 

 

 

 

https://jeeeeehnmin.tistory.com/entry/%ED%8C%9D%EC%97%85%EC%9D%98-%EC%A2%85%EB%A5%98-%ED%8C%9D%EC%97%85-%EC%95%8C%EB%9F%BF-%EB%A0%88%EC%9D%B4%EC%96%B4-%ED%8C%9D%EC%97%85-%EB%AA%A8%EB%8B%AC-%ED%86%A0%EC%8A%A4%ED%8A%B8-%ED%8C%9D%EC%97%85

참고 ) https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=m4a_beyond&logNo=220833691988

모바일 UI/UX 디자인 용어 살펴보기 [미디어포스 얼라이언스]

https://brunch.co.kr/@flatdesign/2

#02. 앱의 구성요소

https://enfanthoon.tistory.com/183