스윙 기능 도움말

앱 네비게이션 스타일

80 views 2017년 11월 22일 2018년 1월 8일 root 1

네비게이션스타일제목

스윙 앱제작 페이지의 2단계 디자인테마는 앱의 전반적인 디자인과 스타일, 색상을 결정하는 단계인데요.

디자인테마 단계에는 프로토타입과 스킨컬러를 설정할 수 있구요.

추가로 앱 메인 디자인 스타일과 앱 네비게이션 스타일을 설정할 수 있습니다.  -2017.11.17 추가된 기능

해당 메뉴얼에서 설명해드릴 기능은 [앱 네비게이션 스타일] 이구요.

해당 기능을 이용하는 방법과 어떻게 활용할 수 있는지 방법을 알려드리겠습니다.


 

▶ 앱 네비게이션 스타일 이용방법 영상으로도 확인할 수 있어요.


앱 네비게이션 스타일이란?

먼저, 네비게이션은 앱 메뉴명이 기재되는 Bar 영역이에요.

*이미지 참고 : 첨부한 이미지처럼 앱에 적용된 메뉴 이동시 상단에 메뉴명이 기재된 Bar가 생기구요. 이 해당 영역을 네비게이션이라고 합니다. 

네비게이션

앱 네비게이션 스타일은 기존에 스윙에서 셋팅된 네비게이션 스타일 외에 사용자가 원하는 스타일로 옵션을 설정하여 디자인을 구성하는 기능이에요.

기존에는 디자인테마에서 프로토타입을 선택하고, 스킨컬러를 설정하면 입력한 그대로 앱에 셋팅이 되어서 보여졌는데요.

해당 기능을 추가하면 네비게이션 영역에 이미지를 넣을 수도 있고, 음영색을 입혀서 투명하게 보이게 할 수도 있습니다.

*앱 네비게이션 디자인 스타일은 필수 제작기능이 아니라 옵션! 선택사항이니!! 확인하시고 사용자가 원하는 스타일을 적용해주세요 ^^



▶앱 네비게이션스타일 이용방법

네비

앱 네비게이션 스타일은 디자인테마단계에서 확인할 수 있습니다.

프로토타입 선택, 스킨 컬러를 선택한 다음에서 확인할 수 있어요.

해당 기능은 필수항목이 아니라, 선택사항이라서 해당 기능들을 적용하지 않아도 무관합니다.


 1. 앱 네비게이션 스타일 – 기본스타일

네비1

[기본]으로 체크를 하면 다른 스타일이 입혀지지 않고, 디자인테마에서 설정한 스타일 그대로 셋팅이 되어 제작됩니다.

스킨컬러를 파란색으로 설정할 경우 네비게이션도 파란색상으로 기본스타일로 보여집니다.

기본스타일로 제작을 하고 싶다면 ‘기본’에 체크를 해주세요.


2. 앱 네비게이션 스타일 – 배경이미지

네비2

[배경이미지 등록]을 선택하면, 네비게이션에 배경이미지를 등록할 수 있습니다.

첨부파일로 이미지를 등록해주시구요.

이미지를 추가하면, 위의 첨부한 이미지처럼 네비게이션영역에 배경이미지가 입혀져서 보여집니다.

★ 앱 네비게이션에 들어가는 배경이미지의 권장 사이즈는 없습니다.
네비게이션 영역에 들어갈때 이미지의 가운데 배경을 중심으로 360(가로)*56(세로)픽셀 사이즈로 조절되어서 들어갑니다.
네비게이션 배경이미지를 넣을때에는 패턴 형식으로 된 이미지를 넣는 것이 좋습니다.
KakaoTalk_20171222_174626081
(배경이미지 예시)
일반 배경 이미지를 넣을 경우 사이즈가 잘 맞지 않으면, 이미지가 분할되어 들어가거나 이미지가 잘려서 보이게 되요. 
따라서 이미지가 잘려도 무관한 패턴스타일의 이미지를 넣으시기를 권장드려요~!!

3. 앱 네비게이션 스타일 – 배경이미지+배경마스크

네비3

위에서 선택한 이미지에 [배경마스크]를 추가로 적용해볼게요.

배경마스크는 쉽게 말해서 음영이라고 보시면 됩니다.

이미지 위에 음영색을 입혀서 스타일링 하는 것이구요.

배경마스크를 선택하고 색상을 선택한뒤 투명도를 설정하여 음영색과 음영 정도를 설정할 수 있습니다. 

위에 캡쳐한 이미지처럼 이미지와 배경마스크를 함께 적용하면 배경이미지 위에 주황색 음영색이 입혀져서 나타납니다.

보통 음영은, 배경이미지를 깔았는데 텍스트가 잘 보이지 않을 경우 좀 어둡게 색을 입혀서 글자가 잘 보이게끔 할 수 있어요.


Was this helpful?