Framer Basic 2.

알아두면 약이 되는 8가지 팁

Junhyuk Jang

Published in

hyuk

9 min readJul 7, 2016

코드를 작성하는 것이 처음인 사람도 있고, 반대로 코딩에 능숙한 사람도 있을 것입니다. 각자의 배경지식에 따라 차이는 있겠지만, Framer를 처음 접했을 때 느끼는 당황스러움은 마찬가지일 것이라 생각합니다.

그래서 이번에는 Framer에서 자주 활용하게 되는 몇 가지 사항들에 대해서 정리해 보도록 하겠습니다.

이미지 레이어 쉽게 만들기

파워포인트나 키노트 활용에 익숙한 사용자들은 이것을 팁이라 여기지 않을지도 모르겠습니다. 저 역시 아무 생각없이 하던 방법입니다. 하지만 개발을 하던 분들에게 이 방법을 설명하자 이렇게 쉬운 방법이 있었는데 왜 진작 알려주지 않았냐고 하며 허탈해(?) 했습니다.

기존 개발 방식을 따르자면, 이미지 파일을 프로젝트의 images 폴더 안에 넣어주고, 해당 경로를 코드로 입력해 이미지를 불러오게 되는데, 이 때에 이미지 크기를 자동으로 체크하지 않기 때문에 일일이 이미지 크기를 확인한 후 값을 입력해야 하는 번거로움이 있습니다.

하지만 Framer에서는 단순히 이미지 파일을 입력창에 던져넣는 것만으로도 이미지 레이어를 생성할 수 있습니다. 이렇게 하면 파일명이 레이어명으로 자동 입력되며 이미지 크기도 자동으로 체크하여 레이어 크기로 지정됩니다.

포함 관계

디자인 작업을 할 때, 몇 개의 레이어를 하나의 큰 레이어(혹은 그룹) 안에 포함시키는 경우가 있습니다. 이는 코딩을 할 때에도 유용하게 쓰이는 방식 중 하나입니다.

감싸고 있는 레이어를 부모 레이어, 그 안에 들어 있는 레이어를 자녀 레이어라고 하며, Framer에서는 이런 식으로 작성할 수 있습니다.

layerA = new Layer
  x: 100
  y: 100
  width: 300
  height: 300
  backgroundColor: “yellow”layerB = new Layer
  x: 50
  y: 50
  width: 400
  height: 400
  backgroundColor: “red”
  parent: layerA#레이어A는 레이어B의 부모 레이어 / 레이어B는 레이어A의 자녀 레이어

여기서 중요한 것은 각 레이어의 위치값 입니다. 레이어A의 위치는 코드에 적힌 그대로 (x: 100, y: 100)이 됩니다. 하지만 자녀 레이어인 레이어B는 조금 생각해 보아야 합니다.

레이어B의 위치값은 (x: 50, y: 50)으로 표기했지만, 이것은 상대적인 위치이며 화면을 기준으로 한 위치는 (x: 100 + 50, y: 100 + 50)이 됩니다. 자녀 레이어의 위치값은 보통 부모 레이어의 위치를 기준으로 계산하게 됩니다.

또 한 가지, 코드에서 x, y값을 표시하지 않고 생략하면 기본값인 (x: 0, y: 0)가 들어가게 됩니다.

그런데 위의 이미지를 보면, 자녀 레이어인 레이어B가 부모 레이어인 레이어A의 바깥으로 나와 있는 것을 확인할 수 있습니다. 만약 자녀 레이어를 온전히 부모 레이어의 안으로 밀어넣고, 부모 레이어 밖으로 나오지 않도록 하려면 어떻게 해야 할까요?

디자인 할 때 자주 사용하게 되는 Mask 개념을 코드로도 작성할 수 있습니다.

layerA = new Layer
  x: 100
  y: 100
  width: 300
  height: 300
  backgroundColor: “yellow”
  clip: truelayerB = new Layer
  x: 50
  y: 50
  width: 400
  height: 400
  backgroundColor: “red”
  parent: layerA#부모 레이어에 clip: true 추가

화면을 가득 채우는 레이어 만들기

모바일 인터랙션을 구현하다 보면, 전체 화면에 표시되는 인터페이스를 그리는 경우가 종종 발생하는데 이럴 경우 화면을 가득 채우는 레이어가 필요합니다.

하지만 매번 화면 크기를 수치로 입력하기도 번거롭고, 특정 수치값을 입력하더라도 기기마다 화면 크기가 다른 까닭에 일부 기기에서는 전체 화면으로 표시되지 않기도 합니다. 이를 해결할 수 있는 방법이 바로 Screen 입니다.

layerA = new Layer
  width: Screen.width
  height: Screen.height
  backgroundColor: “yellow”#대소문자 주의
#Screen: 뷰어의 디바이스 스크린
#screen: Framer로 작업중인 모니터 스크린

레이어 색상 투명하게 만들기

레이어에 색상을 반드시 넣어야 할 필요는 없습니다. 투명한 레이어를 만들어서 터치 영역으로 활용하거나, 여러 개의 자녀 레이어를 포함하는 일종의 그룹으로 활용할 수도 있습니다.

