flex 3 ux 가이드

© Copyright okgosu.net

Flex 3 UX 가이드

옥상훈2008년 7월 5일

by OkGosu.Nethttp://www.acornpub.co.kr/book/flex

제 1 장

제 2 장

제 3 장

목 차최근 기술 동향 [1 장 참조 ]

UX 가이드 [10 장 참조 ]

UX 의 프로젝트 적용 [6, 10 장 참조 ]

제 4 장 향후 기술 예측 [ 에어 부록 참조 ]


최근 웹 기술의 특징 웹 2.0

1.최근 기술 동향

1.1. 최근 웹 기술의 특징

*Footnote

Source: Source

Web 2.0

Html Rich UI

Windows Only Cross Platform

Web Browser Only Extended to Desktop and Device


1.2. 웹 2.0

웹 2.0 은 기존의 WEB 과 구분 지으려는 새로운 트랜드이다 .

사회 문화적인 정의 대중이 적극 참여 , 공유 활동으로써 새로운 컨텐츠를 지속

창출해내는 문화 많은 사용자 경험에 의해 새로운 지성과 문화를 만들어 내는 웹의

사회적인 현상

기술적인 정의 웹을 플랫폼으로 사용하기 위한 제반 기술 트랜드 웹을 소프트웨어 작동을 위한 환경으로 인식


기술 도입 목적 UX 기획의 문제점 UI, Usability, User eXpe

rience UI 기획에서 UX 기획으로 UX 구현 평가 UX 의 3 가지 약속

2.UX기획의 중요성


2.1. 기술 도입 목적 25% 는 데이터 시각화 19% : 상품 전시 18% : 프로세스 개선

[ 표 ]RIA 도입목적 ( 출처 : 포레스터리서치 2007.3.12 The Business Case For Rich Internet Applications )


2.2. UI 기획의 문제점

기존 시스템에서는 페이지 기반

여러 페이지를 거쳐야 하나의 작업을 완료할 수 있다 보려는 데이터가 여러 곳에 의미 없이 산재해 있다 다른 자료와 함께 비교하려면 창을 여러 개 띄워야 한다

정적인 화면 보는 데이터에 대한 설명이 없다 데이터를 비교할 수가 없다 최신 정보는 화면을 직접 새로 고쳐야 한다

단순한 UI 여러 건의 데이터를 입력하기가 쉽지 않다 단축키 또는 클립보드의 기능을 사용할 수 없다 드래그앤 드랍 , 필터링 , 소팅 등의 기능이 없다


2.3. UI, Usability, User eXperience

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


2.4. UI 기획에서 UX 기획으로 One 페이지 기반

한 화면에서 작업을 순차적으로 처리할 수 있게 해준다 한 화면에 필요한 화면 요소를 모아 상황판처럼 구성할 수 있다 업무가 돌아가는 상황을 한 눈에 볼 수 있다 개략적인 정보에서 상세정보로 순차적으로 확인할 수 있도록 함

동적인 화면 보는 데이터에 대한 설명을 동적으로 넣을 수 있다 보고 있는 데이터를 서로 비교할 수 있다 최신 정보는 화면을 직접 새로 고치지 않아도 업데이트 된다

정교한 UI 여러 건의 데이터를 엑셀처럼 입력할 수 있다 단축키 또는 클립보드의 기능을 사용할 수 있다 드래그앤 드랍 , 필터링 , 소팅 등의 기능이 있다


단계 특성

1 단계 ( 무성의한 UI)기능이 빠졌거나 기능이 제대로 작동하지 않음기능이 있어도 찾기가 힘듦 원하는 작업을 수행하는데 많은 시간이 소요됨

2 단계 ( 착한 UI)기능만 정확히 구현되어 있는 상태원하는 작업을 무난하게 수행할 수 있음

3 단계 ( 친절한 UI)사용자의 사용패턴에 맞도록 UI 가 배치원하는 작업을 수행하기 위한 사용자의 노력을 줄여줌

4 단계 ( 지능적 UI)사용자의 다음 동작을 예측하여 UI 가 동적으로 변함원하는 작업을 수행하기 위한 사용자의 노력을 최소화

2.5. UX 구현 평가

http://www.zdnet.co.kr/itbiz/column/anchor/shok/0,39043376,39168450,00.htm


2.6. UX 의 3 가지 약속

배려: 불편하지 않게

명확: 헷갈리지 않게

신속: 기다리지 않게

+ 눈이 즐겁도록 재미있게


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



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



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



프로젝트시 고려 사항 UX 컨설팅 대시보드 프로젝트 기간업무 프로젝트 포털사이트

3. UX의 프로젝트 적용


3.1. 프로젝트시 고려 사항

기존의 html 을 그대로 옮겨놓는 실수는 하지 않도록 함 UX( 사용자 경험 ) 을 고려해야 함

UX 를 개발자 또는 디자이너에게 떠넘기지 말아야 함 개발자는 코딩에 전념 디자이너는 화면 디자인에 전념 UX 는 UX 컨설턴트에게 전담

