[O2UX] 201802 UX_Trend Report 1 사용자 중심의 UX는 최근 분야를 가리지 않고 퍼져나가, 공공 서비스 분야에서도 다양한 시도를 통해 UX 분야의 발전이 이루어 지고 있습니다. O2UX의 정기 UX 트랜드 레포트 시리즈 1. 으로 공공 분야에서의 UX가 이전과 어떻게 달라지고 있으며, 어느 면을 발전시켜 방향성을 잡아야 하는지를 함께 고민해 보고자 발행된 보고서 입니다. * This report is first edition of UX Trend Analysis Report by O2Ux.com which is the ux experts group in South Korea. ( If you have any question, contact to www.O2ux.co.kr) It is Korean Tax & Bill payment Service Trend Report. Recently, Public Bill payment service has improved a lot in user interface to serve universal value. We will look over what are the differences before tax services and recent services and think how can we improve more value for every users.

1. UX Trend & Analysis Report
세금 납부 공공 서비스

2. 인터넷/ 모바일 금융서비스 활성화로,
각종 세금 및 공과금 온라인 납부 생활 정착
은행지점을 방문하기보다 온라인을 활용하는 행태로 변화되어 수납의 패러다임이 급격한 변화를
보이고 있다. ‘희망서울 생활지표’와 ‘한국은행’의 조사에 따르면 지방세 간편 납부 비율이 2010년
40.1%, 2011년 49.2%, 2014년 81.9%로 지속적으로 상승됨을 알 수 있습니다.
각종 세금 및 납부의 행태도 인터넷, 모바일 의존도가 확산됨에 따라 은행 방문 보다 모바일로 금융
서비스를 이용하는 생활이 정착되고 있으며 온라인 채널을 이용한 납부의 비중은 계속 증가할
것으로 전망되고 있습니다.
1분기 2분기 3분기 4분기 1분기 2분기
2015 2016
2.0
2.5
3.0
3.5
<자료/한국은행>
O2UXMagazine
Market
And
Design Trends

3. 금융계의 다양한 고객 지향적 서비스를 시도 중이나,
납부 및 공공 서비스에는 두드러진 차별화 미흡
모바일 금융 서비스가 생활화되며 은행 공과금에서부터 S-TAX 시스템, 스마트 명세서, 스마트
Billing 시스템까지 IT 기술을 활용한 새로운 개념의 다양한 모바일 납부 서비스가 등장하고 있습니다.
심플하고 세련된 디자인, 캐릭터 등을 이용한 고객 친화적 서비스를 표방하는 등 다양한 시도가
이루어 지고 있으나 납부와 같은 공공 서비스에 대해서는 S-TAX를 제외하고 시대에 뒤떨어진
디자인 스타일, 공통되지 않는 레이아웃 룰을 사용하는 등 사용자 눈에 띄는 서비스가 미흡합니다.
Market
And
Design Trends
O2UXMagazine

4. User mind
O2UXMagazine

5. 1. 사용자가 가장 주요하게 생각하는 목적은 납부/ 조회/ 설정이므로, 이 메뉴의 최우선으로 배치 하여 빠른게 접근할 수 있도록 하는 것이 필요합니다.
2. 예측이 어려운 My Giro와 같은 메뉴명은 “설정”등의 직관적인 메뉴명으로 변경하여 예측하기 쉽고, 이용하기 쉽게 하는 것이 필요합니다.
납부/ 조회/ 나의 설정의 주요 메뉴 중심의 우선순위 설계 필요I1
기능성 메뉴명은 Action 버튼으로 변경, 메뉴의 간소화/ 명확화 필요I2
3. 전체 메뉴에서 “납부” 메뉴를 선택 하면, 다시 메인 화면의 아이콘 메뉴 나열 화면으로 이동하여 실제로는 “홈” 버튼의 역할을 하고 있습니다. 납부 가능한 목록을 리스트 하고,
프로세스 진행하는 Flow의 재설계 가 필요해 보입니다.
4. “납부취소”, “공인인증서 등록”, “등록취소”, “고객센터 통화하기” 등은 액션이 이루어지는 버튼으로 처리 되었어야 화면과 플로우의 복잡도를 줄여 줄 수 있습니다.
Information architecture analysis
O2UXMagazine

