2.1. Hamburger 버튼 만들기
- Layout
본디 말로만 설명하면 재미없고 눈 앞에서 뭔가가 뿅뿅 돌아가야 할 맛도 나는 법. 이번 편부터는 실제로 코드를 활용하여 '무언가'를 만들어보고자 한다. 나의 첫 예제는 언제나 'Hamburger Button' 만들기다. 내가 처음 framer 야매 학습을 시작할 때도 햄버거로 시작했고, 회사 동료들과 스터디그룹을 만들었을 때 기초 설명을 할 때도 예제는 어김없이 햄버거였다.
만만한 햄버거. 'Hamburger Button'을 첫 예제로 사용한 건 다른 것 없다. 어느 UI에서건 많이 쓰이지만, 만들기는 쉽고 다양한 애니메이션으로 변형이 가능하기 때문이다.(라고 공식적으로 말하고 있지만 '실력은 없지만 빨리 움직이는 걸 만들고 싶으니까 간단한 걸로 가자'였다.)
구글에서 'hamburger button animation gif'라고 검색하면 참 많은 햄버거 모션들이 쏟아진다.(같은 버튼을 보고도 서로 생각하는 건 천차만별이라는 걸 알 수 있다.)
아직은 상상만으로 무언가를 만들기보다는 눈에 보이는, 즉 가시화된 자료를 참조하는 것이 좋다고 생각한다. 처음부터 눈에 보이지 않는 무형의 것을 유형으로 '창조'하려고 하다 보면 어디서부터 뭘 해야 할지 막막해진다. 내 경험에서 비춰보면 그것이 곧 포기로 가는 지름길이 되는데, 막막함은 곧 '어려워'가 되기 때문이다. '어려워'가 쌓이면 보통은 '이건 내가 할 수 있는 게 아냐'라며 포기로 이르게 된다.(도전정신이 투철한 사람은 '내가 널 정복해주지'가 될지도 모르겠다.) 내가 수년간 '해야지 해야지' 하며 아무것도 하지 못한 이유이기도 하고 'gif 모작하기'를 하게 된 배경이다.
Layer + States / Animation + Event
프로토타입은 한 장짜리 이미지에 머무르는 것이 아닌 그 이미지를 동적으로 움직이게 하기 위해 사용한다. 그래서 이미지(Layer)를 만들고 그 이미지가 어떻게 움직일지 설계(States 또는 Animation)를 한 다음 어떤 행동을 했을 때(Event) 그 움직임을 실행할지에 대해 기술해주면 된다. (이에 대한 자세한 내용은 장준혁 님의 Framer Basic 참조)
여기서는 수많은 hamburger button gif 중에서 가장 쉬운 기본 애니메이션을 시작으로 몇 가지 변형 애니메이션을 잡아볼 생각이다. 우선 애니메이션을 잡기 전에 애니메이션을 줄 hamburger button의 레이아웃을 짜 보자.
레이아웃 구성하기
앞서 기술한 것과 같이 레이어를 만드는 방법은 아래와 같다.
레이어 이름 = new Layer
레이어 만들기를 활용하여 아래와 같은 디자인의 레이아웃을 만들어보도록 하겠다.
이 화면을 코드가 아닌 포토샵이나 스케치에서 디자인을 한다고 하면 우리는 어떻게 작업을 할까? 우선 배경이 흰 도큐멘트(1)를 꺼내고 Status Bar에 해당하는 진한 남색의 레이어(2)를 만든 다음 그 아래 Tool Bar가 될 좀 더 밝은 남색의 레이어(3)를 만들 것이다. 그런 후 3개의 선을 그어 Hamburger 버튼(4, 5, 6)을 만들 것이다.
똑같이 순서로 레이어를 코드로 만들면 된다.
1. 스크린 배경 컬러 지정하기
새 프로토타입을 꺼내서 모바일 목업을 꺼내면 까만 배경화면이 채워져 있다. 이를 희게 만들기 위해 '스크린의 배경 컬러는 white이다.'를 그대로 코드로 옮겨보자. white대신에 16진수 컬러코드(#FFFFFF)를 사용해도 된다.
Screen.backgroundColor = 'white'
또는
Screen.backgroundColor = '#FFFFFF'
2. Status Bar 레이어 만들기
디자인을 보며 문장으로 말하면 'StatusBar는 가로는 목업 스크린의 가로 사이즈와 같고 높이 48px의 배경색이 #1A237E인 새 레이어'라고 할 수 있다. 이 역시 그대로 코드로 옮겨보자.
StatusBar = new Layer
width: Screen.width
height: 48
backgroundColor: '#1A237E'
여기서 StatusBar는 이 레이어가 Status Bar라는 의미를 담기 위해 내가 이 레이어에 명명한 이름이다. 그리고 width는 다양한 디바이스에 맞춰 반응형이 될 수 있게 스크린의 width 값에 맞춰 변하도록 절대값이 아닌 상대값을 적용했다. 즉, StatusBar의 width에 Screen의 width 값을 대입했다고 보면 된다. (절대값은 무슨 일이 있어도 변하지 않는 값, 상대값은 비교에 따라 변하는 값이라고 보면 된다. 절대평가, 상대평가를 떠올리면 이해가 쉽다.)
(좌) width를 상대값으로 지정했을 때 / (우) width를 절대값으로 지정했을 때3. Tool Bar 레이어 만들기
앞서 Status Bar를 만들었던 것과 같은 방법으로 하면 되는데 여기서 추가될 것이 바로 x와 y 좌표값이다.
framer에서 새 레이어를 생성했을 때 기본 좌표값은 (0, 0)이다. Status Bar는 왼쪽 최상단인 (0, 0)에 위치하므로 따로 위치 값을 설정하지 않아도 된다. 하지만 Menu Bar의 경우 Status Bar 아래에 위치해야 하므로 y 값을 지정해주어야 한다.
ToolBar = new Layer
y: StatusBar.maxY
width: Screen.width
height: 112
backgroundColor: '#3F51B5'
y 속성 값 역시 상대값을 사용했다. 여기서 'StatusBar.maxY'는 StatusBar 레이어의 가장 아래 점을 말한다.
layer이름.maxY
물론 StatusBar 바로 아래에 위치할 것이니 좌표값을 계산해서 '48'이라는 절대값을 사용해도 무방하다. 하지만 상대값을 사용하면 StatusBar의 위치 값이 변경된다던가 높이값이 달라질 경우 절대값으로 입력한 값 전체를 변경하는 수고로움을 덜 수 있다.
4. Hamburger 버튼 레이어 만들기
1. Parent 레이어 만들기
hamburger버튼은 라인 3개가 그룹 지어 있을 때 hamburger 버튼이라고 말한다. 그래서 포토샵으로 말하자면 그룹 레이어처럼 각각의 요소를 담는 그릇이면서 클릭 영역이 되어줄 parent 역할의 레이어를 먼저 만든다.
HB = new Layer
width: 48
height: 48
parent: ToolBar
x: Align.left(24)
y: Align.center
여기서 눈 여겨볼 점은 parent와 Align이다.
parent: 레이어 이름
예제를 기준으로 설명하면 Hamburger버튼은 Tool Bar 안에서만 위치한다. 즉, Tool bar에 귀속된 레이어라는 뜻이다. Parent는 부모 레이어를 지정해주는 속성인데 'HB'라는 레이어의 부모 레이어로 'ToolBar'라는 이름의 레이어를 지정하겠다는 의미다. 말이 어렵게 느껴진다면 아래 이미지를 보면 이해가 쉽다.
parent를 ToolBar로 지정하면 해당 레이어가 ToolBar에 귀속된다. 귀속된 레이어를 Child Layer라고 한다.HB에 사용된 x, y 값 역시 상대값이라 할 수 있다. 순서대로 풀이하면 Align.left는 왼쪽 정렬, Align.center는 중앙 정렬, Align.right는 오른쪽 정렬하라는 얘기다.
여기서 뒤에 괄호를 붙이고 숫자를 붙여주면 그 수만큼 위치가 플러스 마이너스가 된 좌표에 위치하게 된다.
Align.left(-n)
Align.center
Align.right(n)
parent 레이어를 지정해주게 되면 좌표의 기준이 screen에서 parent 레이어로 변경된다.
parent 레이어를 지정하면 Screen의 좌측 상단에서 parent 레이어의 좌측 상단이 (0, 0)이 된다.그래서 align의 기준도 screen에서 ToolBar로 변경되기 때문에 x는 ToolBar의 왼쪽 끝점에서 24 더해진 곳에 위치하고 y는 ToolBar 높이의 중앙에 위치하게 되는 것이다.
hamburger 버튼의 삼선을 만들기 전에 중간 점검을 하며 숨을 고르자.
이런 형태가 만들어졌다면 성공, 아 물론 빨간 건 빼고-
2. hamburger 버튼의 삼선 만들기
삼선 역시 상대값을 이용해 만들어줄 것이다. 그러므로 기준이 될 중앙선을 먼저 만들도록 하겠다.
HBC = new Layer
width: 48
height: 4
backgroundColor: '#ffffff'
parent: HB
x: Align.center
y: Align.center
앞서 다 설명했던 속성들을 활용했기 때문에 따로 설명할 것은 없고 HBC라는 이름은 Hamburger Button Center의 약자다. 다시 말하지만 이름을 명명할 때는 의미를 담아야 한다.
기준이 되는 선을 그었으니 위아래 선도 만들어보자.
HBT = new Layer
width: HBC.width
height: HBC.height
backgroundColor: HBC.backgroundColor
parent: HB
x: HBC.x
y: HBC.y-16
HBB = new Layer
width: HBC.width
height: HBC.height
backgroundColor: HBC.backgroundColor
parent: HB
x: HBC.x
y: HBC.y+16
모두 상대값을 적용했다. 똑같은 크기의 삼선을 만드는 것이므로 가로세로 사이즈, 배경색 모두 중앙선 값을 받아오도록 했고 y 좌표는 중앙선을 기준으로 위아래에 위치함으로 벌어지는 높이만큼의 숫자를 더하고 뺐다.
이것으로 움직임을 설계하기 전 디자인을 모두 끝냈다. 고 생각하면 오산. 아까 만들어놓은 HB의 배경을 투명으로 만들어줘야 모두 끝난다. 쉽다. HB의 backgroundColor 값으로 'Transparent' 주면 된다.
완성된 화면과 전체 코드는 아래와 같다.
Screen.backgroundColor = "#ffffff"
StatusBar = new Layer
width: Screen.width
height: 48
backgroundColor: '#1A237E'
ToolBar = new Layer
y: StatusBar.maxY
width: Screen.width
height: 112
backgroundColor: '#3F51B5'
HB = new Layer
width: 48
height: 48
parent: ToolBar
x: Align.left(24)
y: Align.center
backgroundColor: 'Transparent'
HBC = new Layer
width: 48
height: 4
backgroundColor: '#ffffff'
parent: HB
x: Align.center
y: Align.center
HBT = new Layer
width: HBC.width
height: HBC.height
backgroundColor: HBC.backgroundColor
parent: HB
x: HBC.x
y: HBC.y-16
HBB = new Layer
width: HBC.width
height: HBC.height
backgroundColor: HBC.backgroundColor
parent: HB
x: HBC.x
y: HBC.y+16
움직임을 설계하고 어떤 행동에 반응을 보일지 설정하는 방법은 다음에 이어서...
instagram: https://www.instagram.com/fish0422/
facebook : https://www.facebook.com/fish0422
