햄버거가 슬라이딩을 하면 ... (Feat : 슬라이딩 햄버거 메뉴 만들기)

요즘 앱을 보면 많은 개발자들이 햄버거 메뉴를 사용합니다. 스마트메이커를 이용하여 햄버거 메뉴를 어떻게 만들 수 있는지 알아보도록 하겠습니다.

 

안녕하세요.

햄버거 메뉴는 앱개발시 많이 사용되는 메뉴이고 직관적인 디자인으로 개발자들이 선호하는 메뉴인데요. 오늘은 스마트메이커로 햄버거메뉴를 슬라이딩을 접목하여 조금 더 애니메이션적인 효과를 더하여 햄버거 메뉴를 만들어 볼까 합니다.

 

 

슬라이딩 햄버거메뉴 실행화면

 

1. 슬라이딩 햄버거 메뉴 만들기

 

슬라이딩 햄버거메뉴를 만들기 위해 다음 화면과 같이 디자인을 합니다.

 

슬라이딩 햄버거 메뉴를 위한 디자인화면 1

 

1.1 햄버거 아이콘 만들기

 

위 화면의 오른쪽 상단에 있는 햄버거 아이콘은 스마트메이커에서 제공하는 디자인도우미의 아이콘메뉴에 있는 햄버거 아이콘을 사용했습니다.

 

1-2 뷰추가 하기

 

 

뷰추가아톰을 생성하여  유형을 슬라이딩으로 설정 후 방향과 시작상태 최소크기를 위 화면과 같이 설정합니다.

 

1-3 가림막 생성하기

 

가림막을 생성하는 이유는 햄버거메뉴를 클릭 시 메뉴화면을 제외한 부분을 어둡게 처리하여 메뉴의 시각효과를 극대화하기 위해서입니다. 아래 그림과 같이 가림막을 생성합니다.

 

가림막 생성 화면

 

가림막은 화면전체에 꽉 차게 사각형 그리기로 배치합니다. 색은 어두운 색을 추천합니다. 사각형 그리기 아톰을 생성하여 아톰명을 가림막이라고 변경 후 가림막아톰의 화면 감춤 속성을 설정합니다.

 

사각형그리기 화면감춤 속성 설정화면

 

 

 

2. 진행관리자로 이벤트 설정하기

 

디자인이 완료되었으면 진행관리자를 이용하여 이벤트를 설정해야 합니다. 스마트메이커는 노코딩을 지향하기 때문에 저도 업무규칙을 사용하지 않고 진행관리자로 이벤트를 설정하겠습니다. 진행관리자를 활용하면 코딩한 줄 없이도 동적인 햄버거 메뉴를 만들 수 있습니다. 물론 업무규칙을 사용해서도 슬라이딩되는 햄버거 메뉴를 만들 수 있지만 코딩량이 상당이 많아질 것 같습니다.

 

2-1 메뉴버튼의 이벤트 추가하기

 

아래 그림과 같이 메뉴버튼에 이벤트를 추가하기 위해 진행관리자 창을 열고 뷰추가의 확장하기와 가림막의 화면 감춤을 거짓으로 설정합니다. 

 

메뉴버튼 설정 화면

 

2-2 가림막에 이벤트 추가하기

아래 그림과 같이 가림막을 클릭했을 때의 이벤트를 추가하여 설정합니다.

 

가림막 설정 화면

 

마지막으로 메뉴화면의 닫기버튼 클릭 시 이벤트도 가림막 이벤트와 똑같이 설정하면 슬라이딩 햄버거메뉴 만들기의 모든 과정이 끝입니다. 수고하셨습니다. 이제 실행해 보시면 와우~ 메뉴가 슬라이딩되며 나타나는 것을 확인할 수 있습니다.

 

따라 하기 힘드신 분을 위해 폼을 첨부합니다.

 

슬라이딩메뉴.QPM

0.00MB

 

오늘은 여기까지...

감사합니다.