brunch

매거진 Framer 스터디

라이킷 18 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김세환 Dec 23. 2016

[Day 2] 미니 프로젝트 따라 해 보기

30일간의 Framer.js 스터디

이번엔 프레이머를 실행해보고 간단한 프로젝트를 수행해보겠습니다. 먼저 프레이머를 실행합니다.

<그림. 프레이머 팝업>

실행하게 되면 우측에 예전에 썼던 파일들의 리스트가 나오고 좌측에는 샘플을 볼 수 있는 네 개의 버튼이 있습니다. 네 개의 버튼에 해당되는 샘플의 종류는 애니메이션, 스위치 버튼, 스크롤, 페이지슬라이드등의 예제입니다. 기본 코드들이므로 시간 날 때 한 번씩 봐 두시기 바랍니다. 여기서는 새 파일을 만들기 위해서 팝업창의 우측 하단의 + 버튼을 클릭합니다.

<그림. 새 파일>

새로 파일을 만들게 되면 아무것도 없는 빈 파일이 나옵니다. 다음 장에서 자세히 배우겠지만 프레이머는 크게 3가지 화면으로 나뉩니다. 좌측의 소스코드 창, 중간의 속성 창, 우측의 결과창입니다.

먼저 결과창에서 프로토타이핑을 하게 될 디바이스를 선택합니다. 여기서는 'Phone'을 선택하겠습니다.

<그림. 'Phone'을 선택한 화면>

그러면 아이폰 모양의 배경화면이 깔리게 되고 앞으로 작업한 내용은 아이폰 내부 화면에서 구동이 되게 됩니다. 우측 상단의 'Device'를 클릭하면 다른 기기로 모양을 바꿀 수 있습니다. 애플, 삼성 등의 스마트폰 말고도 Watch, 태블릿, PC 등 여러 디바이스를 지원합니다. 그리고 프레이머는 업데이트를 통해 지속적으로 'Device'를 추가해주고 있습니다.

<그림. 지원하는 여러 가지 디바이스>

자 그럼 이제 간단한 프로젝트를 만들어 보겠습니다. 아직 프레이머나 커피 스크립트에 대해 배우지 않았으므로 이해하지 못하더라도 그냥 따라 하시면 됩니다.

<그림. 완성된 미니 프로젝트 화면>

완성된 화면에 보시면 사진이 있고 하단에 버튼 모양의 박스가 있습니다. 버튼을 클릭하면 이미지가 바뀌도록 만들어 보겠습니다.

우선 레이어를 하나 만들어 줍니다. 레이어의 기능은 포토샵이나 일러스트레이터와 같은 개념입니다. 레이어가 하나의 요소이며 일종의 계층을 만들어 줍니다. 프레이머에서 화면에 나타낼 수 있는 요소 중에 가장 기본적인 단위라고 생각하시면 됩니다.

<그림. 레이어를 추가>

프레이머에서 레이어를 만드는 방법은 여러 가지가 있습니다만 여기서는 좌측 상단의 'Insert'버튼을 누르고 'Layer'버튼을 누릅니다.

<그림. 레이어가 추가된 소스코드>

소스코드에 layerA라는 레이어가 생성됩니다. 그리고 우측 결과창에 회색으로 박스가 생성된 걸 확인할 수 있습니다. 이제 이 박스를 이미지가 표시되는 영역으로 사용해보겠습니다. 레이어에 이미지를 사용하기 위해 아래와 같이 소스 코드를 추가합니다.

layerA = new Layer

layerA.image = Utils.randomImage(layerA)

<그림. 이미지가 표시된 화면>

** 소스코드 중에 Utils.randomImage()라는 함수는 프레이머가 자동으로 이미지를 무작위로 로딩하는 편리한 기능을 수행합니다. 갤러리나 사진 관련 프로토타입을 제작할 경우 마땅히 사용할 이미지가 없거나 랜덤한 이미지가 필요할 때 매우 유용합니다. 자세한 사용법은 추후에 다루기로 하고 계속 진행하도록 하겠습니다. **

이미지는 표시가 되지만 크기가 좀 작습니다. 오토 코드(Auto Code) 기능으로 크기를 조절해보겠습니다. 오토 코드 기능은 소스 코드를 직접 타이핑해서 입력하지 않고 메뉴와 속성 창, 미리 보기창 등에서의 조작을 통해 소스코드를 수정하는 기능을 말합니다. 소스코드 중에 layerA = new Layer 라인의 왼쪽을 보면 소스코드의 줄번호와 함께 작은 전환 버튼이 하나 있습니다. 이 버튼을 클릭해봅시다.

전환 버튼을 클릭하면 중간에 비어있던 속성 창에 여러 가지 속성들이 표시됩니다. 그리고 미리 보기창에 우리가 선택한 레이어의 네 귀퉁이에 조절 가능한 버튼이 나타납니다. 이 버튼을 드래그해서 크기를 화면에 맞춰보겠습니다.

<그림. 드래그해서 크기를 맞춤>

이미지가 이제 좀 보기 좋게 들어간 것 같습니다. 그리고 좌측의 소스코드를 보시면 width , height 값이 추가되어 있습니다. 이처럼 오토 코드 기능을 사용하면 조금 더 편하게 레이어를 조절할 수 있습니다.

<그림. 버튼 레이어의 추가>

계속해서 버튼 레이어를 추가해 보겠습니다. 이 버튼은 클릭할 때마다 랜덤한 이미지를 새로 불러와 갱신해주는 역할을 수행하게 될 겁니다. 상단 좌측의 'Insert' - 'Layer' 버튼을 클릭해서 레이어를 만들어줍니다. 그러면 바로 오토 코드 기능이 켜지는 걸 확인할 수 있습니다. 하단의 빈 공간에 드래그해서 배치해줍니다.

이제 마지막으로 버튼을 클릭했을 때를 설정하고 이미지를 변환하는 소스코드를 만들어보도록 할 텐데요. 그전에 레이어의 이름을 변경해보겠습니다.

지금 이미지는 layerA , 버튼은 layerB라고 되어 있습니다. 그러면 소스코드를 봐도 이게 어떤 일을 하는 레이어인지 모르게 되죠. 그래서 레이어의 이름은 어떤 요소인지 유추할 수 있게 바꿔주는 게 좋습니다.

여기서는 이미지는 imageContainer , 버튼은 imageChangeButton이라고 변경하도록 하겠습니다. 레이어의 이름은 짧으면 타이핑하기는 쉽겠지만 자세히 적는 것이 나중에 소스코드를 관리하기가 훨씬 좋습니다. 그러니 자세히 이름 짓는 습관을 들이길 권장합니다. 수정된 소스코드는 다음과 같습니다.

imageContainer = new Layer

width: 750

height: 1100

imageContainer.image = Utils.randomImage(imageContainer)

imageChangeButton = new Layer

x: 275

y: 1090

이제 버튼을 클릭하는 기능을 추가합니다. 좌측 상단의 'Insert' 버튼을 보면 'Event'라는 메뉴가 있습니다. 또 그 밑에는 방금 이름을 바꾼 'imageContainer'와 'imageChangeButton'이 표시됩니다. 여기서 버튼으로 사용하는 레이어인 'imageChangeButton' 밑에 위치한 Click 이벤트를 클릭합니다.