스윙투앱 매뉴얼

프로토타입 UI디자인

스윙에서 제공하는 프로토타입 UI 스타일 소개

스윙에서는[라이드, 탑, 푸터, 드롭다운 리스트, 드롭다운 박스, 푸시, 웹뷰 ]메뉴 총 7가지 디자인 스타일을 제공하고 있습니다.

매뉴얼을 통해서 각각의 프로토타입 디자인 설명과 함께 프로토타입 적용 앱 화면을 함께 확인해주세요.


 

*프로토타입 특이사항 1

프로토타입 메뉴 스타일을 변경하게 되면,  앱을 다시 제작해서 새 버전으로 확인해야 수정사항이 반영됩니다. 

예)처음에 슬라이드 메뉴로 만들었는데, 푸터 스타일로 프로토타입을 바꾸고 싶어요.

=프로토타입은 실시간으로 수정사항이 반영되는 항목이 아니기 때문에 앱제작요청을 통해서 앱을 다시 제작해야만 수정사항이 반영되요!

앱제작요청 버튼을 누른 후 소프트업데이트=[앱재실행]으로 업데이트 하시면 재설치 번거로움 없이 업데이트가 가능합니다.  

 

*프로토타입 특이사항 2

일반 프로토타입(슬라이드, 탑, 푸터, 드롭다운 리스트, 드롭다운 박스) 으로 앱 제작 후 → 웹뷰 기반 (푸시, 웹뷰) 프로토타입으로 변경할 수 없습니다.

*프로토타입을 웹뷰 기반으로 변경해야 할 경우는 앱을 새로 제작해서 만들어주셔야 합니다. 

+[앱 추가 제작] 버튼 눌러서 진행

반대의 경우도 동일해요!

*웹뷰 기반 (푸시, 웹뷰) 프로토타입으로 제작 후 → 일반 프로토타입(슬라이드, 탑, 푸터, 드롭다운 리스트, 드롭다운 박스)으로 변경할 수 없습니다.

+일반 프로토타입(슬라이드, 탑, 푸터, 드롭다운 리스트, 드롭다운 박스)은 자유롭게 변경 가능합니다. 

 

* 웹뷰 메뉴 특이사항 

웹뷰메뉴는 다른 프로토타입메뉴와는 다른 특이사항을 몇 개 더 가지고 있으니 꼭 확인해주세요 ~! 

(1) 홈 주소 갱신 여부 : 홈 주소(URL)를 갱신할 경우 앱을 다시 제작해야 합니다. *앱제작 요청 필수!!

(2) 웹뷰 무제한 상품 이용시: 웹뷰 무제한 상품을 결제하고 이용하시면 기간 제한 없이 무제한으로 이용 하실 수 있습니다.

무제한 상품 이용시 홈주소를 변경할 수 없으며, 변경할 경우 무제한 이용이 중단됩니다.

웹뷰 무제한 상품 이용방법은 ☞[ 스윙 웹뷰 무제한 이용플러그인 ]해당 매뉴얼을 확인해주세요.


 

▶ 앱제작페이지 – 디자인테마에서 프로토타입을 적용할 때는 오른쪽의 가상머신에 디자인이 바로 적용이 됩니다.

움짤 이미지를 통해서 가상머신에 프로토타입 디자인이 어떻게 변경되는지 확인해주세요~!


 

1. 슬라이드 메뉴

슬라이드 메뉴는 앱을 구성하는 카테고리의 내용이 처음부터 노출되지 않구요.
슬라이딩 아이콘을 터치했을 때 화면이 넘어가면서 카테고리 내용을 확인할 수 있도록 디자인 되어 있습니다.

.
앱 실행화면 – 슬라이드UI 적용

화면을 슬라이딩하여 사용할 수 있으며, 아이콘을 선택하여 메뉴 창을 확인할 수 있습니다.


★ 슬라이드 스타일 활용TIP 
기존의 슬라이드 스타일: 오른쪽, 왼쪽에서 메뉴를 생성하는 것 외에왼쪽 혹은 오른쪽으로만 메뉴를 배치하여 만들 수 있습니다.
한쪽 메뉴를 다 삭제한 뒤,  메뉴 버튼이 왼쪽에만 있고, 왼쪽에만 메뉴를 배치하는 스타일로 제작을 할 수 있어요.

이미지 참고)

