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

2016년 10월 14일 삼성전자 R&D 캠퍼스 강의에서의 질문에 대한 답변입니다.

이 포스트의 내용은 수정될 수도 있습니다.

<Q1> Screen을 분리하였을 때라도, 공통적으로 같은 배경을 사용할 수는 없는지?

- 세트(기기) 의 프로토타입을 했을 때, 배경(기기 부분) 분리가 안되어 화면 부분에만 애니메이션을 보여줄 수 없었습니다.

<A> 스크린은 각각 개별적이므로 공통의 배경을 사용할 수 없습니다. 하나의 스크린만을 사용하고 그 위에 컨테이너 여러 개를 사용해서 구현하는 수밖에 없을 듯합니다.

<Q2> 마스킹 기능이 있는지?

- 마찬가지로 마스킹 기능이 있으면 세트 프로토타이핑을 할 때 좀더 유용하지 않을까 하여 여쭙니다.

<A> 마스킹 기능은 없지만 컨테이너 기능을 응용하여 사각형 형태로 아이템의 일부만을 보여 줄 수는 있습니다. 

배경이 투명한 PNG 이미지를 외부에서 만들어 Assets으로 가져와서 사용하는 것이 가장 좋은 방법입니다.

<Q3> 타이머 기능 구현여부

- 액션을 입력하지 않고 일정 시간이 지나면 메인화면으로 복귀되어야 하는데, 지난 번 사용하였을 때는 찾지 못했습니다.

<A> 간단한 방법으로는 트랜지션 항목에 타임라인의 지작과 끝 부분에 인터랙션을 줄 수가 있습니다. 적당한 시간의 트랜지션을 만들고 끝 부분에 Go to screen 액션을 주어서 메인화면으로 복귀하면 됩니다.

<Q4> 인디케이터 구현이 가능한가요?

- 인디케이터는 screen이나 states와 관계없이 항상 같은 위치에 뜨면서, 사용자 조작에 따라 상태가 변화됩니다.

+ 혹시 container를 활용하여 구현할 수 있지 않은가요?

<A> 인터랙션의 Overlay screen 으로 다른 스크린을 가져올 수는 있습니다. 하지만 상태, 스크린의 변동 후에도 그대로 유지되는지는 컨트롤은 제대로 동작하는지는 좀 더 확인해봐야 합니다.

<Q5>. long press 액션이 있나요?

<A> Trigger 중에 Tap Hold 가 long press 와 비슷한 액션으로 보입니다(탭하고 그대로 일정 시간 유지하고 있으면 액션 발생).

<Q6> 플래시처럼 간단한 코딩이 가능한가요? 가능하다면 언어는 어떤 것이 지원되나요?

<A> Variable을 사용하는 경우 약간의 자바스크립트를 입력할 수 있으며 간단한 조건문, 문자열 합치기, 자르기, 사칙연산 정도의 구현이 가능합니다.

<Q7> 애니메이션 선택시에 ease 종류에 따라 그래픽을 보여주던데, 그것 말고 애프터이펙트처럼 frame이나 graph 등의 가시적인 요소는 없나요?

<A> 간단한 직선 이동, 회전 애니메이션 정도는 상태 트랜지션 혹은 인터랙션으로 만들 수 있지만 키프레임 이나 이펙트를 사용하는 화려한 움직음의 애니메이션은 만들 수 없습니다. 각 트랜지션 마지막에 인터랙션으로 다음 상태로 넘어가게 하는 방법으로 어느 정도는 구현할 수 있지만 딜레이 등이 있기 때문에 썩 만족스러운 결과는 아니었습니다.

<Q8> 라이브러리를 이용 하지 않은 버튼 온/오프 구현 방법

<A> 버튼을 컨테이너로 변환하고 컨테이너의 상태(State)를 온/오프 두 개로 만든 후 인터랙션을 통해 구현할 수 있습니다.

<Q9> 오븐에 knob 을 돌리듯이 동그라미를 axis 중간으로 맞춰 돌리는 법

<A> 아이템을 컨테이너로 변환하고 옵션의 Draggable를 체크하여 Rotation을 선택하는 방법으로 구현할 수 있습니다.

<Q10> state 를 이용한 animation 을 전반적으로 알려주세요.

<A> 상태 A와 상태 B에 동일한 아이템들이 있으면 이 각각의 아이템들의 위치 값, 투명도 등의 속성 사이에 애니메이션이 발생하는 것입니다. 일반적으로 트랜지션은 2개의 state 사이에서 이루어집니다.

<Q11> 전체 로테이트 : 파일 만든 후 전체적으로 로테이트 가능 여부 (90도,180도,270도..)

