Difference between revisions of "How to use"
Navigation menu
From Design pattern
(→Instructions for image & video upload) |
(→Instructions) |
||
| (48 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | + | How to use 에서는 직접 사례나 패턴을 등록/수정하고, 패턴을 제작할 수 있는 세가지 방법을 설명한다. | |
| − | How to | + | * [[#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 | + | == How to modify pattern page == |
IxPatterns.com에 있는 패턴 페이지의 내용을 수정하고 보완할 수 있다. | IxPatterns.com에 있는 패턴 페이지의 내용을 수정하고 보완할 수 있다. | ||
=== Instructions === | === Instructions === | ||
| − | + | # 계정을 생성하여 로그인한다. | |
| − | + | # 전체 페이지를 수정하고 싶을 경우 Header 에 위치한 Edit 버튼을 누른다. | |
| − | + | # 페이지의 일부를 수정하고 싶을 경우 Contents 영역의 각 단락에 위치한 Edit 버튼을 누른다. | |
| − | + | # 내용을 변경한 뒤 하단에 위치한 Save Page 버튼을 누른다. | |
| − | + | ||
| − | |||
| − | [[File: | + | [[File:how_to_edit.png|665px]] |
---- | ---- | ||
== How to add new example == | == How to add new example == | ||
| Line 24: | Line 21: | ||
=== Instructions === | === Instructions === | ||
| − | + | # 계정을 생성하여 로그인한다. | |
| − | + | # Header 에 위치한 Edit 버튼을 누른다. | |
| − | + | # 사례를 추가하고 싶은 부분에 아래 'Wiki grammar guideline'을 참고하여 사례를 추가한다. | |
| − | + | # 사례를 추가한 뒤 하단에 위치한 Save Page 버튼을 누른다. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | * Wiki grammar guideline | |
<nowiki> | <nowiki> | ||
=== 사례 이름 (사례 출처를 기술한다) === | === 사례 이름 (사례 출처를 기술한다) === | ||
| Line 40: | 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:grammar_sample.png|665px]] | ||
| + | |||
| + | === Instructions for image & video upload === | ||
| + | IxPatterns.com을 사용하는 사람은 누구나 자신이 가지고 있는 흥미로운 다양한 사례를 공유할 수 있다. 단, 동영상 자료의 경우 YouTube, Vimeo 등에 업로드된 자료를 링크하여 추가하는 것을 권장한다. | ||
* How to Upload Image | * How to Upload Image | ||
| Line 54: | Line 49: | ||
4. 페이지에 이미지가 등록되었는지 확인한다. | 4. 페이지에 이미지가 등록되었는지 확인한다. | ||
</nowiki> | </nowiki> | ||
| − | [[File: | + | [[File:image_up_01.png|300px]] [[File:image_up_02.png|300px]] |
| − | + | ||
* How to Upload Video | * How to Upload Video | ||
<nowiki> | <nowiki> | ||
| − | 1. | + | 1. iPhone |
아이폰은 기본적으로 아이폰5 의 화면비율을 따른다. | 아이폰은 기본적으로 아이폰5 의 화면비율을 따른다. | ||
아이폰 4, 4s로 촬영된 영상은 width 를 기준으로 height 를 조정한다. | 아이폰 4, 4s로 촬영된 영상은 width 를 기준으로 height 를 조정한다. | ||
| Line 69: | Line 63: | ||
아이패드는 기본적으로 아이폰의 width 기준을 따른다. | 아이패드는 기본적으로 아이폰의 width 기준을 따른다. | ||
- 가로 : {{#Widget:Vimeo|id=########|width=533|height=395}} | - 가로 : {{#Widget:Vimeo|id=########|width=533|height=395}} | ||
| − | - 세로 : {{#Widget:Vimeo|id=########|width= | + | - 세로 : {{#Widget:Vimeo|id=########|width=395|height=533}} |
3. Android | 3. Android | ||
| Line 79: | Line 73: | ||
4. 촬영한 영상, 링크한 영상 | 4. 촬영한 영상, 링크한 영상 | ||
| − | ix Patterns.com 은 기본적으로 | + | 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}} | + | * 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> | ||
---- | ---- | ||
== How to add new pattern == | == 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 === | === Instructions === | ||
# 계정을 생성하여 로그인한다. | # 계정을 생성하여 로그인한다. | ||
| − | # URL 의 마지막 부분에 /패턴명 을 입력한다. (패턴명에 공백이 있을 경우 '_'를 이용하여 표시한다) | + | # URL 의 마지막 부분에 '/패턴명' 을 입력한다. (패턴명에 공백이 있을 경우 '_'를 이용하여 표시한다) |
# Edit Page 를 눌러 글을 작성한다. | # Edit Page 를 눌러 글을 작성한다. | ||
# 페이지 작성방법은 아래에 있는 Wiki 언어를 복사하여 작성할 수 있다. | # 페이지 작성방법은 아래에 있는 Wiki 언어를 복사하여 작성할 수 있다. | ||
| Line 103: | Line 110: | ||
<nowiki> | <nowiki> | ||
패턴설명을 적는다. | 패턴설명을 적는다. | ||
| + | == with this pattern, we can solve == | ||
| + | 패턴을 통해 해결할 수 있는 문제들이 무엇인지에 대하여 적는다. | ||
== Example == | == Example == | ||
| + | Image를 등록한다(위의 How to Upload Image 참조). | ||
| + | ---- | ||
=== 사레 이름 === | === 사레 이름 === | ||
* 사례설명을 작성한다. | * 사례설명을 작성한다. | ||
| − | + | 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: 기존 패턴 페이지를 수정하고 보완하는 방법을 설명한다.
- How to add new example: 새로운 사례를 추가하는 방법을 설명한다.
- How to add new pattern: 새로운 패턴을 추가하는 방법을 설명한다.
Contents
How to modify pattern page
IxPatterns.com에 있는 패턴 페이지의 내용을 수정하고 보완할 수 있다.
Instructions
- 계정을 생성하여 로그인한다.
- 전체 페이지를 수정하고 싶을 경우 Header 에 위치한 Edit 버튼을 누른다.
- 페이지의 일부를 수정하고 싶을 경우 Contents 영역의 각 단락에 위치한 Edit 버튼을 누른다.
- 내용을 변경한 뒤 하단에 위치한 Save Page 버튼을 누른다.
How to add new example
IxPatterns.com에 정의된 패턴 페이지에 자신이 수집한 최신의 흥미로운 사례를 추가할 수 있다.
Instructions
- 계정을 생성하여 로그인한다.
- Header 에 위치한 Edit 버튼을 누른다.
- 사례를 추가하고 싶은 부분에 아래 'Wiki grammar guideline'을 참고하여 사례를 추가한다.
- 사례를 추가한 뒤 하단에 위치한 Save Page 버튼을 누른다.
- Wiki grammar guideline
=== 사례 이름 (사례 출처를 기술한다) ===
* 사례에 대한 설명을 간략하게 작성한다.
[[File:파일이름.확장자|665px]]
{{#Widget:Vimeo|id=36790650|width=665|height=374}}
Instructions for image & video upload
IxPatterns.com을 사용하는 사람은 누구나 자신이 가지고 있는 흥미로운 다양한 사례를 공유할 수 있다. 단, 동영상 자료의 경우 YouTube, Vimeo 등에 업로드된 자료를 링크하여 추가하는 것을 권장한다.
- How to Upload Image
1. [[File:파일이름.확장자|665px]] 을 복사하여 이미지를 넣고 싶은 곳에 붙여넣는다. 2. Save Page 를 눌러 글을 저장한다. 3. 링크된 Upload File 페이지에서 이미지를 등록한다. 4. 페이지에 이미지가 등록되었는지 확인한다.
- 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
- 계정을 생성하여 로그인한다.
- URL 의 마지막 부분에 '/패턴명' 을 입력한다. (패턴명에 공백이 있을 경우 '_'를 이용하여 표시한다)
- Edit Page 를 눌러 글을 작성한다.
- 페이지 작성방법은 아래에 있는 Wiki 언어를 복사하여 작성할 수 있다.
패턴설명을 적는다. == with this pattern, we can solve == 패턴을 통해 해결할 수 있는 문제들이 무엇인지에 대하여 적는다. == Example == Image를 등록한다(위의 How to Upload Image 참조). ---- === 사레 이름 === * 사례설명을 작성한다. Image 또는 Video 를 등록한다(위의 How to Upload Video 참조). [[category:중분류 카테고리명]]