드롭다운 메뉴는 목록을 쉽게 펼치고 접을 수 있는 메뉴로 압축해 주기 때문에 필수적인 선택 요소입니다. 메뉴를 클릭으로 활성화하면 "드롭다운"이 사용자가 선택할 때까지 값 목록을 표시하고, 메뉴는 다시 하나의 항목만 보이도록 돌아갑니다.

리테일 사이트는 달력 날짜나 사이즈 선택과 같은 목록을 정리하기 위해 드롭다운 메뉴를 자주 사용하여 깔끔한 인터페이스와 쉬운 사용성을 제공합니다.

ProtoPie는 반복 작업을 줄여 주는 컴포넌트 를 사용해 드롭다운 메뉴를 더 빠르게 만들 수 있도록 도와줍니다. ProtoPie는 또한 Send 및 Receive 기능을 사용해 입력 간에 정보를 자연스럽게 공유합니다. 재미있게 만들어 보세요!

개요

• 1단계. 항목을 컴포넌트로 전환하기

• 2단계. 항목의 호버 상태 만들기

• 3단계. Send 및 Receive를 사용해 선택한 값을 텍스트 필드에 표시하기

• 4단계. 조건부 인터랙션을 설정해 메뉴를 펼치고 접을 수 있게 하기

• 5단계. 선택 시 메뉴가 사라지게 만들기

마지막에는 아래와 같은 것을 만들 수 있게 됩니다👇

[시작 Pie 파일] [완료된 Pie 파일]

1단계. 항목을 컴포넌트로 전환하기

1. 시작하려면 목록 항목 2와 3을 삭제하세요. 이제 컴포넌트를 만들고 사용할 것이기 때문입니다. 컴포넌트는 다시 사용할 수 있도록 저장해 두는 레이어와 인터랙션입니다. 이를 통해 반복 작업을 줄이고 프로토타이핑 속도를 높일 수 있습니다.

2. Item 1만 남겨둔 상태에서 선택한 뒤 컴포넌트로 전환하세요. 레이어 아이콘이 회색 컨테이너 아이콘에서 청록색 컴포넌트 아이콘으로 바뀝니다.

3. 이 컴포넌트를 복사하여 붙여넣어 세 개의 항목을 만들고, 이를 아래로 드래그해 목록을 만드세요.

2단계. 항목의 호버 상태 만들기

1. 왼쪽의 Scenes Panel 옆에 있는 번개 아이콘을 클릭해 Component Panel을 여세요. 그런 다음 Item 1 컴포넌트를 더블클릭해 Edit Mode로 들어갑니다.

2. Layers 패널에서 base 레이어를 표시하고 opacity 를 0으로 설정하세요.

3. Item 1 컴포넌트에 Mouse Over 및 Mouse Out 트리거를 추가하세요.

4. 각 트리거에 대해 Opacity 응답을 추가하고, 둘 다 base 레이어에 연결하세요. Mouse Over 트리거에는 Opacity 응답을 100으로 설정하고, Mouse Out 트리거에는 Opacity 응답을 0으로 설정하세요.

5. 컴포넌트에서 text 레이어를 편집 가능하게 만드세요(이 단계는 다른 디자인 도구에서 에셋을 가져온 경우에만 필요합니다).

6. 메인 씬(드롭다운 메뉴)으로 이동하여 각 컴포넌트의 텍스트를 사용자 지정할 수 있습니다.

7. 미리보기를 확인하여 마우스를 올렸을 때 불투명도가 변경되는지 확인하세요. 메인 컴포넌트에 적용한 변경 사항은 각 인스턴스에 자동으로 동기화되므로 모든 항목이 호버 효과에 반응해야 합니다.

3단계. Send 및 Receive를 사용해 선택한 값을 텍스트 필드에 표시하기

1. 메인 컴포넌트로 돌아가 컴포넌트 자체에 Tap 트리거를 추가하세요.

2. 이 트리거 안에 Send 응답을 추가하세요.

💡 팁: ProtoPie에서 컴포넌트 는 서로와 씬으로부터 분리되어 있습니다. 이 한계를 극복하려면 Send 및 Receive 기능을 사용해야 합니다. 이 단계에서는 컴포넌트 인스턴스 간에 정보를 공유하기 위해 Send 응답을 만드는 것입니다. 이 경우 Send와 Receive를 사용해 어떤 항목이 선택되었는지 지정하고, 메인 씬의 트리거가 그에 따라 응답을 전달하도록 합니다.