layerA = new Layer
  x: 100
  y: 100
  width: 300
  height: 300
  backgroundColor: “transparent”layerA = new Layer
  x: 100
  y: 100
  width: 300
  height: 300
  backgroundColor: “”#색상명 혹은 색상코드를 생략하면 투명한 레이어 생성됨

opacity와 visible

레이어 색상을 투명하게 만들면 화면에서 해당 레이어가 보이지 않습니다. 이와 마찬가지 효과를 줄 수 있는 방법은 또 있습니다. opacity 속성을 추가하고 값으로 0을 입력하거나, visible 속성을 추가하고 값으로 false를 입력하면, 두 경우 모두 레이어가 보이지 않게 됩니다.

layerA = new Layer
  x: 100
  y: 100
  width: 300
  height: 300
  backgroundColor: “yellow”
  opacity: 0layerA = new Layer
  x: 100
  y: 100
  width: 300
  height: 300
  backgroundColor: “yellow”
  visible: false

하지만 opacity: 0 과 visible: false의 결과가 완전히 같은 것은 아닙니다. opacity: 0은 “레이어는 있지만 눈에 보이지 않는 상태”이며, visible: false는 “레이어가 아예 없는 상태”라고 생각하면 이해하기 쉬울 것입니다. (하지만 정말 레이어가 없는 것은 아닙니다.)

그렇기 때문에 클릭 등의 인터랙션 이벤트를 추가한 경우, opacity를 통해 만든 투명한 레이어는 인터랙션이 가능하며, visible을 통해 만든 투명한 레이어는 visible: true로 변경하기 전까지 인터랙션 할 수 없습니다.

states 변경

Framer Basic 1.에서 정리했던 것처럼 상태값(states)을 미리 지정하여 원하는 시점(events)에 적용할 수 있습니다. 상태값을 변경할 때에는 몇 가지 옵션들이 존재합니다.

#상태 A로 애니메이션 하면서 변경
layerA.states.switch(“A”)

#상태 A로 애니메이션 없이 변경
layerA.states.switchInstant(“A”)

그리고 모든 레이어는 기본 상태값으로 “default”를 가집니다. 최초에 레이어를 만들었을 당시, 그 상태 그대로가 기본 상태라고 할 수 있습니다. 따라서 레이어의 상태값을 변경한 후, 다시 원래대로 되돌리려면 다음과 같이 할 수 있습니다.

#기본 상태로 애니메이션 하면서 변경
layerA.states.switch(“default”)

또한 모든 레이어가 default 상태를 가지고 있기 때문에, 단순히 다음 상태로 변경하는 이벤트를 만들 때에는 주의해야 합니다.

#다음 상태로 애니메이션 하면서 변경
layerA.states.next()#만약 states A를 만들었다면 : default -> A -> default -> A -> default … 순으로 변경됨#만약 states A, B를 만들었다면 : default -> A -> B -> default -> A -> B -> default … 순으로 변경됨#추가한 A, B 사이에서만 왔다 갔다 하지 않고 중간에 default 상태를 한번 거쳐가게 됨

애니메이션 설정

처음 인터랙션 프로토타이핑을 할 때에 가장 빈번하게 수정하는 것 중의 하나가 바로 애니메이션 설정일 것입니다. 애니메이션은 디테일한 설정값에 따라 인터랙션에 현실감을 부여하기도 하고, 과장되거나 재미있는 느낌을 주기도 합니다.

#애니메이션 시간 설정 (기본값은 1초)
layerA.animate
  properties:
    x: 300
  time: 5#애니메이션 반복 설정 (무한반복 하려면 Infinity 입력)
layerA.animate
  properties:
    x: 300
  repeat: 3#애니메이션 커브
layerA.animate
  properties:
    x: 300
  curve: “linear”

Print

디자이너에게는 생소하지만 코딩할 때 자주 사용하게 되고 중요한 것이 바로 print 입니다.

layerA = new Layer
  x: 100
  y: 100
  width: 300
  height: 300
  backgroundColor: “yellow”
  opacity: 0print layerA.x
print layerA.width
print layerA.opacity

스크롤 하다가 특정 위치에서 이벤트를 주고 싶을 때,
특정 레이어의 상태를 확인하고 싶을 때,
임의로 설정했던 조건의 현재 값을 알고 싶을 때 등등

위와 같이 다양한 상황에서 현재 상태를 확인할 때에 print를 활용할 수 있습니다. 무언가 원하는대로 잘 되지 않을 때, print를 통해 원인을 찾게 되는 경우가 많을 것입니다.

Docs

위에서 언급되지 않은 더욱 많은 내용들은 아래 주소에서 확인할 수 있습니다.

http://framerjs.com/docs

모든 내용을 암기할 필요는 없습니다. 그때 그때 필요한 경우에 참고하면 됩니다. 그러다보면 어느샌가 아는 것이 차곡차곡 쌓이게 되고, 자신만의 노하우도 생길 것입니다.

별다른 준비는 필요없습니다. 일단 Framer를 열고, 코드 한 줄이라도 직접 적어보시길 추천합니다.