'분류 전체보기'에 해당되는 글 98건

워드프레스의 <설정> 항목은 워드프레스로 만들어진 홈페이지의 운영 관리를 위한 기능을 가지고 있습니다.

일반 설정

사이트 제목 : 홈페이지의 제목으로 브라우저 상단에 나타납니다.

태그라인 : 홈페이지에 대한 간단한 설명을 넣습니다.

특히 이 두 부분은 SEO(검색엔진최적화)와도 관련이 있기 때문에 신중하게 작성하는 것이 좋습니다.

워드프레스 주소(URL) : 웹서버에 설치된 워드프레스의 경로입니다. 절대 수정해서는 안됩니다.

사이트 주소(URL) : 워드프레스가 운영되고 있는 홈페이지의 루트(Root:최상위) 경로입니다. 이곳을 수정하기 위해서는 별도의 작업 과정이 필요합니다.

이메일 주소 : 홈페이지에 어떤 변동이 있을 때에 알림 메일이 발송합니다.

멤버쉽 : 홈페이지에서 회원 가입을 받기 위해서는 체크합니다.

새 사용자를 위한 기본 규칙 : 회원 가입을 한 사용자의 기본 권한을 정합니다.

시간대 : 홈페이지에서 사용할 시간을 정합니다.

날짜 표시 형식 : 글, 댓글 생성 날짜 등을 표시할 때 사용할 표시 형식입니다.

시작 요일 : 한 주의 첫 번째 요일을 정합니다.

사이트 언어 : 홈페이지에서 사용할 기본 언어를 정합니다.

쓰기 설정

표시방식 : 설명 그대로 이며, 두 항목 모두 체크하지 않는 편이 좋습니다.

기본 글 카테고리 : 새로운 글이 등록되는 기본 카테고리를 설정합니다.

기본 글 형식 : 글에 형식(종류)이 별도로 분류되어 있는 경우, 새로운 글의 기본 형식을 설정합니다.

이메일을 이용한 글 작성 : 특정 이메일 계정을 등록하여, 등록한 계정으로 오는 메일을 포스팅하는 기능입니다. 설정 방법이 어렵기 때문에 일반적으로는 별도의 플러그인을 사용하는 경우가 대부분입니다.

업데이트 서비스 : 일기 항목의 '검색 엔진 접근 여부'가 체크되어 있지 않아야 항목이 활성화 됩니다. 홈페이지가 업데이트 된 것을 업데이트 서비스 사이트에 알려줍니다.

읽기 설정

전면 페이지 표시 : 전면 페이지는 홈페이지의 첫 페이지를 말합니다.

- 최근 글 : 첫 페이지가 새로운 글이 업데이트 될 때마다 동적으로 변합니다. 등록 시간의 내림차순으로 글들을 보여줍니다.

- 정적인 페이지(아래에서 선택)

-- 전면 페이지 : 미리 제목과 내용이 모두 있는 별도의 페이지를 만들어 놓고 이를 첫 페이지로 설정합니다.

-- 글 페이지 : 미리 제목만 있고 내용은 없는 별도의 페이지를 만들어 놓고 이를 선택합니다. 최근 글 형식으로 보여집니다.

페이지당 보여줄 글의 수 : 최근 글에서 한 페이지에 출력되는 글의 갯수를 설정합니다.

보여줄 가장 최근의 신디케이션 : 글이 새롭게 등록된 것을 요청하는 사람에게 보내줄 수 있는데(RSS Feed) 그 갯수를 설정합니다.

피드 글의 보기 옵션 : 신디케이션을 통해 보내지는 글의 내용을 모두 보여주게 하거나 일부만 보여주게 할 수 있습니다.

검색 엔진 접근 여부 : 체크를 하면 검색 엔진이 홈페이지의 정보를 입수하지 못하게 합니다. 보통 홈페이지를 만들고 있을 때는 체크해 놓고, 모두 완성이 된 후 체크를 풀어 검색 엔진에 알리는 용도로 사용합니다.

미디어 설정

이미지 크기 : 워드프레스는 이미지가 업로드되면 원본 이외에 3개 크기의 이미지를 자동으로 생성합니다.

작은 사진(썸네일) : 미리보기(프리뷰)로 사용되는 이미지의 크기를 설정합니다.

- 썸네일을 정확한 크기로 잘라냅니다 : 체크하면 원본 비례와 관계없이 설정된 크기대로 썸네일을 만듭니다.

중간크기 : 자유롭게 설정

