문서번호	전산정보과-11018
결재일자	2018.11.12.
공개여부	부분공개(5)
방침번호

			시 민
★주무관		전산정보과장	요금관리부장
이은주		한병주	11/12 조세연
협조
	주무관		오경미

사이버고객센터 디자인 개편 결과보고

2018. 11. 12.

요금관리부

(전산정보과)

사이버고객센터 디자인 개편 결과보고

모바일 사용자 가독성 제고를 위해, 단말기 크기에 맞춰 최적화된 화면을 제공하는 반응형 웹 기술을 적용하여 디자인을 개편하고 그 결과를 보고 드림

Ⅰ		서비스개요

□ 서비스명: 아리수 사이버고객센터

□ 접속주소: http://i121.seoul.go.kr

□ 주요 서비스: 요금조회, 민원신청, 이사정산, 자가검침, 요금 관련 정보제공

□ 회원 수: 29,918명

□ 방문 수: 월평균 53,647회, 일평균 1,765회(2018년 기준)

Ⅱ		추진개요

□ 대    상: 메인화면 및 서브화면 등 64개(민원신청 내부 화면 제외)

민원신청 화면은 대민용 고객지원시스템 페이지를 호출하여 보여주는 부분으로,
고객지원시스템 재구축 서비스 개시 시 연계 예정 (임시 비반응형 웹 유지)

□ 추진기간: 2018. 4 ~ 11월(8개월)

□ 추진내용

- 홈페이지 이용현황 및 웹서비스 동향 분석

- 원하는 서비스를 쉽게 찾을 수 있도록 메인화면 디자인 재구성

- PC, 태블릿, 휴대폰에서 이용 가능하도록 반응형 웹 기술 적용

□ 소요예산: 비예산(2018년 요금관리시스템 유지관리사업에 포함)

Ⅲ		세부 추진내용

□ 이용현황 및 동향 분석

- 홈페이지 이용현황 분석 (※ 출처: 서울시 웹로그 분석툴. 2017년 이전 자료 없음)

‧ 접속 단말기 현황

접속 단말기	서울시청 홈페이지		사이버고객센터
	2017년	2018년	2017년	2018년
PC	65.33 %	56.83 %	79.48 %	72.35 %
모바일 단말기	31.38 %	35.26 %	19.12 %	22.01 %
알 수 없음	3.29 %	7.91 %	1.4 %	5.64 %

분석결과	○ 2017년도 대비 2018년도 모바일 단말기 사용자가 늘고 있음. ○ 모바일용 화면을 제공하는 서울시청 홈페이지에 비해, 사이버고객센터 홈페이지의 모바일 단말기 접속 비율이 낮음. ⇒ 모바일 사용자를 위한 화면 제공 필요

‧ 자주 찾는 메뉴 현황

메뉴 명	조회 비율	메뉴 명	조회 비율
요금조회	30 %	자가검침	7 %
민원신청	9 %	이사정산	3 %
요금계산	8 %	납부방법	2 %
회원전용 메뉴 (마이페이지, 회원정보 수정 등)	7 %	자주하는 질문	2 %

분석결과	⇒ 현재 메인화면 구성에 없는 ‘납부방법’ 및 ‘자주하는 질문’ 추가

- 웹사이트 동향 분석

‧ 모바일 단말기 사용자에 대한 서비스 제공 기술

구분	설명	특징
반응형 웹	하나의 디자인을 단말기 화면 크기에 맞춰 변경	[장점] 프로그램 소스 관리 용이 [단점] 복잡한 페이지에 적용하기 어려움
적응형 웹	PC용, 모바일용 디자인을 각각 개발하여 서비스	[장점] 복잡한 페이지 개발 시 용이 [단점] 관리 대상 프로그램 소스 증가

분석결과	⇒ 사이버고객센터 홈페이지는 각 화면의 구성이 간단하므로, 반응형 웹 기술 적용이 적합

□ 메인화면 디자인 재구성

- 유선문의 고객에게 링크 위치 설명을 위해 영역별 명칭 부여

‧ 서비스 바로가기, 민원신청 바로가기, 전화문의, 자주하는 질문

- 민원신청 바로가기의 각 항목 이름을 축약하여 가독성 향상

‧ 자동납부(계좌) 신규/해지	⇒ 자동납부(계좌)

‧ 자동납부(카드) 신규/해지	⇒ 자동납부(카드)

‧ 소유자(사용자)명의 변경신고	⇒ 명의변경

‧ 전자고지(이메일)신청(신규/변경/해지)	⇒ 전자고지

‧ 자가검침 (신규/변경/해지)	⇒ 자가검침신청

서비스 바로가기의 ‘자가검침입력’과 구분하기 위해서, 다른 민원과 달리 ‘신청’ 문구를 추가

- 자주하는 문의사항을 메인화면에 표출

□ 반응형 웹 기술 적용

- 단말기 해상도를 5단계로 분류하여 화면 분기점 설정

분기점	1단계	2단계	3단계	4단계		5단계
기준 해상도 (단위: 픽셀)	1200 이상 ~	1024 이상 ~ 1200 미만	768 이상 ~ 1024 미만	380 이상 ~ 768 미만		~ 380 미만
대상 단말기	데스크톱 PC		태블릿 PC		스마트폰

- 화면에 표출되는 콘텐츠 특성에 따라 1 ~ 5회 분기 적용

분기 횟수	해당 화면 수	비고
5	25	메인화면, 납부방법안내, 요금계산, 사이트맵 등
4	27	요금감면제도, 공지사항, 자주하는 질문 화면 등
3	6	이사정산요금계산(팝업), 이사정산내역(팝업) 등
2	3	사업소연락처(팝업), 자가검침ARS안내(팝업) 등
1	3	감면세대 조회(팝업), 아이디/비밀번호 찾기(팝업)

Ⅳ		개편결과

□ 메인화면 디자인 재구성

현재	② 글씨가 많아 가독성이 떨어짐 ① 유선안내 시 링크 위치 설명이 어려움
개선	① 유선안내를 위해 영역에 이름 부여 ② 명칭을 축약하여 가독성 향상 ③ 자주 하는 질문을 메인화면에 표출

□ 반응형 웹 기술 적용 (※ 서브화면 결과는 붙임2 참조)

1단계	4단계	5단계
2단계
3단계

Ⅴ		향후계획

□ 테스트 및 보완	11. 12. ~ 24.

□ 웹사이트 오픈심의 의뢰(정보기획담당관)	11. 12.

웹사이트 오픈심의

- 웹 표준, 접근성, 호환성 준수 여부 및 웹 보안 취약점 점검을 위한 절차

- 『서울시 웹서비스 정책 가이드라인 제3장 9』에 의한 의무 준수사항

- 서울시에서 연 2회 실시하는 홈페이지 운영실태 점검의 점검항목에 해당

□ 개편 서비스 오픈	11. 26.

(※ 고객지원시스템 연계는 재개발 완료 후 시행)

□ 웹 접근성 인증 의뢰(웹 접근성 품질인증기관)	12. 03.

웹 접근성(Web Accessibility)

- 장애인, 고령자 등 정보접근 약자가 웹 사이트에서 제공하는 모든 정보를 동등하게 이용할 수 있도록 보장하는 것

- 『국가정보화기본법 제32조의2』에 의한 의무 준수사항

붙임 : 1. 홈페이지 화면 목록 1부.

2. 개편결과 세부 화면캡쳐본 1부.  끝.