# STEP2 디자인 앱제작 V3 제작 매뉴얼 중 STEP2 디자인 단계 방법을 알려드립니다. \[STEP2 디자인]은 앱의 UI디자인과 컬러 등의 전체적인 디자인 및 스타일을 결정하는 단계입니다. *** ## **STEP2 디자인** ![](https://wp.swing2app.co.kr/wp-content/uploads/2022/06/%EA%B0%80%EC%9D%B4%EB%93%9C2.png) **1. 프로토타입 선택: 앱 UI디자인을 결정하는 프로타입을 선택합니다.** **2. 기본 스타일 및 옵션: 컬러 셋트 선택: UI디자인의 스킨 컬러를 설정합니다** **3. 고급 스타일 및 옵션** 해당 기능은 프로토타입 UI에 추가할 수 있는 색상 옵션 및 디자인 스타일을 추가로 설정할 수 있는 기능이에요. 필수 기능은 아니며, 옵션을 설정하고자 하는 분들만 입력해주세요. 4.디자인 단계 입력이 완료되면 **\[저장]** 버튼을 눌러 작업 내용을 저장해주세요. *** ## 1.**프로토타입 스타일** ![](https://wp.swing2app.co.kr/wp-content/uploads/2022/07/%EB%85%B9%ED%99%94_2022_07_01_14_50_40_340.gif) 일반 프로토타입 스타일은 5가지 디자인 중에서 선택 가능합니다. \*웹뷰/푸시 전용 제외 각 프로토타입을 선택하면 오른쪽 가상머신(미리보기 화면)으로 앱에 적용된 프로토타입 UI 스타일을 확인할 수 있습니다. ![](/files/bdsKn1drcUXm9nKVkxxo) ## **2.기본 스타일 및 옵션–컬러 설정** ![](https://wp.swing2app.co.kr/wp-content/uploads/2022/07/%EB%85%B9%ED%99%94_2022_07_01_14_52_49_797.gif) **컬러 셋트 선택: UI디자인의 스킨 컬러를 설정합니다.** 스킨컬러는 메인 배경 색, 글자 색, 테마 색 3세트로 이루어진 색상조합을 제공하고 있어요. 원하는 조합을 선택하시면 가상머신을 통해서 실시간으로 색상이 바뀌는 UI를 확인할 수 있습니다. ![](/files/bdsKn1drcUXm9nKVkxxo) ## **3.기본 스타일 및 옵션–상세 설정** > **조합된 색상 중에서 마음에 드는 색상이 없다면? = 상세 설정을 이용해주세요.** ![](https://wp.swing2app.co.kr/wp-content/uploads/2022/06/%EA%B0%80%EC%9D%B4%EB%93%9C2-2.png) 원하는 색상이 없을 경우 \[상세 설정]에서 사용자가 직접 색상을 선택할 수 있어요. 상세색상설정에서는 고정된 색상 조합 외에, 사용자가 직접 색상을 골라서 적용할 수 있는 옵션입니다. ![](https://wp.swing2app.co.kr/wp-content/uploads/2022/07/%EC%83%81%EC%84%B8%EC%84%A4%EC%A0%95%EC%83%89%EC%83%81.gif) 상세 설정 – HEX란에 색상 코드를 입력해주세요. 혹은 색상 네모 박스를 클릭하여 원하는 컬러를 선택할 수 있습니다. 입력 후 마우스 커서를 빈 공간에 클릭하면 가상머신에 실시간으로 색상이 반영됩니다. ![](/files/bdsKn1drcUXm9nKVkxxo) ## **4.고급 스타일 및 옵션** 해당 기능은 프로토타입 UI에 추가할 수 있는 색상 옵션 및 디자인 스타일을 추가로 설정할 수 있는 기능이에요. 필수 기능은 아니며, 옵션을 설정하고자 하는 분들만 입력해주세요. ![](https://wp.swing2app.co.kr/wp-content/uploads/2022/07/%EA%B3%A0%EA%B8%89%EC%8A%A4%ED%83%80%EC%9D%BC%EC%83%89%EC%83%81.gif) 고급스타일 Main – 배경 및 텍스트 색상도 수정할 수 있습니다. HEX란에 색상 코드를 입력하거나, 색상 네모 박스를 클릭하여 원하는 컬러를 선택할 수 있습니다. 메인 디자인 스타일도 기본에서 투명으로 변경할 수 있습니다. #### **메인 디자인 스타일 – 투명 설정** ![](https://wp.swing2app.co.kr/wp-content/uploads/2022/07/%EB%94%94%EC%9E%90%EC%9D%B81.png) 메인 디자인 스타일을 투명으로 설정할 경우 상단에 보여지는 바 영역이 사라집니다. 즉, 투명한 영역으로 변경이 됩니다. 투명 옵션을 선택시, 상단 바 영역을 100% 활용할 수 있습니다. ![](https://wp.swing2app.co.kr/wp-content/uploads/2022/07/%EB%94%94%EC%9E%90%EC%9D%B82-1.png) 단, 투명으로 영역을 설정시 뒤에 깔아놓은 배경이 있을 경우 퀄리티있게 앱을 구성할 수 있어요! 홈화면을 템플릿 페이지, 이미지 페이지 등으로 적용하는 것을 권장드립니다. **Related Articles** * [STEP1 기본정보](https://wp.swing2app.co.kr/documentation/v3manual/step1-basic/) * [푸시 아이콘 이미지 등록하기](https://wp.swing2app.co.kr/documentation/appmanage/pushmember/pushicon/) * [메뉴 권한 설정: 접근 권한 이용방법](https://wp.swing2app.co.kr/documentation/v3manual/permission-setting/) * [앱 메뉴 비활성화 이용방법](https://wp.swing2app.co.kr/documentation/v3manual/menu-hiding/) * [메뉴 아이콘 이미지 등록방법](https://wp.swing2app.co.kr/documentation/v3manual/icon/) * [푸시앱 툴바-이용방법 및 기능 소개](https://wp.swing2app.co.kr/documentation/v3manual/pushapp-toolbar/) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://documentation.swing2app.co.kr/manual/v3/step2-design.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.