패션디자이너, 디자인학과 등 필수 디자인개론 요점 정리 83. 모바일 디자인(Mobile Design)

83. 모바일 디자인(Mobile Design)

 

1) 모바일 디자인 표준화면 정의
전자정부 모바일 표준프레임워크는 기본원칙, 사용자 및 환경정의, 페이지 레이아웃 정
의에 대한 디자인 가이드를 제공한다.
 기본 원칙
① 사용자 경험에 초점을 맞춘다.
② 소수의 핵심 기능에 집중한다.
③ 디바이스 호환성, 확장성을 고려한다.
④ 정보 소외계층의 접근성을 고려한다.
⑤ 웹 표준을 준수하여 개발한다.
⑥ 일관성을 유지한다.
⑦ 이미지를 제한적으로 사용한다.
⑧ 모바일 환경의 유해 요소를 제거한다
⑨ 웹 내비게이션을 최적화한다.

 모바일 환경설계
① 모바일 서비스는 사용자의 다양한 디바이스 환경에서 호환 가능해야 한다.
② 모바일 웹은 HTML, CSS, Javascript를 사용하여 구현된다.
③ 디바이스는 풀터치로 사용하는 스마트폰과 태블릿 PC를 대상으로 하며, 피처 폰은
고려하지 않는다. 디바이스는 최신 버전뿐만 아니라 하위 버전의 기기도 고려한다.
④ 모바일 디바이스 브라우저의 기본 해상도는 320×480px이며, 고해상도 스마트폰
의 지속적인 출시에 따라 확장성을 고려해야 한다. 또한 스마트폰의 PPI(Pixel Per
Inch)는 LCD모니터의 PPI(72ppi)보다 높기 때문에 디자인 작업 시 PC환경보다 실
제 적용대상 디바이스에서 확인해야 한다.

⑤ 모바일 환경은 탭(tap) 이벤트를 통해 동작하기 때문에 PC 웹과의 차이점에 대한 충
분한 이해를 기반으로 설계해야 한다. 예를 들어, 모바일 화면에서는 페이지 내에서
의 스크롤 바 사용이 불가능하기 때문에 웹에서 사용하는 프레임 형식을 사용할 수
없다. 또한 터치스크린 기반의 디바이스는 마우스 롤오버(mouse rollover) 같은 이
벤트를 사용할 수 없다.
⑥ 스마트폰과 태블릿은 UI의 기본원칙은 동일하나 화면의 해상도 및 레이아웃에서는
차이를 보인다. 현재 태블릿 PC의 기준 해상도는 600×1024px, 768×1024px이다.
⑦ 태블릿은 일반적으로 모바일 웹이 아닌 일반 웹사이트를 접속하여 브라우징 하는 경
우가 대부분이나, 웹사이트에서 많이 사용되는 플래시, GIF 애니메이션, 동영상 등
의 몇몇 기술은 특정 태블릿에서 동작하지 않는다. 따라서 모바일 웹 뿐만 아니라
태블릿 환경을 고려하여 개발한다.

 페이지 레이아웃(Lay-out) 정의
① 구성요소
일반적으로 화면을 구성하는 요소들은 다음과 같으며, 이러한 요소들을 조합하여 다
양한 화면을 구성할 수 있다.

•Indicator 영역 : 각종 서비스의 알림 및 수신, 네트워크, 배터리 상태 등을 아이콘화하여 표 시한다. •Header 영역 : 기관의 로고 또는 사이트 명을 표시하여 사이트의 아이덴티티를 전달한다. •Navigation 영역 : 주로 홈이나 이전 페이지 또는 최상위 메뉴와 같은 주요 링크만 제공하며 모바일 웹의 경우 브라우저 내비게이션 버튼을 활용하므로 생략하는 경우도 있다. •Content 영역 : 사용자에게 전달하고자 하는 주요 정보를 담는다. •Button 영역 : 필요한 경우에만 사용하며, 버튼은 해당 콘텐츠 아래에 배치하는 것이 일반적 이나 상단에 위치시키는 경우도 있다. •Footer 영역 : 저작권, 연락처, PC 웹사이트로의 링크 등의 정보가 표시된다.

