변수를 사용하여 탐색 컴포넌트 빌드하기

네비게이션은 디지털 인터페이스에서 중요한 요소입니다. 스마트 컴포넌트를 사용하면 프로토타입과 완벽하게 연동되는 맞춤형 상호작용 네비게이션 요소를 만들 수 있습니다. 이 가이드에서는 컴포넌트를 중첩하는 개념, 이벤트 변수를 사용하여 컴포넌트 내 요소에 이벤트를 추가하는 방법, 그리고 이러한 이벤트를 컴포넌트를 통해 전달하는 방법을 다룹니다. 중첩된 컴포넌트를 사용하면, 다른 컴포넌트 내 요소의 고유한 호버 상태와 같은 상태를 완전히 제어할 수 있다는 것이 주요 이점 중 하나입니다.

원자적 수준에서 시작하기

Framer를 사용하면 완전히 상호작용 가능하고 애니메이션이 포함된 컴포넌트를 만들 수 있으며, 컴포넌트를 다른 컴포넌트 안에 중첩할 수도 있습니다. 이 예제에서는 고유한 상호작용이 포함된 두 가지 유형의 중첩된 컴포넌트를 포함하는 웹사이트용 네비게이션 바 컴포넌트를 만들 것입니다. 네비게이션 바에는 다섯 개의 네비게이션 아이템과 쇼핑 카트 컴포넌트가 중첩되어 있습니다. 중첩된 컴포넌트인 네비게이션 리스트 아이템과 쇼핑 카트의 디자인은 네비게이션 바의 전체 디자인에 영향을 미칩니다. 따라서 가장 깊숙한 중첩된 컴포넌트부터 시작하여 바깥으로 확장해 나가는 것이 최적의 워크플로우입니다.

컴포넌트 중첩하기

두 개의 컴포넌트가 준비되면, 이들을 중첩할 상위 컴포넌트를 생성할 수 있습니다. 먼저 캔버스에서 네비게이션 바를 그립니다. 이를 선택하고 도구 모음에서 컴포넌트 도구를 사용하여 컴포넌트로 변환합니다. 다른 컴포넌트를 새 컴포넌트 내에 중첩하려면, 다른 컴포넌트를 컴포넌트 캔버스로 끌어와서 설계한 네비게이션 바에 배치하기만 하면 됩니다.

네비게이션 바에서 상호작용 트리거하기

메인 캔버스로 돌아와, 사용자가 'Clothing'을 탭하고 새로운 화면으로 이동할 수 있게 하고 싶을 것입니다. 컴포넌트를 프로토타이핑 커넥터를 사용하여 새로운 화면에 연결하면 상호작용을 설정할 수 있습니다. 그러나 이렇게 하면 컴포넌트 내 어디를 탭하든 상호작용이 트리거됩니다. 이는 원하는 방식이 아닙니다. 우리는 특정 요소에서만 이 전환이 트리거되기를 원합니다. 이때 이벤트 변수가 필요합니다. 이벤트 변수는 속성(예: 불투명도나 채우기)에 연결되지 않고, 대신 이벤트에 연결되는 특수한 유형의 변수입니다.

이처럼 컴포넌트를 신중하게 중첩하고 이벤트 변수를 사용하면, 디지털 인터페이스의 사용성을 높이는 더 정교하고 반응성 있는 네비게이션 경험을 만들 수 있습니다.