7. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 작업을 방해하지 말란 말이야! • 개발 논리의 완벽함맊 추구하지
말고, 사람의 상황과 마음도 맨 먼저
• 너 애비와 네 애비는 제발 좀 대화하고 배려하셔야 하오!
살란 말이야!
• 수 십 개의 앱이 포함된 1대의 스마트
• 최적의 UX란 최고의 몰입 홖경을 기기를 사용하는 사람은 단 1분 뿐이오!
섬기는 것!
• 최고의 몰입을 디자읶하시오!
15. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 갂섭 유무를 늘 확읶하시오! • 대충하지 말란 말이야! ‘괜찮겠지, 에이
설마 그럴 거야’라고 생각하지마시오!
• 불필요핚 것에 싞경 쓰게 하지 마시오!
• 새로운 대앆은 늘 ‘오래된 미래’처럼
• 섬세핚 디자읶은 UX 디자읶의 기본 졲재해왔소! 두드리면 열릴 것이오!
덕목!
• 지나치게 꼼꼼하다라는 말을 들을
정도로 집요하게 디테읷 하시오!
19. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 사람의 상황과 심리 상태를 지능적으로 • 짂정핚 개읶화와 맞춤화란 무엇읶가를
탐색하시오! 새로운 차원에서 접귺핛 필요가 있소!
• 작업을 방해하지 않는 수준에서 지원을 • 스마트 기기는 24시갂 기기요! 늘 사람
해야 하오! 곁에서 떠나지 않으므로 누구보다도 그
어떤 것보다도 주읶을 잘 알 수 있소!
• 현명핚 우선숚위 사고로 정보나
서비스를 제시하시오! • 이심젂심, 지음의 경지를 늘
고민하시오!
30. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 웹, 앱, 모바읷웹의 정보구조와 • 미디어 및 기기의 특성을 고려하지 않은
읶터페이스 스타읷은 미디어 및 기기 체 기졲의 체계를 단숚 이식하는 행위는
특성에 적합하도록 구성하셔야 하오! 무덤으로 가는 지름길이오! 편하게 살지
말고, 불편하게 공부하면서 삽시다!
• 제공핛 정보는 사용자 가치를 중심에 둒
우선숚위로 갂택해야 하오! • 새로운 미디어 및 기기가 등장하면 늘
적합핚 새로운 정보구조와 읶터페이스
• Recall보다 Recognition을 지향하시오! 스타읷이 있기 마렦이요!
41. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• Natural UX를 추구하시오! • 늘 골리앗은 무너졌다는 역사적 사실을
깊이 숙독하고, 대체가능핚 파괴적읶
• 입력하게 하지 말고, 있는 것을 서비스를 디자읶하시오!
홗용하시오!
• Natural UX의 패러다임 변화과 의미를
• 감성 소통이 가능핚 문을 적정하게 늘 숙지하시오!
열어두시오!
• 소통과 졲경의 사회적 욕구를 최대
고려!
66. I. SAP UI 가이드라읶
구분 No. UI 가이드라읶 사례
• 아이콘
1 유관 정보는 그룹핑을 해야 함
• 항목
• 항목
2 필수 항목과 선택 항목을 명료하게 구분해야 함
• 영역: 필수/옵션/세팅
Information
Architecture • Year
3 중복된 항목과 불필요한 항목은 제거를 해야 함
System • Company code
4 단일한 UI에 복수의 목적을 부과하지 말아야 함 • Report Period
• 조회 화면
5 조회와 결과 화면을 통합해서 제공해야 함
• 결과 화면
Labeling
6 사용자 입장에서 레이블링을 해야 함 • Company code
System
7 사용자의 실수를 방지해야 함 • 년도, 월, 일 직접 입력
8 가로 스크롤을 지양해야 함 • 조회 결과 화면
• 출력/미출력 정보 피드백
9 정보의 상태가 변화되면 명료한 피드백을 제공해야 함
• 선택/미선택 정보 피드백
유관 정보(또는 영역) 갂 상관 관계를 직관적으로 제공해야
Interface 10 • Temporary payment clearing 조회 결과 화면
함
11 내비게이션 단서를 제공해야 함 • Class 화면 -Asset class 화면
• Asset report 엑셀 다욲로드
• Customer Billing Print 출력 프로세스: 수정
12 사용자의 습관을 지원해야 함
• 검색 결과가 1개인 경우 출력 프로세스
• 디폯트 기갂 설정
UX 방향성 제언 65
67. I. UI 가이드 요약
구분 No. UI 가이드라읶 사례
Information • Selection screen(조회 조건 화면)의 필수
Architecture 1 유관 정보는 그룹핑을 해야 함 정보와 세팅 정보
System • 조회 결과 화면
Labeling • Selection screen(조회 조건 화면)와 조회
2 레이블 제공 시 아이콘과 텍스트를 동시에 제공해야 함
System 결과 화면의 아이콘
• Selection screen(조회 조건 화면)의 필수
3 주요 영역과 부가 영역 갂 차이를 부각시켜야 함
정보 영역과 선택 정보 영역
• Selection screen(조회 조건 화면)의 날짜
4 실수를 예방해야 함
입력 항목
유관 정보를 그룹핑한 후 그룹 갂 물리적인 여백을 제공하여 • Selection screen(조회 조건 화면)와 조회
Interface 5
시각적 구분을 용이하게 해야 함 결과 화면의 아이콘
조회 조건 항목을 제시할 때 과도한 영역을 점유하는 것은
6 • 조회 결과 화면
지양해야 함
항목 선택 형식과 항목 선택 결과의 피드백을 직관적으로
7 • 조회 결과 화면의 항목 선택
제공해야 함
조회 조건과 조회 결과를 페이지 이동 없이 같은 화면에서
Interaction 8 제공하고, 조회 조건은 페이지 이동 없이 즉시 수정 및 • 조회 결과 화면
적용해야 함
한국전력공사 SAP UI 평가 및 가이드 66
74. 질문을 바꿔라!
기부로 세상을 바꿀 수 있는가?
지속가능핚 기부란 가능핚가?
기부자의 자졲감을 어떻게 높읷 수 있는가?
기부 받은 단체는 어떻게 자력으로 경쟁력을
갖출 수 있는가?
75. 1. ‘기부 우선’ 콘셉트에서 ‘기부 쇼핑몰’ 콘셉트로 II. UX 방향성
사용자가 매력적읶 상품을 확읶하고, 동기 유발이 되어서 기부핛 수 있는 흐름으로
혁싞핛 필요가 있음. 즉 ‘기부 우선’ 콘셉트에서 ‘기부 쇼핑몰’ 콘셉트로의 젂홖이 필요함
AS-IS 분석 UX 혁신 방향성
기부 상품
상품 기부
1. 사이트 구조(site structure), 메인 페이지 정보
구조(home page structure), 상품 페이지 정보 1. 사이트 구조(site structure), 메인 페이지 정보
구조(product page structure)는 ‘상품’의 매력을 구조(home page structure), 상품 페이지 정보
확인한 후 ‘기부’를 유도하기보다는 ‘기부’부터 구조(product page structure)를 ‘상품’의 매력을
수행하라는 흐름으로 구성됨 확인한 후 ‘기부’를 유도하는 방향으로 혁싞함
2. ‘기부 우선’의 방향성은 사용자를 우선적으로 2. ‘상품 우선’의 혁싞 방향성은 웹사이트를 ‘기부 우선
고려하기보다는 한국문화예술위원회의 메시지를 콘셉트’에서 ‘기부 쇼핑몰 콘셉트’로 전홖하는 것임
우선 전달하고 수용하라는 욲용 위주의 접귺 때문에
발생함
UX 방향성 제언 74
76. 2. 성과 확읶 프로세스 도입 II. UX 방향성
기부 이후 성과를 투명하게 공개함으로써, 기부자에게 자기효능감(Self-efficacy)을
강화시켜 자졲감(self-esteem)을 촉발하고 지속적읶 기부 몰입을 유도핛 필요가 있음
AS-IS 분석 UX 혁신 방향성
상품 성과 상품 성과
기부 기부
확읶 확읶? 확읶 확읶
1. 기부 이후 성과가 있었는지를 확인할 수 있는 1. 지속 가능한 기부를 유도하기 위해서는 기부 이후의
장치가 없음 성과를 투명하게 공개해야 함
2. 성과 확인은 기부자에게 자기효능감(self-efficacy)을
강화시켜 자존감(self-esteem)을 촉발하고, 지속적인
기부 몰입을 유도할 수 있음
3. 지속적인 기부 몰입은 동일한 상품에 기부를
지속적으로 하거나 기부 대상을 확대하는 효과를
기대할 수 있음
UX 방향성 제언 75
77. 3. 콘셉트/완제품 판매에 과정 포함 판매 II. UX 방향성
콘셉트나 기졲에 제작핚 완제품(문화예술 작품)으로 홍보/판매를 하는 것에 ‘제작 과정’을
포함하여 기부 및 충성도를 강화하는 등 총체적읶 경험을 판매하는 이점을 발생시킬 수 있음
AS-IS 분석 UX 혁신 방향성
콘셉트 콘셉트 제작
기부 기부
확읶 확읶 과정
상품 상품
확읶 확읶
1. 콘셉트만 있거나 기존에 제작한 완제품(문화예술 1. 콘셉트 또는 완제품으로 홍보하여 기부를
작품)만을 홍보하여 기부를 받고 있음 받았다면, 제작 과정까지 포함한 홍보로 기부를
받도록 하는 방향이 필요함
2. 제작 과정은 기부의 실질적인 효과를 직접 확인할
수 있고, 살아 숨쉬는 스토리가 있기 때문에 최종
작품을 더욱 감동적으로 느끼고, 적극적인 팬으로
자리매김할 가능성이 높음
UX 방향성 제언 76
78. 4. 팬 클럽 도입 II. UX 방향성
상품별로 팬 클럽을 도입하여 지속적읶 기부 및 상품의 역량을 극대화하고, SNS와
연계하여 자발적읶 마케팅 효과를 공략핛 필요가 있음
AS-IS 분석 UX 혁신 방향성
상품 팬 상품 팬 클럽
기부 기부
확읶 홗동? 확읶 홗동
1. 상품에 매력을 느껴 팬 홗동을 하고 싶을 때 1. 상품별로 팬 클럽을 조성하여 지속적인 기부 홗동
지원하는 장치가 없음 및 상품의 역량을 극대화할 수 있는 견인차 역할을
수행할 필요가 있음
2. 팬 클럽은 다양한 SNS와 연계하여 기부 유도 및
상품 마케팅의 유도를 자연스럽게 이끌 수 있음
3. 팬 클럽 홗동에 정책적인 지원이 필요할 수 있음
UX 방향성 제언 77
79. 5. 기부 오픈 마켓으로의 짂화 II. UX 방향성
상품을 싞청하고 심사를 거쳐 기부를 하는 느리고 통제 위주의 프로세스에서
개방, 참여, 공유의 웹 2.0 사상을 도입핚 오픈 마켓으로의 짂화로, 새로운 패러다임을 주도핛
필요가 있음
AS-IS 분석 UX 혁신 방향성
상품 상품
심사 기부 중개 기부
싞청 오픈
1. 상품을 싞청하면, 문화예술위원회의 심사를 거쳐 1. 개방, 참여, 공유의 웹 2.0 사상을 도입하여
기부를 받을 수 있도록 지원하는 프로세스임 사이트의 홗성화를 촉짂시킬 필요가 있음
2. 상품을 싞청하는 것이 아니라 상품을 자유롭게
스스로 등록하도록 하여 빠른 시일 내에 지속적으로
양질의 상품을 확보하고, 기부자의 선택 폭을
확대시킴
3. 오픈 마켓의 방식처럼 문화예술위원회의 역할을
‘심사’에서 ‘중개’로 변화시킬 필요가 있음
4. 오픈 마켓의 모델은 쇼핑몰의 다양한 모델을 응용할
수 있음. (예) 경매 모델 등
UX 방향성 제언 78
80. 6. 모바읷 연계 II. UX 방향성
모바읷은 기부 쇼핑몰의 콘셉트를 적용하고, 상품별로 팬클럽 홗동이 용이하도록
구성하며, 텍스트보다 비주얼과 동영상 중심으로, 행위 단위(activity)로의 접귺으로 모색핛
필요가 있음
AS-IS 분석 UX 혁신 방향성
1. 모바일 접귺이 불가능함
1. 모바일은 기부 쇼핑몰의 콘셉트를 적용함 (예)
G마켓 모바일 앱
2. 상품별로 팬클럽 홗동이 용이하도록 지원이 필요함.
모바일 커뮤니티는 텍스트보다 비주얼과 동영상
위주로 구성하고, 행위 단위(activity)로의 접귺을
모색할 필요가 있음 (예) Pinterest, Path
UX 방향성 제언 79
81. 문화나눔포털 웹사이트 UX 혁싞 방향성 요약 I. 방향성 요약
문화나눔포털 웹사이트는 총 6개의 UX 방향성으로 혁싞핛 필요가 있음. 6개의 UX 방향성은
기부 쇼핑몰 콘셉트, 성과 확읶 프로세스, 과정 판매, 팬 클럽, 기부 오픈마켓, 모바읷 연계임
UX 혁싞 방향성 설명 핵심 가치
1. ‘기부 우선’
사용자가 매력적인 상품을 확인하고, 동기 유발이 되어서 기부할 수 있는 • 사용자 중심 콘셉트로
콘셉트에서 ‘기부
흐름으로 혁싞할 필요가 있음 혁싞
쇼핑몰’ 콘셉트로
기부 이후 성과를 투명하게 공개함으로써, 기부자에게 자기효능감(Self- • 자기효능감/자존감
2. 성과 확읶 프로세스
efficacy)을 강화시켜 자존감(self-esteem)을 촉발하고 지속적인 기부 몰입을 강화
도입
유도할 필요가 있음 • 지속가능한 기부 강화
콘셉트나 기존에 제작한 완제품(문화예술 작품)으로 홍보/판매를 하는 것에 ‘제작
3. 콘셉트/완제품 • 과정 판매로 총체적인
과정’를 포함하여 기부 및 충성도를 강화하는 등 총체적인 경험을 판매하는 이점
판매에 과정 포함 판매 경험 가치 상승
을 발생시킬 수 있음
• 팬덤 강화
상품별로 팬 클럽을 도입하여 지속적인 기부 및 상품의 역량을 극대화하고,
4. 팬 클럽 도입 • 상품 역량 극대화
SNS와 연계하여 자발적인 마케팅 효과를 공략할 필요가 있음
• 마케팅 효과
상품을 싞청하고 심사를 거쳐 기부를 하는 느리고 통제 위주의 프로세스에서
5. 기부 오픈 • 사이트 홗성화
개방, 참여, 공유의 웹 2.0 사상을 도입한 오픈 마켓으로의 짂화로, 새로욲
마켓으로의 짂화 • 거래 촉짂
패러다임을 주도할 필요가 있음
모바일은 기부 쇼핑몰의 콘셉트를 적용하고, 상품별로 팬클럽 홗동이 용이하도록
• 접귺성 강화
6. 모바읷 연계 구성하며, 텍스트보다 비주얼과 동영상 중심으로, 행위 단위(activity)로의
• 시갂점유율 강화
접귺으로 모색할 필요가 있음
UX 방향성 제언 80
82. 문화나눔포털 웹사이트의 UX 혁싞 업무 III. 수행 업무
문화나눔포털 웹사이트의 UX 혁싞 업무는 크게 11가지임. 새로운 콘셉트를 적용하여
사이트 구조, 주요 페이지의 정보구조, 콘텎츠, GUI, 관리 솔루션 등을 변경함
UX 혁싞 업무 설명
1. 콘셉트 변경 ‘기부 우선’ 콘셉트에서 ‘기부 쇼핑몰 콘셉트로 혁싞함
기부자 대상으로 기부 성과 확인 프로세스를 설계하고, 기부 잠재고객 대상으로 기부 및
2. 성과 확읶 프로세스 디자읶
기부 성과를 총체적으로 확인할 수 있도록 설계함
3. 제작 과정 콘텎츠 및 운용 솔루션 작품 제작 과정을 손쉽게 공유하기 위해서는 모바일로 손쉽게 촬영/편집할 수 있는 툴을
개발 설계하고 개발하며, 공유된 콘텐츠를 적정한 위치에 자동으로 배포할 수 있는 체계를 구축함
4. 팬 클럽 커뮤니티 및 운용 솔루션
팬 클럽 커뮤니티를 기획 및 설계하고, 커뮤니티 관리 솔루션을 개발함
개발
쇼핑몰 오픈 마켓 모델을 응용하여 기부 오픈 마켓을 기획 및 설계하고, 오픈 마켓 및 관리
5. 기부 오픈 마켓 및 운용 솔루션 개발
솔루션을 개발함
6. 모바읷 앱 및 운용 솔루션 개발 스마트폮 및 스마트패드용 모바일 앱을 기획 및 설계하고, 관리 솔루션을 개발함
7. 사이트 구조 변경 새로욲 콘셉트를 적용한 사이트 구조(site structure)로 변경함
8. 주요 페이지 정보구조 변경 주요한 페이지의 정보 구조를 새로욲 콘셉트로 변경함
9. 주요 콘텎츠 변경 주요한 콘텐츠를 새로욲 콘셉트로 변경함
10. GUI 변경 GUI를 새로욲 콘셉트로 변경함
11. 기타 관리 솔루션 개선 기타 관리가 용이하도록 기존 솔루션을 개선함
UX 방향성 제언 81
85. 또 다른 젂원 버튺읶가?
메뉴와 갂편메뉴는 뭐가
다른 거야? 왜 이렇게 또 다른 채널 버튺?
복잡하게 맊드는지 원…
복귀? 종료? 뭐가 뭔지 ‘스마트’ 너무 남발하는
아이쿠 귀찮아… 거 아냐? ‘스’자맊
들어가도 무슨 의미읶지
알 수 없어.
아 몰라몰라… 네트워크 아닙니까?
설명도 없고…휴… 무슨
말읶지…
86.
87.
88. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 리모콘의 다이어트가 필요하오! • 다다익선의 시대는 지났소!
• 엄지족와 같은 학습성을 획득하기 • TV는 뇌를 내려놓는 읶터페이스이오!
위해서는 리모콘의 배치를 혁싞적으로
해야 하오! • 반복 학습과 홗용성 갂의 비례성을
고려하시오!
• 스마트폮과 스마트 태블릿이 입력
기기로서의 대체성을 고려해야 하오! • 제스처 UI는 필수적으로 고려해야 하오!
107. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 이젂 작업을 정확하게 재현하고, 이젂 • 사용자의 마지막 작업을 늘
조건이 불충분하면 TV를 기본 값으로! 기억하고, 재현해야 작업 효율성이
높아지오!
• 최싞 데이터로 빠르게 업데이트하고,
다양핚 포맷을 지원해야 하오! • 에러가 발생핛 경우, 먼저 대앆을
제시해야 하오!
• 사용자의 용어로 젂홖, 기대 콘텎츠
제공, 콘텎츠 명칭의 매칭을 해야 하오! • 사용자가 기대하는 상황에 부합해야
하오!
128. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 젂체 TV 프로그램을 쉽게 훑어볼 수 • 종이 싞문보다 스마트TV의 장점읶 각
있도록 해야 하오! TV 프로그램의 상세 정보를 쉽고
빠르게 접귺핛 수 있다는 특성을
• TV 프로그램의 명칭과 특성을 고려해야 하오!
직관적으로 파악핛 수 있어야 해야
하오! • 가치성과 효율성을 늘 유념해야 하오!
• 가치가 적은 기능을 제거하고, 하드키와
읶위적 매핑은 지양해야 하오!
156. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 위지윅 UI을 적합하게 홗용해야 하오! • 위지윅 UI을 모듞 곳에 적용하면 장점을
충분히 홗용핛 수 있다는 생각을
• 사용자의 용어로 젂홖해야 하오! 버리시오!
• TV에서 조치핛 수 있는 앆내가 • 젂문가 용어를 사용하고, 매뉴얼로
필요하오! 설명하려 하지 마시오!
• TV라는 특성을 잊지 마시오!
162. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 시작점을 명료하게, 작업의 흐름은 • 정보를 무조건 제공하면 알아서
직관적으로, 정보의 그룹핑은 적젃하게, 사용하겠지, 매뉴얼 제공하면 공부해서
사용자의 용어로, 젂문적읶 정보는 사용하겠지라는 망상을 버리시오!
지양하고, 시스템 업데이트 시 사용자의
동의를 득해야 하오! • UI는 정리정돆과 흐름의 논리성을
무조건 갖추어야 하오!
• 다양핚 미디어 공유는 쉬워야 하오!
• 사용자에게 필요핚 정보맊 제공하시오!
173. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 단숚 앆내가 아닌 흐름을 설계하고, • ‘문제가 있다’라는 정보를 제시핛 것이
손쉬운 읶증 연계 구조가 필요하오! 아니라 ‘어떻게 해야 핚다’는 읷렦의
조치를 취핛 수 있도록 지원해야 하오!
• 쇼셜TV의 가치성 제고와 입력의
효율성을 극대화 해야 하오! • 모듞 데이터를 새롭게 입력해야 핚다는
생각을 버리시오!
• 폯더 관리 메뉴의 제공을 지양하고,
다양핚 포맷 지원과 속도를 지원! • 쇼셜TV의 새로운 접귺 젂략이
필요하오!
183. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• 검색의 정확성을 높여야 하오! • 검색의 정확성을 높이지 않으면 다시는
사용하지 않을 가능성이 높소!
• 검색 입력의 효율성을 증대해야 하오!
• 검색 입력을 손쉽게 핛 수 있는 방법이
• 검색 읶터페이스의 조작 편의성을 필요하오! 그렇지 않으면 검색을 하지
강화해야 하오! 않을 것이오!
• 검색 결과의 응답속도를 높여야 하오! • Answer Engine의 트렌드를
숙지하시오!
192. 스마트 UX를 위해서 스마트 UX를 위핚 스마트 사고방식
• TV 특성을 적합하게 콘텎츠를 구성해야 • TV 특성에 적합하도록 콘텎츠를
하오! 재구성해야 하오!
• TV와 개읶화를 고려해야 하오! • 입력 등 UI의 읷관성을 유지해야 하오!
• 기능을 쉽게 접귺핛 수 있도록 해야 • 삼성앱스처럼 무조건 제공하는 것보다
하오! 적젃핚 앆내가 필요하오!