최대크기 : 자유롭게 설정

(이 외에도 플러그인을 사용하거나 functions.php에 별도의 템플릿 코드를 추가하여 사용자가 정의한 크기의 새로운 이름을 가진 이미지를 만들어 낼 수도 있습니다)

파일 업로드

- 내가 올린 파일들을 년/월별로 분류하기 : 체크를 추천하며, 체크를 풀게 되면 파일명 순서대로 하나의 폴더(wp-content/uploads)에 모두 생성됩니다.

고유주소 설정

고유주소(Permalink)는 각 콘텐츠(페이지, 글)에 부여되는 링크 주소라고 할 수 있습니다.

기본 : ? (물음표)로 시작하는 ID 넘버를 사용하여 고유주소를 만듭니다.

날짜와 이름 : 글이 등록된 날짜(년,월,일)와 슬러그(slug)를 사용하여 고유주소를 만듭니다.

월과 이름 : 글이 등록된 월과 슬러그(slug)를 사용하여 고유주소를 만듭니다.

숫자 : 콘텐츠의 종류와 ID 넘버를 사용하여 고유주소를 만듭니다.

글 이름 : 글의 슬러그(slug)를 사용하여 고유주소를 만듭니다.

사용자 정의 구조 : 주소 구조를 출력하는 태그를 사용하여 사용자가 원하는 형식을 만들어 고유주소를 만듭니다

보통 '기본', '숫자', '글 이름' 등을 주로 사용하고, 그 중에서도 '글 이름'을 사용하는 경우가 많습니다. 또한 특정 테마의 경우는 고유주소가 반드시 '글 이름'이어야 제대로 동작하는 경우도 있습니다.

옵션

고유주소에 나타나는 카테고리와 태그 디렉토리 이름을 다른 이름으로 바꿀 수 있습니다.

http://www.example.com/category/graphic  →  http://www.example.com/program/graphic

http://www.example.com/tag/web-design  →  http://www.example.com/keyword/web-design

2017 서울모터쇼 오프닝 공연을 위한 프로젝션 영상을 제작하였습니다.

공연에 사용될 음악에 맞춰서 오피셜 CM 영상을 컷편집 및 색보정하고 시작부와 마지막 부분에 애니메이션과 이펙트를 추가하는 작업이 주된 작업이었습니다.

모터쇼에 출품한 업체들의 주요 차종에 대한 노출 밸런스를 맞추는 부분이 조금 민감한 부분이었기 때문에 오피셜 CM 컷편집이 여러차례 반복된 부분을 제외하고는 큰 무리없이 진행되었습니다.

영상 감독으로 참여하고 있는 인천의 타악 퍼포먼스 그룹 ‘한울소리’에서 공연을 올린 미디어 퍼포먼스 뮤지컬 ‘타이거 헌터’의 무대 영상을 제작하였고, 또한 공연 스탭으로 영상 오퍼레이팅을 맡았습니다(2017년 3월 10~12일 공연).

뮤지컬 타이거 헌터는 2016년도 전통예술 지역브랜드 상설공연 공모 선정작으로 1871년 신미양요 중 인천 강화도 광성보 전투에서 있었던 범포수들의 희생과 업적을 그린 내용이며, 소설 ‘총의 울음 (저자:손상익, 출판:박이정)’을 원작으로 하여 이를 각색, 스토리텔링하여 음악과 퍼포먼스 그리고 영상을 콜라보레이션한 공연입니다.

https://ko.wordpress.com/ 에서 제공하는 유/무료 테마에 대한 분석, 추천 및 커스터마이징(자식 테마)을 제공하는 서비스인, “테마-딱” 홈페이지 제작을 컨설팅하였습니다.

홈페이지 제작은 설치형 워드프레스와 플러그인을 사용하면서 이를 홈페이지 설계 시안에 맞춰서 커스터마이징하는 방식으로 제작되는 것을 목표로 하였고, 이를 위한 플러그인들을 분석 및 추천하고 이를 커스터마이징하는 방법에 대한 제안을 기본으로 하였으며 플러그인 만으로는 구현하기 힘든 부분에 대한 PHP 프로그래밍 부분도 서포트하였습니다.

현재 테마-딱 홈페이지는 베타테스팅 중입니다.

테마-딱 홈페이지 바로가기 : http://themettack.org/

테마-딱 홈페이지 전면 페이지

테마-딱 홈페이지 소개 페이지

테마-딱 홈페이지 포럼 1

