2016.�1.�21.�Thu.�지현수

Lab Meeting

Pattern Language

jkme

jkme: Pattern Language

패턴랭귀지와 프로젝트의 연관성

2

<UI Components><Semiotics> <Flow>

추상

퍼소나

행동패턴

구체

버튼

행동패턴

Design guide

기호

언어

도상 네비게이션

리스트 방식

• 현재 jkme의 스테이지는 완전한 콤포넌트 디자인이 아닌, 사용자 경험을 설계하는 단계

• 디자인 실증단계에 앞서, 패턴이 축적된 형태를 살펴보며 디자인에 앞서 구조, 관계, 구성에 대해 학습하는 것이 목표

패턴은 어디서 왔는가

• 패턴은 건축설계 이론가 크리스토퍼 알렉산더(Christopher Alexander)에 의해 처음 정의

• 건축설계에서 자주 발생하는 동일한 설계내용을 하나의 패턴으로 보고 다른 건축물에 재사용하게 된 것이 그 출발-> 감각적으로만 파악되던 ‘디자인’행위를 문제를 형성하는 논리적 구조를 가진 형식으로 파악하는 과정

디자인 패턴은 건축 쪽에서 많은 모티브를 가져옴

3

<아씨시의 성프란체스코 성당 천장> <명동 성당의 천장 패턴>

패턴의 정의

4

• 패턴이란, 문제가 발생하는 상황(Context)에서 나타난 문제(Problem)들에 대한 공통적인 해결방안(Solution)

• 건축설계의 ‘방법’ 또는 ‘과정’을 체계적으로 밝혀보려는 노력의 일부였음

• 특정 패턴은 그 장소의 특성을 드러내며, 이는 공간에서 다른 요소들과 끊임없이 상호작용함

패턴은 ‘상황’ -> ‘문제’ -> ‘해결책’의 순서를 따르며 정의됨

<장소의 특성을 나타내는 패턴>

<패턴이 적용된 건축설계>

그렇다면 패턴랭귀지는?

• 본래 패턴랭귀지란, 패턴을 토대로 건축을 설계하는 방법이자 실현하는 수법을 의미

• 다시 말해, ‘언어’로 의사를 소통하듯, 일정한 형태적 규칙 안에서 다양한 디자인을 표현하고 소통할 수 있게 하는 것

패턴을 모아서 하나의 체계로 정리한 것

5

• 패턴이라는게, 이 스터디를 하면서는 이렇게 정의했는데

<패턴의 패턴화>

“Patterns which specify connections between patterns”

일정한 형태적 규칙(패턴) 또 다른 패턴 생성

패턴랭귀지의 등장

• 알렉산더의 건축 사상의 두 흐름, ’패턴’이론과 ‘질서와 전체성’ 이론

• 도시, 건축 등 우리가 일상생활을 통해서 접하고 있는 주변 환경 속의 요소와 구조를 제시

• 주변요소를 패턴으로 규정하고, 패턴랭귀지로 재구성하여 인간이 생활함에 있어서 좋은 환경을 구축하도록 함

주변 환경을 이루는 요소와 그 구성법으로서의 패턴랭귀지

6

<일상생활 속 요소들> <각 요소는 전체와 균형을 이룸>

7

패턴랭귀지의 주요 특징

1. 수직적인 특성(Hierarchical nature) 2. 부가적인 가치 창출

• 패턴 랭귀지는 high-level 부터 low-level 까지

패턴의 수직적인 특성(hierarchical nature)에 따라

디자인을 실제로 ‘generate’

• 패턴 랭귀지를 이용해 도시(high-level)수준에서 부터 창문

(low-level)까지 일관된 디자인을 만들 수 있음

• 패턴화된 패턴의 네트워크는 하나의 패턴보다 더 나은

실제의 additional value를 창출할 수 있어야 함

• 이러한 connection이 해당 패턴 랭귀지의 중심이 되어야 함

Alexander가 정의한 패턴랭귀지의 주요 특징 2가지

건물 vs 웹의 패턴랭귀지

서로 다른 구조들을 가지고 있음

8

Designing Building Designing a Web application

‘경험적 솔루션’으로서의 패턴랭귀지

