모바일 서비스 사용자 인터페이스 가이드라인

2011. 8.

	행정안전부

	목 차
제1장 개요 제2장 사용자 및 환경정의 제3장 공공기관 모바일 서비스의 UX 디자인 기본원칙 제4장 모바일 서비스 UI 패턴별 가이드 제5장 UI 요소별 가이드 제6장 모바일 사용성 체크리스트

제1장. 개요

모바일 서비스 사용자 인터페이스 가이드라인	제1장 개요

	- -

본 가이드라인은 공공기관의 모바일 서비스 개발 시 사용자 인터페이스 표준안을 제시하기 위하여 작성되었다. 사용자에 대한 이해를 바탕으로 한 표준화된 UI 가이드를 제공함으로써, 다양한 서비스를 효율적으로 제공할 수 있는 인터페이스 설계를 지원하고, 궁극적으로 사용자들에게 최고의 사용경험을 제공하는데 그 목적이 있다.

1. 구성

본 가이드라인은 1. 개요, 2, 사용자 및 환경정의, 3.공공기관 모바일 서비스의 UX 디자인 기본원칙, 4.모바일 서비스 UI  패턴별 가이드, 5.UI 요소별 가이드, 6.모바일 사용성 체크리스트로 구성되어 있다.

공공기관 모바일 서비스의 UX 디자인 기본원칙은 사업의 발주자와 설계자를 위한 가이드로 사업의 발주자가 본 가이드를 통해 업체선정과 사업진행 시 UX 의사결정을 위해 기본적으로 이해해야 하는 모바일 UX 디자인에 대한 기본원칙을 제공한다. 또한 설계자에게는 공공기관 모바일 서비스의  UX의 특징을 이해함으로써 공공서비스에 맞는 사용자 경험을 설계할 수 있도록 한다.

모바일 UI 패턴별 가이드는 UI 설계자를 위한 가이드로 모바일 화면 설계 시 레이아웃, 내비게이션, 제스처의 다양한 경우와 활용 시 유의해야 할 고려사항, 제약사항, 권장사항에 대한 내용을 제공한다.

UI 요소별 가이드는 설계자와 개발자를 위한 가이드로서 모바일 UI 요소들의 기본적인 정보와 고려사항, 제약사항, 권장사항에 대한 내용을 제공한다.

모바일 사용성 체크리스트는 발주자와 개발업체에서 설계/개발이 완료된 모바일 서비스에 대해, 사용성을 위한 최소한의 사항들이 잘 준수되어 설계/개발되었는지 체크함으로써 UI 설계의 품질을 검증할 수 있는 도구로 활용될 수 있다. 체크리스트는 필수사항과 선택사항으로 구분되며 필수사항은 반드시 준수해야 하는 내용으로, 필수사항에 대한 미적용 사항은 반드시 수정되어 오픈될 수 있도록 해야 한다.

2. 적용방법

본 가이드가 제시하고 있는 내용은  UI 설계와 적용 관련된 기본정보, 필수적용 사항, 권장사항으로 나뉠 수 있다.

기본정보 : 대상요소의 정의와  적용 관련 기능적 특징으로 “~이다” “~한다”로 기술

필수적용 사항 : 적용 시 반드시 지켜야 하는 사항으로 해당 내용에서 “~해야 한다”   금기표현은 “~하지 않아야 한다” “제한한다”로 기술

권장사항 : 선택적으로 적용 가능한 사항으로 “권장한다” “~하는 것이 좋다” “~가 바람직하다” 부정 의미는 “자제한다”로 기술

필수적용 사항은 반드시 지켜야 하는 의무사항이므로 향후 적용여부에 대한 검증이 필요한 부분이며, 권장사항은 사용성의 향상을 위해 적용을 하는 것이 추천되는 사항이나 개별 서비스의 특별한 사유가 있는 경우  미채택 가능한 선택사항이다.

3. 관련법령

법령/예규/지침	소관부서
국가정보화기본법 제31조(정보격차 해소 시책의 마련) 제32조(장애인ㆍ고령자 등의 정보 접근 및 이용 보장)	행정안전부
장애인·노인·임산부 등의 편의증진보장에 관한 법률 제4조(접근권) 제7조(자기결정권 및 선택권) 제23조(정보접근ㆍ의사소통에서의 국가 및 지방자치단체의 의무)	보건복지부
전자정부 웹호환성 준수지침 (제2009-185호, 2009.8.19) 제4조(기본 원칙)	행정안전부
전자정부법 제50조(표준화)	행정안전부
전자정부법 시행령 제59조(표준화)	행정안전부
저작권법 제46조(저작물의 이용허락)	문화체육관광부

제2장. 사용자 및 환경정의

모바일 서비스 사용자 인터페이스 설계 가이드라인	제2장 사용자 및 환경정의

1. 사용자

공공기관 모바일 서비스 서비스는 크게 대상사용자 군에 따라 대국민서비스와 행정서비스 두 가지로 분류될 수 있다. 일반적으로 대국민서비스의 사용자는 모든 국민을 대상으로 한다. 이는 다양한 연령, 성별, 지적, 사회적 수준의 사용자를 포괄해야 함을 의미한다. 그러나 개별 서비스는 그 성격과 목적에 따라 국민들 중 특별히 정의된 사용자 군을 대상으로 할 수 있다. 반면 행정서비스는  해당 서비스 성격과 관련된 공무원들을 대상으로 한다.

UI 설계에 있어 사용자의 특성과 사용자가 서비스를 이용하는 상황을 이해하고 그것을 예측하여 설계하는 것이 중요하다. 본 가이드는  대국민서비스 및 행정서비스에 범용적으로 적용 가능하도록  작성되었다. 단 행정서비스와 달리 대국민서비스에서 대상이 되는 사용자는 정상인, 장애인, 노인 등의 정보소외계층이 포함된다. 따라서 본 가이드를 전체적으로 공통 적용하되 UX 기본원칙에서 행정서비스 UI 설계 적용 시  4번 사항은 예외 적용된다.

2. 모바일 환경

모바일 환경은 각 단말의 OS와 브라우저 환경에 따라 큰 차이를 보인다. 대국민 모바일 서비스의 포맷은 다양한 사용자의 디바이스  환경에서 호환되도록  해야 한다.  따라서 대국민서비스의 경우 특별한 개발이슈가 발생하지 않는 한 모바일 웹으로 개발하는 것을 기본으로 한다. 그러나 경우에 따라 모바일 웹으로 구현하기 어려운 기술적 이슈가 있는 경우 하이브리드 앱으로 개발하는 것이 가능하다.

모바일 웹과 하이브리드 앱은 HTML, CSS, Javascript를 사용하여 구현된다. 본 가이드는 모바일 웹과 하이브리드 앱에 공통되는 사항들로 기술되었으며, 이 두 가지 포맷의 서비스는 가이드에서 제시하는 공통된 UI 표현을 적용하여 사용자에게 일관된 경험을 제공하는 것이 바람직하다.

※ 증강현실 등 기술적 필요에 의해 앱(App)으로 개발이 불가피한 경우는 각각의 대상 디바이스별로 개발해야 한다. 행정서비스의 경우 폐쇄적인 사용자집단을 대상으로 하는 경우에 한해 특정한 사유가 있는 경우 앱으로 개발할 수 있다.

앱 개발 시 각 플랫폼이 제공하는 UI 가이드를 따라 개발하여 각 디바이스별로 최적의 기능과 UI를 제공하되, 3장 공공기관 모바일서비스의 UX 디자인 기본원칙은 동일하게 준수하여 개발한다. (단 3번 5번 항목은 예외)

본 가이드의 대상 디바이스는 풀 터치로 사용하는 스마트폰과 태블릿PC를 대상으로 하며, 피쳐폰은 고려하지 않는다. 디바이스는 최신 버전뿐만 아니라 하위버전의 기기를 고려한다.

모바일 폰의 기본 브라우저(Browser) 해상도는 320*480 PX이며 지속적으로 고해상도의 스마트폰이 출시됨에 따라 확장성을 고려해야 한다. 또한 스마트폰의 PPI(Pixel Per Inch)는 LCD모니터의 PPI(72ppi)보다 높기 때문에 디자인 작업 시 PC환경에서 확인하기보다 실제 적용대상 기기에서 확인해야 한다.

모바일 환경은 탭(Tap)을 통해 작동하기 때문에 PC 웹과의 차이점에 대한 충분한 이해를 기반으로 한 설계가 필요하다. 예를 들어 웹 기술을 사용하여 개발하게 될 경우, 모바일 화면에서는 페이지 내에서의 스크롤바 사용이 불가능하기 때문에 웹에서 사용하는 Frame형식을 사용할 수 없다.  또한 터치스크린으로 사용하는 디바이스는 마우스 rollover 같은 이벤트를 사용할 수 없다.

모바일 폰과  태블릿은 UI의 기본원칙은 동일하나 화면의 해상도 및 레이아웃에서는 차이를 보인다. 현재 태블릿PC의 기준 해상도는 600*1024PX, 768*1024PX이다.

태블릿은 일반적으로 모바일 웹이 아닌 일반 웹사이트를 접속하여 브라우징 하는 경우가 다수이나, 웹사이트에서 많이 사용되는 플래쉬, GIF애니메이션, 동영상 등 몇 가지 기술은 특정 태블릿에서 동작하지 않는다. 따라서 모바일 웹뿐만 아니라 태블릿에서의 접속을 고려한 일반 웹사이트를 구축하기 위해서는 본 가이드에서 제시하는 기본원칙을 준수하여 개발할 것을 권장한다.

