질문사항
GNB(Global Navigation Bar)가 고정되어 있다가 스크롤 시 너비가 줄어들면서 상단에 고정되는 프로토타입을 어떻게 만드나요?
답변
GNB가 스크롤에 따라 너비가 줄어들고 상단에 고정되는 프로토타입은 주로 `Smart Animate`와 `Scroll to` 또는 `Change to` 인터랙션을 조합하여 만듭니다. Figma Variables도 활용할 수 있지만, 이 특정 효과에는 `Smart Animate`가 핵심입니다.
방법 1: Smart Animate 활용 (권장)
두 가지 GNB 상태 프레임 준비: 초기 상태 프레임: GNB가 원래 크기로 페이지 상단에 고정된 상태의 프레임을 만듭니다. GNB 레이어의 `Position`을 `Sticky`로 설정합니다. 스크롤 후 상태 프레임: 스크롤이 일정량 내려간 후 GNB의 너비가 줄어들고 상단에 고정된 상태의 프레임을 만듭니다. 이 프레임에서도 GNB 레이어의 `Position`을 `Sticky`로 설정합니다.스크롤 트리거 설정: 초기 상태 프레임에서, 스크롤이 시작되는 지점(예: GNB 바로 아래 콘텐츠)에 투명한 핫스팟(Hotspot)을 만듭니다. 이 핫스팟에 `On Scroll` 또는 `While Scrolling` 인터랙션을 추가하고, `Change to` 스크롤 후 상태 프레임을 선택합니다. `Animation`은 `Smart Animate`로 설정합니다. 스크롤 후 상태 프레임에서도 반대 방향 스크롤 시 초기 상태로 돌아가도록 유사하게 설정합니다.GNB 레이어 이름 일치: 두 프레임에 있는 GNB 레이어의 이름이 정확히 일치해야 `Smart Animate`가 제대로 작동합니다.방법 2: Variables 활용 (더 복잡한 로직에 적합)
Variables는 주로 숫자, 텍스트, 불리언 값을 동적으로 변경할 때 사용됩니다. GNB의 너비(width)를 변수로 설정하고, 스크롤 위치에 따라 변수 값을 변경하는 방식으로 구현할 수 있습니다.
Number Variable 생성: GNB의 너비를 제어할 `number` 타입의 변수를 생성합니다 (예: `gnbWidth`).GNB 너비에 변수 연결: GNB 프레임의 `Width` 속성에 `gnbWidth` 변수를 연결합니다.스크롤 이벤트 트리거: 페이지에 스크롤 가능한 영역을 만듭니다. 특정 스크롤 위치(예: `On Scroll` 또는 `While Scrolling`)에 도달했을 때 `Set variable` 액션을 사용하여 `gnbWidth` 변수의 값을 변경합니다 (예: `gnbWidth`를 `초기값`에서 `줄어든 값`으로 변경).Sticky 설정: GNB 레이어의 `Position`을 `Sticky`로 설정하여 스크롤 시 상단에 고정되도록 합니다.이 방법은 `Smart Animate`보다 설정이 복잡할 수 있으며, `Smart Animate`가 제공하는 부드러운 전환 효과를 직접 구현하기 어려울 수 있습니다. 일반적으로 GNB 크기 변화와 고정에는 `Smart Animate`가 더 직관적이고 효과적입니다.