ui/ux 개선을 위한 빠른 프로토타이핑

Rapid Prototyping 빠른 프로토타이핑으로 소프트웨어 UX 개선하기

Fasoo ED Team2013.04.11

오늘 할 이야기들사용자 중심으로 제품을 개발해야 하는 이유 ?

사용자 중심 제품 개발에 가장 적합한 method 인 UI Prototyp-ing 의 소개와 관련 이야기들

우리는 어떻게 소프트웨어를 만들어 왔을까요 ?

개발자 중심 예산 / 일정 중심

“ 세상의 중심은 개발자” 고객의 니즈와 관계없이 산으로 가는 개발 과정

고객이 설명한 것 PM 이 이해한 것 기획자가 설계한 것 프로그래머가 코딩 한 것 비즈니스 컨설턴트가 상상하는 모습

문서화 된 산출물 현황 개발 진척 상황 고객이 지불한 비용 고객 지원 현황 사실 고객이 진짜 원하는 것

“ 예산과 일정이 세상의 기준”

고객이 알파 버전을 사용하게 될 날은 언제 올까요 .

일정에 맞춰서 제품의 요구사항을 축소하거나 일부만 구현하거나 ... 혹은 퀄리티를 낮추거나 .. 예산에 맞춰서 요구사항을 미구현한 상태로 제품 발표하거나… 혹은 퀄리티를 낮추거나 ..

슈퍼카굴러가는데 의의를 두는 차 (?)

현실 이상

쇼핑 동선 설계와 제품 분류가 완벽하고 친절해서 제품 배달까지 해주는 대형 마트물건도 적고 찾기도 힘들고 주인장은 마실 나간 동네 구멍가게

현실 이상

사용자 중심이어야 하는 이유는 너무 많습니다 .“ 우리가 쓰려고 만드는 것이 아니라 고객이 사용할 제품을 만드는 겁니다 .”

“ 뻔한 얘기지만 고객은 개발자가 아니고 사용자입니다 . 프로그래밍에 대한 지식도 없고 구매한 제품에서 목적에 부합하지 않는 미적 가치를 추구하지도 않으며 개발사의 비즈니스 모델에도 관심 없습니다 .”

“ 고객은 기능보다 기능을 매개로 구현하는 ‘목적’이나 ‘가치’ ,’ 경험’ 에 관심이 있습니다 .”

“ 고객은 우리의 일정이나 일손 부족 같은 건 진짜 관심 없습니다 .”

“ 기능이나 제품의 가격 , 효용성 , 필요한 시기에 시장에 출시되는 것 등등은 성공하는 제품의 중요한 요소이지만 결코 모든 것은 아닙니다 .”

일반적인 사용자 중심 개발 프로세스

사용자 중심 제품 개발 과정의 태반이 사용자를 끊임없이 이해하는 과정의 반복이라는 것을 알 수 있습니다 .

사용자 경험에 영향을 주는 것들Product ServiceProvider

S/WH/W

User

Device Interface Service Contents

Environment (Context)

UX Design

Feel

Sense

Think

Act

Relate

감정을 통한 경험관계를 통한 경험

감각을 통한 경험

사고를 통한 경험

신체적 행위를 통한 경험

Space TimeBernd Schmitt, “Strategic experience modules”.

Community

User Interface 요소를 사용자 경험 기준으로 보기

사용자 중심 개발을 위해서는 인간을 이해하고 기계를 이해하고 컨텍스트를 이해하고 관계를 이해하고 인문학을 공부하고 공학을 공부하고 미학을 공부하고 비즈니스를 공부하고…

공부할 시간이 없으시다면좋은 대안이 있습니다 .

ED 팀에서 배포한 UI 개발자 매뉴얼

1. Outline2. Goal3. Coverage4. Product Value5. User Value6. Fasoo UI Develop Principle7. Layout Guideline- Main page layout- Sub page layout- Modal window layout- Button set8. UI Pattern Guideline- Navigation UI pattern- List UI pattern- Form UI pattern9. Publishing Guideline- Layout palette- Layout Structure- Layout Sample- UIO palette- UIO Sample- Common Rule- Web accessibility / Web Standard

Appendix 1 . UI Develop Checklist

사실 사용자 중심 소프트웨어 개발이 싫은 사람은 없습니다 .