3. Channel 아래에서 Send to Current Scene을 선택하세요. 한 씬에서 보내고 받기 때문이지만, 정보를 보낼 수 있는 옵션은 채널 메뉴에서 확인할 수 있습니다.

4. 메시지 이름을 selected와 같이 지정하세요. 그런 다음 어떤 컴포넌트가 선택되었는지 알 수 있도록 Send Value Together를 선택하세요.

5. 여기에서 사용할 공식은 'text'.text 입니다. 이는 텍스트 레이어의 값과 메시지를 컴포넌트의 text 레이어로 보낸다는 뜻입니다.

6. 메인 씬으로 돌아가 모든 씬에 사용할 variable을 추가하세요. 사용할 형식이 text이므로 속성 패널에서 변수 형식을 text로 변경하는 것이 중요합니다. 이 변수를 사용해 컴포넌트에서 보낸 값을 저장합니다.

7. Receive 트리거를 추가하고, 메시지로 보낼 텍스트 값을 선택한 다음, 방금 만든 변수에 텍스트 값을 할당하세요.

8. Variables 패널에서 bug icon 을 클릭하면 미리보기 창에 변수가 표시됩니다. 이 디버거 도구로 제대로 작동하는지 확인할 수 있습니다. 항목을 클릭할 때마다 선택된 값이 이 변수에 표시되어야 합니다.

9. Input layer로 이동해 텍스트 레이어를 editable하게 만드세요. 그런 다음 Receive 트리거에 Text 응답을 추가하고 텍스트 레이어를 입력 필드로 지정하세요.

10. 공식을 사용해 값을 변수 자체로 변경하세요. 텍스트를 사용자 지정하기 위해 색상 응답을 추가할 수도 있습니다. 이 예에서는 짙은 회색 (#2C3038)을 선택했습니다.

4단계. 조건부 인터랙션을 설정해 메뉴를 펼치고 접을 수 있게 하기

드롭다운 메뉴 자체에 더 많은 인터랙션을 추가해 봅시다.

1. 먼저 dropdown menu의 불투명도를 0으로 설정하세요. 이것이 초기 상태입니다.

2. input container에 Tap 트리거를 추가하세요. dropdown menu와 연결된 Condition을 추가하세요. 이 데모에서는 Fill Opacity를 사용하지만, 다른 항목도 시도해 볼 수 있습니다.

3. dropdown menu의 opacity = 0 조건일 때 Opacity 응답을 추가하고 값을 100으로 설정합니다. 즉, 입력을 탭하면 dropdown menu가 나타납니다.

4. 추가 마이크로 인터랙션을 위해 작은 화살표에 Rotate 응답을 추가할 수도 있습니다. 이를 위해 Tap 트리거에 Rotate 응답을 추가하고 화살표를 선택하세요.

5. 화살표의 origin point를 중앙으로 변경해야 합니다. 원하는 각도로 화살표를 회전시키세요. 이 예에서는 180 도입니다.

6. 이 순서를 반대로 하려면 조건을 복제하고 새 조건의 opacity 속성을 = 100으로 변경한 다음, Opacity 및 Rotate 응답을 0으로 변경하세요.

💡 팁: Reset을 사용해 불투명도를 초기 상태로 되돌릴 수도 있습니다.

이 경우에는 reset 응답에서 회전 방향을 선택할 수 없으므로 회전을 reset으로 사용할 수 없습니다.

5단계. 선택 시 메뉴가 사라지게 만들기

1. 항목이 선택되었을 때 메뉴가 사라지도록 하는 것도 잊지 마세요. 이를 위해 방금 만든 인터랙션을 복제하여 Receive 트리거로 옮기세요.

2. 컴포넌트 바깥을 클릭했을 때 메뉴가 사라지게 하려면 인터랙션을 하나 더 추가할 수 있습니다. 이를 위해 BG 레이어에 Tap 트리거를 추가하고 방금 만든 인터랙션을 이 Tap 트리거로 복제하세요.

축하합니다!

컴포넌트를 사용해 드롭다운 메뉴를 만드는 방법을 배웠습니다. 프로토타입을 더욱 돋보이게 해 줄 아름다운 인터랙션도 추가했습니다!

여러분의 창의적인 실험도 보고 싶습니다! 프로토타입을 만들어 X 또는 Instagram에 #MadeWithProtoPie 해시태그와 함께 공유해 주세요.

[ProtoPie 다운로드] {커뮤니티 참여}