<A> 스크린은 고정되어 있는 것으로 로테이트가 불가능하기 때문에, 각 방향 마다 별도의 스크린을 제작해야 합니다. Animate 인터랙션이나 상태 트랜지션으로 회전을 한다고 하더라도 스크린의 가로, 세로 값이 서로 바뀌기 때문에 이에 대한 위치를 별도로 변경하는 작업이 필요할 것입니다.

<Q12> 사운드 넣는 부분 : 우측 사운드바를 통해 사운드를 넣었으나, disable(사운드바 보이지 않음)을 한 경우, 사운드 재생(클릭)이 되지 않음. 특정한 버튼을 탭했을 때 사운드가 플레이 되는 인터랙션 제작법.

<A> 사운드 아이템을 invisible 한 후, 재생(일시정지, 정지) 버튼을 만들고 인터랙션을 추가하면 됩니다. 인터랙션의 Audio 항목에서 찾을 수 있습니다.

<Q13> 떳다가 사라지는 애니메이션(토스트팝업): 토스트팝업과 같이, 떳다가 몇초 후 자동으로 사라지는 애니메이션. proto에서도 에펙이나 ppt와 같이 특정 시간 경과 뒤 변화하는 애니메이션을 줄 수 있는지 여부

<A> 대부분의 애니메이션은 컨테이너의 상태 변화를 사용하여 구현을 할 수 있습니다.

<Q13> html → apk변환방법

<A> Proto.io와 관계가 없지만... 구글링을 하면 관련 내용을 찾으실 수 있습니다. (검색어 예 : html to apk)

https://github.com/praveshagrawal/HTML-to-APK

<Q14> 애니메이션 가능 여부: 탭하면 해당 버튼이 커지는 등, VI사안들 구현 가능 여부

<A> 대부분의 애니메이션은 컨테이너의 상태 변화를 사용하여 구현을 할 수 있습니다.

<Q15> 외부 폰트를 등록하여 사용할 수 있나요?

<A> 아직까지는 불가능합니다.

https://support.proto.io/hc/en-us/community/posts/207859598-Loading-external-fontello-font

https://support.proto.io/hc/en-us/community/posts/207860738-How-do-i-use-custom-fonts-that-are-not-hosted-on-Google-Fonts

0~9까지의 숫자 버튼을 탭하면 해당 숫자가 추가되어 출력되는 '다이얼 패드'를 구현해봅니다.

먼저 아래와 같이 Rectangle, Text, Button with Background 등의 라이브러리 아이템을 사용하여 아래와 같은 인터페이스를 만듭니다. 숫자 버튼은 우선 (1) 버튼과 (←) 버튼만 넣습니다. 나머지 숫자 버튼은 (1) 버튼을 복사하여 사용할 것입니다.

<숫자 버튼 제작>

버튼의 문자가 저장될 빈 변수를 작성하기 위해서 상단 메뉴의 (X) Variables를 클릭하여 변수 {passcode}를 생성합니다.

- Name : passcode

- Type : Text

- Value : 빈칸 그대로 둠

- Evaluate : check

(1) 버튼 (dial button 1)을 클릭하고 인터랙션을 다음과 같이 추가합니다.

- Title : 임의

- Trigger : Tap

- Action : Set variable

- Variable Name : passcode (default: empty)

- Value type : Custom value

- New Value : 아래의 자바스크립트 코드 입력 

"{passcode}".replace("undefined", "") + 1

이 코드는 문자형 변수 {passcode}에 + 뒤의 숫자를 붙이는 코드로, 변수가 문자형(Text)인 경우 "{변수}"처럼 쌍따옴표(더블 쿼테이션:double quotation)로 감싸는 것을 잊지 말아야 합니다. replace는 처음에 정의되지 않은 값(default : empty)이 출력되기 때문에 그 부분을 삭제하는 역할을 합니다.

콜백 인터랙션을 추가하여 실제로 Dial Number 의 내용이 변하도록 합니다.

- Action : Change property

- Screen : 현재 스크린

- Item : Dial Number

- Property : Text

- Value type : Read from variable

- Variable name : passcode (default: empty)

프로젝트를 저장하고 프리뷰 화면에서 (1) 버튼을 클릭해봅니다. 여러 번 클릭해보고 숫자가 뒤에 계속해서 붙는지 확인해 봅니다.

<삭제 버튼 제작>

이번에는 삭제 버튼 (←)을 클릭하고 인터랙션을 추가합니다.

기본적인 코드는 숫자 버튼과 다르지 않고 New Value에 들어갈 자바스크립트 코드만 다르기 때문에 (1) 버튼의 인터랙션을 복사해 와서 붙여넣기로 적용한 후 수정합니다.

- Title : delete dial number

- Trigger : Tap

- Action : Set variable