몇 가지 문제만 없다면…

바쁜 일정 부족한 예산 더 부족한 인력

복잡한 의사소통 구조 그 와중에 무시되는 사용자 쌓여가는 요구사항

피할 수 없다면 적응합시다 .

방법이 없는 건 아닙니다 .

일정을 단축하고 예산을 절약하고 인력도 절약하고

손쉽게 의사소통하고 고객 니즈를 발 빠르게 수집하고 요구사항을 빠르게 처리

전통적인 ‘폭포수방식’

‘Prototyping’ 에 대해서

사실 Prototyping 은 굉장히 일상적인 방법론입니다 .

건축 분야에서는 필수적인 절차

제품 디자인 분야에서도 일상적

자동차 클레이 목업도 대표적 프로토타이핑

소프트웨어 개발에서 Proto-typing 을 사용하지 않을 이유가 없습니다 .

물론 우리가 초 천재라서 프로젝트의 모든 리스크를 미리 예측하고 고객이 원하는 것을 점쟁이처럼 맞추고 애매한 요구사항만으로 최종 산출물의 그림을 척척 그려내서 코딩까지 할 수 있다면 굳이 할 필욘 없죠 .

UI Prototyping 의 수많은 장점들“ 시간 , 노력 , 비용을 절감할 수 있습니다 .”

“ 아주 빠르게 실제 목표를 가시화 할 수 있습니다 .”

“ 개발 목표의 애매모호함을 비약적으로 줄일 수 있습니다 .”

“ 구현 가능성 (feasibility) 를 매우 빨리 측정할 수 있습니다 .”

“ 개발과 함께 사용성 테스트를 빠르게 진행하여 고객의 니즈를 빠르게 취합할 수 있습니다 .”

“ 프로토타입을 매개로 내부의 다양한 아이디어를 빠르게 수집할 수 있습니다 .”

“ 커뮤니케이션을 보다 클리어하고 명확하게 할 수 있습니다 .”

UI Prototyping 의 몇 가지 단점 (?) 들“ 빠른 커뮤니케이션이 용이하다 보니 중간 산출물이나 문서 작성이 생략 되어 장기적으로는 문제가 될 수도 있습니다 .”

“ 프로토타이핑 범위를 정하는 것이 늘 쉽지 않습니다 . 최종 산출물에 가까운 프로토타입을 만든다면 프로토타이핑의 강점을 살리기 쉽지 않고 반대로 너무 러프 한 프로토타입을 만든다면 구현 목표 파악이나 테스트를 통한 정보 수집에 문제가 생길 수도 있습니다 .”

다양한 UI Prototyping 방법Paper Prototyping HTML Coding Adobe Application

(Photoshop, Fireworks, Dreamweaver, Muse)

MS Office(Powerpoint, Visio, Excel)

UI Prototyping 전용 App. Apple OmniGraffle

전용 Prototyping tool

Pencil

Fluid UI Balsamiq Mockups

Mockflow

Paper Prototyping

Paper Prototyping 장단점융통성이 있다 .

제작 속도가 빠르다 .

비용이 싸다 .

쉽다 .

빠르다 .

협력작업이 용이하다 .

하드웨어의 구애를 받지 않는다 .

언제 어디서든 할 수 있다 .

원격 작업에 부적합 하다 .

소스 재활용이 불가능 하다 .

상상력이 필요하다 .

시각적 표현에 한계가 있다 .

그냥 하면 됩니다 .

그 외의 Prototyping Tool장단점HTML 코딩

(Flex, Silverlight..)

Adobe application(Photoshop, Fireworks, Dreamweaver, Muse)

MS Office(Powerpoint, Visio, Excel) Prototyping 전용 툴

• 플랫폼 프리• 무료• 최종 산출물과 매우 유사한 프로토타입 제작 가능• 구현 가능성 추적 용이• 협업의 용이성• 소스 재활용성 높음• 높은 인터랙션 구현

• 실제 UI 에 가장 가까운 비주얼 연출 가능 ( 가장 높은 완성도의 프로토타입 제작 가능 )• 소스 재활용성 높음

• 배우기 쉽다• 거의 가지고 있다 .• 복사해서 붙이기 .• 화면 순서 정렬 용이 .• 문서화 용이 .• 약간의 인터랙션 구현 가능 .