테마-딱 홈페이지 포럼 2

만들어진 키패드의 버튼에 들어갈 인터랙션에 대한 설명은 다음과 같습니다.

State 1 : Hour 버튼의 경우를 예를 들면,

먼저 키패드 입력을 통해 만들어진 문자는 replace 함수를 통해 "{keypad_hour}"에 문자로 저장됩니다.

이렇게 만들어진 "{keypad_hour}"를 가지고 "substr" 함수를 통해 "{length_hour}"에 2자리 문자로 저장됩니다.

2자리 문자인 "{length_hour}"는 "parseInt" 함수를 통해 숫자 형식으로 변환되어 {integer_hour}에 저장됩니다.

이렇게 생성된 {length_hour}는 조건문 필터링을 통해 값이 23이하인 경우에만 입력 값을 그대로 저장하고 그 이상인 경우는 문자열 "00"을 저장합니다.

그리고 {integer_hour}는 slice 함수를 통해 1자리 숫자인 경우 앞에 "0"이 붙은 후 {zero_hour}에 저장됩니다.

최종적으로는 {zero_hour}의 값이 텍스트 필드 "Hour"로 보내집니다.

<Hour 버튼 중 ①번에 적용될 인터랙션>

• Trigger : Tap
• Action : Set variable
• Variable Name : keypad_hour (default: empty)
• Value type : Custom value
• New Value : "{keypad_hour}".replace("undefined", "") + 1
• Delay : 0

>>>콜백

• Action : Set variable
• Variable Name : length_hour (default: empty)
• Value type : Custom value
• New Value : "{length_hour}".substr(0,2)
• Delay : 0

>>>콜백

• Action : Set variable
• Variable Name : integer_hour (default: empty)
• Value type : Custom value
• New Value : parseInt("{keypad_hour}")
• Delay : 0

>>>콜백

• Action : Set variable
• Variable Name : integer_hour (default: empty)
• Value type : Custom value
• New Value : {integer_hour} > 23 ? "00" : {integer_hour}
• Delay : 0

>>>콜백

• Action : Set variable
• Variable Name : zero_hour (default: empty)
• Value type : Custom value
• New Value : "0{integer_hour}".slice(-2)
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Hour
• Property : Value
• Value type : Read from variable
• Variable name : zero_hour (default: empty)
• Delay : 0

작성된 인터랙션을 복사하여 나머지 버튼에도 붙여 넣은 후 첫 번째 인터랙션의 뒷 부분 숫자만 각각 2에서 0까지 수정합니다.

<Minute 버튼 중 ①번에 적용될 인터랙션>

변수 이름만 다르고 위에 작성한 Hour와 같은 방법으로 인터랙션이 적용되며, 단지 다른 점은 integer_minute 값의 범위를 설정하는 부분에서의 자바스크립트만 다음과 같이 바뀐다는 점입니다.

{integer_minute} < 60 ? {integer_minute} : "00"

적용된 인터랙션을 복사하여 나머지 Minute 용 버튼에 붙여 넣고 첫 번째 인터랙션의 뒷 부분 숫자를 2에서 0까지 수정합니다.

<텍스트 필드 인터랙션>

시와 분이 표시되는 텍스트 필드를 각각 탭 했을 때 해당하는 스크린 상태로 이동하여 변수를 리셋하고, keypad 컨테이너 내부의 상태를 바꿔 해당하는 키패드로 바꿔야 합니다.

- Hour 텍스트 필드 인터랙션

• Trigger : Tap
• Action : Change Screen State
• Screen : Setting Time
• State : hour reset State
• Delay : 0

>>>콜백

• Action : Change Container State
• Screen : Setting Time
• Container : keypad
• State : State 1
• Delay : 0

- Minute 텍스트 필드 인터랙션

• Trigger : Tap
• Action : Change Screen State
• Screen : Setting Time
• State : minute reset State
• Delay : 0

>>>콜백

• Action : Change Container State
• Screen : Setting Time
• Container : keypad
• State : State 2
• Delay : 0

- reset all time 리셋 버튼 인터랙션

• Trigger : Tap
• Action : Change Screen State
• Screen : Setting Time
• State : all reset State
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Hour
• Property : Value
• Value type : Custom value
• New Value : 0
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Minute
• Property : Value
• Value type : Custom value
• New Value : 0
• Delay : 0

<텍스트 필드 초기화 인터랙션>

첫 화면에 빈 칸으로 보이는 텍스트 필드에 초기값으로 "00" 을 넣기 위해서 스크린에 인터랙션을 추가합니다.

