From Design pattern
Jump to: navigation, search
(Instructions)
 
(31 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
How to use 에서는 직접 사례나 패턴을 등록/수정하고, 패턴을 제작할 수 있는 세가지 방법을 설명한다.
 
How to use 에서는 직접 사례나 패턴을 등록/수정하고, 패턴을 제작할 수 있는 세가지 방법을 설명한다.
  
* How to adjust pattern page: 기존 패턴 페이지를 수정하고 보완하는 방법을 설명한다.
+
* [[#How to modify pattern page|How to modify pattern page]]: 기존 패턴 페이지를 수정하고 보완하는 방법을 설명한다.
* How to add new example: 새로운 사례를 추가하는 방법을 설명한다.
+
* [[#How to add new example|How to add new example]]: 새로운 사례를 추가하는 방법을 설명한다.
* How to add new pattern: 새로운 패턴을 추가하는 방법을 설명한다.
+
* [[#How to add new pattern|How to add new pattern]]: 새로운 패턴을 추가하는 방법을 설명한다.
 
----
 
----
== How to adjust pattern page ==
+
== How to modify pattern page ==
 
IxPatterns.com에 있는 패턴 페이지의 내용을 수정하고 보완할 수 있다.
 
IxPatterns.com에 있는 패턴 페이지의 내용을 수정하고 보완할 수 있다.
  
 
=== Instructions ===
 
=== Instructions ===
 
# 계정을 생성하여 로그인한다.
 
# 계정을 생성하여 로그인한다.
 
 
# 전체 페이지를 수정하고 싶을 경우 Header 에 위치한 Edit 버튼을 누른다.
 
# 전체 페이지를 수정하고 싶을 경우 Header 에 위치한 Edit 버튼을 누른다.
 
 
# 페이지의 일부를 수정하고 싶을 경우 Contents 영역의 각 단락에 위치한 Edit 버튼을 누른다.
 
# 페이지의 일부를 수정하고 싶을 경우 Contents 영역의 각 단락에 위치한 Edit 버튼을 누른다.
 
 
# 내용을 변경한 뒤 하단에 위치한 Save Page 버튼을 누른다.
 
# 내용을 변경한 뒤 하단에 위치한 Save Page 버튼을 누른다.
  
  
[[File:Edit.png|665px]]
+
[[File:how_to_edit.png|665px]]
 
----
 
----
 
== How to add new example ==
 
== How to add new example ==
Line 25: Line 22:
 
=== Instructions ===
 
=== Instructions ===
 
# 계정을 생성하여 로그인한다.
 
# 계정을 생성하여 로그인한다.
 
 
# Header 에 위치한 Edit 버튼을 누른다.
 
# Header 에 위치한 Edit 버튼을 누른다.
 
 
# 사례를 추가하고 싶은 부분에 아래 'Wiki grammar guideline'을 참고하여 사례를 추가한다.
 
# 사례를 추가하고 싶은 부분에 아래 'Wiki grammar guideline'을 참고하여 사례를 추가한다.
 
 
# 사례를 추가한 뒤 하단에 위치한 Save Page 버튼을 누른다.
 
# 사례를 추가한 뒤 하단에 위치한 Save Page 버튼을 누른다.
  
Line 38: Line 32:
 
[[File:파일이름.확장자|665px]]
 
[[File:파일이름.확장자|665px]]
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
 +
 
</nowiki>
 
</nowiki>
  
  
[[File:Edit.png|665px]]
+
[[File:grammar_sample.png|665px]]
  
 
=== Instructions for image & video upload ===
 
=== Instructions for image & video upload ===
IxPatterns.com을 사용하는 사람은 누구나 자신이 가지고 있는 흥미로운 다양한 사례를 공유할 수 있다. 단, 동영상 자료의 경우 youtube, vimeo 등에 업로드된 자료를 링크하여 업로드하는 것을 권장한다.
+
IxPatterns.com을 사용하는 사람은 누구나 자신이 가지고 있는 흥미로운 다양한 사례를 공유할 수 있다. 단, 동영상 자료의 경우 YouTube, Vimeo 등에 업로드된 자료를 링크하여 추가하는 것을 권장한다.
  
 
* How to Upload Image
 
* How to Upload Image
Line 68: Line 63:
 
아이패드는 기본적으로 아이폰의 width 기준을 따른다.
 
아이패드는 기본적으로 아이폰의 width 기준을 따른다.
 
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=395}}
 
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=395}}
- 세로 : {{#Widget:Vimeo|id=########|width=300|height=405}}
+
- 세로 : {{#Widget:Vimeo|id=########|width=395|height=533}}
  
 
3. Android
 
3. Android
Line 78: Line 73:
  
 
4. 촬영한 영상, 링크한 영상
 
4. 촬영한 영상, 링크한 영상
ix Patterns.com 은 기본적으로 비메오와 유튜브 영상링크를 권장한다.
+
ix Patterns.com 은 기본적으로 YouTube와 Vimeo 영상링크를 권장한다.
비메오의 경우 모든 영상 인코딩이 16:9 비율이지만,  
+
Vimeo의 경우 모든 영상 인코딩이 16:9 비율이지만,  
유튜브의 경우 오래된 영상들 중 일부가 6:4 비율을 가지고 있다.
+
YouTube의 경우 오래된 영상들 중 일부가 6:4 비율을 가지고 있다.
 
이러한 부분을 확인하여 아래 소스를 사용한다.
 
이러한 부분을 확인하여 아래 소스를 사용한다.
- 비메오 : {{#Widget:Vimeo|id=########|width=665|height=374}}
+
- Vimeo : {{#Widget:Vimeo|id=########|width=665|height=374}}
- 유튜브
+
- YouTube
* 16:9 비율 : {{#Widget:Youtube|id=########|width=665|height=374}}
+
  * 16:9 비율 : {{#Widget:Youtube|id=########|width=665|height=374}}
* 6:4 비율 : {{#Widget:Youtube|id=########|width=665|height=443}}
+
  * 6:4 비율 : {{#Widget:Youtube|id=########|width=665|height=443}}
 
</nowiki>
 
</nowiki>
 
----
 
----
Line 91: Line 86:
 
== How to add new pattern ==
 
== How to add new pattern ==
 
IxPatterns.com을 사용하는 사람은 누구나 자신이 생각하는 인터랙션 패턴을 추가할 수 있다. 9개의 카테고리로 구성되는 IxPatterns.com은 각각 다음과 같은 기준으로 패턴을 구분한다.
 
IxPatterns.com을 사용하는 사람은 누구나 자신이 생각하는 인터랙션 패턴을 추가할 수 있다. 9개의 카테고리로 구성되는 IxPatterns.com은 각각 다음과 같은 기준으로 패턴을 구분한다.
* Dealing With Data : 다양한 행동을 통해 데이터를 검색, 수정, 저장, 변환하는 IX Patterns
 
* Getting Input : 다양한 행동을 통해 명령을 실행하거나 내용을 입력하는 IX Patterns
 
* Navigation : 한 화면에서 다른 화면으로 이동하거나 정보를 빨리 찾아가도록 도와주는 IX Patterns
 
* Notifications : 시스템의 상태와 수행해야 할 사항들에 대하여 알려주는 IX Patterns
 
* Screen Interaction : 행동에 따라 Screen안의 형체가 움직이거나 변화하는 IX Patterns
 
* Manipulation : 기기를 조작하거나 무엇인가를 통하여 다른 것을 조작하는 IX Patterns
 
* Voice & Bio Interaction : 목소리나 생체 정보를 인식하여 기기를 작동시키거나 피드백을 받는 IX Patterns
 
* Mixed Reality : 다양한 기술이 결합되어 가상의 이미지 또는 특정 상황을 현실감 있게 나타내는 IX Patterns
 
* Context Recognition : 다른 기기의 정보 또는 주변 환경 정보를 인식하여 이루어지는 IX Patterns
 
  
 
각각의 대분류는 유사한 패턴끼리 중분류를 이루며 사용자가 등록하는 패턴은 중분류 카테고리안에 존재한다.
 
각각의 대분류는 유사한 패턴끼리 중분류를 이루며 사용자가 등록하는 패턴은 중분류 카테고리안에 존재한다.
 +
 +
* Dealing With Data : 데이터를 검색, 수정, 저장, 변환하는 태스크에 관련된 패턴
 +
* Getting Input : 명령을 실행하거나 내용을 입력하는 태스크에 관련된 패턴
 +
* Navigation : 다른 화면으로 이동하거나 정보를 빨리 찾아가도록 도와주는 패턴
 +
* Notifications : 시스템의 상태 또는 수행해야 할 사항에 대하여 알려주는 패턴
 +
* Screen Interaction : 입력 행동에 따라 화면 이미지 또는 개체가 움직이거나 변화하는 패턴
 +
* Manipulation : 시스템을 직접 또는 매개체를 통하여 독특한 방식으로 조작하는 패턴
 +
* Voice & Bio Interaction : 목소리나 생체 정보를 통해 시스템을 조작하거나 반응하는 패턴
 +
* Mixed Reality : 현실 세계와 가상 세계를 결합하는 다양한 방식을 보여주는 패턴
 +
* Context Recognition : 사람, 기기, 환경 요소 간 정보 인식에 기반한 인터랙션 패턴
 +
 +
  
 
=== Instructions ===
 
=== Instructions ===
 
# 계정을 생성하여 로그인한다.
 
# 계정을 생성하여 로그인한다.
 
+
# URL 의 마지막 부분에 '/패턴명' 을 입력한다. (패턴명에 공백이 있을 경우 '_'를 이용하여 표시한다)
# URL 의 마지막 부분에 /패턴명 을 입력한다. (패턴명에 공백이 있을 경우 '_'를 이용하여 표시한다)
+
 
+
 
# Edit Page 를 눌러 글을 작성한다.
 
# Edit Page 를 눌러 글을 작성한다.
 
 
# 페이지 작성방법은 아래에 있는 Wiki 언어를 복사하여 작성할 수 있다.
 
# 페이지 작성방법은 아래에 있는 Wiki 언어를 복사하여 작성할 수 있다.
  
Line 115: Line 110:
 
  <nowiki>
 
  <nowiki>
 
패턴설명을 적는다.
 
패턴설명을 적는다.
 +
== with this pattern, we can solve ==
 +
패턴을 통해 해결할 수 있는 문제들이 무엇인지에 대하여 적는다.
 
== Example ==
 
== Example ==
 +
Image를 등록한다(위의 How to Upload Image 참조).
 +
----
 
=== 사레 이름 ===
 
=== 사레 이름 ===
 
* 사례설명을 작성한다.
 
* 사례설명을 작성한다.
* Image & Video 를 등록한다.
+
Image 또는 Video 를 등록한다(위의 How to Upload Video 참조).
 
[[category:중분류 카테고리명]] </nowiki>
 
[[category:중분류 카테고리명]] </nowiki>

Latest revision as of 19:04, 21 July 2014

How to use 에서는 직접 사례나 패턴을 등록/수정하고, 패턴을 제작할 수 있는 세가지 방법을 설명한다.


How to modify pattern page

IxPatterns.com에 있는 패턴 페이지의 내용을 수정하고 보완할 수 있다.

Instructions

  1. 계정을 생성하여 로그인한다.
  2. 전체 페이지를 수정하고 싶을 경우 Header 에 위치한 Edit 버튼을 누른다.
  3. 페이지의 일부를 수정하고 싶을 경우 Contents 영역의 각 단락에 위치한 Edit 버튼을 누른다.
  4. 내용을 변경한 뒤 하단에 위치한 Save Page 버튼을 누른다.


How to edit.png


How to add new example

IxPatterns.com에 정의된 패턴 페이지에 자신이 수집한 최신의 흥미로운 사례를 추가할 수 있다.

Instructions

  1. 계정을 생성하여 로그인한다.
  2. Header 에 위치한 Edit 버튼을 누른다.
  3. 사례를 추가하고 싶은 부분에 아래 'Wiki grammar guideline'을 참고하여 사례를 추가한다.
  4. 사례를 추가한 뒤 하단에 위치한 Save Page 버튼을 누른다.
  • Wiki grammar guideline
 
=== 사례 이름 (사례 출처를 기술한다) ===
* 사례에 대한 설명을 간략하게 작성한다.
[[File:파일이름.확장자|665px]]
{{#Widget:Vimeo|id=36790650|width=665|height=374}}



Grammar sample.png

Instructions for image & video upload

IxPatterns.com을 사용하는 사람은 누구나 자신이 가지고 있는 흥미로운 다양한 사례를 공유할 수 있다. 단, 동영상 자료의 경우 YouTube, Vimeo 등에 업로드된 자료를 링크하여 추가하는 것을 권장한다.

  • How to Upload Image

1. [[File:파일이름.확장자|665px]] 을 복사하여 이미지를 넣고 싶은 곳에 붙여넣는다.
2. Save Page 를 눌러 글을 저장한다.
3. 링크된 Upload File 페이지에서 이미지를 등록한다.
4. 페이지에 이미지가 등록되었는지 확인한다.

Image up 01.png  Image up 02.png
  • How to Upload Video

1. iPhone
아이폰은 기본적으로 아이폰5 의 화면비율을 따른다.
아이폰 4, 4s로 촬영된 영상은 width 를 기준으로 height 를 조정한다.
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=300}}
- 세로 : {{#Widget:Vimeo|id=########|width=300|height=533}}

2. ipad
아이패드는 기본적으로 아이폰의 width 기준을 따른다.
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=395}}
- 세로 : {{#Widget:Vimeo|id=########|width=395|height=533}}

3. Android
안드로이드 촬영 영상의 경우 ios 와 달리 화면비율이 기기에 따라 다르다.
때문에 안드로이드 촬영 영상은 아이폰의 width 기준을 따라 촬영된 영상에 맞춰 height 를 조정한다.
아래는 갤럭시 3의 화면비율이다.
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=303}}
- 세로 : {{#Widget:Vimeo|id=########|width=300|height=528}}

4. 촬영한 영상, 링크한 영상
ix Patterns.com 은 기본적으로 YouTube와 Vimeo 영상링크를 권장한다.
Vimeo의 경우 모든 영상 인코딩이 16:9 비율이지만, 
YouTube의 경우 오래된 영상들 중 일부가 6:4 비율을 가지고 있다.
이러한 부분을 확인하여 아래 소스를 사용한다.
- Vimeo : {{#Widget:Vimeo|id=########|width=665|height=374}}
- YouTube
  * 16:9 비율 : {{#Widget:Youtube|id=########|width=665|height=374}}
  * 6:4 비율 : {{#Widget:Youtube|id=########|width=665|height=443}}


How to add new pattern

IxPatterns.com을 사용하는 사람은 누구나 자신이 생각하는 인터랙션 패턴을 추가할 수 있다. 9개의 카테고리로 구성되는 IxPatterns.com은 각각 다음과 같은 기준으로 패턴을 구분한다.

각각의 대분류는 유사한 패턴끼리 중분류를 이루며 사용자가 등록하는 패턴은 중분류 카테고리안에 존재한다.

  • Dealing With Data : 데이터를 검색, 수정, 저장, 변환하는 태스크에 관련된 패턴
  • Getting Input : 명령을 실행하거나 내용을 입력하는 태스크에 관련된 패턴
  • Navigation : 다른 화면으로 이동하거나 정보를 빨리 찾아가도록 도와주는 패턴
  • Notifications : 시스템의 상태 또는 수행해야 할 사항에 대하여 알려주는 패턴
  • Screen Interaction : 입력 행동에 따라 화면 이미지 또는 개체가 움직이거나 변화하는 패턴
  • Manipulation : 시스템을 직접 또는 매개체를 통하여 독특한 방식으로 조작하는 패턴
  • Voice & Bio Interaction : 목소리나 생체 정보를 통해 시스템을 조작하거나 반응하는 패턴
  • Mixed Reality : 현실 세계와 가상 세계를 결합하는 다양한 방식을 보여주는 패턴
  • Context Recognition : 사람, 기기, 환경 요소 간 정보 인식에 기반한 인터랙션 패턴


Instructions

  1. 계정을 생성하여 로그인한다.
  2. URL 의 마지막 부분에 '/패턴명' 을 입력한다. (패턴명에 공백이 있을 경우 '_'를 이용하여 표시한다)
  3. Edit Page 를 눌러 글을 작성한다.
  4. 페이지 작성방법은 아래에 있는 Wiki 언어를 복사하여 작성할 수 있다.


패턴설명을 적는다.
== with this pattern, we can solve ==
패턴을 통해 해결할 수 있는 문제들이 무엇인지에 대하여 적는다.
== Example ==
Image를 등록한다(위의 How to Upload Image 참조).
----
=== 사레 이름 ===
* 사례설명을 작성한다.
Image 또는 Video 를 등록한다(위의 How to Upload Video 참조).
[[category:중분류 카테고리명]]