Web Application UI Pattern

LG CNS S/W공학센터 김창겸

Contact : chgkim@lgcns.com
dmotions@gmail.com
twitter.com/dmotions
Pattern_ 무늬, 모양, 양식, 유형, 반복…
Pattern의 유래

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

1977년 Christopher Alexander가 건축분야에서 처음 제안한 것으로

실제 건축분야에서는 그다지 호응이 없었으나,
이후 Software Engineering분야에서 적극적으로 수용하여
객체지향 프로그래밍 분야에서 엔지니어의 경험을 재사용하는데 성공적으로 사용
Pattern의 기본사상 : 경험적 솔루션

시행착오

해결법
시행착오 문제 해결

시행착오

우리가 어떤 일을 하는데 있어서 처음 문제에 직면했을 때에는

이런 저런 시행착오를 거치게 되면서 이를 해결하게 된다.

그러나 비슷한 문제가 발생했을 때에는 이전의 해결법을 응용하여 해결할 수 있다.

이렇게 각 개개인의 머릿속에만 가지고 있는 해결법을 추상화하고 폭넓게 적용할 수 있는 형태로 만들어 두면
그 문제에 대처해 본 경험이 없는 사람이라 할지라도 적절하게 문제를 풀어갈 수 있을 것이다.
자..Pattern을 찾아보세요..^^
건축 분야의 Pattern

건축 설계 방법을 개선하기 위해
1977년 Christopher Alexander가 창안한 패턴 개념은
현재 ‘건축형태학’이라는 학문으로 자리를 잡고있으며,
그의 저서인 A Pattern Language(1987)에는
총 253개의 패턴이 기술되어 있다.

“각각의 패턴은
우리를 둘러싸고 있는 환경(Context)에서
반복적으로 나타나는 특정한 문제(Problem)와
그에 대한 해결책(Solution)을 설명한다.
그리고 그 해결책은 계속 사용될 수 있기 때문에
동일한 과정을 반복할 필요가 없다.”

Alexanderian Form : Context, Problem, Solution

건축 분야의 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 : _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
건축 분야의 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 : 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
A three-part house - the couple's realm upstairs. commons the largest. …… ……
소프트웨어 분야의 Pattern

건축 분야의 패턴의 개념은

와드 커닝험(Ward Cunningham)과 켄트 벡(Kent Beck)에 의해
소프트웨어 세계로 도입되었고,

에리히 감마(Erich Gamma)를 위시한 네 명(GoF; Gangs of Four)이

디자인 패턴을 구체적으로 정리하였다.
소프트웨어 분야의 Pattern

디자인 패턴은 객체지향 시스템 안에서 반복해서 등장하는 설계와 관련된 문제를 해결하기
위한 일반적인 기법에 이름을 붙이고, 동기를 부여하고, 상세한 설명을 다루고 있다.

여기서 주목할 것은
GoF는 이것들을 창안해 낸 것이 아니라,
단지 수많은 프로젝트에서
반복해 사용하는 디자인들을 파악하여
이를 모아 체계적으로 분류하고 문서로 정리한 것
이라는 점이다.

< 객체지향 S/W 설계를 위한 23가지 패턴 제시 >

소프트웨어 분야의 Pattern

모듈화되고 유기적으로 연결된 패턴 체계

소프트웨어 분야의 Pattern : 예시

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

소프트웨어 분야의 Pattern : 예시

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

소프트웨어 분야의 Pattern : 예시

< GoF 디자인패턴에서 Singleton 패턴 >

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가지 패턴

Problem
Solution(Example)
Problem(Example)
Use when What
Use when
How Use when
Solution
Why Why
Rationale
More Examples How
Accessibility
Special Cases Examples
< yahoo.com의 Design Pattern Library - http://developer.yahoo.com/ypatterns/index.php >
Web Application의 정의

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

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

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

로직의 상태에 영향을 미치는 시스템으로 검색 엔진이나 홍보성 홈페이지등은 웹 어플리케이션에 포함
되지 않는다.
- Conallen, 1999
Web Application의 User Interface 특징

웹 어플리케이션은 업무를 수행하기위해 반복적으로 사용하는 특성이 있으며, 화면기능적인 요구사항이 많아서 GRID등
업무효율성을 높일 수 있는 UI솔루션을 도입하여 UI를 개발하는 특징이 있다.

웹 사이트 웹 어플리케이션
4C (Contents, Communication, Comm
업무처리가 주목적
erce, Community) 의 다양한 목적
불특정 다수의 사용자 기업내부 사용자등 특정 범위의 사용자

사용성측면에서는 접근성 중시 사용성측면에서는 효율성 중시

UI가이드에서 비쥬얼 아이덴티티 요소 중시 UI가이드에서 공통 화면요소 중시

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

업무처리의 기본프로세스

Create
웹 어플리케이션 Read 데이터베이스
(Web Application) Update (DB)
Delete
일반 웹사이트의 화면
웹 어플리케이션의 화면