웹으로는 구현이 불가능한 기술적 이슈가 있는 경우는 태블릿 전용 앱으로 개발할 수 있다. 그러나 이러한 경우도  각 디바이스별로 개발해야 한다. 태블릿 전용 앱을 개발하는 경우 스마트폰보다  뛰어난 인터랙션 효과를 적용하여 사용자 경험을 증대시킬 수 있다. 본 가이드에서는 태블릿의 레이아웃과 설계 시 고려해야 할 모바일과의 차이점을 중심으로 기술하였다.

3. 용어의 정의

“공공기관”이란 「전자정부법」제2조제2호에 따른 행정기관 및 동법 제2조제3호에 따른 공공기관을 말한다.

“모바일 서비스”란 「전자정부법」제2조제5호에 따른 전자정부서비스를 모바일로 제공하는 것을 말한다.

“UX”란 User Experience의 약자로써 사용자가 어떤 시스템, 제품, 서비스를 직·간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말하며, 단순히 기능이나 절차  상의 만족뿐만 아니라 전반적인 지각 가능한 모든 면에서 사용자가 참여, 사용, 관찰하고 상호 교감을 통해서 알 수 있는 가치 있는 경험을 말함

“모바일 웹(Web)”이란 스마트폰 등 모바일 기기에 디스플레이 할 수 있도록 최적화된 웹페이지를 말함

“하이브리드 앱(Hybrid App)”이란 모바일 앱의 기술과 모바일 웹의 기술을 동시에 적용하여 개발한 애플리케이션을 말함

“모바일 앱(App)"이란 스마트폰 등 모바일기기 운영체계(OS)에 최적화 되어 단독으로 실행될 수 있도록 개발된 애플리케이션(application)을 말함. 애플리케이션 스토어(Application Store)를 통해 필요한 모바일 앱을 구입·다운로드하고 스마트폰 등 모바일 기기에 설치하여 이용할 수 있음

“스마트폰(Smart Phone)”이란 고기능의 범용 운영체계(OS)를 탑재하여 다양한 모바일 앱, 모바일 웹을 자유롭게 설치·동작시킬 수 있는 고기능 휴대폰을 말함

피쳐폰(Feature Phone)이란 스마트폰보다 낮은 연산 능력을 가진 저성능 휴대전화를 설명하기 위한 용어로서 전화 기능에 충실한 휴대전화이며 사용자가 원하는 애플리케이션(앱)을 설치할 수 없음

태블릿PC(Tablet PC)란 터치스크린을 주 입력장치로 장착한 휴대용 PC로써 노트북 컴퓨터보다 작지만  스마트폰보다 크며 개인이 휴대하고 다니며 조작할 수 있음

웹사이트 링크(Website Link)란 웹사이트 내에서 콘텐츠로 존재하는 한 단어나 그림 또는 정보개체로부터 다른 곳으로 선택적인 연결을 제공하는 부분을 말함

QR코드(QR  Code)란 흑백 격자무늬 패턴으로 정보를 나타내는 매트릭스 형식의 2차원 바코드의 일종으로 기존의 1차원 바코드 보다 많은 정보를 저장할 수 있고, 일부가 손상되어도 인식이 가능하며, 작은 공간에 인쇄하여 방향과 무관하게 고속 인식이 가능한 2차원 바코드

제3장. 공공기관 모바일 서비스의 UX 디자인 기본원칙

기본원칙은 스마트폰과 태블릿PC를 통한 서비스를 기획하고 설계하는데 반드시 준수해야 할 기본사항들을 정의하고 있다.  공공기관 모바일 서비스의 발주자와 설계자는 다음의 기본원칙을 숙지하고 기본원칙에서 제시하는 필수사항과 권장사항, 제약사항을 고려하여 개발한다.

모바일 서비스 사용자 인터페이스 가이드라인	제3장 UX기본원칙

1) 사용자 경험에 초점을 맞춘다.

2) 소수의 핵심기능에 집중한다.

3) 디바이스의 호환성, 확장성을 고려한다.

4) 정보소외계층의 접근성을 고려한다.

5) 웹표준을 준수하여 개발한다.

6) 일관성을 유지한다.

7) 이미지를 제한적으로 사용한다.

1. 사용자 경험에 초점을 맞춘다.

가. 사용자가 서비스를 사용하는 목적과 상황을 이해한다.

사용자가 누구인가, 나이, 숙련도, 문화 등에 대해 충분한  이해가 바탕이 되어야 한다.

사용 환경과 목적에 대해 이해하고 사용자 중심의 사고방식으로 설계해야 한다. 예를 들어 공공장소에서 사용하는지 사적인 공간에서 사용하는지, 여유가 있는 시간에 사용하는지, 지하철을 기다리는  짧은 시간에  사용하는지 등의  여러 상황적 요소들이 복합적으로 작용하여 사용자 경험을 만들어낸다.

이 서비스를 얼마나 자주 사용할 것인가를 이해하고 사용자 경험의 만족도를 높이는데 집중해야 한다.

나. 사용자가 설명서 없이 쉽게 사용할 수 있어야 한다.

사용자가 서비스 이용에 대한 사전지식이 없이도 직관적으로 사용법을 파악하고 쉽게 사용할 수 있어야 한다.

최소한의 노력으로 원하는 정보에 접근할 수 있도록 설계해야 한다.

다. 사용자의 잠재적인 실수를 고려해야 한다.

사용자는 언제든지 실수를 할 수 있으며 사용자의 실수를 뒤로 되돌릴 수 있는 기능이 항상 제공되어야 한다.

라. 항상 훌륭한 기술이 사용자의 만족도를 높이는 것은 아니다.

기술적 요인을 먼저 고려하게 될 때 사용자가 원하지 않는 기능을 제공하게 될 수 있다. 기술적 요인의 적용은 서비스의  목적에 부합되며 기술을 적용하는 것이 사용자 경험을 높이는데 도움이 되는지가 적용여부의 판단기준이 되어야 한다.

마. 아름다운 디자인만이 최선인 것은 아니다.

그래픽요소가 많은 화려한 디자인이 모든 사용자에게 선호되는 것은 아니다. 생산성을 높이는 서비스를 이용하는 사용자는 화려한 그래픽보다는 간결한 화면을 선호할 수 있다. 디자인이 기능에 부합하도록 디자인 되었을 때 사용자 경험을 높일 수 있다.

바. 모바일 사용성의 특징을 이해한다.

모바일의 사용은 탭(tap)으로 이루어진다. 손으로 터치 가능한 영역은 최소 40*40 pixel이므로 이보다 큰 반응영역으로 디자인해야 한다.

모바일에서 입력기능은 PC에서의 입력보다 많은 어려움이 있으며, 신체기능이 떨어지는 사용자나 이동 중 사용으로 입력기능 사용에 어려움이 있는 사용자를 고려하여 입력을 최소화하고 선택할 수 있도록 하거나, 자동완성 기능을 제공하는 것이 좋다.

2. 소수의 핵심기능에 집중한다.

가. 간략해야 한다.

모바일 화면은 제안된  크기 때문에 웹사이트와 같은 방대한 양의 정보를 보여주는 것이 어렵다.  웹사이트와 동일한 정보를 그대로 모바일로 전환하려 한다면  여러 번의 탭과 브라우징을 요구하여 복잡성이 증가된다. 따라서 매우 불편한 경험을 제공하게 되며 사용자를 이탈하게 하는 결과를 초래할 수 있다.

많은 메뉴와 계층구조를 따라 메뉴를 찾아 들어가게 하는 방식은 모바일 서비스에 적합하지 않다.

나. 모바일에 최적화된 사용자 경험을 제공한다.

서비스가 제공하고자 하는 핵심기능을 몇 가지로 리스트 하고 부가적인 정보는 생략하는 것이 좋다. 예를 들어 메일 서비스를 하고자 한다면, 받은 메일의 리스트와 읽기, 메일 쓰기의 핵심기능 외에 나머지 기능(예를 들어 자주 쓰는 ID, 친구그룹관리, 스팸관리 등)은 생략한다. 서비스 기획/설계에 있어 핵심은 데스크톱의 메일보다 더 좋은 기능의 메일을 제공하는 것이 아니라, 모바일을 위해 재창조된 모바일 경험을 만드는 것이다.

다. 목적을 분명히 한다.

여러 가지 주제의 메뉴를 복합적으로 제공함으로써 서비스의 정체성(Identity)이 모호해지는 것을 피한다.

하나의 서비스는 간단히 정의할 수 있는 핵심기능을 중심으로 필요에 따라 이것을 보조할 수 있는 몇 개의 추가기능으로 구성하는 것이 좋다.

제공되는 서비스의 일관성을 유지한다. 이질적인 성격의 여러 가지 서비스를 동시에 제공하는 것 보다는 서비스를 분할하여 독립적으로 제공하는 것을 권장한다.

3. 디바이스의 호환성과 확장성을 고려한다. (App개발 시 예외)

가. 3개 이상의 브라우저(Browser)에서 동일하게 작동하도록 설계한다.

공공기관의 모바일 서비스는 다양한 사용자 환경에 따라 여러 단말에서 동일하게 동작하는 것이 중요하다.

기술적 제약이 없는 한 기본적으로 모바일 웹은 크로스 브라우징(Cross browsing)을 지원하나 기기별로 약간의 차이가 발생하기 때문에 최소 3개 이상의  브라우저(Browser)에서  테스트하여 동일하게 동작하고 같은 사용자 경험을 제공할 수 있도록 해야 한다.

