개요
Axure RP로 Lightbox를 만드는 방법입니다. Lightbox란 메시지나 이미지, 동영상 등을 화면에 띄우면 그 외 여백은 dimmed 처리되고, dimmed된 영역을 클릭하면 다시 이전 화면으로 돌아오는 기능입니다. 이 내용은 Axure RP 공식 홈페이지에 올라온 내용을 제가 이해한대로 옮겨적은 글입니다.
실습 예제 파일 다운로드
실습을 위해 공식 홈페이지에 있는 예제 파일을 다운로드하시기 바랍니다.
예제 파일 다운로드
시작하기
예제 파일 중 Lightbox 페이지를 엽니다. 이 페이지에는 버튼과 맵 이미지가 안에 있는 dynamic panel이 포함되어 있습니다. dynamic panel을 선택한 후 인스펙터의 STYLE 탭에서 Hidden 체크박스에 체크하여 숨깁니다.
Lightbox 인터랙션 만들기
view on map 버튼을 선택한 후, PROPERTIES 탭의 OnClick을 더블클릭하여 새로운 케이스를 추가합니다.
왼쪽 화면에서 Show를 선택한 후, 오른쪽열에서 dynamic panel을 클릭합니다.
More Options 드롭다운 박스에서 treat as lightbox를 선택합니다. Background Color이란 컬러 픽커가 표시될텐데, 이는 lightbox가 화면에 표시되었을 때 dimmed된 영역의 컬러를 선택하는 곳입니다. 설정을 바꾸지 않으면 #2F4F4F에 opacity 61%가 디폴트값입니다. OK를 눌러 저장합니다.
Lightbox를 창 가운데에 고정시키기
Lightbox를 항상 창 가운데에 떠서 스크롤하더라도 가운데에 고정되어 있도록 하고 싶은 경우가 있습니다. 이 경우에는 dynamic panel을 선택한 상태에서 PROPERTIES탭의 Pin to Browser 링크를 클릭합니다. 그러면 Pin to Browser 다이얼로그가 뜰텐데 거기에서 Pin to Browser에 체크하고 Horizontal Pin은 Center로, Vertical Pin은 Middle로 선택합니다. OK를 눌러 저장합니다.
미리보기
Preview 버튼을 눌러 미리보기합니다.