STEP2 디자인

앱제작 – STEP2 디자인

앱제작 V3 제작 매뉴얼 중 STEP2 디자인 단계 방법을 알려드립니다.

[STEP2 디자인]은 앱의 UI디자인과 컬러 등의 전체적인 디자인 및 스타일을 결정하는 단계입니다.

STEP2 디자인

1. 프로토타입 선택: 앱 UI디자인을 결정하는 프로타입을 선택합니다.

2. 기본 스타일 및 옵션: 컬러 셋트 선택: UI디자인의 스킨 컬러를 설정합니다

3. 고급 스타일 및 옵션

해당 기능은 프로토타입 UI에 추가할 수 있는 색상 옵션 및 디자인 스타일을 추가로 설정할 수 있는 기능이에요.

필수 기능은 아니며, 옵션을 설정하고자 하는 분들만 입력해주세요.

4.디자인 단계 입력이 완료되면 [저장] 버튼을 눌러 작업 내용을 저장해주세요.

프로토타입 스타일 확인하기

일반 프로토타입 스타일은 5가지 디자인 중에서 선택 가능합니다. *웹뷰/푸시 전용 제외

각 프로토타입을 선택하면 오른쪽 가상머신(미리보기 화면)으로 앱에 적용된 프로토타입 UI 스타일을 확인할 수 있습니다.

기본 스타일 및 옵션 – 컬러 설정

컬러 셋트 선택: UI디자인의 스킨 컬러를 설정합니다.

스킨컬러는 메인 배경 색, 글자 색, 테마 색 3세트로 이루어진 색상조합을 제공하고 있어요.

원하는 조합을 선택하시면 가상머신을 통해서 실시간으로 색상이 바뀌는 UI를 확인할 수 있습니다.

기본 스타일 및 옵션 – 상세 설정

조합된 색상 중에서 마음에 드는 색상이 없다면? = 상세 설정을 이용해주세요.

원하는 색상이 없을 경우 [상세 설정]에서 사용자가 직접 색상을 선택할 수 있어요.

상세색상설정에서는 고정된 색상 조합 외에, 사용자가 직접 색상을 골라서 적용할 수 있는 옵션입니다.

상세 설정 – HEX란에 색상 코드를 입력해주세요. 혹은 색상 네모 박스를 클릭하여 원하는 컬러를 선택할 수 있습니다.

입력 후 마우스 커서를 빈 공간에 클릭하면 가상머신에 실시간으로 색상이 반영됩니다.

고급 스타일 및 옵션

해당 기능은 프로토타입 UI에 추가할 수 있는 색상 옵션 및 디자인 스타일을 추가로 설정할 수 있는 기능이에요.

필수 기능은 아니며, 옵션을 설정하고자 하는 분들만 입력해주세요.

고급스타일 Main – 배경 및 텍스트 색상도 수정할 수 있습니다.

HEX란에 색상 코드를 입력하거나, 색상 네모 박스를 클릭하여 원하는 컬러를 선택할 수 있습니다.

메인 디자인 스타일도 기본에서 투명으로 변경할 수 있습니다.

메인 디자인 스타일 – 투명 설정

메인 디자인 스타일을 투명으로 설정할 경우 상단에 보여지는 바 영역이 사라집니다. 즉, 투명한 영역으로 변경이 됩니다.

투명 옵션을 선택시, 상단 바 영역을 100% 활용할 수 있습니다.

단, 투명으로 영역을 설정시 뒤에 깔아놓은 배경이 있을 경우 퀄리티있게 앱을 구성할 수 있어요!

홈화면을 템플릿 페이지, 이미지 페이지 등으로 적용하는 것을 권장드립니다.

스윙투앱 매뉴얼