UI/UX 개선을 위한 빠른 프로토타이핑
Upcoming SlideShare
Loading in...5
×
 

UI/UX 개선을 위한 빠른 프로토타이핑

on

  • 4,250 views

제품 UI 및 사용자 경험 개선을 위해 쉽게 적용할 수 있는 프로토타이핑의 개념과 다양한 기법에 대해 소개합니다.

제품 UI 및 사용자 경험 개선을 위해 쉽게 적용할 수 있는 프로토타이핑의 개념과 다양한 기법에 대해 소개합니다.

Statistics

Views

Total Views
4,250
Views on SlideShare
4,067
Embed Views
183

Actions

Likes
10
Downloads
83
Comments
0

3 Embeds 183

http://doogeon.wordpress.com 113
http://play.daumcorp.com 69
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

UI/UX 개선을 위한 빠른 프로토타이핑 UI/UX 개선을 위한 빠른 프로토타이핑 Presentation Transcript

  • Rapid Prototyping빠른 프로토타이핑으로 소프트웨어 UX 개선하기Fasoo ED Team2013.04.11
  • 오늘 할 이야기들사용자 중심으로 제품을 개발해야 하는 이유?사용자 중심 제품 개발에 가장 적합한 method인 UI Prototyping의소개와 관련 이야기들
  • 우리는 어떻게 소프트웨어를만들어 왔을까요?개발자 중심 예산/일정 중심 View slide
  • “세상의 중심은 개발자”고객의 니즈와 관계없이산으로 가는 개발 과정고객이 설명한 것 PM이 이해한 것 기획자가 설계한 것 프로그래머가 코딩 한 것비즈니스 컨설턴트가상상하는 모습문서화 된 산출물 현황 개발 진척 상황 고객이 지불한 비용 고객 지원 현황 사실 고객이 진짜 원하는 것 View slide
  • “예산과 일정이 세상의 기준”고객이 알파 버전을 사용하게 될 날은 언제 올까요.일정에 맞춰서 제품의 요구사항을 축소하거나일부만 구현하거나... 혹은 퀄리티를 낮추거나..예산에 맞춰서 요구사항을 미구현한 상태로 제품 발표하거나… 혹은 퀄리티를 낮추거나..
  • 슈퍼카굴러가는데 의의를 두는 차(?)현실 이상
  • 쇼핑 동선 설계와 제품 분류가 완벽하고 친절해서 제품 배달까지해주는 대형 마트물건도 적고 찾기도 힘들고 주인장은 마실 나간 동네 구멍가게현실 이상
  • 사용자 중심이어야 하는이유는 너무 많습니다.“우리가 쓰려고 만드는 것이 아니라 고객이 사용할 제품을 만드는 겁니다.”“뻔한 얘기지만 고객은 개발자가 아니고 사용자입니다. 프로그래밍에 대한지식도 없고 구매한 제품에서 목적에 부합하지 않는 미적 가치를 추구하지도않으며 개발사의 비즈니스 모델에도 관심 없습니다.”“고객은 기능보다 기능을 매개로 구현하는 „목적‟이나 „가치‟,‟경험‟ 에 관심이 있습니다.”“고객은 우리의 일정이나 일손 부족 같은 건 진짜 관심 없습니다.”“기능이나 제품의 가격, 효용성, 필요한 시기에 시장에 출시되는 것 등등은성공하는 제품의 중요한 요소이지만 결코 모든 것은 아닙니다.”
  • 일반적인 사용자 중심개발 프로세스사용자 중심 제품 개발 과정의 태반이사용자를 끊임없이 이해하는 과정의반복이라는 것을 알 수 있습니다.
  • 사용자 경험에영향을 주는 것들ProductServiceProviderS/WH/WUserDevice Interface Service ContentsEnvironment (Context)UX DesignFeelSenseThinkActRelate감정을 통한 경험관계를 통한 경험감각을 통한 경험사고를 통한 경험신체적 행위를통한 경험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 StandardAppendix 1 . UI Develop Checklist
  • 사실 사용자 중심소프트웨어 개발이싫은 사람은 없습니다.
  • 몇 가지 문제만 없다면…바쁜 일정 부족한 예산 더 부족한 인력복잡한 의사소통 구조 그 와중에 무시되는 사용자 쌓여가는 요구사항
  • 피할 수 없다면 적응합시다.
  • 방법이 없는 건 아닙니다.일정을 단축하고 예산을 절약하고 인력도 절약하고손쉽게 의사소통하고 고객 니즈를 발 빠르게 수집하고 요구사항을 빠르게 처리
  • 전통적인 „폭포수방식‟
  • „Prototyping‟에 대해서
  • 사실 Prototyping은 굉장히일상적인 방법론입니다.건축 분야에서는 필수적인 절차제품 디자인 분야에서도 일상적자동차 클레이 목업도 대표적 프로토타이핑
  • 소프트웨어 개발에서Prototyping 을 사용하지않을 이유가 없습니다.물론 우리가 초 천재라서 프로젝트의 모든 리스크를 미리 예측하고고객이 원하는 것을 점쟁이처럼 맞추고애매한 요구사항만으로 최종 산출물의 그림을 척척 그려내서코딩까지 할 수 있다면굳이 할 필욘 없죠.
  • 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 toolPencilFluid UI Balsamiq MockupsMockflow
  • 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나 한가지 템플릿만체크하면 대부분을 정의할 수 있는 화면 요건이 많습니다. 괜히 전부 다 하려다가 하나도 못하는 상황을 피합시다.
  • 간단히해보는PrototypingCase 1 : 파수 웹사이트 제품 페이지 설계Step 1 : 레이아웃
  • 간단히해보는PrototypingCase 1 : 파수 웹사이트 제품 페이지 설계Step 2 : 공통요소SearchLogin | Join | KoreanPrivacy | Legal | Sitemap | RSS | Fasoo Partner PortalProduct & Solutions Support Center PR Center About Fasoo
  • 간단히해보는PrototypingCase 1 : 파수 웹사이트 제품 페이지 설계Step 2 : 공통요소SearchLogin | Join | KoreanPrivacy | Legal | Sitemap | RSS | Fasoo Partner PortalProduct & Solutions Support Center PR Center About FasooDocument Security Home > Product & Solutions > Document Security > DRM > FSDDRM• Product ▲FED> FSDFSNFSEFSPFSWFasoo Mobile SolutionDRM oneFSS• Consulting Services ▲개인 정보 보호• FAST• FICSDocument SecuritySource Code AnalysisContent PublishingDatabase Security
  • 간단히해보는PrototypingCase 1 : 파수 웹사이트 제품 페이지 설계Step 3 : 컨텐츠SearchLogin | Join | KoreanPrivacy | Legal | Sitemap | RSS | Fasoo Partner PortalProduct & Solutions Support Center PR Center About FasooDocument Security Home > Product & Solutions > Document Security > DRM > FSDDRM• Product ▲FED> FSDFSNFSEFSPFSWFasoo Mobile SolutionDRM oneFSS• Consulting Services ▲개인 정보 보호• FAST• FICSDocument SecuritySource Code AnalysisContent PublishingDatabase SecurityFSDFasoo Secure DocumentRelated Products & Materials“정보 시스템에서 관리하는중요문서에 대한 근원적인보안 대책을 제시합니다.”Preface정보 시스템에서 관리하는 중요문서에 대한근원적인 보안 대책을 제시합니다. 정보 시스템에서 관리하는 중요문서에 대한 근원적인보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에 대한근원적인 보안 대책을 제시합니다In practice정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다. 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다System RequirementSupported ApplicationsCertifications정보 시스템에서 관리하는 중요문서에 대한근원적인 보안 대책을 제시합니다. 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에 대한근원적인 보안 대책을 제시합니다. 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에 대한근원적인 보안 대책을 제시합니다. 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다Key Features정보 시스템에서 관리하는 중요문서에 대한근원적인 보안 대책을 제시합니다. 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에 대한근원적인 보안 대책을 제시합니다. 정보 시스템에서 관리하는 중요문서에 대한 근원적인 보안 대책을 제시합니다Brochure InquiryE-mail this pagePrinter View• 정보 시스템에서 관리하는 중요문서에 대한 보안 대책을 제시합니다.• 정보 시스템에서 관리하는 중요문서에 대한 보안 대책을 제시합니다• 정보 시스템에서 관리하는 중요문서에 대한 보안 대책을 제시합니다.• 정보 시스템에서 관리하는 중요문서에 대한 보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에대한 근원적인 보안 대책을 제시합니다.정보 시스템에서 관리하는 중요문서에대한 근원적인 보안 대책을 제시합니다정보 시스템에서 관리하는 중요문서에대한 근원적인 보안 대책을 제시합니다.정보 시스템에서 관리하는 중요문서에대한 근원적인 보안 대책을 제시합니다SHARE THIS
  • 간단히 해보는 PrototypingCase 2 : 파수 클라이언트 인터랙션 설계검사내 문서로컬 디스크 (C:)로컬 디스크 (D:)로컬 디스크 (E:)Program filesadmin바탕 화면UsersHome > 검사 실행■ 검사 대상 폴더 선택CAPP Version 1.0 Client검색 범위■ 검사 범위숨김 폴더압축 파일시스템 폴더매주 수요일 12:00■ CPU 사용률(검사 속도)중간 (속도 중간)낮음 (속도 느림)높음 (속도 빠름)검사 결과 설정Home 검사 실행검사 폴더 요약폴더 이름 전체 경로
  • 간단히 해보는 Prototyping검사내 문서로컬 디스크 (C:)로컬 디스크 (D:)로컬 디스크 (E:)Program filesadmin바탕 화면UsersHome > 검사 실행■ 검사 대상 폴더 선택 12 3CAPP Version 1.0 Client검색 범위■ 검사 범위숨김 폴더압축 파일시스템 폴더매주 수요일 12:00■ CPU 사용률(검사 속도)중간 (속도 중간)낮음 (속도 느림)높음 (속도 빠름)검사 결과 설정Home 검사 실행검사 폴더 요약폴더 이름 전체 경로검색 시작예약 검색 일정변경설정된 검색 옵션 변경최근 검색 결과2012년 1월 4일 수요일 14:32:11 검색 파일 수 XXXXXXX 검출 파일 수 XXXXXXX상세 보기검색 범위검색 범위 옵션로컬 디스크 (C:)로컬 디스크 (D:)Program files시스템 폴더 포함CPU 점유율점유율 높음 (속도 빠름)매주 수요일 12:00검사 중• 현재 검사 중인 퐆더 C:Program FilesCyberlinkPowerDirectorruntimerealpacl full…..• 검사한 문서 수 XXXXXXX • 검출된 문서 수 XXXXXXX• 현재 검사 진행 중인 문서중지일시 정지CAPP Version 1.0 ClientCase 2 : 파수 클라이언트 인터랙션 설계
  • 간단히 해보는 Prototyping검사내 문서로컬 디스크 (C:)로컬 디스크 (D:)로컬 디스크 (E:)Program filesadmin바탕 화면UsersHome > 검사 실행■ 검사 대상 폴더 선택 12 3CAPP Version 1.0 Client검색 범위■ 검사 범위숨김 폴더압축 파일시스템 폴더매주 수요일 12:00■ CPU 사용률(검사 속도)중간 (속도 중간)낮음 (속도 느림)높음 (속도 빠름)검사 결과 설정Home 검사 실행검사 폴더 요약폴더 이름 전체 경로검색 시작예약 검색 일정변경설정된 검색 옵션 변경최근 검색 결과2012년 1월 4일 수요일 14:32:11 검색 파일 수 XXXXXXX 검출 파일 수 XXXXXXX상세 보기검색 범위검색 범위 옵션로컬 디스크 (C:)로컬 디스크 (D:)Program files시스템 폴더 포함CPU 점유율점유율 높음 (속도 빠름)매주 수요일 12:00검사 중• 현재 검사 중인 퐆더 C:Program FilesCyberlinkPowerDirectorruntimerealpacl full…..• 검사한 문서 수 XXXXXXX • 검출된 문서 수 XXXXXXX• 현재 검사 진행 중인 문서중지일시 정지CAPP Version 1.0 ClientCase 2 : 파수 클라이언트 인터랙션 설계
  • 간단히 해보는 Prototyping검사내 문서로컬 디스크 (C:)로컬 디스크 (D:)로컬 디스크 (E:)Program filesadmin바탕 화면UsersHome > 검사 실행■ 검사 대상 폴더 선택 12 3CAPP Version 1.0 Client검색 범위■ 검사 범위숨김 폴더압축 파일시스템 폴더매주 수요일 12:00■ CPU 사용률(검사 속도)중간 (속도 중간)낮음 (속도 느림)높음 (속도 빠름)검사 결과 설정Home 검사 실행검사 폴더 요약폴더 이름 전체 경로검색 시작예약 검색 일정변경설정된 검색 옵션 변경최근 검색 결과2012년 1월 4일 수요일 14:32:11 검색 파일 수 XXXXXXX 검출 파일 수 XXXXXXX상세 보기검색 범위검색 범위 옵션로컬 디스크 (C:)로컬 디스크 (D:)Program files시스템 폴더 포함CPU 점유율점유율 높음 (속도 빠름)매주 수요일 12:00검사 중• 현재 검사 중인 폴더 C:Program FilesCyberlinkPowerDirectorruntimerealpacl full…..• 검사한 파일 수 XXXXXXX • 검출 파일 수 XXXXXXX• 현재 검사 진행 중중지일시 정지검사가 완료되었습니다. 5초 후 검사 결과 페이지로 이동합니다.닫기검사 완료CAPP Version 1.0 ClientCase 2 : 파수 클라이언트 인터랙션 설계
  • 간단히 해보는 PrototypingCase 3 : 파수 모바일 App. 트랜지션 설계2013January2013February2013March2013 Fasoo Monthly NewsletterJanuaryFasoo FSN BrochureXXXXXXXXXXFasoo FUT BrochureXXXXXXXXXX2013 Fasoo Monthly NewsletterFebruary2013 Fasoo Monthly NewsletterMarch2013April2013 Fasoo Monthly NewsletterAprilFasooFSNBrochureFasooFUTBrochure>>>>>>>>>NewNewFasoo Monthly NewletterFasoo Saleskit좌우 Flicking으로 Issue 탐색Issue 터치하면해당 Issue 1page Magazineview로 이동Close CloseFasooMobile WebFasooNew Service1 2X2TabDragFlickSwipeDouble tabPinch openPinch closeTouch & holdShake
  • Q & A