Axure 액슈어 따라하기 8. 다이나믹 패널 인터랙션 심화편 : 로직 세팅

나와 동일한 어려움을 겪었던 사람들을 위해,

나도 잊지 않고 기록하기 위해 액슈어 따라하기 시리즈(?)를 적고 있지만

한편 한편 늘어날 수록 설명에 한계를 느낀다..ㅎㅎ

그래도 쓰다보면 글솜씨도 늘기를 바라며.

이번편은 다이나믹패널 인터랙션 심화편!

상세한 로직 세팅하기 (?)

---

Axure 액슈어 따라하기 8.

인터랙션 로직 세팅

---

이 인터랙션은 다양한 UI 구현에 쓰일 수 있다.

나는 선택에 따른 서로 다른 결과를 보여주는 UI에 가장 많이 쓰는데

오늘은 예시로,

드롭박스 선택항목에 따라 다른 컨텐츠가 보여지는 인터랙션을 그려보자.

---

 

 

1. 라이브러리에서 드롭리스트를 가져온다.

 

2. 드롭리스트에 n개의 항목을 만든다.

 

이렇게!

 

3. 드롭리스트에서 항목 선택 시 보여줄 컨텐츠를 추가한다.

우선 1번에 해당하는 컨텐츠만 추가 후,

 

4. 해당 컨텐츠를 다이나믹패널화 시킨다.

이제 다이나믹패널화는 어떻게 하는지 다들 알겠지? (모르면 1편부터 다시 보기 추천!)

 

5. 2번에서 총 4개의 드롭리스트를 만들었다.

따라서 선택에 따라 보여 줄 컨텐츠도 총 4개가 되어야겠지?

4개의 state를 만들어준다.

그리고, 각각의 state마다 보여 줄 컨텐츠도 추가한다.

 

아래 동영상처럼 세팅해주면 된다.

 

6. 이제 인터랙션 로직을 세팅할 차례.

드롭박스를 선택한 상태에서 인터랙션을 세팅한다.

우리는 드롭박스 항목 선택이 변경될 때 마다 다른 컨텐츠를 보여줄 것이다.

따라서, Interaction > Selection changed를 선택한다.

 

7. 추가 액션을 넣지 말고 끝낸다. 그럼 아래 그림의 우측처럼 나올텐데,

이제 여기서 'Enable Cases' 버튼을 클릭!

그럼 이렇게 상세 로직을 세팅하는 레이어가 뜬다.

 

8. 우리는 '1번'을 선택하면 panel state가 'state 1'로 세팅되도록 로직을 추가해야 한다.

따라서, 아래와 같이 세팅해준다.

 

그럼 이렇게 케이스가 추가된다.

이제 여기에서 'Add action'을 클릭!

 

9. 드롭박스가 1번으로 선택되면 panel state를 'state 1'로 세팅해야한다고 위에서 말했다.

따라서 우리가 추가할 액션은, 'Sdt panel state'.

 

여기서 state를 'State 1'로 선택하면 끝.

선택항목 1에 대한 세팅이 끝났으니, 나머지 2,3,4번 세팅도 해야겠지?

완료된 케이스1을 복붙해서 4개로 만들어주고,

케이스와 액션을 2,3,4에 맞게 세팅해주면 끝!

이렇게 케이스를 복사>붙여넣기 한 후에,

각 케이스를 클릭하면 수정이 가능하다.

 

10. 바로 이렇게 세팅하면 된다 :)

 

 

그럼 이렇게, 선택에 따라 다른 컨텐츠를 보여주는 액션이 완성된다 :)

 

지금까지 총 8개의 액슈어 사용법을 정리했다.

내가 가장 많이 사용하는 기능들 위주이지만,

사실(기본적인 것을은 제외하고) 이 정도만 알아도

액슈어로 기획서 작성하는 데에는 큰 무리가 없을 것이다.

앞으로도 기억나는 꿀팁이 있다면 계속 업로드 할 예정 :)