• 배우기 쉽다 .• 다양한 템플릿을 제공• 익숙해지면 높은 효율 제공

• 배우기 쉽지 않음• 숙련되기 전까지는 비효율적

• 배우기 어렵다• 비 숙련자에게는 적합하지 않음• 하드웨어 사양• 매우 비쌈

• 제한적인 그리기 도구• 제한적인 인터랙션• 재사용이 불가능한 소스코드

• 소스 재활용이 낮음• 자유도가 떨어짐• Hi-Fi 프로토타입 제작에 적합하지 않음

어떤 방식을 사용할까요 ?

일단 Paper Prototyping 은 기본 중의 기본입니다 . 너무 쉬워 보여서 무시당하는 경향이 강할 뿐입니다 .

손에 익숙해서 빠르게 사용할 수 있는 방식이 가장 좋습니다 . 종이에 스케치하는 것 보다 직접 코딩 하는 게 더 빠르다면 코딩 하세요 .

가급적 다양한 방식에 익숙해지는 것이 좋습니다 . 프로토타입의 구현 목표와 기대치가 프로젝트 유형과 프로젝트 단계 마다 제각각이기 때문에 한 가지 방법으로는 모든 상황에 대처하기가 힘들 때가 있습니다 .

명심해야 할 것 “ 대상 사용자와 제품의 기획의도를 이해하세요 .”아이디어를 모으고 테스트하기 위한 프로토타입인지 실제 구현될 예정인 제품의 전모를 보여주기 위한 프로토타입인지 확인하세요 .

“ 계획 세우다가 끝내지 말고 일단 프로토타이핑을 하세요 .”프로젝트는 늘 폭풍우처럼 변합니다 . 모든 걸 미리 예측하고 진행할 순 없습니다 .

“ 기대 심리를 조성하세요 .”이 프로젝트가 진행되고 있고 가능성 있다는 믿음을 주는 게 중요합니다 .

“ 스케치는 누구나 할 수 있습니다 .”초등학생의 그림도 장황한 요건 설명보다 효과적입니다 .

명심해야 할 것 “ 프로토타입은 예술품이 아닙니다 .”프로토타입을 아름답고 멋지게 꾸미는 시간에 더 많은 사람과 아이디어를 교환하는 게 이득입니다 ..

“ 제대로 만들 수 없다면 제대로 만든 척이라도 합시다 .”인터랙션 기반의 프로토타입을 구현할 때 코딩 못한다고 프로토타이핑 못하는 거 아닙니다 . 꼼수는 얼마든지 있습니다 .

“ 필요한 부분만 프로토타이핑하라 .”하나만 결정되면 다른 부분을 정의할 수 있는 use case 나 한가지 템플릿만 체크하면 대부분을 정의할 수 있는 화면 요건이 많습니다 . 괜히 전부 다 하려다가 하나도 못하는 상황을 피합시다 .

간단히 해보는 Pro-totypingCase 1 : 파수 웹사이트 제품 페이지 설계

Step 1 : 레이아웃


Step 2 : 공통요소




Document Security Home > Product & Solutions > Document Security > DRM > FSD

DRM

• Product ▲

FED

> FSD

FSN

FSE

FSP

FSW

Fasoo Mobile Solution

DRM one

FSS

• Consulting Ser-vices ▲

개인 정보 보호• FAST

• FICS

Document Security

Source Code AnalysisContent PublishingDatabase Security


Step 3 : 컨텐츠




Document Security Home > Product & Solutions > Document Security > DRM > FSD

DRM

• Product ▲

FED

> FSD

FSN

FSE

FSP

FSW

Fasoo Mobile Solution

DRM one

FSS

• Consulting Ser-vices ▲

개인 정보 보호• FAST

• FICS

Document Security

Source Code AnalysisContent PublishingDatabase Security

FSDFasoo Secure Document

Related Products & Materials

“ 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다 .”

Preface

정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다 . 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다

In practice

정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다 . 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다

System Requirement

Supported Applications

Certifications

정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다 . 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다



Key Features



Brochure Inquiry

E-mail this page

Printer View

