2. jkme: Pattern Language
패턴랭귀지와 프로젝트의 연관성
2
<UI Components><Semiotics> <Flow>
추상
퍼소나
행동패턴
구체
버튼
행동패턴
Design guide
기호
언어
도상
네비게이션
리스트 방식
• 현재 jkme의 스테이지는 완전한 콤포넌트 디자인이 아닌, 사용자 경험을 설계하는 단계
• 디자인 실증단계에 앞서, 패턴이 축적된 형태를 살펴보며 디자인에 앞서 구조, 관계, 구성에 대해 학습하는 것이 목표
3. 패턴은 어디서 왔는가
• 패턴은 건축설계 이론가 크리스토퍼 알렉산더(Christopher Alexander)에 의해 처음 정의
• 건축설계에서 자주 발생하는 동일한 설계내용을 하나의 패턴으로 보고 다른 건축물에 재사용하게 된 것이 그 출발
-> 감각적으로만 파악되던 ‘디자인’행위를 문제를 형성하는 논리적 구조를 가진 형식으로 파악하는 과정
디자인 패턴은 건축 쪽에서 많은 모티브를 가져옴
3
<아씨시의 성프란체스코 성당 천장> <명동 성당의 천장 패턴>
4. 패턴의 정의
4
• 패턴이란, 문제가 발생하는 상황(Context)에서 나타난 문제(Problem)들에 대한 공통적인 해결방안(Solution)
• 건축설계의 ‘방법’ 또는 ‘과정’을 체계적으로 밝혀보려는 노력의 일부였음
• 특정 패턴은 그 장소의 특성을 드러내며, 이는 공간에서 다른 요소들과 끊임없이 상호작용함
패턴은 ‘상황’ -> ‘문제’ -> ‘해결책’의 순서를 따르며 정의됨
<장소의 특성을 나타내는 패턴>
<패턴이 적용된 건축설계>
5. 그렇다면 패턴랭귀지는?
• 본래 패턴랭귀지란, 패턴을 토대로 건축을 설계하는 방법이자 실현하는 수법을 의미
• 다시 말해, ‘언어’로 의사를 소통하듯, 일정한 형태적 규칙 안에서 다양한 디자인을 표현하고 소통할 수 있게 하는 것
패턴을 모아서 하나의 체계로 정리한 것
5
<패턴의 패턴화>
“Patterns which specify connections between patterns”
일정한 형태적 규칙(패턴) 또 다른 패턴 생성
6. 패턴랭귀지의 등장
• 알렉산더의 건축 사상의 두 흐름, ’패턴’이론과 ‘질서와 전체성’ 이론
• 도시, 건축 등 우리가 일상생활을 통해서 접하고 있는 주변 환경 속의 요소와 구조를 제시
• 주변요소를 패턴으로 규정하고, 패턴랭귀지로 재구성하여 인간이 생활함에 있어서 좋은 환경을 구축하도록 함
주변 환경을 이루는 요소와 그 구성법으로서의 패턴랭귀지
6
<일상생활 속 요소들> <각 요소는 전체와 균형을 이룸>
7. 7
패턴랭귀지의 주요 특징
1. 수직적인 특성(Hierarchical nature) 2. 부가적인 가치 창출
• 패턴 랭귀지는 high-level 부터 low-level 까지
패턴의 수직적인 특성(hierarchical nature)에 따라
디자인을 실제로 ‘generate’
• 패턴 랭귀지를 이용해 도시(high-level)수준에서 부터 창문
(low-level)까지 일관된 디자인을 만들 수 있음
• 패턴화된 패턴의 네트워크는 하나의 패턴보다 더 나은
실제의 additional value를 창출할 수 있어야 함
• 이러한 connection이 해당 패턴 랭귀지의 중심이 되어야 함
Alexander가 정의한 패턴랭귀지의 주요 특징 2가지
8. 건물 vs 웹의 패턴랭귀지
서로 다른 구조들을 가지고 있음
8
Designing Building Designing a Web application
9. ‘경험적 솔루션’으로서의 패턴랭귀지
• 재사용이 가능한 설계/디자인에 대한 해결책을 일관성 있게 축적하고 전달하기 위한 표준적인 포맷으로 제공
• 수많은 프로젝트에서 반복해 사용하는 디자인들을 파악하여 이를 모아 체계적으로 분류하고 문서로 정리
패턴랭귀지는 훌륭한 디자인 해결책에 대한 지식 축적 및 전달 체계
9
패턴랭귀지
10. 다양한 분야의 패턴랭귀지
• 건축분야의 패턴랭귀지
각 분야에서의 ‘패턴랭귀지’은 조금씩 다른 형태와 특징을 갖추고 있음
공통적으로는, 패턴을 기술해서 열람하는 것을 의미
10
• 각각의 패턴은 우리를 둘러싸고 있는 환경에서
반복적으로 나타나는 특정한 문제와 그에 대해
해결책을 설명
• 특정 상황에서의 문제를 정의하고 이를 해결해
나가는 과정
-> 그 해결책은 계속 사용될 수 있기 때문에
동일한 과정을 반복할 필요 없음
11. 다양한 분야의 패턴랭귀지
• 건축분야의 패턴랭귀지
각 분야에서의 ‘패턴랭귀지’은 조금씩 다른 형태와 특징을 갖추고 있음
공통적으로는, 패턴을 기술해서 열람하는 것을 의미
11
•소프트웨어분야의 패턴랭귀지
• 각각의 패턴은 우리를 둘러싸고 있는 환경에서
반복적으로 나타나는 특정한 문제와 그에 대해
해결책을 설명
• 특정 상황에서의 문제를 정의하고 이를 해결해
나가는 과정
-> 그 해결책은 계속 사용될 수 있기 때문에
동일한 과정을 반복할 필요 없음
• 커닝엄이 건축 세계의 개념인 패턴랭귀지에
흥미를 가지고, 프로그래밍에 도입하려 시험
• 객체지향 프로그래밍에 반복해서 등장하는
패턴을 이용함으로써 소프트웨어 개발을
크게 개선
-> 프로그래밍에 있어서 반복되어 나타나는
구조나 설계를 재이용하기 쉬운 형식으로 정
리한 것
12. 다양한 분야의 패턴랭귀지
• 건축분야의 패턴랭귀지
각 분야에서의 ‘패턴랭귀지’은 조금씩 다른 형태와 특징을 갖추고 있음
공통적으로는, 패턴을 기술해서 열람하는 것을 의미
12
•소프트웨어분야의 패턴랭귀지 • HCI분야의 패턴랭귀지
• 각각의 패턴은 우리를 둘러싸고 있는 환경에서
반복적으로 나타나는 특정한 문제와 그에 대해
해결책을 설명
• 특정 상황에서의 문제를 정의하고 이를 해결해
나가는 과정
-> 그 해결책은 계속 사용될 수 있기 때문에
동일한 과정을 반복할 필요 없음
• 커닝엄이 건축 세계의 개념인 패턴랭귀지에
흥미를 가지고, 프로그래밍에 도입하려 시험
• 객체지향 프로그래밍에 반복해서 등장하는
패턴을 이용함으로써 소프트웨어 개발을
크게 개선
-> 프로그래밍에 있어서 반복되어 나타나는
구조나 설계를 재이용하기 쉬운 형식으로 정
리한 것
• 디자인 패턴랭귀지는 디자이너의 관점에 지
식을 축적하고 문제점과 해결책을 제시
• 사용성 원칙과 디자인 가이드라인이 중요한
기준으로 사용됨
-> 일관된 사용자경험을 제공하기 위해
정리된 패턴을 반복 사용
13. 다양한 분야의 패턴랭귀지
• 건축분야의 패턴랭귀지
각 분야에서의 ‘패턴랭귀지’은 조금씩 다른 형태와 특징을 갖추고 있음
공통적으로는, 패턴을 기술해서 열람하는 것을 의미
13
•소프트웨어분야의 패턴랭귀지 • HCI분야의 패턴랭귀지
• 각각의 패턴은 우리를 둘러싸고 있는 환경에서
반복적으로 나타나는 특정한 문제와 그에 대해
해결책을 설명
• 특정 상황에서의 문제를 정의하고 이를 해결해
나가는 과정
-> 그 해결책은 계속 사용될 수 있기 때문에
동일한 과정을 반복할 필요 없음
• 커닝엄이 건축 세계의 개념인 패턴랭귀지에
흥미를 가지고, 프로그래밍에 도입하려 시험
• 객체지향 프로그래밍에 반복해서 등장하는
패턴을 이용함으로써 소프트웨어 개발을
크게 개선
-> 프로그래밍에 있어서 반복되어 나타나는
구조나 설계를 재이용하기 쉬운 형식으로 정
리한 것
• 디자인 패턴랭귀지는 디자이너의 관점에 지
식을 축적하고 문제점과 해결책을 제시
• 사용성 원칙과 디자인 가이드라인이 중요한
기준으로 사용됨
-> 일관된 사용자경험을 제공하기 위해
정리된 패턴을 반복 사용
수직적 특성: scale (크기)
Cities -> Neighborhoods -> houses ->
Windows …
수직적 특성: process
Creational -> Structural ->
Behavioral
수직적 특성: scale of problems
Posture -> Experience -> Task ->
Action
14. HCI 패턴 구성요소
• 신뢰도/타당성을 증명하기 위해 실험이나 사용자 테스트에 기반하여 논리적 이유와 디자인 원칙을 해결책에 적용 (최영완
• 기존 알렉산더 양식 + 문제점에 기반한 해결책에 디자인 원칙, 관련 리서치 자료 등의 항목을 추가함
태스크, 사용자, 기술적 요소들을 고려하여 패턴랭귀지를 형성
14
태스크 패턴
사용자 패턴
기술적 패턴
• 수행해야 할 태스크 과정의 문제에 대한 해결책
• 태스크 분석을 통해 어떤 기능 또는 어떤 컨텐츠를 제공
해야 하는지 도출
• 태스크 성격에 따라 위계 관계가 형성될 수 있음
• 사용자의 사용 숙련도 및 연령대에 따라 발생하는 문제
• 제품을 사용하는 사용자의 도메인 지식 여부나 컴퓨터 사
용 경험, 빈도, 사용 연령의 차이가 고려되어야 함
• 플랫폼 또는 디바이스, 기술적 상황 때문에 발생하는 문
제들을 다룸
• 이것을 사용하면서 발생하는 인터랙션 디자인에 관련된
문제를 다룸
• 메뉴 선택 패턴
- 풀다운/ 팝업/ 탭 메뉴 등이 메뉴 선택 패턴포함
• 네비게이션 패턴
- 화면 내/ 화면 간 메뉴에서의 네비게이션
• 입력패턴
- 시스템이 사용자로부터 데이터를 입력받는 인풋 패턴
• 표시 패턴
- 데이터나 문서 등을 표시하는 것과 관련된 칼라 레이블 등
• 가이드 및 피드백 패턴
- 오류 예시, 도움말 제공과 관련된 패턴
• 레이아웃 패턴
- 화면/ 웹 페이지의 그리드나 배치에 관련된 넓이 패턴
• 아이콘 및 컬러 패턴
- 아이콘, 이미지, 칼라, 타이포 그래피 등의 비주얼 디자인
패턴
인터랙션 패턴
15. 15
HCI, UX, UI 패턴의 비교
HCI 패턴
(Interaction design 패턴)
• 어떻게 상호작용 할 것인가
• 테마, 컨셉 등
• e.g. Deference / Clarity / Depth
UX 패턴
• 사용자가 뷰나 플로우를 통해
어떤 경험을 하게 할 것인가
• e.g. ios9의 UX 가이드라인
UI 패턴
• 어떤 component로 어떤 task를
수행하게 할 것인가
• e.g. UX 가이드라인에 따른
component 디자인 및 배치
비슷하지만, 조금씩 다른 용어들에 대한 정리
16. 우리 주변에서 볼 수 있는 패턴랭귀지
• 애플의 iOS 가이드라인
추상적인 것을 좀 더 구체화해서, 주변에서 볼 수 있는 것으로 적용해보자!
실제 사례에서 패턴랭귀지는 어떻게 활용되고, 패턴이 어떻게 디자인으로 연결되는지를 살펴볼 것
16
•구글의 material design
