프레이머 기초 강의 Framer Fundamentals | #4. Building a Navigation Bar
# 해당 게시물은 Framer에서 제공하는 코스를 들으며 정리한 글로, 이 페이지에서 무료로 수강할 수 있습니다.
배워 볼 것
링크 삽입, 스크롤 섹션
엘리먼트에 링크 삽입 (Link 프로퍼티)
Link 프로퍼티 단축키 : L
프레이머에는 특별한 기능이 있습니다. 바로 텍스트, 프레임 등 엘리먼트에 링크를 넣을 수 있다는 점인데요. 이를 활용하면 로그인 페이지 등 다른 페이지로 이동하는 버튼 등으로 활용할 수 있습니다. 당연히 코드 기반으로 실제 동작한다는 점이 매력적이고요.
Link 기능은 엘리먼트를 선택하면 나오는 오른쪽 Properties 패널에서 사용할 수 있습니다.
클릭하게 되면 우선 '어느 페이지'로 이동시킬 건지 혹은 '어느 URL'로 이동시킬 건지 선택해야 하고, 선택에 따라 조금 다른 옵션을 보여줍니다.
- Page : Scroll Section 기능과 연동되어, 이동하려는 페이지의 특정 섹션으로도 이동 시킬 수 있습니다. 이동할 때 브라우저의 새 탭에서 페이지를 띄울 건지 선택할 수 있습니다.
- URL : 브라우저의 새 탭에서 URL을 띄울 건지 선택할 수 있습니다.
재밌는 점은 텍스트를 선택한 후 Link 프로퍼티를 적용하면 텍스트 스타일을 지정해 줄 수 있다는 것입니다. 아무래도 텍스트 버튼의 경우, 인터랙션이 없는 다른 평범한 텍스트와는 구분이 되어야 하기 때문에 이런 편의성을 넣어준 것 같습니다.
스크롤 섹션 (Scroll Section 프로퍼티)
영상이 업로드 된 지 1년 정도 지난 거라 현재 배포되어 있는 프레이머랑은 약간 다른 점이 있습니다. 예를 들면, 영상에선 Scroll Target이라고 말하는 프로퍼티는 2024년 3월 기준으로 Scroll Section이란 이름의 프로퍼티로 되어 있습니다.
Scroll Section을 사용하려면 해당 프로퍼티에 대해 알아야 하는데요. 프로퍼티를 추가하면 2가지 옵션이 나오게 됩니다.
- Name : 선택한 엘리먼트의 Scroll Section 이름을 지정합니다. 이때 지정한 이름은 Link 프로퍼티에서 Page를 선택했을 때 Section 옵션에서 볼 수 있습니다.
- Offset Y : 해당 섹션으로 이동될 때 Top: 0으로부터 얼마나 떨어뜨려 놓을 것인지 설정합니다. 기본값은 0입니다.
Section에서 원하는 Scroll Section의 이름을 고르면 'Scroll'이란 옵션이 나오는데, 해당 섹션으로 이동될 때 부드러운 애니메이션을 주면서 넘어갈 건지, 아니면 애니메이션 없이 즉시 이동시킬 것인지를 정하는 옵션입니다.