- 인터랙션 1 Hour 초기값

• Trigger : Screen show
• Action : Set variable
• Variable Name : zero_hour (default: empty)
• Value type : Custom value
• New Value : "00"
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Hour
• Property : Value
• Value type : Read from variable
• Variable name : zero_hour (default: empty)
• Delay : 0
  

- 인터랙션 2 : Minute 초기값

• Trigger : Screen show
• Action : Set variable
• Variable Name : zero_hour (default: empty)
• Value type : Custom value
• New Value : "00"
• Delay : 0

>>>콜백

• Action : Change property
• Screen : Setting Time
• Item : Hour
• Property : Value
• Value type : Read from variable
• Variable name : zero_hour (default: empty)
• Delay : 0

두 인터랙션 모두 변수의 New Value 값으로 0이 아닌 "00" 을 넣는 것에 주의합니다(문자형).

프로젝트를 저정하고 미리보기로 확인합니다.

기본

한자리 숫자 입력값 - 앞에 0 붙임

잘못된 입력값 - 00 으로 초기화

전에 포스팅한 "다이얼 패드" 이용하여 텍스트필드에 시간을 넣는 인터페이스를 만들어보려고 합니다.

다이얼 패드에서는 특별히 값에 대한 범위가 적용이 되어 있지 않지만, 시간을 넣기 위해서는 시와 분에 각각 범위가 정해져 있어서 최소값으로 "00:00" 최대값으로 "23:59"가 입력이 되어야 하기 때문에 변수의 설정이 조금 복잡해 집니다.

<인터페이스 제작>

라이브러리의 버튼, 텍스트 필드 등을 사용하여 다음과 같이 인터페이스를 디자인합니다. 키패드는 위치만 선정하고 제작은 나중에 할 것입니다.

• 스크린 이름 : Setting Time
• 시 텍스트 필드 : Hour
• 분 텍스트 필드 : Minute
• 리셋 버튼 : reset all time

주의할 점으로 텍스트 필드의 속성 중 Placeholder Texts 항목은 반드시 빈 칸으로 설정합니다.

<변수의 생성>

변수는 시, 분 각각 다음과 같이 최소 4개씩이 필요합니다. 메인 메뉴에서 "Variables(X)" 클릭하고 시, 분에 사용될 변수를 생성합니다. 기본적으로 값은 비워 놓고 Evaluate는 체크합니다.

- 시

• keypad_hour : Text, Evaluate (default: empty) : 탭
• length_hour : Text, Evaluate (default: empty) : 문자열 자르기
• integer_hour : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
• zero_hour : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기

- 분

• keypad_minute : Text, Evaluate (default: empty) : 탭
• length_minute : Text, Evaluate (default: empty) : 문자열 자르기
• integer_minute : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
• zero_minute : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기

<변수 리셋 스크린 생성>

Setting Time 스크린에서 하단의 "+ NEW SCREEN STATE"를 클릭하여 기본상태인 "State 1"이외에 변수를 리셋하는 상태인 "hour reset State", "minute reset State", "all reset State"를 각각 생성합니다.

State 1을 제외한 각각의 상태에 인터랙션을 추가하여 각각의 변수를 모두 0 으로 초기화 합니다. 다음의 이미지는 hour reset State 의 인터랙션입니다. 나머지 인터랙션도 같은 방법으로 넣습니다.

• Trigger : State enter
• Action : Set variable
• Variable Name : keypad_hour (default: empty)
• Value type : Custom value
• New Value : 0
• Delay : 0

>>>콜백

...

위와 같이 length_hour, integer_hour, zero_hour 값을 0로 설정

...

>>>콜백

• Action : Change Screen State
• Screen : Setting Time (스크린 이름)
• State : State 1
• Delay : 0

<키패드 제작>

키패드는 Hour 용과 Minute 용이 별도로 있어야 합니다. 그렇기 때문에 반드시 컨테이너로 만들어져야 하고 그 내부에는 두 개의 상태가 있어야 합니다(여기에서는 기본값인 State 1, State 2 로 생성하였습니다).

State 1 : Hour 입력용 키패드

State 2 : Minute 입력용 키패드

다음 포스트에는 버튼에 들어갈 인터랙션을 다룹니다.

프로토타이핑 툴 'Proto.io'의 기초 사용법 및 인터랙션 구현에 관한 교재를 전자책(ebook)으로 출간하였습니다.