6. 지로 종류에 따른 3face의 구성이 납부 종류 나열로 이루어진 메인화면은 사용자가 화면을 옮겨가면서
선택해야할 이유가 명확하지 않아 보일수 있습니다.
1
2
3 “전자고지”와 같은 경우 서비스의 종류만 다를 뿐인데, Floating 버튼으로 처리되어 있어 중요 서비스로의
강조는 필요하지만, 보다 효율적인 UI 방식의 고민이 필요합니다.
납부하는 지로의 종류를 아이콘으로 배치 하였으나, 아이콘의 의미 전달 및 색상 구분의 의미 전달이
모호하므로 명확한 디자인 컨셉의 재정의가 필요해 보입니다.
1
2
3
O2UXMagazine

7. 납부를 하기위해서 거치는 프로세스의 첫화면 모두에 주민번호가 필요하게 되어 있습니다.
이 부분을 공통적으로 모듈화하는 UI가 필요합니다.
1
2 “기타조회”를 누르면 같은 화면이 다시 조회가 되어 혼란을 주므로, 다른 화면으로 이동시킨다는지,
고지서 내역 하단에, 납부 방법 선택을 탭이 아닌 버튼으로 명확히 선택 후 다음 프로세스를
진행시키는 등의 화면과 프로세스 간소화는 사용성을 높이는 필수 요소 입니다.
1
2
O2UXMagazine

8. 사용자 분류 선택 후 공인인증서 종류를 선택하여, 두가지 선택 옵션을 순차적으로 선택하는 것이
공인인증서 등록을 위한 플로우입니다. 이 경우, 화면을 이동하여 순차적인 선택을 하게 하는 것이
명확한데, 리스트의 꺽쇠 버튼으로 상세 페이지가 있을것 같다는 예측의 오류를 불러 오고, 하단
버튼의 용도를 예측하기 어려운 상황으로, UI 요소 사용에 대한 명확한 가이드가 없는 경우로 볼 수
있습니다.
1
2 인증서가 등록이 되어 있는 상태에서도 공인인증서 등록 메뉴를 선택하여 들어오면, 다시 등록할 수
있는 것으로 예측되지만, 등록 버튼도 없고, 실상은 공인인증 로그인이 되므로써 메뉴의 의미가
제대로 구현되어 있지 않습니다.
1
2
O2UXMagazine

9. 조회 결과를 팝업 처리하여, 많은 처리 결과 컨텐츠를 직관적으로 전달하기에는 화면상의 복잡성이
높아 질 수 있습니다.
1
2 “기타조회＂ 버튼은 납부해야 하는 리스트를 재조회하는 버튼 역할을 하고 있어, 눌러 보기 전까지는
기능을 예상하기가 어려워 UX 신뢰성을 떨어뜨릴 수 있습니다.
21
O2UXMagazine

10. 메인화면에서 납부 종류를 아이콘과 색상으로 구분하였으나, 의미가 있는 구분이라기 보다는 아이덴티티
컬러와도 연관 없이 임의적인 컬러의 적용은 아이덴티티의 명확성을 저해할 수 있습니다.
1
2 상세화면내 컴포넌트 내용과, 탭의 디자인이 불명확하는 등 디자인 컴포넌트 사이에 명확한 디자인 룰이
없으면, 직관적인 사용에 어려움을 줍니다.
3 사용자 시선 흐름을 고려하지 않고 계좌 리스트 상단에 액션버튼을 배치 한다든지, 리스트 개수에 상관없이
리스크 레이어 크기가 정해져 있는 등 사용 습관과 유연성이 고려 되지 않은 레이아웃은 디자인 완성도를
저해할 수 있습니다.
1 2
3
GUI Analysis
O2UXMagazine

