[예제를 통해 학습하는 프레이머(Framer) #3-2] Overlay Effect를 활용한 Draggable Sheet UI 구현

남양주개발자

·

2020. 7. 15. 08:30

728x90
반응형

Draggable Sheet?

애플리케이션을 사용하면서 위에서 아래로 끌어내리거나 아래에서 위로 끌어올리는 UI를 접해본 적이 있을 텐데요. 정말 대부분 애플리케이션에서 이 모션을 사용한다고 해도 무방할 정도로 굉장히 많이 사용되는 기능 중 하나입니다.

이런 모션을 사용해보신 적 있으시죠?

프레이머를 활용하면 정말 간단하게 Draggable Sheet UI를 구현할 수 있습니다.

❗️ 시작하기 전에

혹시 아직 Framer 계정을 가입하지 않으셨거나 프레이머 사용방법을 모르시는 분은 아래를 참고해서 계정 등록을 하고 Framer 프로젝트 생성까지 하시기 바랍니다.

 

[개발자가 알려주는 Framer X #0] 프레이머 쉽게 시작해보자.

📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트를 제공하는 라이브러리입니다. 처음 접하시는 분들도 어려움 없

webruden.tistory.com

💎 우리가 이번에 구현해낼 결과물

Draggable Sheet

디바이스 레이어 생성

상단의 프레임을 누르고 원하는 디바이스 레이아웃을 추가해 주세요.

디바이스 레이아웃 생성

커스텀 컬러 등록 방법

백그라운드 컬러를 지정하는 곳을 보면 하단에 Create라고 커스텀 컬러를 생성할 수 있는 버튼이 있습니다. 이 버튼을 클릭한 후 커스텀 컬러의 이름을 등록하고 색상까지 등록하면 어디서든 해당 컬러를 다시 재사용할 수 있습니다.

커스텀 컬러 생성 예시

Sheet 생성

Draggable Sheet를 구현하기 위해서 필요한 Sheet 프레임을 생성합니다. Sheet 초기화면을 보여주는 Sheet 1개, Sheet를 드래그했을 때 올라오는 Sheet 1개 총 2개의 Sheet 프레임을 준비해주세요.

Sheet 프레임 생성

디바이스 레이어에 맞게 사이즈를 맞춰줍니다. 저는 iPhone 11 Pro의 사이즈에 맞게 Sheet 프레임을 맞춰줬습니다.

디바이스 레이어에 맞게 사이즈를 조정

페이지 툴 추가

Draggable Sheet를 구현하기 위해서는 페이지 툴을 활용해야 됩니다. 페이지 툴을 디바이스 레이어에 추가합니다.

그리고 페이지 툴에 각 Sheet 프레임을 연결해주고 (1번 Sheet가 처음에 노출되어야 함으로 순서는 1번 Sheet 그리고 2번 Sheet 순차적으로) 페이지 툴의 속성을 수정합니다.

가장 중요한 부분은 Page의 방향(Direction)을 초기값으로 설정된 수평을 수직으로 변경하는 것입니다.

그 후, width, height를 auto로 조정하고 패딩(Padding) 상단을 500px 정도로 맞춰주고 Momentum을 true로 변경합니다.

페이지 툴 속성 수정

 

페이지 툴을 활용해서 Draggable Sheet UI가 잘 구현 되었죠? 

여기서 마무리 짓기에는 너무 아쉽습니다. Draggable Sheet UI를 사용하고 있는 애플리케이션들을 보면 중앙에 핸들러가 있는 것 알고 계시죠? 핸들러를 추가하도록 하겠습니다. 프레임을 활용해서 핸들러를 구현해줍니다. 저는 핸들러 사이즈를 너비(width) 60px, 높이 (height) 6px 색상은 커스텀 색상으로 추가하겠습니다.

Draggable Sheet 핸들러 추가

🎉 완성

짠! 이렇게 프레이머의 페이지 툴과 Overlay Effect를 잘 활용하면 이렇게 간단하게 Draggable Sheet UI를 구현해낼 수 있습니다!

완성된 결과물

👋 마무리

이번 포스팅에서는 Overlay Effect를 활용해서 굉장히 많이 사용되는 UI 요소인 Draggable Sheet 모션을 직접 구현해봤습니다.

[예제를 통해 학습하는 Framer #3-3]에서는 Overlay Effect를 활용해서 Modal Box 모션을 직접 구현해보도록 하겠습니다.

728x90
반응형

💖 저자에게 암호화폐로 후원하기 💖

아이콘을 클릭하면 지갑 주소가자동으로 복사됩니다

0개의 댓글