나. 화면의 크기는 320*480을 최소 크기로 하여 확장성을 고려한다.

브라우저의 해상도는 제조사별로 상이하며, 하나의 브라우저에서도 가로모드와 세로모드의 전환을 고려하여 두 가지의 해상도에 맞춤형으로 지원되도록 해야 한다.

신규 출시되는 디바이스의 해상도는 지속적으로 커지고 있기 때문에 확장성을 고려하여 각 디바이스별 화면  해상도에 유동적으로 맞도록 개발하되, 하위버전도 수용할 수 있어야 한다.

다양한 브라우저와 해상도에 Width 값이 꽉 차도록 개발하기 위해서는 넓이 값을 절대 값으로 설정하지 않고 100% 상대 값으로 설정해야 한다.

화면 유동성을 고려하여 레이아웃에 고정 값의 절대좌표를 사용해서는 안 된다.

다. 특정한 플랫폼에만 작동하는 기능에 의존하지 않는다.

플랫폼별로 지원되는 기능이 다르므로 이 요소들을 확인 후 공통적으로 적용되는 기능을 중심으로 개발해야 한다.

예를 들어 안드로이드 플랫폼에서 제공하는 하드웨어 Back 버튼은 iOS를 기반으로 한 디바이스에서는 적용될 수 없다. 따라서 모든 메뉴와 내비게이션 버튼은 화면상에서 선택할 수 있도록 제공되어야 한다.

4. 정보소외계층의 접근성을 고려한다.

가. 다양한 조건의 환경과 사용자가 사용할 수 있어야 한다.

대국민 서비스로서의 모바일 서비스를 설계할 때 정상인을 비롯하여 노인과 장애인 등의 접근성이 고려되어야 한다. 단 행정서비스는 예외로 한다.

서비스의 성격에 따라 어린이나 노인을 사용자로 포함하는 경우는 각 사용자들의 특징에 기반을 둔 설계가 필요하다.

정상인이라 할지라도 공공장소에서 매너모드를 사용하거나 시끄러운 곳에서 이용하는 경우는 음성정보를 놓칠 수 있으며 이동 중 사용은 텍스트 입력에 제한이 생길 수 있다.

모바일 서비스 설계 시 고려해야 할 사용자 특성은 다음과 같다.

어린이 : 모바일을 처음 사용하거나 경험치가 낮아 활용능력이 떨어짐.

고급어휘 또는 외국어 능력이 떨어짐

노인 : 모바일 기기를 처음 사용하거나 자주 사용하지 않아서 사용하는 능력이 떨어짐.

신체기관의 저하로 인하여 시력, 청력, 운동 기능이 정상인보다 떨어짐

시각장애, 저시력 : 시력이 낮은 사용자로 작은 폰트의 사용을 제한

색맹 : 색에 대한 구별이 어려운 사용자로 색상에 의해 내용을 구분하는 콘텐츠 사용을 제한

전맹 : 시력이 전혀 없고 청력에 의존하는 경우로  특정 디바이스에서만 음성기능을

이용하여 사용가능

청각장애 : 멀티미디어 콘텐츠의 음성을 인지할 수 없으므로 자막이나 대체 텍스트를 제공

기타장애 : 광발작성 장애는  주파수 범위가 3hz에서 49hz인 경우 깜박임이 포함된콘텐츠에 발작을 일으킬 수 있음

나. 접근성을 위한 아래 지침을 준수하여 개발한다.

동영상 등 시청각 멀티미디어 콘텐츠는 자막이 제공되어야 한다.

정보가 있는 이미지를 배경화면으로 사용하지 않아야 한다.

색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.

텍스트는 충분히 읽을 수 있는 크기로 제공되어야 한다.

주요내용의 콘텐츠의 경우 본문텍스트의 확대기능을 제공하는 것이 바람직하다.

깜박이는 콘텐츠는 최대한 사용을 자제하고 불가피하게 이를 사용할 경우 이에 대한 제어 기능을 제공해야 한다.

불필요한 팝업의 사용을 최대한 자제한다.

링크 텍스트에 연결되는 페이지를 유추할 수 있는 정보를 제공해야 한다.

어휘나 단어의 선택은 사용자의 입장에서 이해 가능한 것으로, 사용자가 알고 있는 전문적 수준을 고려하여 제공해야 한다.

실시간으로 내용이 갱신되는 콘텐츠는 짧은 시간에 이것을 판독하지 못하는 사용자를 위하여 이전, 다음, 정지 버튼을 제공하는 것을 권장한다.

5. 웹표준을 준수하여 개발한다. (App개발 시 예외)

가. HTML/CSS/Javascript 소스를 분리하여 개발한다.

W3C 표준을 준수한 코딩은 다른 디바이스간의 호환을 가능하게 하며, 시각장애인이 음성모드로 서비스를 이용할  수 있게 한다.  웹표준은 HTML 4.0 이상 버전을 적용한다.

유효한 마크업(Mark Up) : 표준 문법에 유효한 마크업 언어(Markup Language)로 문서를 작성한다.

스타일 시트 : 레이아웃과 형식의 설계는 스타일 시트를 사용하여 스킨적용이 가능하게 한다.

테이블 속의 테이블 비사용 : 테이블 내에 또 다른 테이블을 포함하지 않는다.

테이블 레이아웃 비사용 : 테이블을 이용하여 레이아웃을 구성하지 않는다.

여백에 그래픽 비사용 : 여백 공간에 그래픽을 사용하지 않는다.

프레임 비사용 : 프레임을 사용하지 않는다.

6. 일관성을 유지한다.

하나의 서비스 안에서는 동일한 사용자 경험을 유지하는 것이 좋다. 사용자는 하나의 사이트를 접속하면서 사용패턴에 대해 학습하고, 그것을 기반으로 나머지 페이지들을 브라우징 한다. 일관성의 유지는 사용성을 높이는 중요한 요소 중 하나이다.

가. 스타일의 일관성을 유지한다.

컬러, 폰트, 이미지 요소들의 스타일의 일관성을 유지하는 것은 해당 서비스에 대한 정체성(Identity)을 형성하는데 도움을 준다.

모바일 화면에서 사용된 아이콘은 항상 같은 의미로 사용되어야 하며 사용자가 관습적으로 알고 있는 정보와 일치하도록 하는 것이 좋다. 관습적인 아이콘의 의미를 다르게 적용할 경우 사용자에게 혼란을 야기할 수 있다.

세로모드에서 가로모드로 전환되었을 때 동일한 레이아웃과 스타일을 유지할 수 있도록 하는 것은 사용자의 혼란을 줄이고 일관된 맥락에서 서비스를 이용할 수 있도록 돕는다.

나. 용어사용의 일관성을 유지한다.

서비스 내의 레이블링 체계는 일관된 표준에 의해 제공되어야 한다.

정의된 사용자군의 연령 및 전문용어에 대한 이해수준을 기초로 하여 사용되는 어휘의 수준을 일관되게 유지해야 한다.

화면에 나타나는 하나의 버튼은 항상 같은 의미로 사용되어야 한다.

다. 조작방식의 일관성을 유지한다.

한 서비스 안에서의 내비게이션 버튼이 나타나는 위치와 조작방식, 피드백은 항상 일관된 형식으로 제공되어야 한다.

7. 이미지를 제한적으로 사용한다.

가. 경량화된 이미지를 사용한다.

이미지 사용 시 데이터 량을 고려하여 경량화된 디자인을 제공해야 한다. 이미지의 데이터 량이 클 경우 화면의 렌더링 속도를 저하시킬 수 있으며, 사용자에게 불필요한 데이터 사용요금을 발생시킬 수 있다.

나. 비윤리적 이미지를 사용하지 않는다.

이미지 적용이 성적 표현이나, 특정 종교나 인종, 여성의 비하 등 사회적 갈등을 유발할 수 있는 이미지는 사용을 금한다.

다. 색상과 그래픽에 의존한 서비스를 제공하지 않는다.

색상과 그래픽에 의존한 서비스는 장애인의 접근성을 떨어뜨린다.

색상의 표현은 디바이스별로 다르며, 색상능력이 뛰어난 기기라도 밝은 곳에서는 잘 안보일 수 있다.

이미지를 적용할 때 모든 이미지에는 대체 텍스트(Alt text)를 제공해야 한다.

라. 이미지의 저작권을 확보한다.

적용 이미지나 아이콘의 저작권 유무를 확인하고 저작권이 확보되지 않은 이미지를 무분별하게 사용하지 않아야 한다.

이미지의 콘텐츠가 개인의 초상권이나 프라이버시를 침해하지 않도록 한다.

제4장. 모바일 UI 패턴별 가이드

모바일 서비스 사용자 인터페이스 설계 가이드라인	제4장 UI패턴별 가이드

1. Layout

가. 구성요소

일반적으로 화면을 구성하는 요소들은 다음과 같으며, 이러한 요소들을 조합하여 화면을 구성할 수 있다.

Indicator 영역 : 각종 서비스의 알림 및 수신, 네트워크 ,배터리 상태 등을 아이콘화 하여 제공한다.

Header 영역 : 기관의 로고 또는 사이트 명을 제공하여 사이트의 정체성(Identity)을 전달한다.