연세대학교 및 삼성 R&D 캠퍼스에서 한 특강 내용을 중점적으로 다루었으며 주로 유저인터페이스에 사용되는 인터랙션 아이템을 제작하는 내용으로 약 180여 페이지의 분량입니다. Proto.io 홈페이지의 튜토리얼과 함께 보면 더욱 이해가 빠를 것입니다.

'Proto.io (프로토.아이오) 웹 브라우저 기반의 프로토타이핑 도구'

목업이미지

현재 전자책 판매 사이트인 '유페이퍼'와 '구글북스'에 등록되어 판매중에 있습니다.

교보문고에도 등록은 했는데 POD 방식으로만 판매가 된다고 하네요(그래서 판매신청은 보류중). 이제 PDF 방식의 전자책 서비스는 더 이상 안하는 듯 합니다.

상태 트랜지션은 적용이 되었지만 트랜지션을 동작하게 하는 트리거(Trigger)가 없기 때문에 현재로서는 그 어떤 동작도 일어나지 않습니다.

스크린이 출력되면 상태 트랜지션이 동작하도록 인터랙션을 스크린에 추가합니다. 좌측 패인(Left Pane)에서 스크린 트랜지션 아이콘을 클릭합니다.

아래와 같이 트랜지션을 적용합니다.

- Title : auto fade start

- Trigger : Screen show

- Action : Change Container State

- Screen : HOME

- Container : photo auto fade

- State : photo 2

- Delay : 3000

이 인터랙션을 통해 스크린이 출력되고 3초 후 ‘photo 2’ 상태로 이동합니다. 프로젝트를 저장하고 미리보기로 동작을 확인합니다.

스크린 인터랙션을 통해 이미지가 페이드인 되는 것은 시작이 되었지만 다른 상태 트랜지션으로는 바뀌지 않는 것을 볼 수 있습니다. 그 이유 역시 해당하는 인터랙션이 없기 때문입니다.

이를 구현하기 위해 이번에는 각 상태 트랜지션의 마지막 프레임에 인터랙션을 추가하겠습니다. 먼저 ‘photo 1 → photo 2’ 트랜지션을 선택하고 타임라인의 마지막 프레임에 있는 인터랙션 추가 아이콘을 클릭합니다.

프레임 인터랙션을 아래와 같이 설정합니다.

- Title : next state 1

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 3

- Delay : 3000(ms)

인터랙션을 저장할 때 아래와 같이 트랜지션 자동 생성 여부를 묻는 창이 나오기도 하는데 이미 생성되어 있는 상태이므로 ‘Don’t ask me again’을 체크한 후 ‘CANCEL’을 클릭합니다.

같은 방법으로 각 트랜지션의 마지막 프레임에 인터랙션을 아래와 같이 추가합니다.

‘photo 2 → photo 3’ 트랜지션 프레임 인터랙션

- Title : next state 2

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 1

- Delay : 3000(ms)

‘photo 3 → photo 1’ 트랜지션 프레임 인터랙션

- Title : next state 3

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 2

- Delay : 3000(ms)

프로젝트를 저장하고 미리보기를 통해 자동으로 페이드인 되는 이미지를 확인합니다.

웹 혹은 앱에서 많이 사용되는 이미지 슬라이더 (캐러셀 : Carousel) 방식 중에 페이드-인(fade-in)이 있는데, 이는 이미지가 다음 이미지로 자연스럽게 섞이면서 넘어가는 것입니다.

'Proto.io'에서는 'State Transition(상태 전환)'을 사용해서 이를 구현할 수 있습니다.

먼저 새로운 프로젝트를 생성하고, 기본 스크린의 제목을 ‘HOME’으로 수정합니다.

상단 메뉴바의 ‘Assets’을 클릭하고 ‘Proto.io’에서 제공하는 스톡 이미지 중에서 중간 크기의 이미지 3개를 캔버스로 가져옵니다. 여러 개를 동시에 선택할 수 없기 때문에 하나씩 가져와야 합니다.

가져온 이미지들을 캔버스 크기에 맞게 크기를 조정하고, 위치 또한 동일하게 맞춥니다.

이미지들을 모두 선택한 후 마우스 오른 클릭으로 나타나는 메뉴 중에서 ‘Convert to container’를 선택하여 컨테이너로 만듭니다.

컨테이너의 이름은 ‘photo auto fade’로 설정합니다.

