프레이머X 야매 코딩: Page
Tab bar 혹은 Bottom navigation
스크롤 아니면 페이지
오늘도 dribbble에는 반짝반짝한 인터랙션들이 수도 없이 올라오지만, 실제로 우리가 사용하는 앱들 중 대다수는 결국 스크롤 아니면 페이지 구조를 하고 있다. 많은 프로토타이핑 툴에서 기본적으로 스크롤이나 페이지를 간단하게 구현할 수 있도록 하는 것도 아마 같은 이유 때문일 것이다.
프레이머X도 베타 버전에서부터 스크롤 툴을 제공하고 있었으며, 얼마 지나지 않아 페이지 툴을 추가했다. 그 중에서도 비교적 최근에 추가된 페이지 툴은 굉장히 유용하다.
여러 페이지들을 따로 만든 다음 링크로 연결해 주기만 하면 곧바로 한 장씩 넘겨볼 수 있는 근사한 페이지 컴포넌트가 완성된다. 심지어 트랜지션 효과도 다양하게 변경할 수 있어서 뮤직 서비스의 커버 플로우 같은 인터랙션도 클릭 몇 번이면 금방 완성할 수 있다.
그렇지만 프레이머 팀은 여기서 조금 더 욕심을 부렸어야 하는 게 아닌가 싶다. 프레이머X의 페이지 툴은 그 자체로 훌륭하게 스와이프 인터랙션을 구현할 수 있지만, 페이지 컴포넌트와 함께 마치 실과 바늘처럼 붙어 다니는 페이지 인디케이터, 탭 메뉴 관련 기능은 찾아볼 수 없다.
참 손이 많이 가는 친구다. 결국 또 이렇게 코드를 작성해서 추가해야 하는 것이다. 이번에는 카카오뱅크의 페이지 구조를 만들어 보면서 Tab bar 혹은 Bottom navigation으로 불리는 컴포넌트를 어떻게 만들 수 있는지 확인해 보도록 하자.
혹시 배열이라고 기억하시는지
일단은 페이지 툴을 이용해서 기본적인 구조를 만든다. 정말로 내 계좌에 저 금액이 찍혀 있었다면 이런 글을 쓰지도 않았겠지. 신경쓰지 말고 어서 다음으로 넘어가자. 💸
이 상태에서 프리뷰를 확인하더라도 구조를 살펴보는 데에는 무리가 없다. 하지만 탭 메뉴의 활성 비활성 상태가 표시되지 않으며, 탭 메뉴를 터치해도 아무런 반응이 없다.
그러니까 이제 코드를 작성할 차례다. 탭 메뉴를 만드는 방법을 대략 설명하면 이렇다.
- 배열을 만들고 각 탭 메뉴를 배열 안에 넣기
- 배열 안에서 선택한 현재 탭의 인덱스 확인하기
- 현재 탭의 인덱스를 현재 페이지 인덱스에 대입하여 페이지 이동하기
프레이머 클래식에서 반복문과 함께 고난이도의 양대산맥을 이루던 배열이 등장했다. 비록 어려운 개념이지만, 여러 개체들의 군집에서 원하는 특정 개체를 조작할 때에 배열을 사용할 수 있다는 것 정도는 알아두는 것이 좋다.
앞서 언급한 탭 메뉴를 만드는 방법 3단계 중에서 일단 핵심 키워드인 현재 탭과 현재 페이지 그리고 배열부터 시작해보자. data 안에 현재 탭과 현재 페이지 인덱스를 적어준다. 탭은 아직 선택하기 전이므로 값은 null이 되고, 현재 페이지 인덱스는 첫 페이지인 0이 된다.
왜 첫 페이지 인덱스가 1이 아닌 0인가요?
이미 배열에 대해서 한 번 들은 적이 있다면 어렴풋이 이해하리라 믿는다. 컴퓨터는 숫자를 1이 아닌 0부터 세기 때문에 첫 페이지의 인덱스를 0으로 적는다. 예전 프레이머 클래식 튜토리얼 ‘변수, 반복문, 배열’ 편에서 관련해서 설명한 바 있으니, 궁금한 분들은 참고 바란다.
이제 빈 배열을 하나 만들고, 각 탭 메뉴를 비어있는 배열에 등록한다. 탭 메뉴는 탭 바의 자녀들이므로, 탭 바를 통해서 한 번에 설정하도록 한다.
탭 활성 비활성 상태 표시하기
탭 메뉴에서 현재 탭의 위치를 표시하는 방법에는 여러가지가 있겠지만, 투명도 설정을 통해 간단히 활성 비활성 상태를 구분할 수 있다. 모든 탭 메뉴의 opacity 기본값을 0.2 정도로 투명하게 하고, 선택한 탭의 opacity 값을 1로 변경하면 된다. 이를 위해서 현재 탭을 확인하는 코드를 추가한다.
탭 메뉴 관련 내용을 추가했다 하더라도, 현재 페이지를 확인하지 못하면 무용지물이다. 페이지 영역에 대한 설정을 고민할 차례다. 페이지가 변경될 때마다 페이지 인덱스를 확인하고, 해당 페이지 인덱스에 따라 현재 탭을 갱신해야 하는데, 이 경우 onChangePage()를 활용할 수 있다.
코드를 모두 작성했으면, 다시 돌아와서 페이지 영역, 탭 바, 각 탭 메뉴의 Code Override를 선택하고 프리뷰를 확인해 보자. 페이지를 넘길 때마다 탭 메뉴에 위치가 표시되는 것을 확인할 수 있다. 페이지 툴에 있는 Effect를 변경해 가면서 재미를 느껴보는 것도 좋다. 앞으로 나아가기 위해서는 무엇보다 ‘재미’가 제일 중요하니까. 😉
하지만 여기서 짚고 넘어갈 한 가지. 페이지를 스와이프해서 넘기는 방식은 Android의 상단 Tabs에 해당하는 인터랙션이며, 하단에 위치한 iOS의 Tab bar나 Android의 Bottom navigation에서는 페이지를 직접 스와이프 하지 않도록 권장하고 있다.
탭 메뉴를 통해 페이지를 이동하려면 어떻게 해야 할까?
탭으로 페이지 이동하기
페이지 스와이프 대신 탭 메뉴를 사용할 예정이므로, 페이지 툴의 설정에서 Dragging을 Off로 변경한다. 그리고 페이지를 넘기면서 탭 메뉴의 활성 비활성 상태를 변경하는 것이 아니라, 탭 메뉴를 먼저 선택하여 페이지를 변경하게 되므로, 페이지 영역 관련 코드에서 onChange() 부분은 삭제하도록 한다.
탭 메뉴에는 onTap()을 추가하여 터치 인터랙션이 가능하도록 만들어 준다. 그리고 탭 할 때마다 페이지를 변경하려면, 현재 탭과 페이지 인덱스를 일치시켜, 해당 페이지 인덱스에 맞게 현재 페이지를 변경하는 코드가 필요하다. findIndex()를 통해 이를 해결할 수 있다.
이제 코드를 저장하고 프리뷰를 확인해 보면, 의도한대로 탭 메뉴를 통해 페이지가 변경되는 것을 볼 수 있다. Dragging 설정을 Off로 변경했다 하더라도 Effect 효과는 그대로 적용된다.
페이지 툴의 기본 Effect 설정값은 None 이지만, 확인한 것처럼 슬라이딩 애니메이션이 기본적으로 포함되어 있다. OS별 기본 가이드에서 권장하는 바에 따르면 슬라이딩 애니메이션도 제거하는 편이 좋겠다. animateCurrentPageUpdate라는 상당히 긴 이름의 설정을 false로 변경하는 것으로 애니메이션을 제거할 수 있다.
애니메이션을 제거하고 나면 드디어 우리가 흔히 경험하던 탭 메뉴 내비게이션이 완성된다. 👏👏👏
*프레이머 X 버전 업데이트 이후 프레이머 라이브러리 버전 호환 문제로 인해 정상적으로 작동하지 않는 이슈가 있습니다. 이 경우, File > Update Framer Library 혹은 Framer Library Version > Built-in 을 선택하시면 해결됩니다 :)
Page Tool
이번에 만들어 본 것은 탭 메뉴 뿐이지만, 사실 페이지 툴을 이용해서 만들 수 있는 인터랙션은 훨씬 다양하다. Pull to refresh나 Swipe action 등 ‘당겨서 무엇무엇하기’와 관련한 대부분의 것들을 만들 수 있다.
코드를 연습하는 것도 좋지만, 일단 이것저것 해 보면서 재미있게 익숙해지는 것이 툴을 익히는 첫걸음이 아닐까? 프레이머 공식 블로그의 페이지 툴 활용 사례들을 보면서 ‘나도 해봐야겠다’는 생각이 든다면 망설이지 말고 당장 시작해보자.