Navigation 영역 : 주로 홈이나 이전 또는 최상위 메뉴 같은 주요 이동만 제공되며 모바일 웹의 경우 브라우저 내비게이션 버튼을 활용하므로 생략하는 경우도 있다.

Content 영역 : 사용자에게 전달하고자 하는 주요 정보를 담는다.

Button 영역 : 필요한 경우에만 제공되며, 버튼은 해당 콘텐츠 아래에 배치하는 것이 일반적이나 상단에 위치시키는 경우도 있다.

Footer 영역 : 저작권, 연락처, PC웹으로의 링크 등의 내용이 제공된다.

나. 기본원칙

대국민서비스의 Header 영역에는 공공서비스로서의 정체성(Identity)을 드러낼 수 있는 사이트명/로고, 혹은 소속 기관명이 노출되어야 한다.

대국민서비스의 Footer 영역에는 PC버전이 있는 서비스의 경우 PC 버전으로의 링크를 제공하는 것이 좋다. (행정서비스는 예외)

모바일 서비스가 제공되는 웹 사이트의 경우에는 하단에 모바일 버전으로의 링크가 제공되도록 가이드 하는 것이 좋다.

Footer 영역은 좁은 공간을 고려하여 웹보다는 간략화 된 내용을 담도록 한다.

유형에 따라 레이아웃을 일관되게 적용하여 시각적인 안정감을 주는 것이 좋다.

콘텐츠의 정렬이 이루어지도록 그리드 시스템을 사용하는 것이 좋다.

공공기관의 모바일 서비스에서 좋은 레이아웃은 콘텐츠를 읽기 쉽고 보기 좋게 효율적으로 배치하는 것이다. 사용자가 원하는 정보를 쉽게 얻을 수 있도록 사용 환경과 방문 목적을 충분히 고려해서 정보를 배치해야 한다.

콘텐츠의 효과적인 전달을 위해 사용자가 반드시 읽어야 하는 주요 콘텐츠는 주목도가 높은 곳에 우선 배치하고 관심을 끌 수 있는 스타일을 적용하는 것을 권장한다.

여백을 적절히 사용하여 시선의 흐름을 유도하는 것이 좋다.

다. 모바일 레이아웃

1) 작은 스크린에 적합한 콘텐츠

대국민서비스를 모바일 전환할 때 PC웹에 있는 모든 정보를 모바일로 전환하는 것은 디바이스 화면크기의 물리적 제약으로 인해 무척 어렵기 때문에 주요 콘텐츠에 대한 선택적 적용이 필요하다.

동일한 콘텐츠를  PC 화면과 모바일 화면에 담았을 때, 모바일의 경우에는 PC에 비해 사용자의 이해도가 현저하게 떨어진다는 점을 고려하여 상대적으로 큰 글씨, 간결한 내용을 담도록 한다.

작은 화면에 너무 많은 콘텐츠를 배치하면 사용자가 원하는 콘텐츠를  빠르게 접근하기 어렵다. 긴 내용은 여러 페이지로 적절하게 나누어 배치하는 것이 좋다.

2) 세로형 배치

모바일 화면은 가로 스크롤보다는 세로 스크롤이 훨씬 편리하므로 공공서비스의 콘텐츠 레이아웃은 단일 칼럼의 세로 레이아웃을 기본형으로 적용한다. 그러나 서비스의 성격에 따라 가로 레이아웃을 기본형으로 적용하는 것이 가능하다.

라. 태블릿 레이아웃(App only)

1) 디바이스별 최적화 필요

현재 보급된 태블릿의 해상도는 600*1024PX, 768*1024PX 두 가지이나 화면크기와 PPI의 차이 때문에 사용성 면에서는 큰 차이를 보인다. App 개발 시 서비스를 하나의 디바이스 해상도에 맞추어 개발하고 그것을 다른 디바이스에 확대 또는 축소하여 개발하게 되면  두 번째 변형된 사이즈의 App은 사용성이 매우 낮은 서비스를 제공하게 될 수 있다. 따라서 태블릿을 위한 App 개발 시에는 하나의 표준화된 레이아웃이 아닌, 각 디바이스에 최적화된 개별적인 화면설계가 필요하다.

2) 간결한 콘텐츠 제공

스마트폰에 비해 넓은 화면이나, 화면에서 최대한 불필요한 기능을 배제하고 핵심기능을 돋보이게 할 수 있도록 배치한다.

사용자가 한 화면에서 많은 정보에 접근할 수 있도록 하여 사용자가 정보를 찾기 위해 다른 화면으로 이동하지 않도록 한다.

3) 다양한 방향 레이아웃

가로 세로 방향 모두 지원해야 한다.

어플리케이션이 한 방향에서만 실행되게 하는 것을 지양하고, 180도 회전 등 예외적인 방향도 지원하는 것이 좋다.

4) Split view활용(7인치 이상 태블릿 only)

태블릿에는 하나의 화면에 2개의 영역이 가로형으로 배치된 Split View가 가능하다. (태블릿 App only)

Split View 왼쪽 면을 내비게이션을 위한 영역으로 사용할 수 있다.

가로모드와 세로모드가 서로 전환되더라도 화면구성이 크게 달라지지 않는 것을 기본으로 한다.

태블릿에서는 가능하면 내비게이션 시 전체화면 전환은 피하는 것이 좋다.

팝오버를 사용하여 사용자가 화면을 이동하지 않고도 원하는 정보를 찾을 수 있게 제공해주는 것이 좋다.

마. Lists

1) 기본형태

리스트형 레이아웃은 정보성 데이터가 많은 대국민/행정서비스에서 적합한 레이아웃이다.

썸네일 뷰보다는 긴 텍스트 타이틀을 보여줄 수 있는 장점이 있으며 비교적 얕은 계층구조의 표현이 가능하다.

동일 레벨의 내용을 일정한 기준에 따라 순차적으로 정렬한다.

한 화면에 목록을 다 보여줄 수 없는 경우, 하단에 마지막 목록의 일부분만 나타내어 목록이 계속 있다는 시각적인 단서를 제공한다. ①

목록의 상하 구조를 표현하는 경우 시각적인 구분을 위하여 아이콘이나 불릿을 사용하기도 한다. ②

모든 목록을 한꺼번에 가져오기 어려운 경우, 우선 일부 목록만 제공하고 사용자가 필요한 경우 추가 목록을 불러올 수 있도록 한다.③

편집모드에서는 목록 앞에 체크 박스를 두거나 목록 뒤에 삭제 버튼 등을 두어 기본 목록 화면과는 명확하게 구분되도록 한다.④

2) 이미지형 List (Gallery)

리스트를 이미지 형식으로 표현하는 레이아웃 스타일이다.

사진 리스트와 같은 이미지 데이터를 보여주거나 메인 화면의 메뉴선택과 같은 경우 적용 가능한 유형이다.

이미지 개수가 많아지는 경우 하단스크롤 혹은 페이지 내비게이션이 제공된다.

메뉴를 표현하기 위한 형태로 사용되는 경우 메뉴의 개수가 지나치게 많아져서 하단으로 길게 스크롤 되는 것은 바람직하지 않다.

이미지 형식의 메뉴이므로 메뉴별로 개별적인 디자인 작업이 필요하다.

이미지 크기에 따라 배치되는 이미지의 개수가 달라질 수 있으며, 중앙 정렬의 등간격 배치가 되도록 한다.

상세화면에서는 이미지를 확대/축소하는 기능이 지원된다.

가로모드로 전환할 때는 우측 빈 공간이 생기지 않도록 가로 폭에 보여지는 메뉴 개수를 더 늘려서 배치하는 것이 좋다.

3) Indexed List

리스트 형태의 레이아웃에 인덱스(Index)가 제공되는 형태이다.

주소록처럼 한 화면에 제공되는 목록이 많아서 시각적으로 그룹핑이 필요할 경우 사용되며, 일반 리스트 형태에 비해 시각적으로 원하는 정보로의 검색이 용이한 장점이 있다.

정보량이 많은 행정서비스 등에서 적용 가능한 유형의 레이아웃이다.

인덱스 그룹은 서로 중복되거나 종속되지 않고 명확하게 구분할 수 있어야 한다.

깊은 계층구조의 메뉴를 보여주는 유형에는 적합하지 않다.

4) Tabbed List

탭 버튼 아래 목록이 같이 제공되는 화면으로 하나의 화면에서 여러 개의 목록을 한꺼번에 보여줄 수 있다.

세부 카테고리가 나뉘어 있는 목록 콘텐츠에 적합하며, 탭 명은 목록에 대한 타이틀 역할을 한다.

탭 버튼을 선택하면 하단에 해당 목록의 데이터가 나오며, 일반적으로 첫 번째 탭의 목록이 열려있는 상태이다.

비교적 많은 양의 정보를 한 화면에서 내비게이션 가능하게 하기 때문에 정보전달성 서비스에서 가장 많이 사용되는 유형이다.

모바일 앱의 경우 일반적으로 탭이 고정된 형태로 구현 가능.

바. Search

1) 기본원칙

검색은 많은 정보를 담고 있는 대국민/행정 서비스에서 사용자가 빠르게 원하는 서비스에 접근할 수 있도록 해주기 위해 제공하는 기능이다.

검색창의 위치는 화면 상단에 위치하는 경우가 많으며, 경우에 따라 화면의 상 하단에 중복 노출시키는 경우도 있다.

검색어를 입력하고 버튼을 누르면 그에 대한 결과 값을 보여준다.

