[Axure RP Pro] Checkbox 기능 설정하기

이번에 처음으로 스토리보드를 만들면서 알게 된 것이 Balsamiq Mockup하고 Axure RP Pro인데, 나는  Axure RP Pro를 사용해보기로 했다. 웹페이지를 그려주면 바로 웹브라우저에서 실제와 유사한 프로토타입 화면을 볼 수 있고, Balsamiq보다 더 디테일하다고 판단하였기 때문이었다.

신나게 그림을 그리다가 막힌 부분이 있었으니, 바로 Checkbox 기능이었다. Radio Button은 같은 기능을 수행할 단위별로 묶어서 마우스 우클릭 후 그룹화 시키면 되는데, Checkbox는 그렇게 되지 않는다. 구글에서 해결책을 검색해 보았으나 국내 사이트에서는 명쾌한 답을 찾을 수 없었고, 해외 사이트에서 샘플을 구해서 구현해 보았다. 

일단 사용할 Checkbox를 추가하되, 모든 체크박스를 선택하는 기능을 하는 체크박스 1개를 따로 구분해 둔다. 그리고 구분이 용이하게 각각 Label을 적는다. Allcheck, 1, 2 등등. 그리고 이들의 상태변화를 설정해줄 Dynamic Panel을 하나 추가한다. 어차피 Dynamic Panel은 실제 프로토타입 화면에서는 보이지 않는다. Label은 어떤 기능을 하는지 알 수 있게 설정해주면 된다. 여기에서는 CheckboxFunction이라고 이름을 붙였다. 그리고 Dynamic Panel을 더블클릭해서 Panel State를 추가해준다. 여기에서는 Wait, SelectAllClicked, OtherCheckboxClicked 세 가지 상태를 추가한다.

Dynamic Panel을 선택한 상태에서 우측 Widget Properties의 OnPanelStateChange를 더블클릭한다. 그러면 Case Editor 창이 뜨는데, Description에 SelectAllClicked라고 기입해준 후 Add Condition을 클릭한다. 이제 상황을 지정해 줘야 하는데, all/state of panel/CheckboFunction/equals/value/SelectAllClicked를 선택해준 후 OK를 클릭한다. 그리고 좌측 Widget and Variable 항목에서 Set Variable/Widget value(s)를 클릭하여 액션을 추가해준다. 이 액션은 체크박스의 갯수만큼 추가하여 각각 설정해줘야 한다(전체선택 제외). 추가한 후, 우측의 Open Set Value Editor를 클릭하여 각각 옵션을 지정해 주는데, is checked of/체크박스 이름/is checked of/Allcheck를 클릭하여 액션을 추가해 준다. 예제에서는 체크박스가 3개이므로 추가해야 할 액션은 3개가 된다.

이제 OtherCheckboxClicked를 추가해야 한다. Dynamic Panel을 클릭하여 OnPanelStateChange를 클릭한 후, Description을 OtherCheckboxClicked-All Selected라고 적어준 다음에 Add Condition을 클릭한다. 그리고 다음 스크린샷처럼 값을 넣어준다. 행 추가는 + 버튼을 눌러주면 된다.

OK를 클릭한 후, Set Variable/Widget value(s)를 클릭하여 액션을 하나 추가한다. 이 때 설정해야 하는 액션은 is checked of/Allcheck/value/true이다. All Selected를 추가했으니, 이제는 Not All Selected를 추가해야 한다. OnPanelStateChange를 클릭하여 OtherCheckboxClicked-Not All Selected라고 Description을 기입해준 후, state of panel/CheckboxFunction/equals/value

/OtherCheckboxClicked라는 Condition을 추가해 준다. 그리고 Set variable and Widget Value(s)를 하나 추가하여 is checked of/Allcheck/value/false라고 설정해준 후 OK를 누른다.

이제 Wait만 남았다.  OnPanelStateChange를 더블클릭하여 Description을 AlwaysReturnToWaiting이라 입력한다. Condition을 따로 설정해줄 필요는 없고, Dynamic Panels의 Set Panel state(s) to State(s)를 클릭한다. Set CheckboxFunction(Dynamic Panel) state to Wait를 체크해주고, Select the state에서는 Wait를 선택해 준다. OK를 눌러 빠져나온 후, 우측의 Widget Properties에서 방금 추가한 AlwaysReturnToWaiting을 우클릭하여 Toggle IF/ELSE IF를 선택한다.

이젠 체크박스의 각 항목을 설정해줘야 한다. 각 체크박스별로 OnClick-Set Panel State(s) to State(s)를 추가해야 한다. 모두 선택하는 체크박스만 state를 SelectAllClicked로 설정해주고, 나머지 체크박스들은 OtherCheckboxClicked로 설정해주면 된다.

이제 모든 설정이 끝났다. 남은 것은 F5를 눌러 결과를 육안으로 확인하는 것 뿐이다.