11. 사용자가 가장 먼저 보게 되는 도움말 영역이 명확하게 정의되어 있지 않고, 디자인 스타일도 각 페이지별로
달라 지게 되면 비주얼적인 복잡도가 증가 합니다. 화면 레이아웃 룰 정의는 디자인 완성도를 높여 줍니다.
1
2 액션에 따른 버튼 색상의 룰 정의가 모호하면 일관된 디자인 경험 전달의 어렵게 됩니다.
1
2
GUI Analysis
O2UXMagazine

12. 돈을 지불하며 납부 한다는 공공 서비스도, 긍정적인 느낌을 줄 수 있어야 합니다. 깔끔하고 친근한 디자인을
통해 신뢰감 있고 친근감을 주면서 주목성을 높여 지속적으로 고객이 이용할 수 있도록 해주어야 합니다.
1
GUI Analysis
O2UXMagazine

13. 납부/ 조회/ 나의 설정의 주요 메뉴 중심의 우선순위 설계
기능성 메뉴명은 Action 버튼으로 변경, 메뉴의 간소화/ 명확화
사용자의 정황이나, 행태를 고려하지 않은 나열식 메인으로 주목도 저하
입력 정보 공통화 통한 납부 프로세스 및 입력 간소화
I1
I2
U1
U2
Pain Points
Our Problems
현재의 문제점
Strategic Points
O2UXMagazine

14. 기능성 메뉴명은 Action 버튼으로 변경, 메뉴의 간소화/ 명확화
사용 프로세스와 인식에 맞는 적절한 UI 설계 요구됨
일반적으로 예상이 가능한 UI를 통해 손쉽게 사용가능한 설계
I2
U3
U4
Pain Points
Our Problems
Strategic Points
직관적인 의미 전달이 용이하며 유연한 디자인 룰
도움말, 디자인 컴포넌트 등 표준 디자인 가이드 부재
G1
G2
현재의 문제점
O2UXMagazine

15. 납부해야 한다는 공공 서비스에 대한 부정적인 경험 전환
의미전달이 모호한 메뉴 아이콘 나열의 메인화면에 대한 차별화
직관적인 의미 전달이 용이하며 유연한 디자인 룰
주목성을 높이고 친근한 디자인 차별화 전략
I3
I4
G1
G3
Pain Points
Our Problems
현재의 문제점
Strategic Points
디자인 아이덴티티 부재
O2UXMagazine

16.  인터넷, 모바일 뱅킹 내 공과금 서비스
 은행의 오랜 IT노하우를 통한 납부 프로세스
 은행별로 납부내역이 분산되는 단점
카카오페이
 지출관리 서비스와 연계된 Tax Bill 전용 앱
 납부기일 알림, 내역 통계 다양한 통합 서비스, IT 기반 납부
프로세스 등으로 사용성 극대화
 종이 고지서를 모바일화 한 통신요금 납부 액
 월별 납부 금액, 납부 내역 등 통계화 서비스 지원
 오랜 기간동안 고객 서비스 노하우를 통해 고객 사용성에 대
한 배려를 처음으로 시작한 분야
 세금, 지로, 공과금, 과태료 등 납세자별 납부
 공공성을 가진 서비스로 최근 급속하게 사용성과 디
자인 퀄리티를 높인 서비스가 확대 되고 있음
Benchmarking Summary
O2UXMagazine

17. [서울시 S-Tax > 로그인 후 납부내역][서울시 S-Tax > 로그인 전 빠른 납부]
2
1
사용률이 가장 높은 메뉴를 메인에 노출시킴으로써 사용자에게
접근성이 높은 루트 제공하여 빠르고 쉽게 접근할 수 있게 하고
있습니다.
1
2 메인에 노출되어 있는 빠른 납부를 통해 별도의 로그인 없이 납부
가능하도록 구성하여 회원가입을 하지 않은 단기 방문 사용자까
지 편하게 이용하게 하였습니다.
O2UXMagazine