• 재사용이 가능한 설계/디자인에 대한 해결책을 일관성 있게 축적하고 전달하기 위한 표준적인 포맷으로 제공

• 수많은 프로젝트에서 반복해 사용하는 디자인들을 파악하여 이를 모아 체계적으로 분류하고 문서로 정리

패턴랭귀지는 훌륭한 디자인 해결책에 대한 지식 축적 및 전달 체계

9

패턴랭귀지

다양한 분야의 패턴랭귀지

• 건축분야의 패턴랭귀지

각 분야에서의 ‘패턴랭귀지’은 조금씩 다른 형태와 특징을 갖추고 있음

공통적으로는, 패턴을 기술해서 열람하는 것을 의미

10

• 각각의 패턴은 우리를 둘러싸고 있는 환경에서 반복적으로 나타나는 특정한 문제와 그에 대해 해결책을 설명

• 특정 상황에서의 문제를 정의하고 이를 해결해나가는 과정-> 그 해결책은 계속 사용될 수 있기 때문에 동일한 과정을 반복할 필요 없음

다양한 분야의 패턴랭귀지

• 건축분야의 패턴랭귀지

각 분야에서의 ‘패턴랭귀지’은 조금씩 다른 형태와 특징을 갖추고 있음

공통적으로는, 패턴을 기술해서 열람하는 것을 의미

11

• 소프트웨어분야의 패턴랭귀지

• 각각의 패턴은 우리를 둘러싸고 있는 환경에서 반복적으로 나타나는 특정한 문제와 그에 대해 해결책을 설명

• 특정 상황에서의 문제를 정의하고 이를 해결해나가는 과정-> 그 해결책은 계속 사용될 수 있기 때문에 동일한 과정을 반복할 필요 없음

• 커닝엄이 건축 세계의 개념인 패턴랭귀지에 흥미를 가지고, 프로그래밍에 도입하려 시험

• 객체지향 프로그래밍에 반복해서 등장하는 패턴을 이용함으로써 소프트웨어 개발을 크게 개선-> 프로그래밍에 있어서 반복되어 나타나는 구조나 설계를 재이용하기 쉬운 형식으로 정리한 것

다양한 분야의 패턴랭귀지

• 건축분야의 패턴랭귀지

각 분야에서의 ‘패턴랭귀지’은 조금씩 다른 형태와 특징을 갖추고 있음

공통적으로는, 패턴을 기술해서 열람하는 것을 의미

12

• 소프트웨어분야의 패턴랭귀지 • HCI분야의 패턴랭귀지

• 각각의 패턴은 우리를 둘러싸고 있는 환경에서 반복적으로 나타나는 특정한 문제와 그에 대해 해결책을 설명

• 특정 상황에서의 문제를 정의하고 이를 해결해나가는 과정-> 그 해결책은 계속 사용될 수 있기 때문에 동일한 과정을 반복할 필요 없음

• 커닝엄이 건축 세계의 개념인 패턴랭귀지에 흥미를 가지고, 프로그래밍에 도입하려 시험

• 객체지향 프로그래밍에 반복해서 등장하는 패턴을 이용함으로써 소프트웨어 개발을 크게 개선-> 프로그래밍에 있어서 반복되어 나타나는 구조나 설계를 재이용하기 쉬운 형식으로 정리한 것

• 디자인 패턴랭귀지는 디자이너의 관점에 지식을 축적하고 문제점과 해결책을 제시

• 사용성 원칙과 디자인 가이드라인이 중요한 기준으로 사용됨-> 일관된 사용자경험을 제공하기 위해 정리된 패턴을 반복 사용

다양한 분야의 패턴랭귀지

• 건축분야의 패턴랭귀지

각 분야에서의 ‘패턴랭귀지’은 조금씩 다른 형태와 특징을 갖추고 있음

공통적으로는, 패턴을 기술해서 열람하는 것을 의미

13

• 소프트웨어분야의 패턴랭귀지 • HCI분야의 패턴랭귀지

• 각각의 패턴은 우리를 둘러싸고 있는 환경에서 반복적으로 나타나는 특정한 문제와 그에 대해 해결책을 설명

