일반적으로 시대의 흐름에 따라 디지털 미디어가 인간의 요구에 맞게 발전해 왔다. 과거 폐쇄적인 애플리케이션 방식에서 현재 개방적인 웹 방식으로 변모하는 과정에 있다. 특히나 대중적인 검색을 기반으로 하는 콘텐츠의 경우에는 대부분 개방형을 지향하고 있다. 상호작용을 기반으로 하는 인터랙티브 미디어 개발에서는 두 가지 방식을 선호하는데 그것이 오늘 이야기할 문서 타입(Web)과 컴포넌트 타입(App)이 바로 그것이다.
컴포넌트 타입 ( App )
- 폐쇄형 콘텐츠 지향
- 로컬 기반
- 계층형
- 네이티브 타입
- Embed
- 보안 중심
- 은행, 민원 등
문서 타입 ( Web )
- 개방형 콘텐츠 지향
- 네트워크 기반
- 검색 기반
- 마크업 HTML
- 멀티 객체 문서
- 도메인
- 사이트, 정보시스템 등
혼합형 ( App || Web )
- 개방형/폐쇄형 콘텐츠 수용
- 네트워크/로컬
- 검색/계층
- 네이티브/마크업 HTML
- Embed/멀티 객체
- 도메인/보안
- 쇼핑몰, 모바일, 키오스크 등
주요 용어
Hype 사용법을 배우기 위한 9 가지 기본 용어는 장면(Scenes), 요소(Elements), 속성(Properties), 키프레임(Keyframes), 애니메이션(Animations), 타임라인(Timelines), 액션(Actions), 심벌(Symbols), 행동(Behaviors)입니다.
1. 장면(Scenes)
각 Hype 문서는 하나 이상의 장면으로 구성된다. 장면은 Keynote 또는 PowerPoint 프레젠테이션의 슬라이드 또는 HyperCard의 카드와 유사하다. 장면에는 요소와 타임라인이 포함되며, 동작은 여러 장면 사이를 전환하는 데 사용된다.
2. 요소(Elements)
요소는 장면에서 조작 가능한 객체를 말한다. 모양, 텍스트, 버튼, 질감 버튼, 이미지, 비디오, HTML 위젯 등을 말한다.
3. 속성(Properties)
속성은 요소의 스타일, 위치 지정 및 보조 정보를 정의하는 내용을 말한다. 대부분의 속성은 애니메이션 가능하며, 속성은 Hype의 장면 편집기에서 요소를 조작하거나 속성에서 값을 변경하여 정의 또는 변경된다. 속성은 요소의 위치, 크기, 색, 테두리 또는 요소에 적용된 효과를 여러 가지로 정의한다.
4. 키프레임(Keyframes)
키 프레임은 타임라인의 특정 시간에 속성 값을 정의한다.
5. 애니메이션(Animations)
애니메이션은 일정 기간 동안 속성 값을 변경한다. 속성의 애니메이션의 시작 및 끝 값을 설정하는 두 개의 키 프레임으로 정의된다. Hype은 다른 값을 가진 모든 키 프레임 사이에서 자동으로 애니메이션을 만든다. 애니메이션은 또한 다른 여유 효과, 즉 여유 공간, 여유 공간, 여유 공간, 인스턴트, 바운스 및 선형과 같은 다양한 변화율을 가지고 있다. 또한 모션 경로를 사용하여 요소를 임의의 복잡한 곡선을 따라 움직일 수 있다.
6. 타임라인(Timelines)
타임라인에는 애니메이션이 포함되어 있다. 각 장면에는 장면이 표시될 때 자동으로 시작되는 기본 타임 라인이 있으며, 장면에는 여러 개의 타임 라인이 동시에 있을 수 있으며 타임라인 재생을 제어하는 데 사용된다.
7. 액션(Actions)
액션은 문서를 대화식으로 만듭니다. 무엇보다도 액션은 장면을 변경하고 타임라인 재생을 제어하며 사운드를 시작 또는 중지하거나 사용자 정의 JavaScript 함수를 실행하는 데 사용된다. 액션은 마우스 클릭이나 탭 제스처와 같은 사용자 이벤트 및 장면 로드 또는 타임라인 재생 완료와 같은 장면 이벤트에 대한 응답으로 트리거 된다. 특정 시간에 트리거 되도록 작업을 타임라인에 배치할 수도 있다.
8. 심벌(Symbols)
심벌은 요소, 타임라인 및 애니메이션을 쉽게 다시 사용할 수 있게 해주는 강력한 도구이다. 심벌을 장면 내 장면으로 생각하라. 심벌에는 장면의 요소와 독립적으로 트리거할 수 있는 자체 요소, 타임라인, 액션 및 비헤이비어가 있다. 심벌의 한 인스턴스를 편집하면 모든 인스턴스가 변경되기 때문에 심벌은 동일한 장면의 여러 장면 또는 다른 위치에서 동일한 요소를 공유하는 데 유용하다.
9. 행동(Behaviors)
사용자 비헤이비어는 Hype의 빌트인 액션 핸들러처럼 트리거 될 수 있는 자신 만의 액션 핸들러를 생성할 수있게한다. Hype의 내장 액션 핸들러처럼, 당신 자신의 행동은 일련의 행동을 유발할 수 있다. 비헤이비어를 사용하면 복잡한 작업을 만들고 사용할 때 작업을 반복하지 않아도 된다.
타임라인 만드는 3가지 방법
타임라인 선택기 메뉴
타임라인은 메뉴를 클릭하고 새 타임라인 명령을 선택하여 타임라인 선택기 팝업 메뉴를 통해 추가할 수 있다. 새로 생성된 타임 라인이 자동으로 편집을 위해 선택된다.
액션 핸들러 메뉴
타임라인은 타임라인에서 타임라인 시작, 타임라인 일시 중지, 타임 라인 계속 또는 타임 라인에서 시간 이동을 선택할 때 생성될 수 있다. ( Hype의 다양한 액션 핸들러에 대한 자세한 정보가 있다.) 액션 중 하나를 선택하면 타임 라인 팝업 메뉴가 표시되고 새 타임 라인을 선택하면 타임 라인이 생성된다.
Scene Inspector의 애니메이션 타임라인
타임라인은 장면 속성의 애니메이션 타임라인 섹션에 추가할 수 있다. ‘+’ 버튼을 클릭하여 새로운 타임라인을 추가한다.
타임라인 재생 방향
타임 라인은 정방향(forwards) 또는 역방향(backwards)으로 재생할 수 있다. 기본적으로 타임 라인은 전진하고 한 번만 재생된다. 타임 라인을 반대 방향으로 재생하려면 ‘역순으로 재생(Play in reverse)’을 선택한다. 종료 지점에서 타임 라인을 시작하려면 ‘타임 라인 시작(Start Timeline)’작업을 만들고 ‘반대로 재생(Play in reverse)’을 선택한다. 애니메이션이 끝날 때 타임 라인을 역방향으로 재생하려면 타임 라인 액션을 사용하여 타임 라인 계속하고 아래와 같이 역 재생을 선택하면 된다.
반복 재생 타임 라인
타임 라인을 루프하는 쉬운 방법은 타임 라인의 끝 부분에 ‘타임 라인 시작’ 타임 라인 액션을 추가하는 것이다. 루프를 오가며 (앞으로 재생 한 다음 역방향으로 재생하려는 경우) 타임 라인 끝에서 ‘역방향 재생’ 옵션이 선택된 상태로 ‘계속 진행’ 동작을 추가한다. 타임 라인 시작 부분에 ‘계속 타임 라인’ 전달 작업을 추가해야 한다.
