본문 바로가기

DeVsign

Framer도전기 #2 Tab Bar 구현하기

취미생활로 끝인 줄만 알았는데, 어느새 회사에서 프레이머로 목업을 제작중인 나를 발견 후덜덜. 거기에 더하여 이 작업에 집중할 수 있도록 다른 업무가 배제되었다.(꿀) 6주 클래스 이후로 본격적인 앱 프로토타입을 만들어낸다는 게 쉽지 않지만, 날마다 차근차근 구현에 성공함으로써 성취감을 느끼고 있다.




그중 가장 뿌듯했던 것은, 몇 번의 도전 끝에 Tab Bar 활성탭/비활성탭의 구조를 구현했다는 것이다. 프레이머가 출시된 지 최소 4년은 넘은 만큼 탭바에 대한 오픈소스는 곳곳에서 찾을 수 있었다. 그러나 소스를 받아서 흉내를 내 보아도 응용이 되지 않았다. 어느 곳에서 틀린 건지 구분하는 건 능력 밖의 일이었다. 그래서 따라해본 소스는 전부 삭제하고 탭바 영역만 따로 떼어 내가 배운 지식을 토대로 처음부터 만들어 보았다.

먼저 배열을 세팅한다. sketch파일을 import했고, 버튼과 메뉴 텍스트의 레이어명을 배열에 순서대로 추가 하였다.




반복문을 이용하여 다섯개의 버튼, 메뉴명 텍스트에 대한 states를 셋팅한다. 활성탭은 on, 기본상태는 off로 이름을 지어 주고 각각의 properties를 작성한다. 여기에서는 활성탭을 불투명하게, 비활성 탭은 투명도를 30% 주었다.



버튼의 불이 켜질 때 스르륵, 켜 지도록 할 것이므로 animationOptions를 사용하여 시간을 지정한다.

그리고 아래와 같이 모든 아이콘의 불을 끄고, 첫번째 메뉴만 불을 켜 준다.



다음으로 hotspot이라는 이름으로 버튼 영역을 만들어 준다. 다섯개의 영역이 만들어졌다.




이제 이 영역을 눌렀을 때, 각각의 버튼에 불이 들어오도록 하는 #Events를 셋팅한다.
여기서 막히기 시작함.
분명 현재 버튼의 번호라든가 뭔가 일치하면 불이 들어오게 하면 될 텐데, 뭘 어떻게 일치시켜야 할 지. 며칠동안 수도 없이 오픈 소스를 찾아보았지만 배웠던 방식과 달라 제대로 구현되지 않았다. 그러다 docs에서 찾게 된 layer.index 라는 것을 응용하여, hotspots의 각각의 인덱스를 i로 지정해주었다. 5개의 hotspot의 번호가 만들어졌다. 순서대로 1,2,3,4,5. 버튼과 메뉴 텍스트의 번호와 일치할 방법을 찾았다.



i 라는 변수를 다시 5개 반복시켜 i와 hotspot의 index 가 일치하면 i 에 해당하는 버튼과 텍스트는 "on"상태로 애니메이션을 실행, 그렇지 않을 경우에는 "off"로 애니메이션 실행. 이렇게 하여 구현에 성공 하였다.