• 정보 시스템에서 관리하는 중요문서에 대한 보안 대책을 제시합니다 . • 정보 시스템에서 관리하는 중요문서에 대한 보안 대책을 제시합니다• 정보 시스템에서 관리하는 중요문서에 대한 보안 대책을 제시합니다 . • 정보 시스템에서 관리하는 중요문서에 대한 보안 대책을 제시합니다



SHARE THIS

간단히 해보는 PrototypingCase 2 : 파수 클라이언트 인터랙션 설계

검사

내 문서로컬 디스크 (C:)

로컬 디스크 (D:)

로컬 디스크 (E:)

Program files

admin

바탕 화면

Users

Home > 검사 실행■ 검사 대상 폴더 선택

CAPPVersion 1.0 Client

검색 범위

■ 검사 범위

숨김 폴더 압축 파일

시스템 폴더매주 수요일 12:00

■ CPU 사용률 ( 검사 속도 )

중간 ( 속도 중간 )

낮음 ( 속도 느림 )

높음 ( 속도 빠름 )

검사 결과 설정Home 검사 실행

검사 폴더 요약폴더 이름 전체 경로

간단히 해보는 Prototyping

검사




Program files

admin

바탕 화면

Users

Home > 검사 실행■ 검사 대상 폴더 선택 1

2 3


검색 범위

■ 검사 범위




중간 ( 속도 중간 )

낮음 ( 속도 느림 )




검색 시작

예약 검색 일정변경설정된 검색 옵션 변경

최근 검색 결과2012 년 1 월 4 일 수요일 14:32:11 검색 파일 수 XXXXXXX 검출 파일 수 XXXXXXX

상세 보기

검색 범위

검색 범위 옵션로컬 디스크 (C:)로컬 디스크 (D:)\Program files

시스템 폴더 포함CPU 점유율

점유율 높음 ( 속도 빠름 )

매주 수요일 12:00

검사 중

• 현재 검사 중인 퐆더 C:\Program Files\Cyberlink\PowerDirector\runtime\realpacl full…..

• 검사한 문서 수 XXXXXXX • 검출된 문서 수 XXXXXXX

• 현재 검사 진행 중인 문서

중지일시 정지


Case 2 : 파수 클라이언트 인터랙션 설계

간단히 해보는 Prototyping

검사




Program files

admin

바탕 화면

Users

Home > 검사 실행■ 검사 대상 폴더 선택 1

2 3


검색 범위

■ 검사 범위




중간 ( 속도 중간 )낮음 ( 속도 느림 )




검색 시작

예약 검색 일정변경설정된 검색 옵션 변경

최근 검색 결과2012 년 1 월 4 일 수요일 14:32:11 검색 파일 수 XXXXXXX 검출 파일 수 XXXXXXX

상세 보기

검색 범위

검색 범위 옵션로컬 디스크 (C:)로컬 디스크 (D:)\Program files

시스템 폴더 포함CPU 점유율

점유율 높음 ( 속도 빠름 )

매주 수요일 12:00

검사 중

• 현재 검사 중인 폴더 C:\Program Files\Cyberlink\PowerDirector\runtime\realpacl full…..

• 검사한 파일 수 XXXXXXX • 검출 파일 수 XXXXXXX

• 현재 검사 진행 중

중지일시 정지

검사가 완료되었습니다 . 5 초 후 검사 결과 페이지로 이동합니다 .

닫기

검사 완료


Case 2 : 파수 클라이언트 인터랙션 설계

간단히 해보는 PrototypingCase 3 : 파수 모바일 App. 트랜지션 설계

2013January

2013February

2013March

2013 Fasoo Monthly NewsletterJanuary

Fasoo FSN BrochureXXXXXXXXXX

Fasoo FUT BrochureXXXXXXXXXX

2013 Fasoo Monthly NewsletterFebruary

2013 Fasoo Monthly NewsletterMarch

2013April

2013 Fasoo Monthly NewsletterAprilFasoo

FSNBrochure

FasooFUT

Brochure

>

>

>

>

>

>

>

>

>

New

New

Fasoo Monthly Newletter

Fasoo Saleskit

좌우 Flicking으로 Issue 탐색

Issue 터치하면 해당 Issue 1 page Maga-zine view 로 이동

Close CloseFasoo Mobile Web

Fasoo New Service

1 2

X2

•

Tab

Drag

Flick

Swipe

Double tab

Pinch open

Pinch close

Touch & hold

Shake