[HCI2010]Web Application UI Pattern

Web Application UI Pattern

LG CNS S/W공학센터

김창겸

[email protected] [email protected]/dmotions

Contact :

Pattern_ 무늬, 모양, 양식, 유형, 반복…

1977년

Christopher Alexander가

건축분야에서

처음

제안한

것으로

실제

건축분야에서는

그다지

호응이

없었으나,

이후

Software Engineering분야에서

적극적으로

수용하여

객체지향

프로그래밍

분야에서

엔지니어의

경험을

재사용하는데

성공적으로

사용

<이미지 출처 :자바 디자인 패턴과 리팩토링, 한빛미디어>

Pattern의

유래

문제

시행착오

시행착오

시행착오

해결해결법

우리가

어떤

일을

하는데

있어서

처음

문제에

직면했을

때에는

이런

저런

시행착오를

거치게

되면서

이를

해결하게

된다.

그러나

비슷한

문제가

발생했을

때에는

이전의

해결법을

응용하여

해결할

수

있다.

이렇게

각

개개인의

머릿속에만

가지고

있는

해결법을

추상화하고

폭넓게

적용할

수

있는

형태로

만들어

두면

그

문제에

대처해

본

경험이

없는

사람이라

할지라도

적절하게

문제를

풀어갈

수

있을

것이다.

Pattern의

기본사상

: 경험적

솔루션

자..Pattern을

찾아보세요..^^ 자..Pattern을

찾아보세요..^^

건축

설계

방법을

개선하기

위해

1977년

Christopher Alexander가

창안한

패턴

개념은

현재

‘건축형태학’이라는

학문으로

자리를

잡고있으며,

그의

저서인

A Pattern Language(1987)에는

총

253개의

패턴이

기술되어

있다.

“각각의

패턴은

우리를

둘러싸고

있는

환경(Context)에서

반복적으로

나타나는

특정한

문제(Problem)와

그에

대한

해결책(Solution)을

설명한다.

그리고

그

해결책은

계속

사용될

수

있기

때문에

동일한

과정을

반복할

필요가

없다.”

Alexanderian

Form : Context, Problem, Solution

건축

분야의

Pattern

건축

분야의

Pattern : 예시

Christopher Alexander의

76번째

패턴인

House For a Small Family

• Context : Town and Country, Family needs

• Problem : In a house for a small family, it is the

relationship between children and adults

which is most critical.

• Solution : _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Christopher Alexander의

76번째

패턴인

House For a Small Family

• Context : Town and Country, Family needs

• Problem : In a house for a small family, it is the

relationship between children and adults

which is most critical.

• Solution : Give the house three distinct parts:

a realm for parents, a realm for the children,

and a common area. Conceive these three

realms as roughly similar in size, with the

commons the largest. …… ……A three-part house - the couple's realm upstairs.

건축

분야의

Pattern : 예시

소프트웨어

분야의

Pattern

에리히

감마(Erich Gamma)를

위시한

네

명(GoF; Gangs of Four)이

디자인

패턴을

구체적으로

정리하였다.

건축

분야의

패턴의

개념은

와드

커닝험(Ward Cunningham)과

켄트

벡(Kent Beck)에

의해

소프트웨어

세계로

도입되었고,

여기서

주목할

것은

GoF는

이것들을

창안해

낸

것이

아니라,

단지

수많은

프로젝트에서

반복해

사용하는

디자인들을

파악하여

이를

모아

체계적으로

분류하고

문서로

정리한

것

이라는

점이다.

< 객체지향

S/W 설계를

위한

23가지

패턴

제시

>

소프트웨어

분야의

Pattern

디자인

패턴은

객체지향

시스템

안에서

반복해서

등장하는

설계와

관련된

문제를

해결하기

위한

일반적인

기법에

이름을

붙이고, 동기를

부여하고, 상세한

설명을

다루고

있다.

소프트웨어

분야의

Pattern

모듈화되고

유기적으로

연결된

패턴

체계

< Adapter Pattern

