스윙 기능 도움말

앱 메인 디자인 스타일

74 views 2017년 11월 21일 2018년 1월 8일 root 3

앱메인디자인스타일제목

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

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

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

해당 메뉴얼에서 설명해드릴 기능은 [앱 메인 디자인 스타일] 이구요.

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


 

▶ 앱 메인디자인 스타일 이용방법은 영상으로도 확인할 수 있어요~


앱 메인 디자인 스타일이란?

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

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

해당 기능을 추가하면 메인 홈에 배경이미지를 넣을 수도 있고, 음영색을 입히거나, 투명하게 설정할 수도 있답니다.

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



앱 메인 디자인 스타일 이용방법

앱-튜토리얼_p6

앱 메인 디자인 스타일은 디자인테마 단계에서 확인할 수 있습니다.

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

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


 1. 앱 메인 디자인 스타일 – 기본스타일

앱-튜토리얼_p7

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

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


2. 앱 메인 디자인 스타일 – 이미지 기반

앱-튜토리얼_p8

[이미지 기반]을 선택하면, 배경이미지를 등록할 수 있습니다.

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

이미지를 추가하면, 앱 소개화면이 배경이미지로 입혀져서 메인 홈화면에 나타납니다.

(원래 스윙 소개 페이지는 배경이미지 없이 텍스트만 보여집니다)

 

★ 메인디자인에 들어가는 배경이미지의 권장사이즈는 없습니다.

다만 배경이미지의 가운데를 기준으로  가로 사이즈 1024픽셀, 세로는 1900픽셀 사이즈로 핸드폰 사이즈에 자동 조절되어서 들어갑니다.

따라서 배경이미지를 넣을 때에는 특정 이미지가 아닌 변 배경이 잘려도 되는 해상도와 화질이 좋은 이미지를 넣는 것을 권장드립니다.

KakaoTalk_20171222_173930839

(예시 이미지)

일반 배경 이미지를 넣을 경우 핸드폰 화면의 사이즈와 잘 맞지 않으면, 이미지가 분할되어 들어가거나 이미지가 잘려서 보이게 되요. 


3. 앱 메인 디자인 스타일 – 이미지기반+배경마스크

앱-튜토리얼_p9

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

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

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

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

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

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


4. 앱 메인 디자인 스타일- 투명

앱-튜토리얼_p10

[투명]으로 선택할 경우,  상단의 네비게이션이 투명으로 되어서 적용해놓은 웹템플릿이 하나의 메인 페이지로 보이게 됩니다.

그리고 메뉴를 열면 메뉴 역시, 기존에 설정한 디자인색상 (파란 색상)에 투명 음영이 적용되어서 뒷 배경이 보이는 것을 확인할 수 있어요.

위의 기본스타일을 설정했을때 이미지를 비교해서 보시면 어떻게 다른지 이해가 더 빠를거에요~!

 

★ 메인 디자인 스타일에서 투명을 설정할 때는 홈 화면은 웹템플릿 페이지 또는 이미지 페이지로 제작하면 훨씬 퀄리티 있게 스타일이 적용됩니다.

 


 

Was this helpful?