스윙 기능 도움말

디자인테마-프로토타입 디자인

756 views 2017년 8월 21일 2018년 2월 21일 root 9

프로제목

스윙 에서 제공하는 프로토타입은 슬라이드, 탑, 푸터, 드롭다운, 푸시, 웹뷰 메뉴 총 6가지 디자인 스타일을 제공하고 있습니다.

이번 포스팅에서는 각각의 프로토타입 디자인 설명과 함께 프로토타입 적용 앱 화면을 함께 소개해드리겠습니다.

*프로토타입 특이사항

프로토타입 메뉴 스타일을 변경한 후,  앱을 다시 제작해야만 수정사항이 반영됩니다.

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

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

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

 

* 웹뷰 메뉴 특이사항

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

(1) 홈 주소 갱신 여부 : 불가 , 홈 주소를 갱신할 경우 앱을 다시 제작해야 합니다.

(2) 이용기간 체크여부 : 이용기간 체크를 하지 않습니다, 한번 유료앱으로 제작하면 계속 사용이 가능합니다.

(3) 유료결제기간이 지날경우 : 기존앱은 계속 사용이 가능하나 , 이용기간이 종료된 상태에서는 변경된 주소로 상용버전 앱으로 제작할 수 없습니다.

 

▶ 움짤이미지를 통해서 프로토타입 스타일 적용모습을 확인해주세요

디자인테마-프로토타입



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

슬라이드18.02

 

  • 슬라이드 스타일 적용 – 앱 실행화면

슬라이드화면

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

 

★ 슬라이드 스타일 활용TIP

기존의 슬라이드 스타일: 오른쪽, 왼쪽에서 메뉴를 생성하는 것 외에왼쪽 혹은 오른쪽으로만 메뉴를 배치하여 만들 수 있습니다.

한쪽 메뉴를 다 삭제한 뒤,  메뉴 버튼이 왼쪽에만 있고, 왼쪽에만 메뉴를 배치하는 스타일로 제작을 할 수 있어요.

 

이미지참고)

슬라이드메뉴업뎃5슬라이드메뉴업뎃7

★이용방법

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


 

2. 탑 메뉴

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

탑_18.02

 

  • 탑 스타일 적용 – 앱 실행 화면

탑화면

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

간편하게 한 눈에 전체 메뉴를 확인할 수 있습니다.


 

3. 푸터 메뉴

  • 카테고리, 게시판 등의 메뉴가 글이 아닌 아이콘 형식으로 보이며, 핸드폰 화면 하단에 메뉴가 위치하고 있습니다. 해당 아이콘을 클릭하면 핸드폰 화면 전체에 카테고리의 내용이 펼쳐집니다.

푸터_18.02

 

  •  푸터 스타일 적용 – 앱 실행화면

푸터화면

탑 메뉴와는 반대로 하단에 메뉴가 위치하고 있습니다.

동일하게 카테고리를 선택하면 하위 카테고리가 열립니다.


 

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

드롭다운_18.02

 

  • 드롭다운 스타일 적용 – 앱실행화면

드롭다운화면

드롭다운은 상위 메뉴를 선택하면 계단식으로 하위 카테고리들이 열립니다.

여러 메뉴 및 카테고리를 구성할 수 있어서 앱 내에 메뉴를 많이 넣어야 할 경우 유용하게 사용할 수 있습니다.


 

5. 푸시 메뉴

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

푸시_18.02

 

  • 푸시 스타일 적용 – 앱실행화면

푸시화면

하단에 보이는 네비게이션 Bar를 이용해서 전 단계, 다음 단계, 홈화면으로 이동할 수 있습니다.

하단 푸시 설정 버튼을 누르면 푸시 알림을 끄거나 켤 수 있습니다.


 

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

웹뷰_18.02

 

  • 웹뷰 스타일 적용 – 앱 실행화면

웹뷰화면

웹뷰는 웹사이트 자체를 앱에 그대로 옯겨놓았기 때문에 앱 디자인 자체가 굉장히 깔끔하고 제작하는데 큰 어려움이 없습니다.

모바일 전용 사이트를 가지고 있다면 모바일에 최적화된 앱을 만들 수 있습니다.


 

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

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

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

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

Was this helpful?