OO 은행통합시스템 : 거래상품 관리업무

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

OO 판매관리시스템 : 매장별 권고발주량

Web Application UI Pattern : 개발과정

웹 어플리케이션 화면 수집 및 조사, 분석

사내 프로젝트 관리 시스템에 등록되어 있는

조사대상
2001년~2005년 구축된 웹 어플리케이션 프로젝트

공공분야, 금융분야, 제조분야, 전자분야, 건설분야등

표본추출
비즈니스 도메인별 표본 추출

수집대상 단위화면에 대한 상세설명이 기술되어 있는 '사용자 매뉴얼’

Web Application UI Pattern : 개발과정

웹 어플리케이션 화면 수집 및 조사, 분석
Web Application UI Pattern : 양식

기본적으로는 Christopher Alexander가 제안한 패턴의 기본 양식을 따르면서,

DevOn UI 패턴의 특성에 맞게 재정의
Web Application UI Pattern : Web Pattern
Web Application UI Pattern : X-Internet Pattern
Web Application UI Pattern : Web Pattern (예시)

Î
Web Application UI Pattern : X-Internet Pattern (예시)

Î
실무 전문가 집단에 의한 객관성 검증
본 사례에서 제시된 웹 어플리케이션 UI디자인 패턴 모델에 대한 객관성 검증을 위하여 관련 전문가 그룹을 대상으로 설문조사를 실시하였음

A그룹 : UI Designer
UI디자이너 그룹(UI, GUI, Usability, IA등의 전문가)과 시스템 개발자 그룹
•한국HCI연구회, HED리서치그룹
(Modeler, Architect, SE등의 전문가)으로 나누었으며,
•웹개발 경험 유
전문가 대상 시스템 개발자 그룹의 경우 대부분 L사의 개발자들이며 본 연구에서 제시한 패턴
설문조사 B그룹 : 시스템 개발자 모델을 이미 알고 있거나 프로젝트에서 활용해본 적이 있는 사람들이다.
UI디자이너 그룹의 경우 한국HCI연구회와 HED(Human Experience Design)
•L사의 시스템 개발자
리서치 그룹에서 활동하는 UI디자이너들로 본 연구에 대한 세미나를 2006년 5월
•웹개발 경험 유
과 6월에 실시하고 세미나 참석자를 대상으로 설문조사를 실시하였다.

조사대상자의 일반적 특성 UI패턴의 사용 적합성 구성항목별 비교 7

5.93
6
5.71

평균점
4.93
5

3
웹어플리케이션 개발시 웹어플리케이션 시스템 UI 패턴의 범용성
적합성 구축시 주위의 추천의사

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

5.87 5.76
6
5.60 5.53

평균점
5

3
정확, 신속한 고객 개발 소요시간의 개발 시스템 품질의 개발 시스템의 유지
요구사항 도출 효과 단축 효과 향상 효과 보수 비용 용이성
? !
Question and Answer

Contact
chgkim@lgcns.com
dmotions@gmail.com
http://twitter.com/dmotions
#별첨: 화면패턴기반 UI Prototyping
#별첨: UI Pattern을 통한 커뮤니케이션 증진

Before

• 고객 : 새로운 시스템을 구상하면서도, 이전 시스템

의 이미지를 머리에 그리며 화면을 예상하는 경향을
가지고 있다.

• 업무분석가 : 화면 프로세스의 진행과 화면 구성에

대하여 자신이 선호하는 스타일로 화면을 정의하는
고객 경향이 있다.

• 개발자 : 이전에 참여했던 프로젝트의 개발 경험과

소스코드를 가지고 새 프로젝트에 적용하는 것을 선
호하지만, 실제 구현 예제가 주어져 있지 않으면, 개
발자 각자가 같은 기능이지만 서로 다른 내용으로 구
성하는 경우가 있다.
업무분석가 개발자
#별첨: UI Pattern을 통한 커뮤니케이션 증진

After
• 고객 : 새로 구축될 시스템의 대략적인 모습을 패턴과
패턴 프로토타입을 통해 조감할 수 있으며, 기능 요구
사항을 보다 명료하게 도출 해 낼 수 있게 되었다.

• 업무분석가 : 표준적인 화면 프로세스를 미리 봄으로

써, 다른 프로세스를 정리하면서도 이를 모방, 변형하
는 기법을 사용할 수 있게 되므로, 프로젝트 전반에
고객 걸친 화면 프로세스가 일관되게 정리되는 결과를 얻을
수 있게 되었다.

• 개발자 : 개별 기능에 대한 실제 구현 사례와 동작 예

패턴
제가 명료하게 주어져 있기 때문에, 개발자들 간의 기
술 구현 사항에 대한 이견을 줄일 수 있으며 이로 인해
동일 기능에 대한 중복 개발이 줄고, 정형화된 프로그
업무분석가 개발자 램 생산으로 생산성이 비약적으로 높아졌다.