이미지출처:Head First Design Patterns,O'Reilly>

소프트웨어

분야의

Pattern : 예시

소프트웨어

분야의

Pattern : 예시

< Adapter Pattern

이미지출처:Head First Design Patterns,O'Reilly>

< GoF

디자인패턴에서

Singleton 패턴

>

소프트웨어

분야의

Pattern : 예시

HCI

분야의

Pattern

HCI분야에서는

1997년

SIGCHI에서

처음

논의가

되었으며, 관심이

점점

증가되어

1999년

Interact Workshop에서

HCI의

디자인

패턴에

대한

정의를

내렸다. Interaction Design Pattern,

User Interface Design Pattern, HCI Pattern

등으로

불려진다.

“Patterns help us solve design problems - problems that occur time and time again,

and are being solved time and time again by designers. Patterns describe practical

solutions to these problems and how to apply them in different situations.”

- Martijn van Welie, welie.com

“Interaction Design Pattern은 디자이너가 디자인 할 때 반복되는 문제에 대해서 그 문제가 발생

한 상황과 문제의 내용 그리고 해결책 등을 정형화한 형태이다 .”

–최영완, 한국HCI학술대회, 2004

HCI 분야의

Pattern

http://developer.yahoo.com/ypatterns/

http://developer.yahoo.com/ypatterns/

Designing Interfaces: 인터페이스

디자인

94가지

패턴

WhatUse whenWhyHowExamples

ProblemSolution(Example)Use whenHowWhyMore Examples

Problem(Example)Use whenSolutionRationaleAccessibilitySpecial Cases

< yahoo.com의

Design Pattern Library -

http://developer.yahoo.com/ypatterns/index.php >

웹 어플리케이션(Web Application)은 웹의 기본적인 통신 규약인 HTTP 프로토콜을 이용하여 클라이

언트에게 코드나 데이터를 전송하는 것이다.

-

Anders

Kristensen

웹 어플리케이션은 서버에 비즈니스 로직(Business Logic)을 가지고 있어 사용자의 입력이 비즈니스

로직의 상태에 영향을 미치는 시스템으로 검색 엔진이나 홍보성 홈페이지등은 웹 어플리케이션에 포함

되지 않는다.

-

Conallen,

1999

Web Application의

정의

웹

어플리케이션은

업무를

수행하기위해

반복적으로

사용하는

특성이

있으며, 화면기능적인

요구사항이

많아서

GRID등

업무효율성을

높일

수

있는

UI솔루션을

도입하여

UI를

개발하는

특징이

있다.

웹 사이트 웹 어플리케이션

4C

(Contents, Communication, Comm

erce, Community) 의

다양한

목적업무처리가 주목적

불특정

다수의

사용자 기업내부

사용자등

특정

범위의

사용자

사용성측면에서는

접근성

중시 사용성측면에서는

효율성

중시

UI가이드에서

비쥬얼

아이덴티티

요소

중시 UI가이드에서

공통

화면요소

중시

디자인, Layout 중시 기능, Task 중시

웹 어플리케이션

(Web Application)

데이터베이스

(DB)

Create

Read

Update

Delete

업무처리의 기본프로세스

Web Application의

User Interface 특징

일반

웹사이트의

화면

OO 은행통합시스템

: 거래상품

관리업무

웹

어플리케이션의

화면

OO 판매관리시스템

: 매장별

권고발주량

OO고객관리시스템: 고객정보

관리업무

조사대상 2001년~2005년

구축된

웹

어플리케이션

프로젝트

표본추출공공분야, 금융분야, 제조분야, 전자분야, 건설분야등

비즈니스

도메인별

표본

추출

웹

어플리케이션

화면

수집

및

조사, 분석

Web Application UI Pattern : 개발과정

웹

어플리케이션

화면

수집

및

조사, 분석

Web Application UI Pattern :

개발과정


양식

기본적으로는 Christopher Alexander가

제안한 패턴의 기본 양식을 따르면서,

DevOn

UI 패턴의

특성에