만들어진 컨테이너를 더블 클릭하여 컨테이너 편집 창으로 들어간 후 “+ NEW CONTAINER STATE”를 클릭하여 컨테이너의 상태(State)를 3개 만듭니다(State 1, State 2, State 3)

각 상태의 이름을 알아보기 쉽게 ‘photo 1’, ‘photo 2’, ‘photo 3’로 수정합니다.

현재 모든 상태(state)에는 3개의 이미지가 함께 들어있기 때문에 각각의 상태에서 이미지를 겹치지 않게 하나씩만 남기고 나머지는 삭제합니다.

상태에서 삭제해도 실제로 삭제가 되는 것이 아니고 일종의 비활성화 상태가 되는 것이기 때문에 다시 아이템을 복구할 수도 있습니다(Add from...).

상태 사이에 전환 효과를 넣기 위해 STATE TRANSITIONS 탭에서 “+ NEW STATE TRANSITION”을 클릭합니다.

첫 번째 트랜지션은 ‘photo 1’에서 ‘photo 2’로 이동할 때 적용됩니다.

적용된 트랜지션의 속성을 수정합니다.

- Delay : 0.00

- Duration : 1(sec)

- Easing : Linear

마찬가지 방법으로 ‘photo 2’에서 ‘photo 3’ 그리고 ‘photo 3’에서 ‘photo 1’로 이동할 때의 트랜지션을 추가하고 속성을 수정합니다.

여기까지의 작업으로 기본 레이아웃과 상태 트랜지션까지 적용되었습니다.

<다운로드 진행도를 숫자로 출력하기>

프로그레스 바 제작의 마지막으로 할 작업은 다운로드 진행도를 0~100까지 증가하는 숫자 애니메이션으로 구현하는 것입니다.

Proto.io에서 대부분의 상태 값 변화는 트리거에 의해 발생한다고 보면 됩니다. 예를 들어 ‘Slider bar’의 경우는 인디케이터가 사용자에 의해 위치가 변화되므로 그 중간 값의 변화를 변수에 저장할 수 있지만, ‘Progress bar’의 경우는 그 중간 값의 변화가 사용자의 행동과는 관계가 없기 때문에 그 값을 변수에 넣을 수 없습니다.

마찬가지로 현재 제작된 ‘Progress bar’도 계속 변화하는 위치 값을 변수로 보낼 수가 없기 때문에 이를 텍스트로 출력할 수 없습니다. 그렇기 때문에 일종의 편법으로, 애니메이션의 재생 시간인 (여기에서는 9000ms = 9초) 동안 순차적으로 증가되는 변수를 넣는 방법을 쓸 수 밖에 없습니다.

인터페이스에 숫자가 표시될 부분을 추가합니다. 모두 라이브러리의 Text를 사용했으며, 변화하는 텍스트의 이름은 ‘increase text’로 합니다. 

“download button” Container를 더블 클릭하여 컨테이너 내부로 들어간 후 ‘download button’을 선택하고 “+ ADD INTERACTIONS”를 클릭하여 새로운 인터랙션을 추가합니다.

아래의 인터랙션을 추가합니다.

- Title : Increase loop

- Trigger : Tap

- Action : Animate item

- Screen : HOME

- Item : increase text

- Animation type : Move item

- Move type : Move to (x,y) coordinates

- Move X to (px) : * (변화 없음)

- Move Y to (px) : * (변화 없음)

- Duration : 50

- Easing : Linear

- Delay : 0

- Loop animation : check

- Loop iterations : 100

Callback을 체크하고 이어서 인터랙션을 추가합니다.

- Action : Set variable

- Variable Name : downloader (default: empty)

- Value type : Custom value

- New Value : {downloader}+1

- Delay : 0

Callback을 체크하고 다시 인터랙션을 추가합니다.

- Action : Change property

- Screen : HOME

- Item : increase text

- Property : Text

- Value type : Read from variable

- Variable name : downloader (default: empty)

- Delay : 0

인터랙션을 저장하고, 지금 새롭게 만든 인터랙션의 위치를 위로 옮깁니다.

프로젝트를 저장하고 지금까지 작업한 결과물을 미리보기로 확인해봅니다.

지금까지의 작업을 한 장의 이미지로 정리하면 다음과 같습니다.

진행 막대의 상태 트랜지션까지 적용되었다면 기본 애니메이션 부분은 끝마친 것이라 볼 수 있으며, 이제는 인터랙션을 적용하여 실제 동작을 구현해야 합니다.

<다운로드 버튼 제작 - 1>

