24. 스크롤 시 특정 위치에 고정되는 스티키 메뉴 만들기 – 프로토파이 강좌

프로토파이 스티키 오브젝트 예시

해당 강좌는 유튜브 멤버십 회원 전용 강좌입니다.

바로 구독하기

이번 시간에는 프로토파이로 스티키 네비게이션을 만드는 방법을 알려드릴게요. 기존에 만드려고 했던 강좌였는데, 마침 메일로 요청을 주셔서 빠르게 만들었습니다. 일반적으로 Hi-Fi 프로토타이핑을 하기 위해 UI를 피그마나 스케치, xd에서 우선 작업을 한 후에 프로토파이로 import하잖아요. 이번에는 피그마에서 작업한 ui를 불러와서 해보겠습니다.

이번에는 크게 3단계로 나눠서 진행해볼게요.

1단계 : 상세페이지 내 탭 네비게이션을 스크롤 했을 때 상단 앱바 바로 아래에 스티키 처리하는 방법
2단계 : 각 섹션별 영역에 따라 탭 네비게이션이 해당 탭에 맞게 활성화시켜주는 방법
3단계 : 탭을 눌렀을 때 해당 섹션으로 이동하는 방법

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.