② 기본 원칙
Header 영역에는 아이덴티티(Identity)를 드러낼 수 있는 사이트명, 로고, 혹은 소
속 기관명이 노출되어야 한다. Footer 영역에는 PC 버전의 웹 사이트가 있는 서비
스의 경우 PC 버전으로의 링크를 제공하는 것이 좋다. 모바일 서비스가 제공되는 웹사이트의 경우에는 하단에 모바일 버전으로의 링크가 제공되도록 가이드 하는 것
이 좋다. Footer 영역은 좁은 공간을 고려하여 PC 버전의 웹사이트 보다는 간략화
된 내용을 담도록 한다.
유형에 따라 레이아웃을 일관되게 적용하여 시각적인 안정감을 주는 것이 좋으며,
콘텐츠의 정렬이 적절히 이루어지도록 그리드 시스템을 사용하는 것이 좋다. 모바
일 서비스에서 적합한 레이아웃은 콘텐츠를 읽기 쉽고 보기 좋게 효율적으로 배치하
는 것이다. 사용자가 원하는 정보를 쉽게 얻을 수 있도록 사용 환경과 방문 목적을
충분히 고려하여 정보를 배치해야 한다. 콘텐츠의 효과적인 전달을 위해 사용자가
반드시 읽어야 하는 주요 콘텐츠는 주목도가 높은 곳에 우선 배치하고 관심을 끌 수
있는 스타일을 적용한다. 또한 여백을 적절히 사용하여 시선의 흐름을 유도하는 것이 좋다.

 모바일 레이아웃
① 작은 스크린에 적합한 콘텐츠
동일한 콘텐츠를 PC 화면과 모바일 화면에 담았을 때, 모바일의 경우에는 PC에 비
해 사용자의 이해도가 현저하게 떨어진다는 점을 고려하여 상대적으로 큰 글씨와 간
결한 내용을 담도록 한다. 작은 화면에 너무 많은 콘텐츠를 배치하면 사용자가 원하
는 콘텐츠에 빠르게 접근하기 어렵다. 긴 내용은 여러 페이지로 적절하게 나누어 배
치하는 것이 좋다.
② 세로형 배치
모바일 화면은 가로 스크롤보다는 세로 스크롤이 편리하게 사용되므로 공공서비스
의 콘텐츠 레이아웃은 단일 칼럼의 세로 레이아웃을 기본형으로 적용한다. 그러나
서비스의 성격에 따라 가로 레이아웃을 기본형으로 적용하는 것이 가능하다.

모바일 디자인 레이아웃

 
③ 리스트(Lists)
▶ 기본형태
리스트형 레이아웃은 정보성 데이터가 많은 대국민/행정 서비스에서 적합한 레이아
웃이다. 썸네일 뷰보다는 긴 텍스트 타이틀을 보여줄 수 있는 장점이 있으며 비교적
얕은 계층구조의 표현이 가능하다.
동일 레벨의 내용을 일정한 기준에 따라 순차적으로 정렬한다.
•한 화면에 목록을 다 보여줄 수 없는 경우, 하단에 마지막 목록의 일부분만 나타
내어 목록이 계속 있다는 시각적인 단서를 제공한다.
•목록의 상하 구조를 표현하는 경우 시각적인 구분을 위하여 아이콘이나 블릿을 사
용하기도 한다.
•모든 목록을 한꺼번에 가져오기 어려운 경우, 우선 일부 목록만 제공하고 사용자
가 필요한 경우 추가 목록을 불러올 수 있도록 한다.
•편집모드에서는 목록 앞에 체크 박스를 두거나 목록 뒤에 삭제 버튼 등을 두어 기
본 목록 화면과는 명확하게 구분되도록 한다.
▶ Indexed List
리스트 형태의 레이아웃에 인덱스(Index)가 제공되는 형태이다. 주소록처럼 한 화
면에 제공되는 목록이 많아서 시각적으로 그룹핑이 필요할 경우 사용되며, 일반 리
스트 형태에 비해 시각적으로 원하는 정보의 검색이 용이한 장점이 있다.
▶ Tabbed List
탭 버튼 아래 목록이 같이 제공되는 화면으로 하나의 화면에서 여러 개의 목록을 한
번에 보여줄 수 있다. 세부 카테고리가 나뉘어있는 목록 콘텐츠에 적합하며, 탭 명
은 목록에 대한 타이틀 역할을 한다. 비교적 많은 양의 정보를 한 화면에서 내비게
이션할 수 있기 때문에 정보전달성 서비스에서 가장 많이 사용되는 유형이다.
④ 서치(Search)
▶ 기본 원칙
검색은 많은 정보를 담고 있는 서비스에서 사용자가 빠르게 원하는 서비스에 접근할
수 있도록 해주기 위해 제공하는 기능이다.
검색에 대한 결과 건수가 1건일 경우 해당 결과에 대한 상세 화면이 제공되고, 검색
에 대한 결과 건수가 2건 이상일 경우 목록화면 그리고 상세화면의 순으로 제공된
다. 포탈 성격의 경우 상단에 검색기능을 제공해 주는 것이 권장된다.
▶ 검색 제공 방식
•검색 활용 빈도가 높은 경우 주요 화면 내에 검색창을 제공한다.
•검색 옵션이 다양하여 사용자 설정이 많은 경우 검색 화면을 별도로 제공한다.
•다른 콘텐츠의 공간 확보를 위하여, 검색이 필요한 경우에만 사용자가 별도로 검
색창을 꺼내서 사용할 수 있도록 한다.
▶ 텍스트 검색
검색어를 텍스트로 입력할 수 있는 입력 필드와 검색버튼이 제공된다. 검색창은 주
로 상단에 제공되거나 텍스트를 입력하기 위한 키패드가 생성되면 자동적으로 상단
으로 올라간다. 사용자의 편의를 고려하여 초성검색이나 자동완성기능과 같은 검색
어를 제안하는 방식이 적용되기도 한다.