- Variable Name : passcode (default: empty)

- Value type : Custom value

- New Value : 아래의 자바스크립트 코드 입력

"{passcode}".length == 0 || "{passcode}" == "undefined" ? "" : "{passcode}".replace("undefined", "").substr(0, "{passcode}".length-1)

이 코드는 변수 {passcode}의 길이가 0 이거나 비어 있으면, 빈 칸 그대로 두고 그렇지 않으면 {passcode}의 길이를 하나씩 제거하는 코드라고 할 수 있습니다.

프로젝트를 저장하고, 프리뷰를 통해 숫자의 입려과 삭제를 테스트합니다. 아래에서는 (1) 버튼을 8번 누르고(Tap), 그 다음에 (←)버튼을 4번 눌렀습니다.

<나머지 버튼 제작>

(1)버튼을 복사(duplicate)해서 (2)~(0)까지의 버튼을 보기 좋게 배열합니다. 버튼을 복사할 때 마다 인터랙션에 들어가서 자바스크립트 코드 “+ 뒤의 숫자”를 해당 버튼에 맞게 수정하는 것을 잊지 않습니다.

마지막 버튼은 (0)번이므로 10으로 잘못 넣지 않도록 주의합니다.

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

실제로 동작을 시켜보면 어떤 이유에서인지 첫 자리에 “0”이 들어가는 경우, 세 번째 숫자입력과 동시에 “0”이 사라지는 것을 볼 수 있습니다. 정확한 이유는 모르겠지만 아마도 외국의 경우 전화번호를 입력할 때 첫 자리 “0”이 생략되기 때문이 아닌가하고 예상해봅니다...;

텍스트 필드에 입력한 내용을 특정한 곳에 출력하는 것을 구현해 봅니다.

먼저 Text Field, Button, Rectangle, Text 등을 사용하여 아래의 인터페이스를 만듭니다.

인터페이스의 모습을 보면 바로 알겠지만 Input Text에 입력된 텍스트가 Add 버튼을 누르면 Type something에 나타나는 동작이 이루어질 것입니다.

인터랙션은 동작이 이루어지는 곳에 적용되기 때문에 여기에서는 Add 버튼을 클릭하고 인터랙션 패널로 이동합니다.

외부 입력폼인 Input Text에서 데이터를 가져와서 변수에 넣어야 하기 때문에 변수 설정을 먼저 합니다.
- Title : input text read
- Trigger : Tab
- Action : Set variable을 선택하고, New variable을 통해 텍스트가 저장되는 새로운 변수 “spending_input”를 만듭니다.

- Value type : Text
- Evaluate variable : check
로 설정하고

- Value type : Set value from item property
를 통해 특정 아이템에서 값을 가져옵니다. 특정 아이템이 바로 Input Text이기 때문에

- Screen : Screen 1 (현재 스크린)
- Item : input text
- Property : value
로 설정합니다.
이 과정을 통해 {spending_input}이라는 변수가 생성됩니다.

생성된 변수를 Type something에 넣기 위해서 Callback을 체크하여 콜백 인터랙션을 추가하여, 다음과 같이 설정합니다.

- Action : Change property
- Screen : Screen 1
- Item : change text
- Property : Text
- Value type : Read from variable
- Variable name : spending_input (default: empty)

프로젝트를 저장하고 프리뷰를 통해 텍스트를 입력하고 Add 버튼을 누르면 아래의 텍스트가 제대로 변경되는지 확인합니다.

<숫자 증가 버튼>

먼저 UI Button과 Text 등의 컴포넌트를 사용하여 아래와 같은 인터페이스를 만듭니다.

이 인터페이스에서는 (+)버튼을 누르면 아래의 숫자가 1씩 증가하고, (-)버튼을 누르면 1씩 감소할 것입니다.

이를 구현하기 위해서는 먼저 증감할 값이 저장될 변수가 필요합니다. 현재 프로젝트에는 그 어떤 변수도 지정되어 있지 않습니다.

먼저 상단 메뉴에서 “(X) Variables”를 클릭합니다.

“+ NEW VARIABLE”을 클릭하고 다음과 같이 새로운 변수를 만듭니다(선언).
- Name : range_var
- Type : Numeric
- Value : 0
- Evaluate : check

Variables 창을 닫고 에디트 화면으로 돌아온 후, (+) 버튼을 클릭하고 인터랙션을 추가합니다.

- Title : inc num
- Trigger : Tap
- Action : Set variable
로 설정한 후 Variable Name을 클릭하면, 미리 만들어 놓은 “range_var (default: 0)” 변수가 풀다운 리스트에 나타납니다.

Variable Name : range_var (default: 0)로 설정한 후 그 아래의 항목들을 설정합니다.
- Value type : Custom value
- New Value : {range_var}+1

