모바일 서비스 사용자 인터페이스 설계 지침

모바일 서비스 사용자 인터페이스 설계 지침

이 지침은「전자정부법」제50조에 따라 국가기관, 지방자치단체 및 공공기관이 모바일 서비스를 구축하는 경우 효율적인 정보 전달이 가능하게 하기 위하여 사용자 인터페이스 설계에서 지켜야 할 세부 사항을 규정하는 것을 목적으로 합니다.

1. 사용자 경험에 초점을 맞춘다.
2. 소수의 핵심기능에 집중한다.
3. 디바이스의 호환성, 확장성을 고려한다.
4. 정보소외계층의 접근성을 고려한다.
5. 웹표준을 준수하여 개발한다.
6. 일관성을 유지한다.
7. 이미지를 제한적으로 사용한다.

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

• 사용자가 서비스를 사용하는 목적과 상황을 이해한다.
• 사용자가 설명서 없이 쉽게 사용할 수 있어야 한다.
• 사용자의 잠재적인 실수를 고려해야 한다.
• 항상 훌륭한 기술이 사용자의 만족도를 높이는 것은 아니다.
• 아름다운 디자인만이 최선인 것은 아니다.
• 모바일 사용성의 특징을 이해한다.

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

• 간략해야 한다.
• 모바일에 최적화된 사용자 경험을 제공한다.
• 목적을 분명히 한다.

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

• 3개 이상의 브라우저(Browser)에서 동일하게 작동하도록 설계한다.
• 화면의 크기는 320*480을 최소 크기로 하여 확장성을 고려한다.
• 특정한 플랫폼에만 작동하는 기능에 의존하지 않는다.

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

• 다양한 조건의 환경과 사용자가 사용할 수 있어야 한다.
1. 어린이 : 모바일을 처음 사용하거나 경험치가 낮아 활용능력이 떨어짐.
2. 노인 : 모바일 기기를 처음 사용하거나 자주 사용하지 않아서 사용하는 능력이 떨어짐.
3. 시각장애, 저시력 : 시력이 낮은 사용자로 작은 폰트의 사용을 제한
4. 색맹 : 색에 대한 구별이 어려운 사용자로 색상에 의해 내용을 구분하는 콘텐츠 사용을 제한
5. 전맹 : 시력이 전혀 없고 청력에 의존하는 경우로 특정 디바이스에서만 음성기능을 이용하여 사용가능
6. 청각장애 : 멀티미디어 콘텐츠의 음성을 인지할 수 없으므로 자막이나 대체 텍스트를 제공
7. 기타장애 : 광발작성 장애는 주파수 범위가 3hz에서 49hz인 경우 깜박임이 포함된콘텐츠에 발작을 일으킬 수 있음
• 접근성을 위한 아래 지침을 준수하여 개발한다.
1. 동영상 등 시청각 멀티미디어 콘텐츠는 자막이 제공되어야 한다.
2. 정보가 있는 이미지를 배경화면으로 사용하지 않아야 한다.
3. 색상으로 표현된 정보는 색상을 배제하여도 원하는 내용을 전달할 수 있어야 한다.
4. 텍스트는 충분히 읽을 수 있는 크기로 제공되어야 한다.
5. 주요내용의 콘텐츠의 경우 본문텍스트의 확대기능을 제공하는 것이 바람직하다.
6. 깜박이는 콘텐츠는 최대한 사용을 자제하고 불가피하게 이를 사용할 경우 이에 대한 제어 기능을 제공해야 한다.
7. 불필요한 팝업의 사용을 최대한 자제한다.
8. 링크 텍스트에 연결되는 페이지를 유추할 수 있는 정보를 제공해야 한다.
9. 어휘나 단어의 선택은 사용자의 입장에서 이해 가능한 것으로, 사용자가 알고 있는 전문적 수준을 고려하여 제공해야 한다.
10. 실시간으로 내용이 갱신되는 콘텐츠는 짧은 시간에 이것을 판독하지 못하는 사용자를 위하여 이전, 다음, 정지 버튼을 제공하는 것을 권장한다.



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

• HTML/CSS/Javascript 소스를 분리하여 개발한다.
1. 유효한 마크업(Mark Up) : 표준 문법에 유효한 마크업 언어(Markup Language)로 문서를 작성한다.
2. 스타일 시트 : 레이아웃과 형식의 설계는 스타일 시트를 사용하여 스킨적용이 가능하게 한다.
3. 테이블 속의 테이블 비사용 : 테이블 내에 또 다른 테이블을 포함하지 않는다.
4. 테이블 레이아웃 비사용 : 테이블을 이용하여 레이아웃을 구성하지 않는다.
5. 여백에 그래픽 비사용 : 여백 공간에 그래픽을 사용하지 않는다.
6. 프레임 비사용 : 프레임을 사용하지 않는다.



일관성을 유지한다.

• 스타일의 일관성을 유지한다.
1. 컬러, 폰트, 이미지 요소들의 스타일의 일관성을 유지하는 것은 해당 서비스에 대한 정체성(Identity)을 형성하는데 도움을 준다.
2. 모바일 화면에서 사용된 아이콘은 항상 같은 의미로 사용되어야 하며 사용자가 관습적으로 알고 있는 정보와 일치하도록 하는 것이 좋다. 관습적인 아이콘의 의미를 다르게 적용할 경우 사용자에게 혼란을 야기할 수 있다.
3. 세로모드에서 가로모드로 전환되었을 때 동일한 레이아웃과 스타일을 유지할 수 있도록 하는 것은 사용자의 혼란을 줄이고 일관된 맥락에서 서비스를 이용할 수 있도록 돕는다.
• 용어사용의 일관성을 유지한다.
1. 서비스 내의 레이블링 체계는 일관된 표준에 의해 제공되어야 한다.
2. 정의된 사용자군의 연령 및 전문용어에 대한 이해수준을 기초로 하여 사용되는 어휘의 수준을 일관되게 유지해야 한다.
3. 화면에 나타나는 하나의 버튼은 항상 같은 의미로 사용되어야 한다.
• 조작방식의 일관성을 유지한다.
1. 한 서비스 안에서의 내비게이션 버튼이 나타나는 위치와 조작방식, 피드백은 항상 일관된 형식으로 제공되어야 한다.



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

• 경량화된 이미지를 사용한다.
1. 이미지 사용 시 데이터 량을 고려하여 경량화된 디자인을 제공해야 한다. 이미지의 데이터 량이 클 경우 화면의 렌더링 속도를 저하시킬 수 있으며, 사용자에게 불필요한 데이터 사용요금을 발생시킬 수 있다.
• 비윤리적 이미지를 사용하지 않는다.
1. 이미지 적용이 성적 표현이나, 특정 종교나 인종, 여성의 비하 등 사회적 갈등을 유발할 수 있는 이미지는 사용을 금한다.
• 색상과 그래픽에 의존한 서비스를 제공하지 않는다.
1. 색상과 그래픽에 의존한 서비스는 장애인의 접근성을 떨어뜨린다.
2. 색상의 표현은 디바이스별로 다르며, 색상능력이 뛰어난 기기라도 밝은 곳에서는 잘 안보일 수 있다.
3. 이미지를 적용할 때 모든 이미지에는 대체 텍스트(Alt text)를 제공해야 한다.
• 이미지의 저작권을 확보한다.
1. 적용 이미지나 아이콘의 저작권 유무를 확인하고 저작권이 확보되지 않은 이미지를 무분별하게 사용하지 않아야 한다.
2. 이미지의 콘텐츠가 개인의 초상권이나 프라이버시를 침해하지 않도록 한다.

image 출처 : dribbble