2) 모바일 디자인의 원칙
 이미지는 로딩(Loading)이 신속하게 진행될 수 있도록 제작해야 한다.
시스템의 심미성 향상을 위해 사용되는 이미지와 그래픽 블릿(Bullet), 아이콘 등의 시
각적 요소들은 페이지의 복잡도를 줄이기 위해 사용을 최소화해야 한다. 페이지의 로딩
속도에 영향을 미치지 않고 효과를 극대화시키기 위해서는 이미지의 사이즈를 작게 설
정하고 컬러의 수를 줄여서 사용해야 한다.
 이미지의 표현방식은 일관되게 제시해야 한다.
시스템 전반에 걸쳐서 사용자에게 통일된 이미지의 콘셉트를 보여주고, 시스템에 대한
일관된 이미지를 전달 할 수 있어야 한다.
 시스템이 기본적으로 제공하는 폰트 타입을 사용해야 한다.
폰트의 스타일은 가능하면 시스템에서 제공하는 기본 폰트 스타일을 사용하여 특정 폰
트 지원여부에 영향을 받지 않도록 해야 한다. 폰트의 사용은 가독성(Readability)을
우선적으로 고려해야 하며, 시각적으로 명확하지 않은 폰트를 사용하여 텍스트를 읽을
때 불편함이 생기지 않도록 해야 한다.
 폰트는 정보의 분류 체계, 중요도, 목적에 따라 차별되게 적용되어야 한다.
Bold체와 Italic체는 중요도가 높거나 구분될 필요가 있는 경우에만 사용해야 하며, 지
나치게 자주 사용하면 정보의 가독성을 저해할 수 있다.
폰트 하단의 밑줄은 링크와 혼동될 수 있으므로 가급적 사용을 자제한다.
 동일한 페이지에서 폰트 스타일과 크기는 3종류 이내로 제한하여 사용한다.
한 페이지 안에 3종류 이상의 폰트 스타일을 사용하면 일관성이 저해되어 가독성이 떨
어진다. 따라서 시각적 통일성을 유지하는 범위 내에서 사용해야 한다.
 한 페이지 내에 표현할 수 있는 최대 컬러 군은 5가지 이다.
5가지가 넘는 컬러 군을 사용할 경우 페이지 구성을 혼란하게 하여 수행 능력을 저해할
수 있다.
 컬러는 시스템의 고유 아이덴티티(Identity)가 적용될 수 있어야 한다.
사용자들에게 대상 시스템이나 제품에 대한 공통적인 브랜드 이미지를 심어 줄 수 있도
록 시스템의 특성이 반영된 컬러(CI)를 적극적으로 적용해야 한다.
 아이콘은 텍스트와 결합하여 제시해야 한다.
아이콘은 시각적 효과가 높지만 정확한 메타포(metaphor)를 표현하기가 어려우므로
텍스트와 결합하여 정확도를 높여야 한다.
 동일한 모양의 아이콘에 중복된 기능을 부여하지 않는다.
하나 이상의 기능을 동일한 모양의 아이콘에 부여하지 말아야 한다.
 아이콘은 일정한 위치에 배치해야 한다.
아이콘을 페이지 별로 상이한 곳에 배치하면 사용자가 아이콘을 직관적으로 이해하는
데 방해가 되어 아이콘 이용에 어려움을 줄 수 있다.

