[3주차] UXUI 용어 정리 및 아티클 스터디

UXUI 아티클 스터디 

1. 오늘의 아티클(주제)

UI 디자인 완성도 올리기. 레이아웃편(1)

https://brunch.co.kr/@jisungmin/21

2. 아티클 정보 요약

레이아웃 구성시 리듬은 생동감과 역동성을 줄 수 있다.

리듬감은 자유분방하면 안돼고 반복을 통한 균형을 이루어야 한다.

 

3. 인사이트

많은 정보를 나열하며 디자인을 할때는 너무 일정하게 하는 것보다는 균형을 맞추면서 약간의 리듬감을 주어야 겠다.

 

UXUI 디자인 용어

• 스피터 (Spinner)

숫자 컨트롤을 말하며, 위아래 화상표 버튼을 사용하여 값을 조절하거나 필드에 직접 원하는 숫자를 입력하여 값을 추출

• 슬라이더 (Slider)

입력 값이 제한되어 있음을 시각적으로 인지하고, 버튼을 밀고 당기며 값을 조절한다.

• 텍스트 입력 필드 (Text input field)

앱 사용 시 흔히 볼 수 있는 키보드로 직접 텍스트를 입력하는 곳을 말한다.

• 플레이스홀더(Placeholder)

사용자가 값을 입력하기 전에 도움을 줄 수 있는 힌트를 input박스 안에 표시해주는 것을 말한다. 사용자가 값을 입력하면 문자는 사라짐. ex) 이메일

• CTA ( call to action)

사용자의 클릭을 통해 즉각적인 응답을 유도하거나 즉각적인 판매를 장려하는 행동유도버튼

• 캐러쉘 (Carousel)

슬라이드 형태로 이미지 혹은 영상이 순환하며 콘텐츠를 노출시키는 형태의 ui

• 코치마크 (Coach mark)

앱을 처음 실행했을때 도움말 또는 사용방향을 지시해주는 화면, 앱을 처음 사용하는 사용자를 위해 간단한 사용법을 안내해주는 서비스로 보통 최초 실행 시에만 볼 수 있도록 설계

• 플로팅버튼(Floating action button)

컨텐츠를 내리다가 맨위로 갈 수 있는 버튼, 배민 장바구니

• 모달(Modal)

사용자의 이목을 집중시키기 위해 화면 위에 또 다른 화면을 띄우는 방식으로 기존의 페이지와 부모-자식 관계를 갖고 있음

• 카드형 UI (card)

카드 기반의 디자인은 주로 시각에 많이 의존하게 되는데, 이때 사용자의 시선을 효과적으로 끌 수 있다는 점에서 사이트맵 혹은 앱 디자인 시 많이 사용된다. Card ui를 사용한다면 직관적인 특성을 지니고 있기 때문에 사용자가 관심있는 콘텐츠를 보다 쉽게 찾을 수 있을 뿐만 아니라 매력적인 경험을 제공해줄 수 있다.

• 프로그래스 인디케이터(progress indicator)

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