(검색결과가 없는 경우) 검색결과가 없음을 표시하는 화면을 제공(예 : “해당 조건에 맞는 검색 결과가 없습니다”)한다.

(검색결과가 있는 경우) 검색결과 건수가 1건 이상인 경우에는 결과목록 화면을 제공하고, 목록에서 사용자가 선택하는 경우 상세화면으로 이동한다.

포탈 성격의 대국민 서비스의 경우 상단에 검색기능을 제공해 주는 것이 권장된다.

2) 검색 제공 방식

검색 활용 빈도가 높은 경우 주요 화면 내에 검색창을 제공한다. ①

검색 옵션이 다양하여 사용자 설정이 많은 경우 검색 화면을 별도로 제공한다. ②

다른 콘텐츠의 공간 확보를 위하여, 검색이 필요한 경우에만 사용자가 별도로 검색창을 꺼내서 사용할 수 있도록 한다. ③

3) 텍스트 검색

검색어를  텍스트로 입력할 수 있는 입력 필드와 검색 버튼이 제공된다.

검색창은 주로 상단에 제공되거나 텍스트를 입력하기 위한 키패드가 생성되면 자동적으로 상단으로 올라간다.

사용자의 편의를 고려하여 초성검색이나 자동완성기능과 같은 검색어를 제안하는 방식이 적용되기도 한다.

4) 음성 검색

문자 입력이 어려운 상황에서 유용한 방법으로 음성을 녹음한 후 음성에 대한 결과를  얻을 수 있다.

녹음 버튼을 누르고 음성을 입력하면 자동으로 인식하여 결과화면으로 이동한다.

음악 검색도 같은 방식으로 현재 듣고 있는 음악을 분석하여 음악정보를 검색해준다.

5) 바코드/QR코드 검색

바코드나 QR코드를 자동인식하거나 촬영하여 상품이나 서비스 정보를 확인할 수 있다.

동영상 등의 접속 시 과금이 발생할 수 있으므로 접속 시 연결되는 페이지에 대한 간략한 정보를 노출 후 사용자의 승인 후 접속하는 것이 바람직하다.

바코드를 인식하기 어려운 경우에는 직접 숫자를 입력하는 화면이 제공될 수 있다.

6) 증강현실 검색(App only)

증강현실 검색은 실시간 영상 위에 사용자에게 필요한 정보를 가상 이미지화하여 제공하는 방식이다.

영상화면, 검색할 정보를 설정할 수 있는 메뉴와 영상 위에 제공되는 이미지 아이콘 정보로 나눌 수 있다.

카메라를 비춰주기만 하면 자동으로 검색이 시작되어 별도의 검색 버튼을 제공할 필요가 없다.

검색 결과는 영상 위에 떠 있는 듯한 이미지로 제공되며 카메라의 방향에 따라 이미지의 위치가 변한다.

공간 확보를 위해 화면 전체를  하나의 콘텐츠 영역으로 활용하는  편이다.

7) 사진 검색

서적, 그림, 포스터, 주류 등을 촬영하고 사진을 분석한 정보 검색이 가능하다.

사물에 대한 기본 정보를 우선 제공한 후 더 자세한 정보를 찾아볼 수 있도록 통합검색화면(웹)으로 이동할 수 있는 기능을 제공한다.

2. Navigation

가. 기본원칙

1) 정보 구조의 단순화

정보 계층의 폭(width)은 계층의 최상위 단계에서 제공하는 옵션들의 수이며, 깊이(depth)는 계층 단계 수이다. 정보의 계층이 너무 깊다면 사용자는 다른 정보를 찾기 위한 이동방법이 복잡해지기 쉽다. 모바일은 3 depth 이상 깊이는 지양하고 화면 연결설계가 되어야 원하는 콘텐츠에 빠르게 접근할 수 있고 콘텐츠 추가도 용이하다.

나. 메뉴

1) Grid 형식 메뉴

비슷한 레벨의 콘텐츠를 아이콘화 하여 여러 개 배치할 경우 사용된다.

메뉴 정렬 순서는 좌측에서 우측, 위에서 아래 방향으로 배치된다. ①

2개 이상의 메뉴 페이지가 존재하는 경우 현재 메뉴 페이지의 위치와 전체 메뉴 페이지 개수에 대한 시각적인 단서를 제공한다. ②

2) List 형식 메뉴

각 메뉴마다 하위 콘텐츠를 대표하는 성격의 레이블이나 아이콘을 제공한다.

추가 메뉴에 대한 공간 제약이 덜하므로 확장성이 좋다.

각각의 메뉴는 상세 화면으로의 이동을 의미하는 시각적인 단서를 제공하거나 터치를 유도할 수 있도록 버튼 스타일로 제공하는 것이 바람직하다.

3) Bar 형식 메뉴

텍스트 형식의 메뉴표현으로 웹화면에서의 Global Navigation Bar와 유사한 형태의 내비게이션 바이다.

메뉴명을 가로로 배치한다.

모든 화면마다 고정된 메뉴영역을 제공해야 할 때 사용된다.

하나의 화면에서 레벨이 다른 메뉴간 이동이 가능하다.

콘텐츠 영역 확보를 위한 공간 제약 때문에 2 depth 이하의 정보 구조를 적용하는 것이 적합하다.

화면에 모든 메뉴명이 표현되지 못하였을 경우 숨겨져 있는 메뉴를  볼 수 있는 시각적인 단서를 제공한다.

4) Accordion 형식 메뉴

텍스트 형식의 메뉴표현으로 메뉴 목록을 접고 펼치는 방식을 적용한다.

화면에서 메뉴가 차지하는 영역이 크므로 보통 첫 화면에만 제공되는 편이다.

하나의 화면에서 레벨이 다른 메뉴간 바로 이동이 가능하다.

다. Location History

Location History 사용자의 현재 위치와 이전 경로를 함께 보여준다.

현재 위치를 기준으로 상위 메뉴까지 각각의 화면으로 바로 이동할 수 있는 링크 기능을 함께 제공하는 편이다.

화면 내에 고정적인 내비게이션 영역이 없거나 depth가 많은 메뉴 구조를 갖고 있을 때 적용된다.

주로 타이틀 영역 아래, 화면의 상단 영역에 위치한다.

라. 기타 화면 이동

1) 홈

어느 화면이라도 홈 화면으로 이동할 수 있어야 한다. 홈 버튼  또는 로고 영역 등 다양한 표현이 가능하다.

2) 페이지 내비게이션

페이지 단위별로 이동할 경우 사용된다.

일반적으로 콘텐츠 영역 하단에 제공한다.

3) 이전(뒤로)/상위

이전화면 이동은 브라우저나 디바이스에 기본적으로 제공될 수 있으나 상황에 따라 화면 내에 버튼 형식으로  제공한다.

4) 전체 메뉴/서비스

최상위 단계의 메뉴로 바로 이동할 수 있는 기능을 버튼 형식으로 제공하며 주로 상단에 배치한다.

홈 화면이 별도로 존재하지 않는 경우에 필수적으로 사용되어야 한다.

5) 맨 위(TOP)

현재 화면 내에서 상위로 올라갈 때 쓰이며 주로 하단에 배치한다.

전체 화면을 한눈에 보기 어려울 정도로 콘텐츠가 많은 화면에 주로 사용된다.

3. 제스처

1) 디바이스별 공통의 제스처 사용

제스처의 활용은 디바이스간  공통 지원되는 요소들로 개발해야 한다.

일반적인 제스처가 다른 의미로 사용되거나 이전에 사용되지 않았던 새로운 제스처를 사용하는 경우는 사용자가 그것을 유추할 수 있도록 보조적인 정보가 제공되어야 한다.

사용자가 예측하기 어려운 창의적인 제스처를 주요한 기능과 결합하는 것은 바람직 하지 않다.

특정 디바이스에서만 지원되는 제스처를 활용하는 경우, 그것을 보조적인 기능으로 제공하는 것은 가능하며  공통적인 제스처 만으로도  조작이 가능해야 한다.

Tap	컨트롤이나 항목을 고를 때 (마우스 한번 클릭과 같음)
Drag	화면을 스크롤 할 때
Flick	스크롤하거나 방향을 신속히 바꿀 때
Double tap	콘텐츠나 이미지 블록의 가운데를 더블탭하여 줌인 이미 줌인 된 것을 줌 아웃 할 때
Pinch open	줌인 할 때
Pinch close	줌아웃 할 때
Touch and hold	컨텍스트 메뉴 열 때 텍스트에서는 복사하기

제5장. UI 요소별 가이드

1. 타이틀

모바일 서비스 사용자 인터페이스 설계 가이드라인	제5장 UI요소별 가이드

정의

현재 화면에 대한 제목 영역이다.

적용가이드

항상 화면 상단에 나타나며 중앙 정렬 혹은 경우에 따라 왼쪽 정렬이 가능하다.

화면 타이틀 영역은 비교적 좁은 영역에 표현되므로 글자 수의 제한이 필요하다.

탭 형식으로 표현된 메뉴의 경우 선택된 메뉴표현으로 타이틀을 대신할 수도 있다.

화면 타이틀 영역만을 위해 한 줄을 할애하는 것은 권장하지 않는다.

가독성에 주의하여 표현한다. 장식적인 폰트나 현란한 컬러를 사용하여 명확함을 해치지 않도록 한다.

2. 메뉴

정의

메뉴는  사용자가 어느 화면에 있더라도 원하는 화면으로 쉽게 이동할 수 있도록 제공하는 콘텐츠 그룹이다.

적용가이드