18. [카카오페이 청구서 > 첫화면] [카카오페이 > 사용 통계화면] [네이버 스마트 납부 메인]
[KT 스마트 청구서 > 첫화면]
로그인 시 메인 화면에 개인화된 맞춤형 정보를 제공하여 빠르게
내역을 조회하고 관리, 납부 할 수 있게 하였습니다.
1
2 이번달과 전달의 사용량 비교를 그래프와 컬러로 제공하여
비주얼적으로 정보가 전달될 수 있게 하였고, 복잡한 정보도
직관적으로 인지할 수 있게 하고 있습니다.
1
2
O2UXMagazine

19. [네이버 스마트 납부 > 납부 프로세스 화면] [S-Tax> 납부 프로세스 화면]
사용 프로세스 노출 및 공통화 된 레이아웃 룰을 통하여 빠르고
편안하게 직관적으로 컨텐츠 인지가 가능하게 됩니다.
1
1
1
O2UXMagazine

20. 1
[S-Tax> 이용안내 아이콘]
2
팝업 레이아웃 및 도움말 컴포넌트를 공통적으로 적용하므로써
사용자에게 일관된 경험 제공하여 신뢰도와 충성도를 높일 수
있습니다.
1
2 납부하기, 납부 완료 화면 등 새로운 아이디어가 적용된 표준화된
디자인 포멧 적용하여 안정적인 디자인이라는 이미지를 전달하고
있습니다.
O2UXMagazine

21. 서울을 대표하는 이미지를 Background 이미지로 활용하여
친근하면서 차별화된 경험을 제공하고 있습니다.
1
2 아이콘 배열로 사용자에게 직관적인 의미를 전달하여 사용성을
최대한 높이고 있습니다.
1
2
[S-Tax> 로그인 전 메인] [S-Tax> 로그인 후 메인]
[S-Tax> 로그인 전 메인]
O2UXMagazine

22. 사용량에 따라 상황에 맞게 캐릭터의 표정이나, 행동,
이미지를 다르게 적용하여 주목성을 높이고, 친근하게 느끼도록
하고 있습니다
1
2 영수증 효과를 적용하여 재미와 따뜻한 감성 경험을 유발하고
있습니다.
1
2
[서울도시가스 메인][카카오페이 청구서 > 사용통계]
[카카오페이 청구서 > 첫화면] [카카오페이 > 사용 통계화면]
O2UXMagazine

23.  회원과 비회원 모두 빠르게 목적
을 달성할 수 있게 하는 사용성
 사용 목적에 부합되는 사용율 높은 메뉴
와 컨텐츠를 메인 전면에 배치, 빠른 접근
성 최우선 고려
 개인형/ 맞춤형 정보를 비주얼화하여 사
용자에게 빠르고 직관적으로 전달
 일관된 레이아웃과 설계 디자인 가이드
적용으로 통일되고 정리된 디자인 구현
 입력화면, 완료화면, 팝업 및 버튼 등 화면
과 디자인 컴포넌트 디자인 표준 적용으로
퀄리티 제고
 대표하는 이미지, 통일된 아이콘, 아이덴
티티 컬러를 통해 차별화된 아이덴티티
전달
 친근한 스타일과 캐릭터 등을 활용하여
감성 경험 전달하고, 고객 지향적인 이미지
확립
Key Success Factors
 고품질의 디자인에 일관된 룰을
구축하여 디자인 완성도 제고
 새로운 로고 및 사용자 맞춤형 정
보 제공 캐릭터 아이콘을 활용하
여 차별화된 서비스 경험 제공
O2UXMagazine

24. Mail | ahnleesa@o2ux.com Web | O2ux.co.kr
Copyright(c) O2UX, Ahn Soojin. All rights reserved.