애니메이션(트랜지션)이 동작(액션)하기 위해서는 이를 명령해야 하는 이벤트(트리거)가 있어야 합니다.

스크린 ‘HOME“으로 돌아와서 캔버스에 라이브러리의 ‘Button with background’ 컨테이너를 가져옵니다. 라벨도 ‘Download’로 수정하고, 이름도 ‘download button’으로 수정합니다. 그리고 마우스 오른 클릭 후 ‘Convert to container’를 선택하여 새로운 컨테이너로 만듭니다.

이렇게 만들어진 ‘“download button” Container’에 인터랙션을 추가하고 저장합니다.

- Title : Progress animation start

- Trigger : Tap

- Action : Change Container State

- Screen : HOME

- Container : “progress bar” Container

- State : Progress end

프로젝트를 저장하고 미리보기에서 동작을 확인합니다.

<다운로드 버튼 제작 – 2>

현재 다운로드 버튼은 컨테이너로 되어 있습니다. 컨테이너 내부로 들어가서 인터랙션 및 다운로드가 끝난 상태도 추가해야 합니다.

먼저 ‘State 1’ 상태 이름을 ‘Download’로 수정하고, 새로운 상태를 추가한 후 새로운 상태의 이름을 ‘State 2’에서 ‘Complete’로 수정합니다.

‘Complete’ 상태의 아이템을 배경색을 회색으로, 라벨을 ‘Complete’로 수정합니다.

‘Download’ 상태의 아이템을 선택하고, 인터랙션을 추가합니다.

- Title : Go complete

- Trigger : Tap

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : Complete

- Delay : 9000(ms)

인터랙션을 저장할 때 아래와 같은 메시지 박스가 나타나면 “Don’t ask me again”을 체크하고 “CANCEL”을 선택합니다(트랜지션 자동 생성 기능 비활성화).

이 인터랙션을 통해 ‘Download’ 버튼을 탭하고 9초가 흐르면 상태가 바뀌어서 ‘Complete’ 버튼으로 바뀌는 동작이 이루어집니다.

프로젝트를 저장하고 미리보기로 확인해 봅니다.

<리셋 버튼 제작>

트랜지션 및 버튼 상태 변화가 모두 끝난 후 처음 상태로 되돌리기 위한 리셋 버튼을 만듭니다.

스크린 ‘HOME’으로 돌아와서 리셋을 위한 버튼을 만듭니다.

리셋 버튼에 다음의 인터랙션을 추가합니다.

- Title : Go reset state

- Trigger : Tap

- Action : Change Screen State

- Screen : HOME

- State : Reset

- Delay : 0

Callback을 체크하고 이어서 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Default

- Delay : 0

Callback을 체크하고 다시 이어서 인터랙션을 추가하고 저장합니다.

- Action : Set variable

- Variable Name : download (default: empty)

- Value type : Custom value

- New Value : 0

- Delay : 0

프로젝트를 저장하고 미리보기로 확인합니다.

<리셋 버튼 감추기 / 보이기>

리셋 버튼은 처음에는 보이지 않다가 다운로드가 끝나면 나타나고, 리셋 버튼을 누르면 사라지는 동작을 해야 합니다. 이를 위해서 ‘Download’ 버튼과 ‘Reset’ 버튼에 각각 인터랙션을 추가해야 합니다.

먼저 스크린 ‘HOME’에서 ‘reset button’의 레어어에서 ‘레이어 감추기’ 버튼을 클릭합니다.

“download button” Container를 더블 클릭하여 컨테이너 창으로 이동한 후 상태 ‘Download’에 있는 ‘download button’을 선택하고, ‘Go complate’ 인터랙션에 콜백 인터랙션을 추가합니다.

- Action : Change property

- Screen : HOME

- Item : reset button

- Property : Visibility

- Value type : Custom value

- New Value : check

- Duration : 400

- Easing : Linear

- Delay : 0

스크린 ‘HOME’으로 돌아와서 ‘reset button’을 선택하고, “+ ADD INTERACTIONS”를 클릭하여 두 번째 인터랙션을 추가합니다.

- Title : Reset button show

- Trigger : Tap

- Action : Animate item

- Screen : HOME

- Item : reset button

- Animation type : Fade item

- Fade to : 0

- Duration : 400

- Easing : Linear

- Delay : 0

- Loop animation : uncheck

프로젝트를 저장하고 미리보기로 확인합니다.

다운로드 바가 올라가는 모습