• 특정 상황에서의 문제를 정의하고 이를 해결해나가는 과정-> 그 해결책은 계속 사용될 수 있기 때문에 동일한 과정을 반복할 필요 없음

• 커닝엄이 건축 세계의 개념인 패턴랭귀지에 흥미를 가지고, 프로그래밍에 도입하려 시험

• 객체지향 프로그래밍에 반복해서 등장하는 패턴을 이용함으로써 소프트웨어 개발을 크게 개선-> 프로그래밍에 있어서 반복되어 나타나는 구조나 설계를 재이용하기 쉬운 형식으로 정리한 것

• 디자인 패턴랭귀지는 디자이너의 관점에 지식을 축적하고 문제점과 해결책을 제시

• 사용성 원칙과 디자인 가이드라인이 중요한 기준으로 사용됨-> 일관된 사용자경험을 제공하기 위해 정리된 패턴을 반복 사용

수직적 특성: scale (크기)

Cities -> Neighborhoods -> houses ->

Windows …

수직적 특성: process

Creational -> Structural ->

Behavioral

수직적 특성: scale of problems

Posture -> Experience -> Task ->

Action

HCI 패턴 구성요소

• 신뢰도/타당성을 증명하기 위해 실험이나 사용자 테스트에 기반하여 논리적 이유와 디자인 원칙을 해결책에 적용 (최영완

• 기존 알렉산더 양식 + 문제점에 기반한 해결책에 디자인 원칙, 관련 리서치 자료 등의 항목을 추가함

태스크, 사용자, 기술적 요소들을 고려하여 패턴랭귀지를 형성

14

태스크�패턴

사용자�패턴

기술적�패턴

• 수행해야 할 태스크 과정의 문제에 대한 해결책 • 태스크 분석을 통해 어떤 기능 또는 어떤 컨텐츠를 제공

해야 하는지 도출 • 태스크 성격에 따라 위계 관계가 형성될 수 있음

• 사용자의 사용 숙련도 및 연령대에 따라 발생하는 문제

• 제품을 사용하는 사용자의 도메인 지식 여부나 컴퓨터 사

용 경험, 빈도, 사용 연령의 차이가 고려되어야 함

• 플랫폼 또는 디바이스, 기술적 상황 때문에 발생하는 문

제들을 다룸 • 이것을 사용하면서 발생하는 인터랙션 디자인에 관련된

문제를 다룸

• 메뉴 선택 패턴 - 풀다운/ 팝업/ 탭 메뉴 등이 메뉴 선택 패턴포함

• 네비게이션 패턴 - 화면 내/ 화면 간 메뉴에서의 네비게이션

• 입력패턴 - 시스템이 사용자로부터 데이터를 입력받는 인풋 패턴

• 표시 패턴 - 데이터나 문서 등을 표시하는 것과 관련된 칼라 레이블 등

• 가이드 및 피드백 패턴 - 오류 예시, 도움말 제공과 관련된 패턴

• 레이아웃 패턴 - 화면/ 웹 페이지의 그리드나 배치에 관련된 넓이 패턴

• 아이콘 및 컬러 패턴 - 아이콘, 이미지, 칼라, 타이포 그래피 등의 비주얼 디자인 패턴

인터랙션�패턴

15

HCI, UX, UI 패턴의 비교

HCI 패턴

(Interaction design 패턴)

• 어떻게 상호작용 할 것인가

• 테마, 컨셉 등

• e.g. Deference / Clarity / Depth

UX 패턴• 사용자가 뷰나 플로우를 통해

어떤 경험을 하게 할 것인가

• e.g. ios9의 UX 가이드라인

UI 패턴• 어떤 component로 어떤 task를

수행하게 할 것인가

• e.g. UX 가이드라인에 따른

component 디자인 및 배치

비슷하지만, 조금씩 다른 용어들에 대한 정리

우리 주변에서 볼 수 있는 패턴랭귀지

• 애플의 iOS 가이드라인

추상적인 것을 좀 더 구체화해서, 주변에서 볼 수 있는 것으로 적용해보자!

실제 사례에서 패턴랭귀지는 어떻게 활용되고, 패턴이 어떻게 디자인으로 연결되는지를 살펴볼 것

16

• 구글의 material design

Thank You