Flex 3 UX 가이드

Flex 3 UX 가이드 옥상훈 2008년 7월 5일

목 차 제1장 최근 기술 동향 [1장 참조] 제2장 UX 가이드 [10장 참조] 제3장 UX의 프로젝트 적용 [6, 10장 참조] 제4장 향후 기술 예측 [에어 부록 참조] by OkGosu.Net

1.최근 기술 동향 • 최근 웹 기술의 특징 • 웹2.0 by OkGosu.Net

1.1.최근 웹 기술의 특징 • Html  Rich UI • Windows Only  Cross Platform • Web Browser Only  Extended to Desktop and Device Web 2.0 * Footnote Source: Source

1.2.웹2.0 • 웹 2.0은 기존의 WEB과 구분 지으려는 새로운 트랜드이다. • 사회 문화적인 정의 • 대중이 적극 참여, 공유 활동으로써 새로운 컨텐츠를 지속 창출해내는 문화 • 많은 사용자 경험에 의해 새로운 지성과 문화를 만들어 내는 웹의 사회적인 현상 • 기술적인 정의 • 웹을 플랫폼으로 사용하기 위한 제반 기술 트랜드 • 웹을 소프트웨어 작동을 위한 환경으로 인식 by OkGosu.Net

2.UX기획의 중요성 • 기술 도입 목적 • UX 기획의 문제점 • UI, Usability, User eXperience • UI 기획에서 UX기획으로 • UX 구현 평가 • UX의 3가지 약속 by OkGosu.Net

2.1. 기술 도입 목적 • 25%는 데이터 시각화 • 19% : 상품 전시 • 18% : 프로세스 개선 [표]RIA도입목적 (출처 : 포레스터리서치 2007.3.12 The Business Case For Rich Internet Applications ) by OkGosu.Net

2.2. UI 기획의 문제점 • 기존 시스템에서는 • 페이지 기반 • 여러 페이지를 거쳐야 하나의 작업을 완료할 수 있다 • 보려는 데이터가 여러 곳에 의미 없이 산재해 있다 • 다른 자료와 함께 비교하려면 창을 여러 개 띄워야 한다 • 정적인 화면 • 보는 데이터에 대한 설명이 없다 • 데이터를 비교할 수가 없다 • 최신 정보는 화면을 직접 새로 고쳐야 한다 • 단순한 UI • 여러 건의 데이터를 입력하기가 쉽지 않다 • 단축키 또는 클립보드의 기능을 사용할 수 없다 • 드래그앤 드랍, 필터링, 소팅 등의 기능이 없다 by OkGosu.Net

2.3. UI, Usability, User eXperience • UI : 모양 중심 • + Usability : 기능의 편의성 • + UX(User eXperience) : 사용자 만족도까지 포함 by OkGosu.Net

2.4. UI 기획에서 UX기획으로 • One 페이지 기반 • 한 화면에서 작업을 순차적으로 처리할 수 있게 해준다 • 한 화면에 필요한 화면 요소를 모아 상황판처럼 구성할 수 있다 • 업무가 돌아가는 상황을 한 눈에 볼 수 있다 • 개략적인 정보에서 상세정보로 순차적으로 확인할 수 있도록 함 • 동적인 화면 • 보는 데이터에 대한 설명을 동적으로 넣을 수 있다 • 보고 있는 데이터를 서로 비교할 수 있다 • 최신 정보는 화면을 직접 새로 고치지 않아도 업데이트 된다 • 정교한 UI • 여러 건의 데이터를 엑셀처럼 입력할 수 있다 • 단축키 또는 클립보드의 기능을 사용할 수 있다 • 드래그앤 드랍, 필터링, 소팅 등의 기능이 있다 by OkGosu.Net

2.5. UX 구현 평가 http://www.zdnet.co.kr/itbiz/column/anchor/shok/0,39043376,39168450,00.htm by OkGosu.Net

2.6. UX의 3가지 약속 배려: 불편하지 않게 명확 : 헷갈리지 않게 신속 : 기다리지 않게 + 눈이 즐겁도록 재미있게 by OkGosu.Net

2.6. UX의 3가지 약속 • 배려 • 다양한 접근 방법 제시 • 결과 미리 보기 • 최소한의 조작으로 처리 가능하도록 • 이용자의 조작 오류는 최소화 • WACG(웹접근성 가이드라인) 준수 by OkGosu.Net

2.6. UX의 3가지 약속 • 명확 • 이용자가 어떻게 작업해야 할 지를 암시 또는 지시 • 이용자의 조작오류를 최소화 • 단순한 나열에서 의미와 시사점을 분명히 함 by OkGosu.Net

2.6. UX의 3가지 약속 • 신속 • 사용자를 기다리게 하지 않도록 • 시간이 걸릴 경우는 예상시간을 가시화하여 보여준다 • 처리되는 데이터의 일부부터 보여준다 by OkGosu.Net

3. UX의 프로젝트 적용 • 프로젝트시 고려 사항 • UX 컨설팅 • 대시보드 프로젝트 • 기간업무 프로젝트 • 포털사이트 by OkGosu.Net

3.1. 프로젝트시 고려 사항 • 기존의 html을 그대로 옮겨놓는 실수는 하지 않도록 함 • UX(사용자 경험)을 고려해야 함 • UX를 개발자 또는 디자이너에게 떠넘기지 말아야 함 • 개발자는 코딩에 전념 • 디자이너는 화면 디자인에 전념 • UX는 UX컨설턴트에게 전담 • 개발과 디자인을 어떻게 조화시켜나가는 지가 중요 • 개발자와 디자이너는 같은 배를 타고 있지만 관점이 다른 사람 • 예) 식당의 주방장, 서빙 보는 사람, 카운터, 신발정리 by OkGosu.Net