다운로드가 끝나고 버튼이 'Complete'로 상태가 변화한 후 'Reset' 버튼이 나타난 모습.

리셋 버튼을 클릭하여 초기 화면으로 돌아온 모습.

Proto.io에서 제공하는 라이브러리에는 ‘Progress bar’가 있어서 간단한 방법으로 진행도를 그래프로 보여주는 것을 애니메이션으로 쉽게 표현할 수 있습니다. 다만 이 진행도를 수치로 나타내는 기능은 없는데 약간의 편법을 통해 이를 구현할 수 있습니다.

<초기화 세팅 작업>

먼저 아래와 같이 작업을 진행하는 스크린과 상태의 이름을 수정합니다.

- 스크린 제목 : HOME

- 스크린 상태 1 : Default

- 스크린 상태 2 : Reset

진행도가 저장될 변수를 작성합니다. 상단의 (X) Variables를 클릭하고 아래와 같이 변수를 작성합니다.

- Name : downloader

- Type : Numeric

- Value : 빈칸

- Evaluate : check

스크린의 상태가 Default 인 것을 확인하고 스크린에 인터랙션을 추가합니다. Proto.io는 이벤트(트리거)가 발생할 수 있는 거의 모든 곳에는 인터랙션을 적용할 수 있습니다.

인터랙션을 아래와 같이 설정합니다.

- Title : Reset

- Trigger : Screen before show

- Action : Set variable

- Variable Name : downloader (default: empty)

- Value type : Custom value

- New Value : 0

- Delay : 0

Callback을 체크하고 첫 번째 콜백 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Reset

- Delay : 0

Callback을 체크하고 두 번째 콜백 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Default

- Delay : 0

이는 HOME 스크린이 보이기(show) 전에 동작하는 인터랙션으로 변수와 상태를 초기값으로 돌리는 역할을 합니다.

<인터페이스 제작>

라이브러리에서 Text, Rectangle, Button with background 등의 컴포넌트를 캔버스로 가져와서 실제로 동작을 시키기 위한 인터페이스를 만듭니다.

(1) 진행 막대 (Progress bar) 제작

Rectangle로 적당한 길이의 진행 막대를 만듭니다. 이름은 ‘progress bar’로 합니다.

진행 막대를 마우스 오른 클릭하고, ‘Convert to container’를 선택하여 컨테이너로 변환합니다.

“progress bar” Container를 더블 클릭하거나 좌측 상단의 CONTAINERS 탭을 통해 컨테이너 편집 창으로 들어갑니다.

아이템 ‘progress bar’를 왼쪽으로 이동시켜서 컨테이너 영역 밖으로 옮깁니다(X : -200).

옮겨진 아이템 ‘progress bar’를 마우스 우측 클릭한 후 Duplicate를 선택, 복제하고 이를 콘테이너 영역 안으로 옮깁니다(X : 0).

왼쪽의 ‘progress bar’의 배경색을 눈에 띄는 색으로 수정하고, 레이어의 위치도 복제본 ‘progress bar 2’의 위로 옮깁니다. 마찬가지로 ‘progress bar 2’ 역시 적당한 배경색으로 수정합니다.

(2) 진행 막대 트랜지션 적용

진행 막대가 오른쪽으로 이동하는 애니메이션을 만들기 위해 트랜지션을 추가해야 합니다. 그 전에 먼저 상태의 제목을 알기 쉽게 ‘Progress start’로 바꿉니다.

“+ NEW CONTAINER STATE”를 클릭하여 현재 상태가 복제된 새로운 상태를 만듭니다. 그리고 이름도 ‘Progress end’로 바꿉니다.

새롭게 만들어진 상태 ‘Progress end’에서 아이템 ‘progress bar’의 위치를 컨테이너 영역 안쪽 원래의 위치로 옮깁니다(X : 0).

상태 ‘Progress start’와 ‘Progress end’ 사이에 애니메이션을 넣기 위해서 “STATE TRANSITIONS (0)” 탭을 클릭합니다.

“+ NEW STATE TRANSITION”을 클릭하고 새로운 트랜지션을 생성합니다.

애니메이션 레이어의 우측에 있는 애니메이션 종류 아이콘을 클릭하고, 아래와 같이 설정합니다.

- Delay : 0

- Duration : 9

- Easing : Linear

(수정한 후 다시 확인해보면 Duration 값에 약간의 변동이 생기지만 그대로 둡니다)

재생 버튼을 클릭하여 애니메이션을 확인해봅니다.