모바일 UI 용어 - mobail UI yong-eo

UI/UX/트렌드 issue

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

모바일 UI/UX 디자인 용어 살펴보기

“UI/UX 디자인 이론과 실습”이라는 책을 읽으면서, 흥미로운 부분이 있어 같이 공유하려고 하는데요,

​바로 모바일 UI/UX 디자인 용어 및 패턴입니다.

​
모바일 화면(Mobile Wep/App)을 살펴보면 화면, 기능, 성격은 제각각이지만 공통적으로 사용되는

영역들이 있습니다. 이런 영역들을 일컫을 때, 일반적으로 널리 알려져 흔히 사용되는 명칭도 있지만, 개인별로 ~화면, ~버튼 등의  막연하고 애매한 설명으로 표현되기도 합니다.

​모바일 화면에서 공통적으로 쓰이는 핵심 용어들을 알면 좀 더 원활한 업무가 이루어지지 않을까 싶은데요.

명확한 이해를 돕기 위해, 실제 애플리케이션(app)을 사례로 들어 살펴보겠습니다.

​

1. 스플래시 스크린 (Splash Screen)
프로그램을 로드하는 동안 표시되는 대형 이미지로서 앱의 로고, 앱에 대한 소개, 혹은 로딩 진행률등을

​애니메이션으로 표시합니다. 최근 앱들은 광고 모델이나 흥미로운 문구 사용으로 아이덴티티 및 표 서비스를

​부각시키며, 타사와의 차별성을 보여주는 경우도 있습니다.

​

​(a) 로고와 진행률로 구성된 일반적인 스플래시 스크린

​​SSGPAY / L.POINT

(d) 기타 (시즌별/컨셉별)

​​​티몬 / Yap     

​

2. 엠프티 데이터 (Empty Data)

데이터가 없는 초기 상태를 표현해주는 패턴으로, 사용자가 빈 화면을 오류처럼 인식하지 않도록 디자인하는게 중요합니다. '데이터가 존재하지 않습니다'라는 문구 혹은 ‘이런 결과가 나온 경우 이렇게 해보세요’ 등의 방법을 제시하여 사용자가 빈화면을 이해할 수 있도록 표현하는게 좋습니다.

음악(iOS내장 앱) / 핀터레스트

3. 코치마크 (Coach Mark)

앱을 처음 사용하는 사람들을 위해 도움말을 제공하는 패턴으로, 홈 화면 위로 반투명한 화면을 덮어 그 위에 각 메뉴에 대한 도움말을 표시합시니다.

​ 

​해피포인트 / NH농협                                     

​

​

4. 워크스루 (Walkthroughs)

매뉴얼이나 초기 세팅에 필요한 상세 도움말을 단계별로 제공해 주는 페이지 뷰(Page view)로, 코치 마크보다더 많은 단계의 페이지를 제공합니다. 긴 프로세스를 거치고 싶어 하지 않는 사용자나 이미 알고 있는 사용자를위해 이 단계를 건너뛰어 바로 홈 화면으로 이동할 수 있도록 Skip 혹은 닫기 버튼을 제공하는 것이 좋습니다.

L.pay (1) / (2)

L.pay (3) / (4)

​

5. 스프링보드 (Spring Board)
응용 프로그램 진입을 위해 사용하는 아이콘의 모음을 말하며, 런처(Launcher) 혹은 대시보드(Dachboard)

라고도 불립니다. 기능 혹은 카테고리별로 메뉴를 구성하여 주로 묶음으로 표시할 때 사용하며 아이콘의 형태를 가집니다. 개수가 많을 경우 한 화면에 표시하기 어려워 여러 페이지로 구분됩니다. 

​ 

iOS 9 / BBC radio 

​

6. 슬라이드바 (Slide Bar)
서랍처럼 열린다고 하여 드로워(Drawer)라고도 부르며, 슬라이딩되면서 돌출되어 나오는 형상 때문에

슬라이딩메뉴(Sliding Menu)라고도 불립니다. 평상시에는 보이지 않다가 당기거나 아이콘을 클릭하였을 때

나타나며, 주로 최상위 메뉴 표시하거나 앱의 부가적인 기능을 모아 보는 기능으로 사용됩니다.

​

(a) 메뉴리스트 모음의 슬라이드 바

롯데카드 / 아마존

(b) 아이콘과 텍스트가 포함된 슬라이드 바

​SSG / 국민카드

​

​

7. 리스트뷰 (List View)

스크롤 할 수 있는 콘텐츠의 목록을 표시하는 요소로, 결과 값에 따라 한 줄에서 세 줄까지 구성이 가능하고

아이콘이나 썸네일 항목을 추가할 수 있습니다. 배지(Badge)나 토글(Toggle) 같은 구성 요소를 함께 삽입 할 수도 있기 때문에 항목을 추가할 때는 가독성이 떨어지지 않도록 보기 쉽게 배열하는 것이 중요합니다.

(a) 썸네일 리스트 뷰 

카카오플레이스

​

​(b) 전체 이미지 리스트 뷰 

Yap

티몬

8. 그리드뷰 (Grid View)

콘텐츠의 정렬이 바둑판 모양의 표 형태로 구성되는 화면을 말합니다. 기본적으로는 갤러리나 쇼핑몰의 리스트 화면에 가장 많이 사용되는 이미지 배열 방식으로, 이미지만 보여주기보다는 텍스트와 함께 사용하여 사용자의 이해를 돕는 것이 좋습니다.

​

쿠차 / LFmall​

카드 디자인은 더 복잡하거나 자세한 정보로 가는 진입점으로, 하나의 주제에 대한 사진, 텍스트 및 링크가 포함되어 있습니다. 카드의 폭과 높이는 변할 수 있으며 스크린에 맞게 크기를 제한할 수도 있지만 필요에 따라 일시적인 확장도 가능합니다.

​

​(a)매거진 형태의 카드 디자인

​지니

10. 스피너 (Spiner)

​여러 모음 중 하나의 값을 빠르게 선택할 수 있도록 해주는 역할을 합니다. 기본 상태에서는 현재 선택 된 값을 보여주며 스피너를 터치하면 다른 모든 사용 가능한 값들이 드롭 다운(Dropdown) 메뉴에 표시됩니다.

​

옥션 / CNBC

​

​

11. 리스트 컨트롤 (List Control)

리스트 컨트롤은 말 그대로 리스트를 통제하거나 조정하는 방법으로서 체크박스 클릭, 화면 축소/확장,

스와이핑 등의 제스처를 통해 리스트 목록을 통제할 수 있습니다. 그 중 리브 비하인드 (Leave behind) 액션은 어떤 아이템이 스와이핑되었고 어떤 액션을 취할 수 있을지에 대한 정보를 제공하는 것으로, 액션으로 전환이 가능 합니다.

(a)리브 비하인드를 통한 스와이핑 컨트롤 

​