각 메뉴 항목들은 하위항목이 서로 중복되지 않으며 명확하게 구분가능 해야 한다.

효율적이고 일관된 흐름을 위하여 메뉴 구조는 상하구조를 계층적으로 조직화한다.

메뉴는 고정된 위치에 일관성 있게 배치하며 한눈에 파악할 수 있도록 간단명료하게 제공한다.

메뉴는 본문 내용과 구분되어 터치 가능한 요소임을 시각적으로 구분할 수 있도록 스타일을 명확하게 정의한다.

메뉴를 조작할 때 메뉴의 선택한 상태나 이동 후 결과화면의 변화가 확실하게 반영되어야 한다.

화면에서 메뉴 영역이 본문 영역보다 큰 비중을 차지하는 것은 권장하지 않는다.

(메뉴의 레이아웃은 UI 패턴별 가이드 참조)

3. 탭바

정의

탭바는 복수개의 메뉴를 선택할 때 사용하는 컴포넌트이다.

적용가이드

1개의 메뉴로 이루어진 탭을 타이틀 표현으로 사용하는 것은 바람직하지 않다.

탭은 최대 4개를 넘지 않는 것이 좋으며 5개 이상으로 표현할 때는 5번째 버튼에 more버튼을 사용하여 접혀진 메뉴로 제공하거나, 리스트 메뉴의 형태로 표현하는 것이 좋다.

탭은 선택된 탭과 비선택 탭의 시각적 형태를 달리하여 선택된 탭을 확연히 구분할 수 있도록 해주어야 한다.

태블릿의 경우 4개 이상의 표현이 가능하나 너무 많은 탭을 넣는 경우 복잡성을 증가시키므로 7개 이하를 권장한다.

탭바는 디바이스의 방향을 바꾸어도 개수나 스타일 표현이 달라지지 않아야 한다.

탭바의 타이틀에 아이콘을 사용하는 경우 아이콘과 텍스트를 함께 제공해 주어야 한다.

4. 버튼

정의

버튼은 액션이나 내비게이션을 위해 사용하는 컴포넌트이다.

적용가이드

버튼은 터치 가능한 최소영역 40*40 Pixel 이상의 크기로 제작되어야 한다.

버튼을 탭했을 때는 시각적으로 적절한 피드백을 제공해 주어야 한다.

중요한 버튼의 경우 크고 잘 보이는 위치에 표현한다.

버튼명은 가능한 짧고, 직관적으로 의미전달이 가능해야 한다.

버튼명은 한글을 기본으로 한다.

버튼의 레이블은 영문명을 제외하고는 붙여 쓰기 하는 것이 좋다. (예: 신청서 작성 □ 신청서작성)

버튼의 텍스트는 충분한 가독성을 확보할 수 있는 크기로 제공되어야 한다.

버튼의 형태는 클릭 가능한 상태로 보여야 한다.

버튼은 Default, Disabled, Focused, pressed 4가지 상태를 가진다. (터치스크린 화면에서는 focused 상태의 동작이 안 됨)

버튼의 정렬은 화면의 중앙이나 우측 정렬이 가능하며 전체사이트에 페이지별로 일관된 규칙성을 가지는 것이 좋다.

버튼의 배치는 중요한 순으로 좌측에서 우측으로 배치하는 것이 좋다.

CSS3를 지원하는 단말의 경우 기존에 이미지를 이용해야만 가능했던 Gradient, DropShadow, Round Corner 같은 효과들을 태그를 이용하여 만들 수 있으며, 이 기능들을 이용하면 불필요한 이미지 사용을 줄일 수 있다.

액션의 결과가 부정적 영향을 미칠 수 있는 버튼들은 색상을 달리하여 표현해 주고 다시 한 번 확인하는 절차를 두는 것이 좋다. (예: 전체삭제 버튼 등)

현재 화면에서 선택이 가능한 버튼과 불가능한 버튼은 명확히 구분되도록 한다.

5. 폰트 & 레이블링

적용가이드

제조사 디바이스별  Default로 제공되는 폰트가 다르기 때문에 가능하면 디바이스별 기본폰트를 사용하는 것을 권장한다.

같은 플랫폼에서 제공하는 폰트라도 버전에 따라 기본 자간과 볼드처리 가능여부 등의 차이가 있으므로 가능하면 다양한 디바이스 환경에서 테스트하는 것이 바람직하다.

모바일 기기의 특성상 사용자가 임의로 폰트의 크기나 서체를 바꿀 수 있다는 점을 감안하여야 한다. (iPhone은 설정 불가)

모바일 디바이스의 PPI는 PC모니터의 PPI보다 높기 때문에 같은 크기의 폰트를 적용하면 모바일에서는 더 작게 보인다는 점을 고려해야 한다. 따라서 최소 14PX 이하의 폰트 사이즈는 지정하지 않을 것을 권장한다.

사용자가 반드시 읽어야 하는 내용의 콘텐츠는 본문텍스트 폰트확대 기능을 추가적으로 제공해 주는 것이 좋다.

폰트의 색상은 바탕색과 명도대비를 크게 하여 명확히 구분될 수 있도록 한다.

여러 줄의 콘텐츠는 충분한 줄 간격을 확보하여야 가독성을 해치지 않는다.

레이블링은  제한된 공간 안에 제공해야 하므로 최대한 간략하게 표현해야 한다.

레이블링은 한글표기를 기본으로 하며 고유명사의 경우 영문 그대로 표기한다. (News(x), 뉴스(o))

레이블링은 명사형이나 동사의 명사형, 수식어와 명사형으로  한다. 서술적인 표현이나  형용사는  레이블링으로 적합하지 않다.

6. 스크롤

정의

스크롤은 콘텐츠의 내용이 현재 화면보다 더 길거나 넓은 경우 현재 위치를 표시하기 위한 컨트롤이다.

적용가이드

화면의 우측이나 하단에 바 형태로 나타난다.

기본스크롤이 나타나게 하는 것을 기본으로 한다.

스크롤은 세로 스크롤이나 가로 스크롤 중 한쪽 방향만 나타나게 하는 것이 바람직하다.

화면의 부분에만 스크롤이 나타나게 하는 경우 전체 스크롤과 중복되어 나타나게 되면 동작이 어려우므로 권장하지 않는다.

7. 컬러

적용가이드

일반적으로 컬러는 아이덴티티의 중요한 역할을 수행하게 된다.

아이덴티티의 일관성 유지를 위하여 모든 페이지에 발생하는 이미지 요소는 컬러의 구성 및 적용범위를 규정하여 적용하거나 응용하여 사용하도록 한다.

컬러시스템 적용이 어려운 사진 이미지는 컬러 시스템의 적용 범위에서 제외하도록 한다.

필요 시 특별한 주제의 강조나 특별한 콘텐츠 내용의 표현을 위하여 특수한 컬러를 도입하여 사용할 수 있도록 한다.

시각적인 피로도가 높은 컬러의 사용은 자제하도록 한다.

텍스트 색상은 배경색과 충분한 대비를 두어 글자가 눈에 잘 들어오도록 한다.

본문 내용이 들어가는 영역의 배경에는 패턴이나 텍스쳐 적용을 자제한다.

너무 다양한 색상을 적용하면 시선이 분산되어 혼란스러우므로 색상 가지 수를 제한한다.

8. 페이지 표현

정의

페이지 Indicator는 얼마나 많은 화면이 있고 현재 보여지는 것은 어떤 페이지인지 보여준다.

적용가이드

페이지 순서는 왼쪽에서 오른쪽 순으로 표현된다.

현재 선택된 페이지에 대해서는 시각적인 차별화를 통해 명확히 구분되도록 해야 한다.

사용자는 좌우 버튼이나 페이지를 직접 탭하여  내비게이션 할 수 있다.

화면이 동등한 레벨일 때 표현할 수 있는 방법이며, 계층구조를 보여주기에는 적합하지 않다.

Dot으로 표현된 페이지 Indicator는 제한된 수의 페이지만을 표현할 수 있다.

더 많은 페이지를 표현해야 하는 경우는 숫자로 표현된 페이지 내비게이션을  활용하는 것을 권장한다.

페이지 Indicator처럼 사용자가 작은 영역을 탭하는 경우는 좌우 여백을 충분히 확보하여야 오작동을 줄일 수 있다.

9. 팝업

정의

팝업은 현재의 창에서 처리할 수 없는 독립된 내용을 추가적인 창을 띄어서 보여주기 위해 사용된다.

적용가이드

모바일에서 불필요한 팝업은 최대한 사용을 자제하는 것이 좋다.

선택이나 확인 창을 과도하게 사용하지 않아야 한다.

태블릿에서는 내비게이션이 보조적 기능으로 팝오버를 사용할 수 있다. (Ipad App only). 팝오버는 필요에 따라 두 가지로 사용된다.

모달 팝오버(Modal popover) : 팝오버의 주변영역을 어둡게 처리한 경우로 다른 태스크를 하기 위해서는 반드시 현재 창의 과업을 종료해야만 하는 경우이다. 사용자의 주의를 요구하는 상황에 사용한다.

넌모달 팝오버(Non modal popover) : 팝오버 주변을 어둡게 하지 않은 경우로 팝오버 외의 다른 영역을 탭해도 해지 가능하다.

10. 피드백

정의

사용자가 터치 조작을 하는 경우 시각적 요소와 진동, 사운드 등으로 피드백을 제공한다.

적용가이드

