[UIUX] 실무에서 자주 사용되는 UI 용어(5)

개인적으로 공부하면서 기록하는 공간으로
잘못된 정보는 댓글을 통해 알려주시면 감사하겠습니다 :-)

▪ ▪ ▪ ▪ ▪

 

안녕하세요. 많은 분들이 용어 정리를 봐주시는 것 같아 뿌듯한 마음에 5탄을 가지고 왔습니다 !

이번에도 많은 관심 부탁드릴게요 =]

 

---

 

스켈레톤(Skeleton)

명칭을 들으면 생소할 수 있지만 이미지와 함께 보시게 된다면 '아 이 화면이었구나?' 할 수 있는 요소 인데요.

실제 데이터가 렌더링 되기 전 윤곽을 먼저 그려주는 로딩 애니메이션입니다.

이 화면을 통해 사용자는 대충 서비스의 화면구성을 알 수 있어요.

또한 일반 로딩 화면 보다 부드럽게 전환되기 때문에 사용자가 느끼는 로딩시간이 짧아 보인다는 장점이 있습니다.

[참고] 유튜브 모바일 앱

 

카드형 UI(Card)

카드 기반의 디자인은 주로 시각에 많이 의존하게 되는데, 이 때 사용자의 시선을 효과적으로 끌 수 있다는 점에서 사이트맵 혹은 앱 디자인 시 많이 사용됩니다.

Card UI를 알맞게 사용한다면 직관적인 특성을 지니고 있기 때문에 사용자가 관심있는 콘텐츠를 보다 쉽게 찾을 수 있을 뿐만 아니라 더욱 매력적인 경험을 제공할 수 있을 것 입니다.

 

[참고] (좌)현대카드 모바일 앱 (우)네이버 모바일 웹

 

디바이더(Dividers)

그룹화 된 각 항목을 분리하거나 아코디언에서 탭할 수 있는 영역을 정의하는데 사용됩니다.

흔히 구분선이라고도 칭하는데 되도록이면 레이아웃에서 눈에 거슬리지 않는 정도의 후순위로 배치되어야 하며,

최소한 사용할 뿐만 아니라 요소를 구분할 수 없는 경우에만 사용하는 것을 권합니다.

[참고] 카카오버스

 

프로그래스 인디케이터(Progress Indicator)

시각적으로 대기 중임을 알려주는 컨트롤으로 반복적인 행동을 하며, 완료 시 사라지는 특징을 가지고 있습니다.로딩이 완료 되는 시기를 예측할 수 있는 (Determinate)와 예측이 어려운 (Indeterminate)로 나눌 수 있습니다.

[참고] 카카오뱅크

 

제스처 인터렉션(Gestures)

이는 화면을 컨트롤 하는 UI의 기본요소 중 하나로 모바일 서비스는 터치와 제스처를 기반으로 움직이고있습니다.

터치 스크린 중심의 인터렉션을 이해하고, 잘 활용한다면 사용자는 더 좋은 서비스를 접할 수 있을 것입니다.

[참조] https://www.smashingmagazine.com/2016/10/in-app-gestures-and-mobile-app-user-experience/

In-App Gestures And Mobile App User Experience — Smashing Magazine

 

---

 

[UIUX] 실무에서 자주 사용되는 UI 용어

[UIUX] 실무에서 자주 사용되는 UI 용어(2)

[UIUX] 실무에서 자주 사용되는 UI 용어(3)

[UIUX] 실무에서 자주 사용되는 UI 용어(4)