픽세이트 스터디 NOTE #1

지난달에 10시간 정도 실습과 함께하는 픽세이트 강좌를 수강했다. 간단한 프로토타입은 인비전으로 만들 수 있지만 그보다 좀 더 자세하게 만들 수 있는 프로토타입 도구에 관심이 생겼다. 

픽세이트 pixate는 스마트폰용 어플리케이션에 최적화된 프로토타입 제작 도구다. 
탭, 스크롤, 드래그 등의 인터랙션과 무브, 스케일, 페이드 등의 애니메이션을 적용할 수 있다. 

• 픽세이트는 레이어 기반의 도구라서 요소별로 인터랙션과 애니메이션을 각각 지정할 수가 있다. 
• 그리고 인비전 보다 애니메이션 효과를 조금 더 다양하게 만들 수 있다. 애니메이션 별로 조절 가능한 속성도 몇 가지 제공하고, 조건을 설정해 그에 따라 반응하도록 할 수 있다. 또한 하나의 요소에 여러 개의 애니메이션 효과를 중첩해서 적용 가능하다. 그것을 화면을 이루는 여러 요소에 개별로 설정하기 때문에 좀더 다양한 애니메이션이 가능하다.

픽세이트 보다 더 높은 수준의 프로토타입 제작 도구도 있다. 그들과 비교하면 이것도 부족하다 할 수 있겠으나 인비전 사용 경험만 있는 내 입장에서는 픽세이트로 할 수 있는 것들을 보았을 때 표현이 매우 다양해 질 수 있겠다는 생각이 들었다.

 

픽세이트 pixate는 무료 어플리케이션이고, 맥OS용 설치파일만 제공한다. 
완성한 프로토타입은 실제 스마트폰에서 손으로 직접 사용해 볼 수 있다. (스마트폰에 픽세이트 앱 설치)
여러 프로토타입 도구 중 디바이스 시뮬레이션 시 실제와 제일 유사하게 표현된다고 한다. 
엑스코드 시뮬레이터 Xcode Simulater를 설치하면 노트북이나 데스크탑에서도 시뮬레이션 가능하다. 

 

개인적으로 아쉬운 점은 웹사이트 프로토타입을 시뮬레이션 할 방법을 찾지 못했다. 원하는 화면 사이즈를 지정해서 프로토타입을 만들 수 있지만 시뮬레이션 방법이 딱히 보이지 않는다. 이 부분은 차차 방법을 찾아보기로 하고...

 

픽세이트를 실행하면 먼저 저장할 경로와 파일명을 입력한다.

 

다음으로 타겟 디바이스를 선택한다. 태블릿용 프로토타입을 제작하는 경우 맨 마지막 항목에 화면 사이즈를 직접 입력한다.

 

픽세이트 시뮬레이터 메뉴를 보면 애플워치와 아이패드도 시뮬레이션 가능하다. 
이 메뉴는 xcode와 simulator가 설치된 경우에만 보인다. 설치 되지 않은 경우 Install Xcode 같은 메뉴가 표시된다.

 

 

픽세이트 화면 구성

파일명과 타겟 디바이스를 정하고 나면, 본격적으로 픽세이트 화면이 나온다.

 

1. 레이어/에셋 리스트
2. 인터랙션 리스트
3. 애니메이션 리스트
4. 정렬
5. 속성 패널 (요소의 위치, 사이즈, 투명도, 설정된 인터랙션 등)
6. 애니메이션 패널 (애니메이션의 세부 설정하는 곳)
7. 스테이지

 

스테이지 영역 위쪽에 시작할 때 지정한 test라는 파일명과 타겟 디바이스 iphone6가 보인다. 이곳을 클릭하면 타겟 디바이스를 변경할 수 있다.

 

 

픽세이트는 이미지 에셋을 임포트하고, 스테이지에 배치하고, 배치된 요소에 인터랙션과 애니메이션을 지정하고, 애니메이션 속성을 조절해 효과를 만들면 된다. 

이미지 요소에 인터랙션과 애니메이션을 적용하는 방법은 해당 액션을 요소로 드래그앤드롭하면 된다. 이때 스테이지에 있는 이미지로 드래그하기 보다는 레이어 리스트로 드래그 하는 것이 더 정확하다. 만들다 보면 스테이지 상에 요소들이 겹치기도 하고 투명버튼이 겹쳐지기도 하기 때문에 스테이지로 드래그앤드롭하면 엉뚱한 곳에 잘못 지정될 가능성이 높다. 

 

 

LAYERS

레이어 리스트에서 +를 클릭해서 요소를 추가한 화면

좌측 레이어 리스트에 적혀있는 레이어 이름 ‘New Layer 1’과 우측 속성 패널에 적혀있는 Layer ID ‘new_layer_1’ 을 비교해보면 약간 다르다. 공백이 언더 바(_)로 대체되었다. 요소명을 사용해 애니메이션을 제어할 때 Layer ID에 적혀있는 값으로 처리해야 한다. 

레이어 리스트에 이름을 입력할 때 대쉬(-)를 사용하면 Layer ID에서는 대쉬가 제거된다.

레이어 이름 : btn-pop1
Layer ID : btnpop1

 

 

ASSETS

+를 클릭해서 이미지 에셋 임포트

에셋 패널에서 요소를 스테이지로 드래그앤드롭하면 레이어가 자동으로 추가된다.

 

 

Interactions & Animations 

요소에 인터랙션과 애니메이션이 지정되면 다음과 같이 표시된다. 사각형 요소에 Tab 인터랙션과 Move 애니메이션을 지정했다. 

 

 

Animation 패널

하나의 요소에 애니메이션이 여러 개 지정될 수 있는데 그렇게 되면 애니메이션 패널이 아주 복잡해진다. 예를 들어 탭 메뉴를 만들다 보면 하나의 버튼 이미지에 Fade 애니메이션만 4개가 지정될 수도 있다. 다음과 같은 식이다.

 

하나의 요소에 같은 애니메이션이 여러 개 적용되는 경우 시간이 지나면 무엇에 의해 발생되는 애니메이션인지 잊어버리기 때문에 애니메이션을 추가하자마자 바로 이름 변경을 해두는 것이 좋다. 

 

애니메이션 이름을 더블클릭하면 변경할 수 있다. 

 

이름에 마우스 오버하면 우측에 휴지통 아이콘이 나타나는데 이것을 클릭하면 애니메이션이 삭제된다. 

 

휴지통 옆의 스위치는 시뮬레이션 할 때 애니메이션 적용을 잠시 꺼두는 기능이다. 

 

 

오늘은 여기까지.