맞게

재정의


Web Pattern


X-Internet Pattern


Web Pattern (예시)


X-Internet Pattern (예시)

본

사례에서

제시된

웹

어플리케이션

UI디자인

패턴

모델에

대한

객관성

검증을

위하여

관련

전문가

그룹을

대상으로

설문조사를

실시하였음

전문가

대상

설문조사

•한국HCI연구회, HED리서치그룹

•웹개발

경험

유

A그룹

: UI Designer

B그룹

: 시스템

개발자

•L사의

시스템 개발자

•웹개발

경험

유

4.93

5.715.93

3

4

5

6

7

웹어플리케이션 개발시

적합성

웹어플리케이션 시스템

구축시 주위의 추천의사

UI 패턴의 범용성

평균

점

UI패턴의 사용 적합성 구성항목별 비교

5.765.87

5.60 5.53

3

4

5

6

7

정확, 신속한 고객

요구사항 도출 효과

개발 소요시간의

단축 효과

개발 시스템 품질의

향상 효과

개발 시스템의 유지

보수 비용 용이성

평균

점

UI패턴의 생산성 효과 구성항목별 비교

조사대상자의 일반적 특성

UI디자이너

그룹(UI, GUI, Usability, IA등의

전문가)과

시스템

개발자

그룹

(Modeler, Architect, SE등의

전문가)으로

나누었으며,

시스템

개발자

그룹의

경우

대부분

L사의

개발자들이며

본

연구에서

제시한

패턴

모델을

이미

알고

있거나

프로젝트에서

활용해본

적이

있는

사람들이다.

UI디자이너

그룹의

경우

한국HCI연구회와

HED(Human

Experience Design)

리서치

그룹에서

활동하는

UI디자이너들로

본

연구에

대한

세미나를

2006년

5월

과

6월에 실시하고

세미나

참석자를

대상으로

설문조사를 실시하였다.

실무

전문가

집단에

의한

객관성

검증

? !Question and Answer

Contact

[email protected] [email protected]

http://twitter.com/dmotions

#별첨: 화면패턴기반

UI Prototyping

Before

고객

업무분석가 개발자

•

고객

: 새로운

시스템을

구상하면서도, 이전

시스템

의

이미지를

머리에

그리며

화면을

예상하는

경향을

가지고

있다.

•

업무분석가

: 화면

프로세스의

진행과

화면

구성에

대하여

자신이

선호하는

스타일로

화면을

정의하는

경향이

있다.

•

개발자

: 이전에

참여했던

프로젝트의

개발

경험과

소스코드를

가지고

새

프로젝트에

적용하는

것을

선

호하지만, 실제

구현

예제가

주어져

있지

않으면, 개

발자

각자가

같은

기능이지만

서로

다른

내용으로

구

성하는

경우가

있다.

#별첨: UI

Pattern을

통한

커뮤니케이션

증진

After

고객

업무분석가 개발자

패턴

•

고객

: 새로

구축될

시스템의

대략적인

모습을

패턴과

패턴

프로토타입을

통해

조감할

수

있으며, 기능

요구

사항을

보다

명료하게

도출

해

낼

수

있게

되었다.

•

업무분석가

: 표준적인

화면

프로세스를

미리

봄으로

써, 다른

프로세스를

정리하면서도

이를

모방, 변형하

는 기법을 사용할 수 있게 되므로, 프로젝트 전반에

걸친

화면

프로세스가

일관되게

정리되는

결과를

얻을

수 있게 되었다.

•

개발자

: 개별

기능에

대한

실제

구현

사례와

동작

예

제가

명료하게

주어져

있기

때문에, 개발자들

간의

기

술 구현 사항에 대한 이견을 줄일 수 있으며 이로 인해

동일

기능에

대한

중복

개발이

줄고, 정형화된

프로그

램

생산으로

생산성이

비약적으로

높아졌다.

#별첨: UI

Pattern을

통한

커뮤니케이션

증진

Documents

[HCI2010]Web Application UI Pattern