단말기 설정으로 진동 피드백 및 사운드 피드백의 사용여부를 조절할 수 있다.

사운드 피드백 설정 시에도 경고메시지를 음성으로만 출력하는 형태는 알아차리지 못해 실수를 유발하게 되므로 시각적 피드백을 함께 제공하는 것이 좋다.

피드백은 사용자 터치 시 나타나며 Default 상태에서는 적용되지 않은 상태여야 한다.

트랙볼을 사용하는 단말기의 경우는 해당메뉴에 포커스 시 지정된 시각적 피드백과 진동, 사운드 피드백을 사용할 수 있다.

탭을 하는 동안 선택영역의 포커스컬러를 변화시켜 롱 탭에 대한 힌트를 줄 수 있다.

데이터를 로딩하고 있을 때 현재 진행 중이라는 신호를 사용자에게 제공한다.

11. 체크박스 & 라디오 버튼

1) 체크박스

정의

체크박스는 여러 개가 메뉴 중 복수선택이 가능할 때 사용되는 컨트롤이다.

적용가이드

Default 상태에서는 아무것도 선택되지 않은 상태로 나타나야 한다.

체크박스를 탭하면 V마크로 표현되며, 기선택된 체크박스를 터치하면 사라진다.

전체선택, 전체해제가 필요한 경우는 상단영역에 해당 버튼을 두어 컨트롤 하도록 한다.

너무 많은 선택 항목을 제시하여 스크롤영역 하단으로 내려가는 것은 사용성을 저하시키므로 항목을 최소화 하는 것을 권장한다.

2) 라디오 버튼

정의

라디오 버튼은 여러 개의 메뉴 중에서 하나의 메뉴만 선택 가능할 때 사용되는 컨트롤이다.

적용가이드

현재 설정 값을 Default 상태에 선택된 상태로 나타난다.

라디오 버튼은 선택 항목을 한 화면에 표시해야 한다.

선택되지 않은 라디오 버튼을 탭하면 해당 버튼이 체크되고 기 선택된 버튼은 자동으로 해제된다.

라디오 버튼 조작 후 저장 버튼을 두지 않아도 자동으로 저장되도록 한다.

12. 아이콘 & 이미지

적용가이드

아이콘은 텍스트 레이블을 사용하기에 공간이 좁거나 아이콘으로 의미전달이 더 명확할 때 사용한다.

이미지 사용은 가능한 최소한의 요소만을 적용하여 경량화된 디자인을 제공하는 것이 좋다.

이미지 포맷은 PNG, JPG, GIF 포맷을 권장한다.

PNG 포맷은 바탕이 투명한 이미지가 필요할 때 적용할 수 있으나, JPG, GIF 포맷에 비해 이미지 용량이 커진다는 단점이 있다.

JPG 포맷은 큰 이미지나  배경이미지로 적용할 수 있으며, 용량의 압축이 가능한 것이 장점이다.

GIF 포맷은 작은 이미지나 불릿에 적용하면 좋다.

아이콘과 이미지는 서비스의 Look&Feel을 형성하는 요소이므로 각 서비스의 정체성(Identity)을 살려 제작한다.

아이콘 제작 시 사용자가 내용을 직관적으로 식별할 수 있는 메타포를 사용해야 한다.

아이콘은 전체 디자인과 조화를 이룰 수 있도록 디자인 되어야 한다.

여러 개의 아이콘이 사용되는 경우, 아이콘들 간의 스타일과 크기의 일관성을 가지도록 제작한다.

간결하게 표현하며 작은 이미지에 과도한 장식이나 여러 가지 컬러를 적용하지 않는 것이 좋다.

타인의 저작권을 침해하는 사진 이미지나 아이콘은 사용하지 않는다.

공공서비스의 다양한 사용자의 이해를 높이기 위해서 아이콘은 가능하면 텍스트 레이블과 함께 사용하는 것을 권장한다.

13. 입력폼

정의

사용자가 화면 내 키보드를 이용하여 정보를 넣는 영역이다.

적용가이드

모바일은 일반 PC보다 상대적으로 입력방식이 어려우므로, 사용자가 입력하는 화면은 되도록 자제하며, 불가피하게 입력화면이 필요할 경우 항목을 단순화하고 한 화면에 제공하는 입력 항목이 길어지지 않게 여러 단계를 나누어서 입력하도록 한다. 입력화면에서는 스크롤 사용을 자제한다.

직접 입력보다는 사용자에게 옵션을 보여주어 선택하는 방식을 제공하는 것이 바람직하다. 빈도수가 높은 옵션이나 최근에 사용한 옵션이 디폴트 상태가 되도록 한다.

필요한 입력 콘텐츠가 일반 웹에 존재할 경우 PC버전을 사용하도록 유도한다.

14. 사용자 안내문 규정

정의

사용자 안내문은 페이지나 해당영역의 사용방법에 대한 보조적인 정보를 제공한다.

적용가이드

최대한 적은 텍스트 량으로 내용을 전달할 수 있도록 한다.

서비스 내에서 폰트종류, 크기 등의 스타일표현과 어휘의 일관성을 유지한다.

사용자가 이해하기 어려운 전문적 용어나 약어의 사용은 피하는 것이 좋다.

반말이나 명령조의 표현을 피하며, 경어체의 완곡하고 공손한 뉘앙스의 어휘를 사용한다. (확인하세요(x), 확인해주십시오(O))

표준어를 사용하며 인터넷에서 사용되는 비속어나 어문규범을 파괴하는 약어, 이모티콘의 사용은 금한다. (암튼, ^^ 등)

기능 관점이 아닌 사용자 관점에서 작성해야 한다. (저장되었습니다(X), 저장하였습니다(O))

미래형 문장에서는 “~합니다”를 사용한다. (저장하겠습니다(x), 저장합니다(O))

구분	종결형	예시문구
요청/권유형	~해 주십시오.	내용을 입력해 주십시오. 예약시간을 다시 확인해 주십시오.
정보전달형	~습니다. ~합니다.	등록된 내용이 없습니다. 검색된 결과가 없습니다. 내용을 저장합니다. 숫자만 입력 가능합니다.
확인/피드백	~습니까? 습니다.	수정을 취소하시겠습니까? 삭제하시겠습니까? 최소신청을 완료하였습니다.

15. 동영상/멀티미디어

적용가이드

GIF Animation과 Flash의 경우 플랫폼별로 지원하지 않는 경우가 많으므로 사용을 지양한다. 애플 계열의 제품들은 Flash를 지원하지 않고 있으며 안드로이드도 상위 버전에서만 지원이 가능하다.

동영상과 음악은 각 OS에서 제공하는 플레이어(player)를 활용하여 재생할 수 있다.(App only)

동영상 정보는 대체 텍스트 또는 설명 글을 같이 제공한다.

OS(플랫폼)	브라우저	Flash	GIF Animation	멀티미디어
Android (v2.2)	Chrome	O	O	MP4, AVI, WMV, ASF (디바이스별로 다름)
iOS	Safari	X	X	MP4

16. 사운드

정의

일반적으로 사운드는 서비스의 기능을 강화하고 보다 풍부한 체험을 가능하게 한다.

시각장애인을 위한 보이스오버(Voiceover) 기능은 서비스이용을 위한 핵심 기능이다. (2011. 8월 현재는 iOS only)

사운드는 녹음기능과 결합하여 활용할 수도 있다.

적용가이드

사용자가 기대하지 않았던 순간에 사운드를 제공함으로써 놀라게 하는 것은 피하는 것이 좋다.

특정 컨트롤에 대한 피드백 등의 사운드 적용은 전체 페이지에 일관성 있게 적용하여야 한다.

서비스 배경음으로 사운드를 제공할 때에는 볼륨을 조절할 수 있는 컨트롤을 함께 제공하는 것이 좋다.

사용자가 하드웨어의 버튼조작으로 언제든 사운드를 무음 처리할 수 있으므로 음악, 악기를 제외한 서비스의 경우는 사운드를 제외하고도 사용이 가능하도록 보조적 기능으로 제공하는 것이 좋다.

기기가 무음처리 되어 있는 상황에 진동을 발생시킬 것인지 여부를 결정해야 한다.

멀티태스킹이 가능한 디바이스에서는 여러 가지 서비스를 동시에 할 수 있다는 점을 고려해야 한다. 따라서 사운드를 적용할 때는 어떠한 기능과 충돌이 될 때 작동을 멈출 것인가를 정의해야 한다(예: 전화가 왔을 때 등). 그렇지 않은 경우 두 가지 사운드가 중복되어 재생될 수도 있다.

17. 트랜지션 효과

정의

앱 내비게이션 시 화면전환의 애니메이션 효과를 의미한다.

애니메이션 효과를 활용하게 되면 전환되기 이전 화면과 이후 화면의 관계를 이해하기 쉽게 하며, 아날로그적 동작으로 현실 속에서의 느낌을 제공하여 친숙한 느낌을 제공할 수 있다.

적용가이드

각 디바이스별로 표현의 차이는 있으나 아래 효과를 단독 혹은 조합하여 적용할 수 있다.

Slide : 화면이 평면상에서 이동하여 다음 화면으로 이동함. 좌우측으로 이동하거나, 상하로 이동이 가능 (예 : 화면 전환 시 가장 많이 사용)

Scale : 컴포넌트의 크기가 점점 작아지거나 커짐 (예 : 컨텍스트(Context) 메뉴, 위젯실행 등에 사용)

Zoom : 화면의 크기가 커지거나 작아짐 (예 : 위젯 또는 앱 실행, 썸네일 선택 등)