즉, 기본 변수 {range_var}에 +1을 더하는 {range_var}+1을 새로운 값으로 한다는 것입니다.

이제 이 새롭게 만들어진 값을 텍스트에 적용하는 인터랙션을 추가하기 위해 Callback을 체크합니다.
그리고 아래와 같이 텍스트를 수정하는 설정을 합니다. 슬라이더를 통해 값을 수정하는 방법((Change property)과 거의 같으며 마지막 Variable name만 이번에 만들어 놓은 “range_var (default: 0)”로 설정하면 됩니다.

프로젝트를 저장하고 프리뷰를 통해 (+) 버튼을 클릭할 때 숫자가 하나씩 늘어나는 것을 확인해봅니다.

<숫자 감소 버튼>

증가하는 기능을 이미 구현하였기 때문에 변수의 계산식만 바꿔주면 손 쉽게 구현할 수 있습니다.
(+) 버튼을 클릭하고, 현재 적용되어 있는 인터랙션 위치에서 마우스 오른 클릭을 하여, Copy interaction을 선택합니다.

(-) 버튼을 클릭하고, 인터랙션을 넣을 위치에서 마우스 오른 클릭을 하여 Paste in Interactions를 선택합니다.

(+) 버튼에 있던 인터랙션이 (-) 버튼에도 적용이 되었습니다.

인터랙션 편집 모드로 들어가서 Title을 “dec num”으로 수정하고 계산식의 “+”를 “-”로 고친 후 인터랙션을 저장합니다.

프로젝트를 저장하고 프리뷰를 통해 숫자의 증감을 테스트합니다.

<숫자의 범위 지정>

현재 증감되는 값은 양수, 음수 무한대라고 볼 수 있습니다. 이 변화하는 값의 범위를 지정해야 할 필요가 있기 때문에 인터랙션을 추가하여 {range_var}의 값의 범위를 정합니다.
먼저 (+)버튼을 클릭하고 인터랙션 편집 모드로 들어갑니다.

두 번째 인터랙션을 활성화하고 하단의 Callback을 체크하여 새로운 콜백 인터랙션을 추가합니다.

변수의 값이 새롭게 정의되기 때문에 Action을 “Set variable”으로 선택합니다.
그리고 먼저 이하의 속성들을 다음과 같이 설정합니다.
- Variable Name : range_var (default: 0)
- Value type : Custom value

이제 가장 중요한 New Value 값을 지정해야 하는데, 변수의 범위를 지정하는 조건문인 “If문”을 돌려야 합니다. 이 부분은 약간의 프로그래밍(자바스크립트) 지식이 있어야 하는 부분입니다.

New Value 란에 아래의 코드를 입력합니다. 입력란이 짧기 때문에 되도록이면 '메모장' 등의 텍스트 편집기에서 타이핑 한 후 복사해서 붙여넣는 것이 안전합니다(한글, 워드 등의 워드프로세서는 사용하지 않습니다).

{range_var}<0 ? 0 : {range_var}>9 ? 9 : {range_var}

이 코드는 {range_var} 변수가 0 보다 작으면 0으로, 9보다 크면 9로 고정한다는 뜻입니다.

값의 범위를 지정하는 인터랙션은 값이 출력되기 전에 동작이 되어야 하기 때문에 인터랙션의 위치를 드래그 & 드롭으로 두 번째 위치로 옮깁니다. 콜백 체크는 자동으로 수정됩니다.

프로젝트를 저장하고 (+) 버튼의 동작과 숫자의 변화를 테스트해 봅니다. 9 이상 숫자가 올라가지 않는 것을 확인할 수 있습니다.

같은 방법으로 (-) 버튼에도 인터랙션을 추가하고 0 이하로 숫자가 내려가지 않는 것을 확인해 봅니다.

<스크린 디자인>

먼저 적당한 크기의 스크린을 만듭니다. 여기에서는 iPhone6/6s 사이즈에 맞추겠습니다.

라이브러리에서 IOS9에 있는 슬라이더를 가져옵니다. 가져온 후 슬라이더의 이름을 “Slider text”로 수정합니다. 이름은 한 눈에 알아보기 쉽게 짓는 편이 좋습니다. 그리고 두께 등을 수정해봅니다.

라이브러리 BASIC에 있는 텍스트를 넣어봅니다. 그리고 이름을 “Text by slider”로 기본 글자도 이와 같게 “Text by slider”로 고쳐봅니다.

<기본 인터랙션 추가>

먼저 사용자에 의한 동작(Trigger)이 발생하는 곳인 슬라이더에 인터랙션을 부여합니다.
Slider text를 클릭하고, 인터랙션 탭을 선택한 후 “+ ADD INTERACTIONS”를 클릭합니다.

제목은 “change text”로 하고, 트리거는 “Slider drag”를 선택합니다.

이제 트리거에 의해 발생할 액션을 추가합니다.
슬라이더 인디케이터의 위치가 변하면 내부적으로 0~100까지의 값이 변화합니다. 이 값이 텍스트로 보내져야하기 때문에 값을 저장할 공간이 필요한데 그 저장 공간이 바로 “Variables(변수)”입니다. 즉 여기에서는 트리거에 의해 변수가 생성(세팅)되야 하기 때문에 “Set Variables”를 선택해야 합니다.

Variables 항목을 클릭하여 “New variables”를 통해 새로운 변수명을 “sliderposition” (만일 빈칸을 띄운다면 “slider_position” - 이유 : 변수명이나 함수명에는 공백이 들어갈 수 없습니다)으로 설정하고, Variables type(변수형)를 “Numeric(숫자형)”으로 선택합니다.

Value type(값의 형태)는 “Callback value from event”를 선택하는데 이 뜻은 “이벤트로 발생한 값을 되돌려 받은 것“이라고 생각하면 됩니다. 여기서는 트리거로 인해 발생한 인디케이터의 위치 값이라고 할 수 있습니다.
Callback value(되돌려 받은 값의 양)은 “%”를 선택하게 자동으로 정해져 있습니다.

<콜백 인터랙션 추가>

Callback”은 액션이 발생한 후 새롭게 발생하는 것을 말하며 이것은 값(변수)이 될 수도 있고 또다른 행동(액션)이 될 수도 있습니다.
여기서는 슬라이더의 인디케이터 위치가 변하고 그에 설정된 값이 변수 “sliderposition”에 “숫자형”, “%”값으로 저장된 후에 (순차적으로) 발생하는 또 다른 인터랙션이라 생각하면 됩니다.

인터랙션 설정창 하단의 “Callback”의 체크를 활성화합니다. 그리고 Action 항목 중에서 “Change property”를 선택합니다.

현재 스크린에 있는 아이템 속성이 변할 것이므로 스크린 항목은 그대로 두고, Item은 “Text by slider”를 선택하고 Property는 “Text”를 선택합니다.

이제 불러올 값을 지정하기 위해 Variable type에서 “Read from variable”을 선택하여 특정 변수에서 값을 가져올 수 있게 설정한 후 Variable name에서 “slidterposition”변수를 특정하여 가져옵니다.

설정이 끝났으니 “SAVE INTERACTION”을 클릭하여 인터랙션을 저장합니다. 저장과 동시에 인터랙션의 구조가 트리형식으로 나타나는 것을 확인할 수 있습니다.

저장한 후 미리보기를 통해 동작을 확인해봅니다. 인디케이터 위치가 변할 때마다 텍스트의 값이 0~100까지 변하는 것을 볼 수 있습니다.

'Proto.io'의 인터랙션(interaction) 기본 속성 살펴보기

인터랙션 : A와 B 사이에서 상호간에 영향을 주는 어떠한 행동 및 결과를 나타내며 이 인터랙션은 아래와 같이 기본적인 인터랙션 프로퍼티 (Interaction Property 상호작용 고유속성)를 가지고 있습니다.

Title : 인터랙션의 이름

- 인터랙션의 이름은 한 눈에 알아볼 수 있는 것이 좋습니다. 작업을 하다보면 다양한 인터랙션을 사용하게 되는데, 각각의 네이밍이 제대로 되지 않는다면 나중에 인터랙션이 많아졌을 때 관리가 매우 힘들어집니다.

Trigger (event) : 사용자에 의해 발생하는 행동의 종류

- 아래 이미지에서는 방아쇠 당기기로 표현할 수 있으며 사용자가 실제로 어플리케이션을 사용하기 위해 행하는 행동(제스쳐)이라고 보면 됩니다. Tap, Swape 등이 있습니다.

Action : 이벤트에 의해 발생하는 인터랙션의 종류

- 아래 이미지에서는 방아쇠를 당김으로 발생하는 총알의 발사라는 결과로 말할 수 있으며, 특정 페이지로 이동하거나 어떤 구성 요소(아이템)의 속성을 변화시키거나 하는 여러 액션들이 있습니다.

Delay : Trigger가 일어나고 Action이 발생하기까지의 시간

Callback : 현재의 인터랙션이 발생하고 생성되는 또 다른 인터랙션

- 아래 이미지에서는 총알이 발사되고 나서 실린더가 돌아가는 또다른 (이어지는) 액션이 발생하는 것을 생각하면 됩니다.

트리거, 액션, 콜백과 총알 발사의 상관관계

강의할 때 자주 특수 기호 읽는 방법이 잘 생각이 안나서 정리를 합니다.

# : crosshatch / sharp / hash / pound / tictoctoe (샵, 해시, 우물井...;)

^ : caret / circumflex (캐릿, 꺽쇠...;)

[ ] : left · right bracket (브라킷, 대괄호)

{ } : left · right brace (브레이스, 중괄호)

! : exclamation point (느낌표)

? : question point (물음표)

" : double quotation / quotation mark (더블 쿼테이션, 쌍따옴표)

' : single quotation / quotation mark / apostrophe / acute accent (싱글 쿼테이션, 따옴표)

$ : dollar sign (달러)

% : percent sign (퍼센트)

@ : at sign (앳, 골뱅이...;)

& : ampersand (앰퍼샌드, 앤드...;)

* : asterisk (아스테리스크, 별표...;)

- : hyphen / dash (하이픈)

_ : underscore / underline / under bar (언더스코어, 언더바...;)

. : period / point (피리어드, 포인트, 닷...; 쩜...;)

/ : slash (슬래시)

＼(\) : back slash (백슬래시, 원...;)

| : vertical bar / pipe (버티컬 바, 작대기...;)

: : colon (콜론, 땡땡...;)

; : semicolon (세미콜론, 쉬프트 땡땡...;)

` : grave (그래이브)

~ : tilde (틸드, 물결...;)

2016년 10월 22일(토) ~ 10월 28일(금)에 광명동굴에서 열리는 '광명동굴 국제 판타지 페스티벌' 홈페이지를 워드프레스로 제작하였습니다.

광명동굴 국제 판타지 페스티벌 - 전면 페이지

부트스트랩3 기반의 테마를 커스터마이징하였으며 특이사항으로는 qTranslate X 플러그인을 통해 다국어 지원을 구현하였습니다. 현재 한국어, 영어, 중국어 콘텐츠가 제공되고 있으며 콘텐츠 번역작업이 계속되고 있습니다.

다국어 플러그인 - qTranslate X

워드프레스 qTranslate X 소개 페이지

서브 페이지는 모두 워드프레스의 '페이지'로 작업이 되었으며, 페이지 구조를 리스트로 출력하는 코드를 사용하여 페이지 우측에 서브 메뉴로 출력하였습니다.

광명동굴 국제 판타지 페스티벌 - 서브 페이지

광명동굴 국제 판타지 페스티벌 홈페이지 바로 가기

광명동굴 국제 판타지 페스티벌 페이스북 페이지

2016년 10월 14일 ~ 17일에 여주에서 열리는 제27회 경기도 생활체육대축전을 위한 티저 영상, 홍보 영상 제작에 참여하여 특수효과와 애니메이션 제작 부분의 작업을 하였습니다.

티저 영상 '작은 꿈'

여주시 제27회 경기도 생활체육대축전 페이스북 페이지

https://www.facebook.com/2016yj27/

proto.io에서는 이미지 슬라이더를 콘테이너(container) 기능 + 페이지 콘트롤러(page controller) 를 사용해서 손쉽게 만들 수 있습니다.

<Swipe 로 이미지 슬라이딩>

먼저 슬라이더로 만들 이미지를 캔버스에 넣습니다. 현재 이 캔버스는 프론트 페이지에서 사용되고 있는 세로 스크롤(Vertical scroll)콘테이너 Front page container의 안(內部)입니다.

캔버스로 이동된 이미지의 크기를 슬라이더로 사용할 크기로 조절하고(여기서는 750*560 정도) 콘테이너로 변환합니다.

콘테이너 내부에서 마우스 오른 클릭을 한 후 옵션 항목 중 Container Properties 로 들어갑니다.

Edit container properties 설정 창에서

Container title Container : front page image slider

Container width : 750px의 세 배인 2250px로 수정합니다. 우측의 [x3] 버튼을 클릭하면 자동으로 3배수로 계산됩니다.

콘테이너 크기가 변경된 것을 확인합니다.

Project Assets 에 있는 나머지 이미지들을 넣은 후 위치와 크기를 조정합니다.

상위 콘테이너(Front page container)로 돌아온 후 이미지 슬라이더용 콘테이너의 크기를 정확히 맞춥니다.

아래와 같이 콘테이너 크기가 정확히 맞아야 합니다.

이미지 슬라이더용 콘테이너를 클릭하고 Properties 탭에서 Scroll 항목을 Horizontally 로 선택한 후 아래의 항목 중에서 상단에 비활성화 되어 있던 Treat scroll container as snap (carousel)을 체크하여 활성화 합니다.

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

<버튼 탭(tap)으로 이미지 슬라이딩>

아이템 라이브러리에서 Page Controller 를 선택하여 이미지 슬라이더용 콘테이너에 넣습니다. 레이어 상하 관계에 주의합니다.

먼저 콘트롤러 전체를 선택하고 Properties 탭에서 Active Button (기본 활성화 버튼)을 Button 1 으로 설정합니다.

다음으로 콘트롤러를 구성하고 있는 버튼 각각에 인터랙션을 넣기 위해 먼저 첫번 째 버튼을 클릭한 후 아래와 같이 인터랙션을 설정합니다.

Title : 임의

Trigger : Tap (Triggers after a quick)

Action : Go to snap container page

Screen : Current container

Item : front page image slider

Horizontally : 1

Duration : 임의

Delay : No delay

만들어진 인터렉션을 [ctrl+c]로 클립보드에 복사한 후

두 번째 버튼의 인터랙션으로 붙여 넣습니다.

붙여 넣은 인터랙션을 수정하여 Horizontally 항목을 2 로 고칩니다.

마찬가지 방법으로 3번 버튼도 Horizontally 항목을 3 으로 고칩니다.

프로젝트를 저장하고 프리뷰를 통해 동작을 확인합니다.

슬라이더 이미지 Swipe와 버튼 싱크(Sync) 맞추기

front page image slider 콘테이너를 클릭하고 인터랙션을 아래와 같이 추가합니다.

Title : 임의

Trigger : Container scroll

Action : Sync Page Controller item

Screen : Current container

Item : Page Controller 1 (혹은 설정한 다른 이름)

Delay : No delay

인터랙션과 프로젝트를 모두 저장하고 프리뷰를 통해 동작을 확인합니다.

웹 기반의 프토토타이핑 툴 'proto.io'에서 variable(변수)를 사용하여 인터랙션(상호작용)을 구현하려면 약간은 복잡한 과정을 거쳐야 합니다.

웹 기반 프로토타이핑 툴 서비스 Proto.io
https://proto.io/

아래 처럼 슬라이더 아이템의 이름은 'slider'로, 텍스트 아이템의 이름은 'text'로 설정합니다.

슬라이더 아이템 이름 = slider

텍스트 아이템 이름 = text

슬라이더를 클릭하고 옵션 창에서 Interaction 탭으로 이동하여 Add Interactions 버튼을 클릭하여 아래와 같이 설정합니다.

Interaction (슬라이더 범위 수치 1~100를 변수 {slider_position}에 넣는다)

슬라이더값 변수 생성

Title : Slider-Text
Trigger : Slider drag
Action : Set variable
Variable Name : New variable : slider_position
Variable type : Numeric
Evaluate variable : check
Value type : Callback value from event
Callback value : Value(%)
Delay : No delay
Callback : check

<설명>
인터렉션의 이름(Title)은 "Slider-Text"로 슬라이더 값이 텍스트를 변화시킨다는 뜻입니다.
이 인터렉션은 슬라이더가 '드래그'되어 발생하기 때문에 트리거(Trigger:방아쇠)는 "Slider drag"로 선택합니다.
'드래그'의 결과 발생하는 액션(Action:동작)은 변수가 설정(생성)되는 것입니다(Set variable).
이 생성되는 '새로운 변수(New variable)'의 이름은 "slider_position"으로 하며,
변수의 종류는 "숫자(Numeric)"이고,
이 값은 다른 어떤 변수를 위해서 사용되기 때문에 'Evaluate variable'을 체크합니다.
변수의 값은 현재 발생하는 이벤트(드래그)에서 콜백(불러옴)되고(Callbak value from event),
호출된 값은 Value(%) 즉, 숫자(단위)입니다.
호출에 딜레이(지연)은 없으며,
이어서 콜백 인터렉션이 추가되므로 'Callback'을 체크합니다.

Callback 1 (슬라이더 값의 특정 범위에 따라 글자를 변경하고 이를 변수 {text_change}에 넣는다)

텍스트값 변수 생성

Action : Set variable
Variable Name : text_change
Variable type : Text
Evaluate variable : check
Value type : Custom value
New Value : ({slider_position}<33) ? 'Cappuccino' : (({slider_position}>67) ? 'CafeLatte' : 'Americano');
Delay : No delay
Callback : check

<설명>
위에서 발생한 인터렉션(slider_position 변화)을 트리거로 하여,

액션으로 새로운 변수가 설정됩니다(Set variable).
이 새로운 변수(New variabe)의 이름은 "text_change"이며,
변수의 종류는 "문자(Text)"이고,
이 값은 다른 어떤 변수를 위해서 사용되기 때문에 'Evaluate variable'을 체크합니다.
변수의 값은 사용자가 임의로 생성을 하는데,
이 임의로 생성되는 새로운 값은 자바스크립트를 통해 생성합니다.
({slider_position}<33) ? 'Cappuccino' : (({slider_position}>67) ? 'CafeLatte' : 'Americano');
만일 변수 {slider_position}이
33보다 작으면 Cappuccino 를 값으로 하고,
67보다 크면 Americano 를 값으로,
둘 다 아니면 (즉 34~66 사이) CafeLatte 를 값으로 합니다.
값을 생성하는데에 딜레이(지연)은 없으며,
이어서 콜백 인터렉션이 추가되므로 'Callback'을 체크합니다.

Callback 2 (글자 속성 변경을 위해 변수 {text_change}를 사용한다)

텍스트값 변수 아이템(text)에 적용

Action : Change property
Screen : Current container
Item : text
Property : Value
Value type : Read from variable
Variable name : text_change
Delay : No delay

<설명>
위에서 발생한 인터렉션(text_change 변화)을 트리거로 하여,

액션으로 아이템의 속성을 변경합니다(Change property).
현재 스크린의 현재 콘테이너(Current container)에서
아이템 이름 "text"에 적용되며
변경되는 속성은 값(Value)으로 여기서는 글자 그 자체입니다.
이 값(글자)은 변수에서 읽어오는데(Read from variable)
그 변수의 이름은 "text_change"입니다.

Save Intercation 을 클릭한 후 프로젝트를 저장하고 프리뷰를 통해 동작을 확인합니다.

슬라이더 위치에 따른 텍스트 변화

테마 혹은 플러그인의 스타일을 수정하기 위해서는 해당 테마나 플러그인 폴더에 있는 스타일 시트 파일(예: style.css 등)을 직접 수정하는 방법을 많이 사용합니다.

하지만 이 방법의 단점은 테마나 플러그인이 업데이트 되는 경우 따로 백업을 하지 않아 놓았다면 지금껏 수정한 내용이 날아가 버린다는 것입니다. 물론 테마의 경우는 '자식 테마'를 사용하여 이런 문제를 피할 수도 있지만 플러그인은 그렇지 못하죠. 자식 플러그인은 (제가 알기로는)없기 때문입니다.

그렇기 때문에 테마, 플러그인의 업데이트에 영향을 받지 않는 스타일 기능을 구현하면 매우 편리하게 사용할 수 있으리라 보여지며 당연히도 이런 스타일만을 추가해 수정할 수 있는 플러그인이 존재하고 있습니다.

워드프레스 스타일 커스터마이징 플러그인은 여러 종류가 있는데 제가 주로 사용하는 플러그인은 'Simple Custom CSS'입니다.

아래의 링크에서 다운로드 받을 수 있으며, 워드프레스 테마 추가 기능을 통해서도 쉽게 검색하여 바로 설치할 수 있습니다.

https://wordpress.org/plugins/simple-custom-css/

simple custom css 플러그인

이 플러그인은 설치 & 활성화 하는 것만으로 특별한 설정없이 사용자가 직접 입력한 스타일을 워드프레스 홈페이지에 적용시킬 수 있습니다.

아래는 임시로 제작한 '커피와 홈카페 정보'를 제공하는 컨셉의 워드프레스 홈페이지 입니다.

임시 제작 워드프레스 홈페이지

알림판 - 외모 항목에 'Custom CSS'를 클릭하면 커스텀 스타일 입력란이 있습니다. 처음에는 당연히 비어 있습니다.

커스텀 스타일 입력창

커스텀 스타일을 넣어 봅니다.

홈페이지의 폰트를 '나눔고딕' 웹폰트로 바꾸고, 배경 이미지의 크기 속성을 'cover'로 설정합니다. 또한 블록 요소의 float 속성을 초기화 하는 클래스 'clearfix'도 작성합니다.

@import  'http://fonts.googleapis.com/earlyaccess/nanumgothic.css';
body {
  font-family: 'Nanum Gothic';
}

body {
  background-size: cover;
}

.clearfix {
  clear: both;
}

커스텀 스타일 작성

스타일을 추가한 후 하단 혹은 우측의 [Update Custom CSS] 버튼을 클릭하여 적용합니다.

적용된 모습을 웹브라우저에서 확인해 봅니다.

수정된 스타일이 반영된 홈페이지

개발자 모드(F12)를 통해 'body' 요소를 검토해 보면 아래와 같이 배경 크기 속성과 폰트 속성이 수정된 것을 확인할 수 있습니다.

개발자 모드에서 확인

이처럼 'Simple Custom CSS' 등의 플러그인을 사용하여 워드프레스 홈페이지를 자식 테마를 사용하지 않고도 커스터마이징을 간단히 할 수 있습니다.