Toast popup - Axure Deep Dive#13

Toast popup

앱을 사용하다보면, 즐겨찾기 토글 버튼 클릭 시 휴대폰 화면 하단 영역에 토스트 팝업이 생성되는 걸 볼 수 있습니다.

이번 포스트에서는 해당 토스트 팝업을 엑슈어로 구현하는 과정을 진행하고자 합니다.

매우 간단해서, 바로 적용하실 수 있습니다.

1.  다이내믹 패널을 활용해 즐겨찾기 버튼 생성하기

즐겨 찾기 버튼을 다이내믹 패널을 활용해서 디폴트와 셀렉티드 값을 지정해줍니다.

2.  즐겨찾기 버튼에 클릭 이벤트 설정하기

클릭시, 다음과 같이 인터랙션을 설정해 줍니다. 다이내믹 패널을 다음 패널로 설정하는 방법은 여러가지입니다. 간단한 작업에는 다이내믹 패널 자체를 잡고, 다음 패널 스테이트로 넒겨주는 명령과 함께, wrap from last to first 버튼을 클릭하면, 클릭 마다 계속 패널이 변경되게 됩니다.

 

3.  다이내믹 패널로 토스트 팝업 만들기

 토스트 팝업을 만들어 주고 역시 다이내믹 패널을 활용해, '즐겨찾기에 추가되었습니다.' 패널과 '즐겨찾기에서 해제 되었습니다.'

패널 2개를 생성해줍니다. 이후 우측에 눈 모양 아이콘을 클릭해서 hide를 적용시켜 줍니다.

 

4.  즐겨찾기 버튼에 show/hide 기능 적용하기

즐겨찾기 버튼에서 이제 클릭 시 show/hide 인터랙션을 통해 토스트팝업이 보여지게 설정해줍니다.

여기까지 설정하시면 즐겨찾기 버튼을 클릭 때, 즐겨찾기 토스트 팝업이 생성됩니다. (중간 영상)

이제 기본적인 작업은 끝났고, 추가 작업을 통해 실제와 똑같은 토스트 팝업을 구현하는 작업을 진행합니다.

 

 

5. Case 적용을 통해, 즐겨찾기 버튼 상황에 맞는 토스트 팝업 노출하기

별이 검정색인 즐겨찾기 버튼 클릭 시 -> 즐겨찾기 활성화가 되면서 -> 즐겨찾기에 추가되었습니다. 토스트 팝업이 생성은 되고 있습니다. 반대의 경우 주황색 즐겨찾기 버튼 클릭 시 -> 즐겨찾기 버튼이 검정색 버튼으로 바뀌면서 -> 즐겨찾기에서 해제되었습니다. 토스트 팝업이 나오도록 진행합니다.

 

1) 우선은 즐겨찾기 버튼을 클릭하시고, enable case를 클릭합니다.

2) 로직을 다음과 같이 진행합니다. 첫번째 드롭리스트 메뉴에서 state of panel을 선택하고, 두번째는 해당 위젯을 3번째는 equlas 4번째는 state를 5번째는 패널의 명칭 중 처음 deafult를 선택합니다.

 

이것을 다시 풀어서 말하면, 해당 위젯에서 패널이 default라는 패널과 동일할 때, 아래의 인터랙션을 수행한다 라는 의미입니다.

이렇게 하면, 위 영상과 동일하게 인터랙션이 작용하며, 다른 케이스를 추가해줍니다.

3) case2 는 즐겨찾기 버튼이 selected 상태 즉 버튼 색이 주황색인 경우, 우리는 토스트 팝업에서 '즐겨찾기에서 해제되었습니다.' 라는 패널 2가 나오도록 해줘야합니다.

이것을 만들면, 다음과 같이 됩니다.

여기까지 잘 적용이 되었다면, 즐겨찾기 버튼을 클릭 할 때마다, 적절한 토스트 팝업이 나타나는 것을 확인할 수 있습니다.

 

 

6.  토스트 팝업이 사라지는 기능 적용하기

토스트 팝업이 생성 되었는데, 현재는 사라지지 않고 있습니다. 이것을 해결하기 위해, shown이라는 명령어를 통해서 적용을 시켜줍니다. shown 은 말 그대로, 이미 보여지고 있는 상태의 위젯들을 컨트롤 할 수 있는 명령어 입니다. shown 과 show/hide를 통해 다음과 같이 작업을 진행합니다.

해당 토스트 팝업이 나타났을때, 다시 토스트 팝업을 하이드 시켜주라는 의미이며, 애니메이트는 fade 1.5s 으로 지정해주었습니다.

 

 

 

7.  카카오톡 즐겨찾기와 지그재그의 즐겨찾기 토스트 팝업의 차이점

카카오톡에서 친구를 즐겨찾기 하는 토글 버튼을 짧은 시간동안에 여러번 클릭하면, 카카오톡이 꺼지더라도 화면상에 토스트 팝업이 지속해서 생겼다가, 나왔다가 하는 것을 확인할 수 있습니다.

 

반면에, 지그재그 스토어의에서 즐겨찾기 토글 버튼을 짧은 시간동안에 여러번 클릭하면 마지막 이벤트에 대해서만 반응하도록 설계가 되었습니다. 

 

실행해보면 아시겠지만, 지그재그가 토스트 팝업의 경우 구현을 더 잘한 것으로 보입니다.

6번까지 적용 시, 짧은 시간안에 여러번 클릭 하는 경우를 테스트 해보면 뭔가 아쉬움이 남습니다.

 

이에 대한 방법으로는 hint를 드릴테니, 한번 고민해 보시고 적용해보시면 좋을 것 같습니다.

hint

1) 토스트 팝업 패널을 2개로 나눈다

2) shown -> 뒤에 일어나는 일, 즉 토스트 팝업이 사라지는 인터랙션을 발생하지 못하게 한다.

3) shown -> 뒤에 일어나는 일이 바로 일어나지 않게 wait을 사용한다.

 

이렇게 하더라도, axure 상의 구현 문제로 인해 완벽히 지그재그처럼 구현은 되지 않지만, 시현정도는 가능하게 구현은 가능합니다

 

최종 완성본

 

 

 

프로토 타이핑 링크 : https://niw2va.axshare.com

Untitled Document