★이용방법
앱제작 페이지> 디자인테마 → 프로토타입:슬라이드 선택 > 페이지메뉴 →오른쪽 or 왼쪽 하위메뉴 모두 삭제→ 저장 → 앱제작 요청 


 

2. 탑 메뉴

탑 메뉴는 카테고리, 게시판 등의 내용이 홈 화면 상단에 위치하고 있습니다.
해당 메뉴를 터치했을 때 메뉴에 해당하는 카테고리들이 화면 전체에 보여지는 스타일입니다.


▶ 앱 실행 화면 – 탑 UI 적용

탑 스타일은 상단에 위치한 메뉴를 선택해서 하위 카테고리 내용을 확인 할 수 있습니다.
간편하게 한 눈에 전체 메뉴를 확인할 수 있습니다.


 

3. 푸터 메뉴

푸터 메뉴는 홈 화면 하단에 메뉴가 위치하고 있습니다.
해당 아이콘을 클릭하면 핸드폰 화면 전체에 카테고리의 내용이 펼쳐집니다.


▶ 앱 실행 화면 – 푸터 UI 적용

탑 메뉴와는 반대로 하단에 메뉴가 위치하고 있습니다.
동일하게 카테고리를 선택하면 하위 카테고리가 열립니다.


 

4. 드롭다운리스트 메뉴

드롭다운 스타일은 최상단 메뉴가 1개 배치되며, 계단식으로 메뉴 및 카테고리를 정렬해놓은 스타일입니다.


▶ 앱 실행 화면 – 드롭다운리스트 UI 적용

드롭다운은 상위 메뉴를 선택하면 계단식으로 하위 카테고리들이 열립니다.
여러 메뉴 및 카테고리를 구성할 수 있어서 앱 내에 메뉴를 많이 넣어야 할 경우 유용하게 사용할 수 있습니다.


 

5. 드롭다운 박스 메뉴

‘드롭다운 박스’는 기존의 ‘드롭다운 리스트’ 프로토타입와 동일하게 홈 화면 상단에만 최상위 메뉴 하나만 보이구요.
메뉴를 선택하면, 박스 모양의 정사각형 하위 메뉴들이 열리는 스타일입니다.


▶ 앱 실행 화면 – 드롭다운 박스 UI 적용

드롭다운 박스는 상위 메뉴를 선택하면 아래로 정사각형의 하위 메뉴들이 열립니다.


 

6. 푸시 메뉴

푸시 스타일은 모바일 웹사이트를 앱으로 그대로 옮겨서 사용하는 스타일입니다.
푸시 전용으로 만들어진 프로토타입 디자인으로 
푸시 발송을 자유롭게 할 수 있으며, 화면 하단 카테고리 메뉴를 통해  앱 내의 이동이 편리하다는 장점이 있습니다.


▶ 앱 실행 화면 – 푸시 UI 적용

하단에 보이는 네비게이션 Bar를 이용해서 전 단계, 다음 단계, 홈화면으로 이동할 수 있습니다.
하단 푸시 설정 버튼을 누르면 푸시 알림을 끄거나 켤 수 있습니다.


 

7. 웹뷰 메뉴

웹뷰 역시 푸시와 동일하게 웹사이트를 앱으로 그대로 옮겨서 사용하는 방식입니다
앱에서 별도의 메뉴나 아이콘을 만들지 않으며, 푸시 발송이 되지 않습니다. 입력한 사이트의 메뉴와 카테고리로 앱을 이용합니다.

.

▶ 앱 실행 화면 – 웹뷰 UI 적용

웹뷰는 웹사이트 자체를 앱에 그대로 옯겨놓았기 때문에 앱 디자인 자체가 굉장히 깔끔하고 제작하는데 큰 어려움이 없습니다.
모바일 전용 사이트를 가지고 있다면 모바일에 최적화된 앱을 만들 수 있습니다.

프로토타입은 [앱제작 페이지–디자인테마]에서 설정할 수 있습니다.  

다양한 프로토타입 디자인을 통해서 여러분들의 앱을 자유롭게  만들어보세요 ^^ 

프로토타입을 선택한 뒤 스킨컬러 색상도 사용자가 원하는 색상으로 정할 수 있습니다. 

디자인 테마는 오른쪽의 가상머신을 통해서 즉시 반영이 되니, 앱과 어울리는 내용으로 디자인테마를 구성해주세요 .