개발과 디자인을 어떻게 조화시켜나가는 지가 중요 개발자와 디자이너는 같은 배를 타고 있지만 관점이 다른 사람

예 ) 식당의 주방장 , 서빙 보는 사람 , 카운터 , 신발정리


3.2. UX 컨설팅 html 프로젝트와는 달리 다음의 요소가 가미됨

UX 기획 비즈니스 분석 UX 도출

UX 설계 비즈니스 프로세스 설계 화면 설계 화면 디자인

UX 테스트 단위 테스트 통합 테스트 사용성 테스트


3.3. UX 컨설팅

[ 스포츠카 ] [ 자가용 ] [ 영업용 ]

외관 속도 성능

안락함 안전성 옵션

연비 편의성 내구성


3.4. 대시보드 프로젝트

의사 결정을 하는 임원급 들이 보는 화면임을 고려 화면 설계 관점

전체 개요 화면에서 상세 데이터 보기 화면으로 시력이 약한 사용자를 위해 폰트나 이미지를 또렷하게 LCD 모니터 , 대형 PDP 화면 등 다양한 사이즈에서도 레이아웃 유지

기능 설계 관점 차트를 이용하여 데이터를 비주얼화하고 다양한 차원에서 볼 수

있도록 한다 . 화면을 자동으로 보여주는 슬라이드 쇼 기능이나 북마크 기능

아키텍처 설계 관점 실시간 서비스 : 실시간 데이터 뷰 및 알리미 서비스 리포팅 서비스 : 보고 있는 화면을 바로 출력하거나 저장


3.5. 기간업무 프로젝트 특정 업무를 반복적으로 수행해야 하므로 정확하고 안정적인

작동이 보장이 중요 화면 설계 관점

업무를 빠르게 수행할 수 있도록 화면 배치 , 히스토리 지원 메인 화면은 탭을 이용해서 여러 업무를 한 눈에 볼 수 있도록 설계 슬라이딩 메뉴 등을 이용하여 화면을 넓게 쓸 수 있도록 한다 .

기능 설계 관점 입력시 키보드와 마우스를 번갈아 쓰게 하지 않도록 한다 . 업무 특성을 고려하여 단축키 , 탭키 이동이 가능하도록 구현한다 .

아키텍처 설계 관점 업무 변경시 변경 모듈의 배포가 용이하도록 업무 단위로 애플리케이션을 분리한다 .

애플리케이션 사이즈 축소


3.6. 포털사이트

불특정 다수들이 방문하기 때문에 다양한 사용자 환경과 애플리케이션 성능고려 화면 설계 관점

전체를 RIA 로 서비스 할 지 부분적으로 서비스할 지를 신중하게 결정 서비스하려는 사용자의 모니터의 크기 및 해상도 고려

기능 설계 관점 저성능 PC 및 저속 네트워크 사용자를 위한 별도의 페이지를

제공한다 . 아키텍처 설계 관점

가능한 빠른 반응 속도를 위해서 애플리케이션을 최적화


웹 2.0 에서 웹 3.0 으로 웹 3.0 서비스 위젯의 대중화

4.향후 기술 예측


4.1. 웹 2.0 에서 웹 3.0 으로 (Webolution : 웹혁명 )

네트워킹

인터넷

웹 2.0

골격계 형성 근육계 형성 신경계 형성

웹 3.0

지능망 형성


웹 3.0웹 3.0웹 2.0웹 2.0

4.1. 웹 2.0 에서 웹 3.0 으로 (Webolution : 웹혁명 )

참여참여 소통소통

공유공유 융합융합

개방개방 개인화개인화


4.2. 웹 3.0 서비스 (Webolution : 웹혁명 )

소통 실시간 협업

융합 정보의 융합 플랫폼의 융합

개인화 동적인 UI 생성 위젯

소통 서비스 :예 ) Facebook.com

융합 서비스 : 예 ) Open Screen Project

개인화 서비스 : 예 ) iGoogle.com


2007-2008

4.3. 위젯의 대중화

Cross-Platform

Rich InternetApplications

LightweightDesktop Apps

Cross-Phone/Device

2006

AIR (Apollo)MXML

Flash LiteFlash SDKMobile MXML

Windows.NETXAML

WindowsOnly

WebPages

NativeApplications

XAMLWPF/E

XAMLWPF/E

JIT DeploymentOS Integration

Offline Operation

JIT DeploymentRich Client

Robust App Model

JIT DeploymentDumb Client

Page-Based Model

Heavyweight Install Native OS Integration

Offline Operation

Web BrowserHTML/JavaScriptAjax/Flash/Flex

Newsweek와 Read/WriteWeb에 의 2007 인터넷 전망에서 2007년은 위젯 (Widget)* 대중화의 원년


1.5. 위젯의 대중화

모니터 해상도 증가 모니터 가격 인하 디바이스용 애플리케이션


결론 UX = 배려 , 명확 , 신속 웹 2.0 은 소통 , 융합 , 개인화 서비스로 진화 웹 3.0 or W

ebolution 위젯의 대중화

flex 3 ux 가이드

Documents