Fade in/Fade out : 화면이나 컴포넌트의 투명 값이 감소하거나 증가함 (예 : 화면전환 원근감 표현 시)

Rotate : 컴포넌트나 화면을 회전시킴 (예 : 가로세로 화면 전환 시)

3D화면 : 화면의 XY축 중심으로 회전시켜 원근을 나타내도록 보여줌 (예 : 썸네일 이미지를 입체감 있게 내비게이션 할 때)

Blur : 컴포넌트나 화면을 흐릿하게 만듦 (예 : 팝업알림의 후면(back) 이미지)

Reflection : 컴포넌트가 바닥에 반사되는 모습 (예 : 썸네일 이미지 표현 시)

18. Progress bar / Progress indicator

1) 프로그래스 바

정의

프로그래스 바는 작업의 진행을 나타내는 바 형태의 컨트롤이다.

데이터의 다운로드나 전송 시에 완료시간을 예측할 수 있는 상황에 사용한다.

적용가이드

프로그래스 바는 좌에서 우측 방향으로 진행한다.

여러 개의 작업이 순차적으로 진행되는 경우 프로그래스 바는 각 작업당 1회씩 나타난다.

작업시간이 2초 미만인 경우는 프로그래스 바를 생략할 수 있다.

진행 중 취소 버튼을 함께 제공할 수 있다.

2) 프로그래스 인디케이터

정의

프로그래스 인디케이터는 콘텐츠가 로딩될 때 완료시점을 예측할 수 없는 상황에 진행 중인 상태를 보여주는 컨트롤이다.

적용가이드

콘텐츠 영역에서 이미지 등 로딩시간이 오래 걸리는 이미지가 있는 경우 텍스트를 먼저 표시하고 Progress indicator를 사용하는 것이 좋다.

프로그래스 인디케이터는 사용자와 상호작용하지 않는다.

19. 드롭다운 / 픽커

정의

두 가지 모두 선택 가능한 여러 항목 중 하나를 선택할 때 사용하는 컨트롤이다.

적용가이드

옵션 바나 콘텐츠 영역을 탭하면 하단에 나타난다.

현재 설정 값과 선택할 수 있는 다른 항목을 보면서 선택할 수 있다.

탭 조작을 통해 콘텐츠를 선택하면 드롭다운이나 픽커가 닫히지 않은 상태에서 선택 항목에 선택된 내용이 표기된다.

드롭 박스 선택항목이 많은 경우 박스 안에 스크롤이 생겨 하단으로 메뉴가 나타날 수 있다.

제6장. 모바일 사용성 체크리스트

모바일 서비스 사용자 인터페이스 가이드라인	제6장 모바일 사용성 체크리스트

1. 발주자용 체크리스트

발주자용 체크리스트는 사업을 주관하는 부서에서 개발업체가 본 가이드를 잘 준수하여 개발하였는지 검토할 수 있는 도구로써 활용가능하다.

발주자용 체크리스트에서 필수사항은 반드시 Yes 항목이 체크되어야 하며, 필수사항의 미적용 시 서비스 오픈 전 반드시 수정절차를 거쳐야 한다. 발주자가 직접 확인하기 어려운 개발 관련 항목들은 개발자와 함께 체크하는 것이 가능하다.

항목	문항	필수 여부	검수결과 Yes/NO	NO체크시 사유
환경정의	사용자의 범위와 특징, 사용 환경이 명확히 정의되어 있는가?	필수
	서비스의 목적과 성격이 명확히 정의되어 있는가?	필수
크로스 브라우징 (App은 예외)	3가지 이상의 브라우저에서 테스트 하였을 때 동일하게 동작하는가?	필수
	화면의 크기가 다양한 해상도에 유동적으로 맞도록 지원되고 있는가?	필수
	최신 디바이스 뿐 아니라 하위버전 디바이스에서 테스트 하였을 때에도 동일하고 보여지고 동작하는가?	필수
	GIF애니메이션, 플레쉬의 사용을 제한하고 있는가?	필수
	특정한 디바이스에서만 지원하는 제스처나, 기능에 의존하지 않고 모든 브라우저에서 동일한 경험을 제공하는가?	필수
사용성	각 단계마다 사용자의 실수를 되돌릴 수 있는 기능이 제공되는가?	필수
	계층의 위계구조가 좁고 깊은 구조보다는 넓고 얕은 구조를 가지고 있는가?	선택
	사용자에게 최소한의 입력을 요구하는가?	선택
	화면에서 선택 가능한 것과 불가능한 것은 시각적으로 명확하게 구분되는가?	필수
접근성
	사용자가 현재 브라우징 하고 있는 페이지를 유추할 수 있는가?	필수
	동영상 및 시청각 멀티미디어 콘텐츠에는 텍스트 자막이 제공되고 있는가?	필수
	서비스는 음성기능을 배제하고도 사용할 수 있는가?	필수
	화면에서 색상을 배제하고도 원하는 내용전달이 가능한가?	필수
	중요한 콘텐츠의 경우 텍스트 확대기능을 제공하고 있는가?	선택
	영어나 전문용어에 대한 이해수준이 낮은 사용자도 이해하기 쉬운 용어를 사용하고 있는가?	필수
	웹표준을 준수하여 개발하였는가?	필수
	모든 이미지에 대체텍스트가 제공되고 있는가?	필수
	깜박이는 콘텐츠가 있는 경우 제어할 수 있는 기능을 제공하고 있는가?	필수
디자인	컬러, 폰트, 이미지 요소들은 페이지별로 일관된 스타일을 유지하는가?	선택
	로딩속도 등에 지장을 주지 않는 경량화된 이미지를 제공하고 있는가?	필수
	적용된 이미지는 타인의 저작권 초상권의 침해소지가 없는 이미지를 사용하고 있는가?	필수
	적용된 아이콘은 사용자가 직관적으로 이해할 수 있는 메타포를 적용하고 있는가?	필수
	이미지와 배경의 대비가 명확하여 구분하기 쉬운가?	필수
UI요소 적용	레이아웃은 페이지별로 일관성을 유지하고 있는가?	선택
	세로화면의 가로회전시 동일한 레이아웃과 맥락을 유지하는가?	필수
	내비게이션 버튼과 조작방식은 전체페이지에 일관되게 적용되어 있는가?	필수
	버튼의 크기는 최소 40*40PX이상으로 적용되어 있는가?	필수
	버튼명은 명사형으로 직관적으로 이해하기 쉬운가?	필수
	불필요한 팝업을 제한하고 있는가?	필수
	화면에 적용된 텍스트는 60대 이상의 노인들이 읽기에도 충분한 가독성을 제공하고 있는가? (대국민서비스only)	필수

2. 사용자용 체크리스트

사용자용 체크리스트는 서비스의 사용자를 대상으로 서비스의 사용성 관련 만족도를 측정해 볼 수 있도록 하는 도구로서 사전에 발주자와 개발자간의 목표점수를 정의하고 목표점수 이하의 서비스는 반드시 개선절차를 거쳐 오픈하도록 하는 것이 좋다.

사용자용 체크리스트는 서비스 대상 중 대표성을 가지는 최종사용자 5인 이상의 점수를 합산하여 평가한다. 단 대국민서비스의 경우 60대 이상의 노인사용자가 1명 이상 포함 되는 것이 좋다.

문항	점수
1.전혀 그렇지 않다. 2.그렇지 않은 편이다. 3.보통이다. 4그러한 편이다. 5.매우 그렇다.
제공되는 서비스를 사용설명서 없이 사용할 수 있는가?	1 2 3 4 5
원하는 콘텐츠까지 최소한의 탭으로 이동이 가능한가?	1 2 3 4 5
사용 중 실수를 되돌릴 수 있는 기능이 제공되고 있는가?	1 2 3 4 5
불필요한 입력을 요구하지 않는가?	1 2 3 4 5
제공되는 서비스는 성격이 일관되며 간략한 느낌을 주는가?	1 2 3 4 5
내용을 찾기 위해 깊이 찾아들어가지 않아도 되도록 정보의 접근이 쉬운가?	1 2 3 4 5
메뉴항목들이 기억하기 쉽게 설계되어 있는가?	1 2 3 4 5
내용을 인지하는 속도와 비교하여 적당한 반응속도를 제공하는가?	1 2 3 4 5
현재 브라우징 하는 페이지가 어떤 페이지인지 유추할 수 있도록 되어있는가?	1 2 3 4 5
화면에서 선택 가능한 것과 불가능한 것은 시각적으로 명확히 구분되는가?	1 2 3 4 5
화면의 텍스트는 읽기에 충분한 크기로 제공되고 있는가?	1 2 3 4 5
적용된 디자인은 전체적으로 조화로우며 기능에 잘 부합하는가?	1 2 3 4 5
적용된 아이콘은 직관적으로 이해할 수 있는 메타포를 적용하고 있는가?	1 2 3 4 5
이미지와 배경의 대비가 명확하여 내용을 구분하기 쉬운가?	1 2 3 4 5
사용자 안내문은 공손한 느낌을 주는가?	1 2 3 4 5
사용된 용어는 충분히 이해하기 쉬운 용어를 사용하고 있는가?	1 2 3 4 5
링크된 메뉴들은 해당 화면을 유추할 수 있도록 되어 있는가?	1 2 3 4 5
터치반응영역은 적절한 크기로 제공되어 터치하기 쉬운가?	1 2 3 4 5
계