3) Mobile UX Design
한 사람의 스마트폰에 설치된 앱은 그 사람의 성향을 상징한다. 우리는 트렌드 분석을
통해 모바일 디자인이 어떻게 발전하는지 알 수 있으며, 최신 트렌드를 습득하는 것은
모바일 UX 디자이너가 갖춰야 할 기본적인 행동양식이다.
 플랫 디자인(Flat Design)
Flat의 사전적 의미는 ‘평평한’, ‘고른’, ‘납작한’ 등이다. 즉, 추가적 효과(Drop
Shadows, Bevels, Embossing, Gradients 등) 없이 평면적인 스타일을 적용한 디
자인을 뜻한다. 이에 앞서 스마트폰 출시 이후 모바일 UI 스타일은 애플의 ‘스큐어
모피즘(Skeuormorphism)’이다. 스큐어모피즘은 실제 존재하는 메타포(Real-Life
Metaphor)로부터 형태를 따와서 디자인하는 것을 말하며, 스마트폰 출시 초기 터치스
크린 기반 UI에 익숙지 않은 사용자에게 유용하다. 오프라인 제품 사용법 그대로를 터
치스크린에서도 가능하게 해 처음 사용하는 누구라도 쉽게 사용법을 인지할 수 있도록
하였다.
예를 들면, iOS에서 제공하는 아이북(iBooks)은 실제 책의 형태를 UI에 도입해 스마트
폰에 친숙하지 않은 사용자도 어떤 방식으로 사용해야 하는지 직감으로 알 수 있게 했
다. 그러나 스마트폰 출시 후 사용자는 터치스크린 기반 디지털 기기에 익숙해졌고 스
큐어모피즘의 필요성 또한 약해지기 시작했다.

① 플랫 디자인의 장점
▶ 확장성
플랫 디자인의 장점은 바로 반응형 디자인에 최적화돼 있다. 다양한 디바이스 및 해
상도에 따라 변화하는 반응형(Responsive) 디자인을 적용할 때 탁월한 확장성을 보
여준다. 이미지 버튼 대신 컬러 링크를, 패턴화 배경 대신 단순한 배경처리로 다양
한 디바이스에 쉽게 적용할 수 있다.
보통 하나의 이미지를 다양한 해상도에 맞게 변화시키려면 각 상황에 맞는 이미지를
전부 만들어야 한다. 하지만 단순한 플랫 디자인 형태로 제작하면 이미지를 쓰지 않
고 CSS만으로도 디자인을 구현하는 것이 가능하기 때문에, 모든 이미지를 만들 필
요가 없고, 용량 역시 최소화할 수 있다. 모든 해상도에 대응 가능해 아무리 큰 해상
도라고 해도 이미지가 흐려지는 현상이 없다.
▶ 콘텐츠 집중성
플랫 디자인에는 시각적 부담이 없기 때문에 콘텐츠 집중력을 향상시킨다. 현실의
메타포를 그대로 구현하기 위해 사실주의적 디자인에 집착하면 간단하게 사용해야
할 앱이 무겁고 부담스러우며 결국 콘텐츠에 집중할 수 없다.
▶ 사용성
플랫 디자인은 목적 지향적 디자인으로 기능과 콘텐츠, 사용자 최종 행동에 포커스
가 맞춰 있다. 모든 산만한 디자인 요소를 제거하고 꼭 필요한 내용과 사용자 목표
에 집중하도록 설계한다.
▶ 모던함
플랫 디자인은 장식적 요소가 없고 간결한 레이아웃을 가지고 있기 때문에 깔끔하
며, 타이포그래피와 여백, 컬러를 더욱 강조한다.

모바일 플랫디자인 UI

② 플랫 디자인의 기법
▶ 장식적 요소를 배제한다.
장식으로 사용하는 현실의 메타포 요소를 배제하고 본연의 기능에 충실한 디자인이
되도록 한다.
▶ 효과를 최소화한다.
플랫 디자인은 다른 추가 효과(Drop Shadows, Bevels, Embossing, Gradients
등) 없이 평면적인 스타일을 지향하므로 최대한 효과를 걷어내는 방식으로 작업한
다.

▶ 컬러에 집중한다.
플랫 디자인은 색상과 명도 차이로 디자인한다.
▶ 타이포그래피에 집중한다.
사용자에게 메시지를 전달하거나, 사용자 행동을 유도하는 힌트도 타이포그래피를
이용하는 경우가 많다. 때문에 어떠한 글꼴을 사용하는지, 어떤 메시지를 표현하는
지가 상당히 중요해졌다. 이것은 사용자가 느끼는 서비스에 대한 인상에 큰 영향을
끼친다.