3.2. UX 컨설팅 • html프로젝트와는 달리 다음의 요소가 가미됨 • UX 기획 • 비즈니스 분석 • UX 도출 • UX 설계 • 비즈니스 프로세스 설계 • 화면 설계 • 화면 디자인 • UX 테스트 • 단위 테스트 • 통합 테스트 • 사용성 테스트 by OkGosu.Net

3.3. UX 컨설팅 [자가용] [영업용] [스포츠카] • 연비 • 편의성 • 내구성 • 안락함 • 안전성 • 옵션 • 외관 • 속도 • 성능 by OkGosu.Net

3.4. 대시보드 프로젝트 • 의사 결정을 하는 임원급 들이 보는 화면임을 고려 • 화면 설계 관점 • 전체 개요 화면에서 상세 데이터 보기 화면으로 • 시력이 약한 사용자를 위해 폰트나 이미지를 또렷하게 • LCD모니터, 대형 PDP 화면 등 다양한 사이즈에서도 레이아웃 유지 • 기능 설계 관점 • 차트를 이용하여 데이터를 비주얼화하고 다양한 차원에서 볼 수 있도록 한다. • 화면을 자동으로 보여주는 슬라이드 쇼 기능이나 북마크 기능 • 아키텍처 설계 관점 • 실시간 서비스 : 실시간 데이터 뷰 및 알리미 서비스 • 리포팅 서비스 : 보고 있는 화면을 바로 출력하거나 저장 by OkGosu.Net

3.5. 기간업무 프로젝트 • 특정 업무를 반복적으로 수행해야 하므로 정확하고 안정적인 작동이 보장이 중요 • 화면 설계 관점 • 업무를 빠르게 수행할 수 있도록 화면 배치, 히스토리 지원 • 메인 화면은 탭을 이용해서 여러 업무를 한 눈에 볼 수 있도록 설계 • 슬라이딩 메뉴 등을 이용하여 화면을 넓게 쓸 수 있도록 한다. • 기능 설계 관점 • 입력시 키보드와 마우스를 번갈아 쓰게 하지 않도록 한다. • 업무 특성을 고려하여 단축키, 탭키 이동이 가능하도록 구현한다. • 아키텍처 설계 관점 • 업무 변경시 변경 모듈의 배포가 용이하도록 업무 단위로 애플리케이션을 분리한다. • 애플리케이션 사이즈 축소 by OkGosu.Net

3.6. 포털사이트 • 불특정 다수들이 방문하기 때문에 다양한 사용자 환경과 애플리케이션 성능고려 • 화면 설계 관점 • 전체를 RIA로 서비스 할 지 부분적으로 서비스할 지를 신중하게 결정 • 서비스하려는 사용자의 모니터의 크기 및 해상도 고려 • 기능 설계 관점 • 저성능 PC 및 저속 네트워크 사용자를 위한 별도의 페이지를 제공한다. • 아키텍처 설계 관점 • 가능한 빠른 반응 속도를 위해서 애플리케이션을 최적화 by OkGosu.Net

4.향후 기술 예측 • 웹2.0에서 웹3.0으로 • 웹3.0 서비스 • 위젯의 대중화 by OkGosu.Net

4.1.웹2.0에서 웹3.0으로 (Webolution : 웹혁명) 웹 3.0 웹 2.0 인터넷 네트워킹 지능망 형성 신경계 형성 근육계 형성 골격계 형성 by OkGosu.Net

4.1.웹2.0에서 웹3.0으로 (Webolution : 웹혁명) 웹2.0 웹3.0 참여 소통 공유 융합 개방 개인화 by OkGosu.Net

4.2.웹3.0 서비스 (Webolution : 웹혁명) 소통 서비스 : 예) Facebook.com • 소통 • 실시간 • 협업 • 융합 • 정보의 융합 • 플랫폼의 융합 • 개인화 • 동적인 UI 생성 • 위젯 융합 서비스 : 예) Open Screen Project 개인화 서비스 : 예) iGoogle.com by OkGosu.Net

4.3. 위젯의 대중화 Newsweek와 Read/WriteWeb에 의 2007 인터넷 전망에서 2007년은 위젯(Widget)* 대중화의 원년 2007-2008 Cross-Phone/Device Flash Lite Flash SDKMobile MXML 2006 Cross-Platform AIR (Apollo) MXML XAML WPF/E Web Browser HTML/JavaScript Ajax/Flash/Flex Windows.NET XAML XAML WPF/E Windows Only WebPages Rich InternetApplications LightweightDesktop Apps Native Applications JIT Deployment Rich ClientRobust App Model JIT Deployment Dumb ClientPage-Based Model JIT Deployment OS Integration Offline Operation Heavyweight Install Native OS Integration Offline Operation by OkGosu.Net

1.5. 위젯의 대중화 • 모니터 해상도 증가 • 모니터 가격 인하 • 디바이스용 애플리케이션 by OkGosu.Net

결론 • UX = 배려, 명확, 신속 • 웹2.0은 소통, 융합, 개인화 서비스로 진화  웹3.0 or Webolution • 위젯의 대중화 by OkGosu.Net

Flex 3 UX 가이드