사이드 메뉴(Side Menu)?
Overlay Effect를 활용한 UI 구현 마지막 포스팅입니다! 이번에 다룰 예제는 사이드 메뉴입니다.
사이드 메뉴 UI는 앱 뿐만 아니라 웹에서도 정말 많이 사용되는 UI 요소 중 하나 입니다. 아래처럼 버튼을 눌렀을 때 특정 박스가 화면에 모션과 함께 좌에서 우, 우에서 좌로 열리는 방식입니다. 프레이머(Framer)는 사이드 메뉴에서 사용되고 있는 모션(Motion)을 굉장히 쉽게 구현할 수 있게 제공하고 있습니다.
사이드 메뉴는 대부분 모바일 애플리케이션에 기본적으로 다 들어있을거라 생각합니다. 제 블로그에도 기본적으로 좌측에 탑재되어 있죠.
오늘은 대부분의 애플리케이션에 존재하고 있는 이 사이드 메뉴를 다뤄보도록 하겠습니다.
❗️ 시작하기 전에
혹시 아직 Framer 계정을 가입하지 않으셨거나 프레이머 사용방법을 모르시는 분은 아래를 참고해서 계정 등록을 하고 Framer 프로젝트 생성까지 하시기 바랍니다.
[개발자가 알려주는 Framer X #0] 프레이머 쉽게 시작해보자.
📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트를 제공하는 라이브러리입니다. 처음 접하시는 분들도 어려움 없
webruden.tistory.com
💎 우리가 이번에 구현해낼 결과물
자 그러면 이제 본격적으로 구현해볼까요?
디바이스 레이어 생성
상단의 프레임을 누르고 원하는 디바이스 레이아웃을 추가해 주세요.
백그라운드 색상을 넣어줍니다. 원하는 백그라운드 색상으로 하시면 됩니다. 저는 백그라운드 색상을 #0099FF로 세팅하도록 하겠습니다.
사이드 메뉴로 구성할 프레임을 만들어 주도록 합니다. 사이드 메뉴 프레임을 디바이스 레이어 높이값에 맞춰서 생성해주고 너비값은 300px로 조정하고 tr, br은 각각 15px로 조정하도록 하겠습니다.
사이드 메뉴를 열기 위해 트리거 시켜줄 버튼을 추가하겠습니다. 저는 버튼 크기를 64px로 세팅하겠습니다. 디바이스 레이어의 좌측 상단에 배치해 주세요.
사이드 메뉴 트리거 버튼에 인터랙션을 추가합니다. 우측 컨트롤러에 Interactions -> Tap -> Overlay 그리고 타겟은 저희가 좀 전에 만든 사이드 메뉴 프레임을 연결시켜줍니다.
이제 버튼을 트리거시키면 인터랙션이 정상적으로 잘 적용됨을 확인할 수 있습니다. 프레이머에서 해당 기능들을 정말 간편하게 사용하도록 잘 구현해놨네요. 원하시면 Transition 효과를 각 옵션에서 조정할 수 있습니다. 원하는 모션 트랜지션을 적용하면 될 것 같습니다.
커스텀 아이콘 추가
그냥 기능만 구현하기에는 심심하니까 아이콘을 하나 추가해보도록 하겠습니다. 원하는 아이콘을 직접 만들 수도 있지만 저는 디자이너가 아니기에 패키지에 있는 Feather Icons에서 제공해주는 아이콘을 import 하도록 하겠습니다.
Feather Icons 패키지에서 menu 아이콘을 찾아서 버튼에 아이콘을 추가해줍니다. 이제 좀 메뉴버튼 같죠?
메뉴 아이콘의 크기와 색상을 변경합니다. 저는 백그라운드 색상과 동일한 색상으로 변경하겠습니다.
아 저희가 까먹은 부분이 있습니다. 사이드 메뉴에도 뒤로가기 버튼을 추가해야죠! 뒤로가기 아이콘을 추가한 후 여기에 뒤로가기 인터랙션을 추가하도록 하겠습니다.
뒤로가기 버튼 크기와 색상을 변경합니다.
뒤로가기 버튼에 인터랙션을 추가합니다. Interactions -> Tap Transition Back을 추가합니다.
🎊 결과물
사이드 메뉴 최종 결과물입니다.
👋 마무리
이번 포스팅에서는 Overlay Effect를 활용해서 굉장히 많이 사용되는 UI 요소인 사이드 메뉴(Side Menu)를 직접 구현해봤습니다. 대부분 웹이나 앱 서비스에서 사용하고 있는 만큼 프레이머에서 기본적으로 이렇게 간편하게 사용할 수 있도록 제공하고 있습니다.
이번 포스팅을 마지막으로 Overlay Effect를 이용해서 UI를 구현하는 장을 마무리 짓고 다음 포스팅은 Flows에 대해서 세부적으로 다뤄보도록 하겠습니다.
'강의 > Framer' 카테고리의 다른 글
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
