가이드 3: 앱 스타일 지정

버튼 위젯 기본~중급 App Maker 기술

access_time 약 30분

제작할 앱

프로젝트 추적 앱의 일부를 제작해 봅니다. 여기서의 목표는 완벽히 작동하는 앱을 만드는 것이 아니라 앱 스타일 지정 방법을 배우는 것입니다. 앱 사용자는 다음을 수행할 수 있습니다.

  • 새 프로젝트 레코드를 만들고 데이터 입력
  • 프로젝트 레코드 수정
  • 레코드 탐색

학습 내용

이 가이드는 다음과 같은 교육 내용을 포함합니다.

  • CSS(Cascading Style Sheet)를 사용하지 않고 App Maker에서 앱 스타일 지정. 전반적인 스타일 테마를 선택하고 위젯용 내장 App Maker 스타일 옵션 중에서 선택합니다.
  • 스타일 편집기에서 CSS 언어를 작성하여 앱 스타일 지정. 필요할 경우 외부 스타일 시트를 사용합니다. CSS는 앱의 모양을 완벽하게 제어합니다.

준비

스타일을 지정할 프로젝트 추적 앱의 일부를 만들어 봅니다.

앱 만들기

  1. 직장 또는 학교에서 제공한 G Suite 계정으로 로그인합니다.
  2. App Maker를 엽니다.
  3. 빈 앱을 만듭니다.
    • App Maker에 시작 대화상자가 표시되는 경우에는 새 앱 만들기를 클릭합니다.
    • 그렇지 않으면 메뉴 menu chevron_right 새로 만들기 chevron_right 빈 애플리케이션을 클릭합니다.
  4. 앱의 이름을 바꿉니다. 기본 이름인 제목 없는 앱을 삭제하고 앱 스타일 지정을 입력합니다.

데이터 모델 만들기

  1. 데이터 위로 마우스를 가져가서 add를 클릭하여 모델을 추가합니다.
  2. Google Cloud SQL 데이터 모델을 만듭니다. 데이터 모델에 프로젝트 데이터라는 이름을 지정합니다.

데이터 모델에 필드 추가

  1. 프로젝트 데이터 데이터 모델의 탭 툴바에서 필드 탭을 클릭합니다.
  2. 프로젝트 데이터 데이터 모델에 다음 필드를 추가합니다.

    필드 이름 필드 유형
    Project 문자열
    Owner 문자열
    DueDate 날짜

UI의 페이지 이름을 바꾸고 데이터 소스 선택

  1. 새 페이지라는 이름을 프로젝트로 바꿉니다.
  2. 속성 편집기에서 프로젝트 페이지의 프로젝트 데이터로 설정합니다.

수정 양식 및 테이블 추가

  1. 위젯 을 클릭하고 양식 양식 위젯을 페이지 위로 드래그합니다. 수정 양식을 선택합니다.
  2. 위젯 에서 테이블 표 위젯을 수정 양식 아래의 페이지 위로 드래그합니다. 수정 양식과 테이블의 왼쪽 가장자리를 수평으로 맞춥니다.
  3. 닫기 close를 클릭하여 위젯을 닫습니다.

앱 미리보기

앱의 스타일을 지정하기 전에 미리보세요. 이제 앱은 소재 테마의 위젯에 기본 스타일 변형을 사용합니다.

  1. 오른쪽 상단 모서리에서 미리보기를 클릭하여 새 브라우저 탭에서 앱을 실행합니다.
  2. 허용을 클릭하여 앱이 특정 정보를 사용하도록 허용합니다.

CSS를 사용하지 않고 앱 스타일 지정

App Maker를 사용하면 CSS 언어를 작성하지 않고도 앱 스타일을 지정할 수 있습니다. 여기서 다음과 같은 작업이 가능합니다.

  • 앱의 모든 위젯에 기본 제공되는 스타일 집합인 테마 선택
  • 변형(각 위젯 유형의 스타일 변형) 집합 중에서 선택. 기본 테마인 소재에는 매우 많은 변형이 기본 제공됩니다. 예를 들어 버튼의 경우 다양한 배경색 스타일 중에서 선택할 수 있습니다. 라벨의 경우 다양한 글꼴 크기 중에서 선택할 수 있습니다. 모든 위젯에는 기본 변형이 있습니다.

테마 선택

App Maker에는 다음과 같은 테마가 있습니다.

  • 소재 - 단순하지만 정교한 스타일 집합으로, 각 위젯 유형의 여러 스타일 변형 중에서 선택할 수 있습니다. 소재 테마를 그대로 사용하거나 세부적으로 맞춤설정할 수 있습니다.
  • 일반 - 매우 일반적인 스타일 집합으로, 스타일 변형 중에서 몇 가지를 선택할 수 있습니다. CSS에 능숙하고, CSS를 사용하여 모든 위젯의 스타일을 직접 만들려면 기본 테마를 사용하면 됩니다.

앱의 테마를 변경하려면 다음 안내를 따르세요.

  1. 왼쪽 사이드바에서 프로젝트 페이지를 클릭합니다.
  2. 속성 편집기 위의 탭 표시줄에서 스타일 편집기 palette를 선택합니다.
  3. 테마 드롭다운에서 일반을 선택합니다. 양식과 표에 단순한 스타일이 사용된 것을 알 수 있습니다. 라벨과 버튼에는 하나의 변형만 기본 제공됩니다.
  4. 이 가이드에서는 소재 테마를 사용합니다. 테마 드롭다운 목록에서 소재를 선택합니다.

특정 위젯의 스타일 변형 선택

스타일 변형을 선택하고 효과를 관찰합니다.

  1. 왼쪽 하단 모서리에서 윤곽선 표시 를 클릭하여 위젯의 윤곽선을 표시합니다. 변형을 선택한 후 위젯이 사라진 것처럼 보이는 경우가 있습니다(예: 흰색 패널에서 흰색 텍스트 상자가 표시되는 경우). 이때 윤곽선을 표시하면 위젯을 찾을 수 있습니다.
  2. 프로젝트 수정 양식을 클릭합니다. 전체 양식이 선택되어 있는지 확인합니다. 전체 양식 주변에 파란색 선택 상자가 표시되어야 합니다. 개요 탭에서 Panel: Form1을 선택해야 합니다.
  3. 왼쪽 상단 모서리에서 변형 드롭다운 목록에 종이가 선택된 것을 확인합니다.
  4. 변형 드롭다운 목록에서 기본을 선택합니다. 전체 양식이 파란색이 됩니다. 프로젝트 편집 라벨이 자동으로 흰색이 된 것을 확인합니다. 이러한 자동 변경 과정에서 라벨 변형은 변경되지 않았습니다. 프로젝트, 소유자, 대상 날짜 위젯도 자동으로 변경되지 않은 것을 확인하세요. (이러한 위젯에 어둡게 변형을 선택하면 이러한 위젯을 흰색으로 만들 수 있습니다. 하지만 지금은 그대로 두세요.)
  5. 프로젝트 수정 라벨을 클릭합니다.
  6. 변형 드롭다운 목록에서 DisplayOne을 선택합니다. 그러면 프로젝트 수정 라벨의 크기가 커집니다.
  7. 만들기 버튼을 클릭합니다. 이는 프로젝트 수정 라벨의 맨 오른쪽에 있는 위젯입니다. 파란색 위에 파란색이 표시되는 것이라 텍스트를 볼 수는 없습니다. 버튼이 선택된 상태에서 탐색경로의 마지막 항목은 Button: Form1CreateButton입니다.
  8. 변형 드롭다운 목록에서 버튼의 변형 옵션을 스크롤합니다. 일부 변형은 소재 아이콘을 사용하는 것을 알 수 있습니다. IconDark라는 변형을 선택합니다.
  9. 앱을 미리봅니다.
  10. 변형 변경사항을 실행취소하려면 실행취소 undo를 세 번 클릭합니다.

CSS로 앱 스타일 지정

여기서는 CSS를 사용하여 앱의 스타일을 지정하는 방법을 알아봅니다. 앱의 스타일을 지정하려면 CSS 규칙 집합을 작성하면 됩니다. 일반적으로 웹 앱을 개발할 때 규칙 집합 선택기는 HTML 요소를 참조합니다. App Maker에서 선택기는 위젯을 참조하거나 styleClasses 속성을 사용하여 위젯에 규칙 집합을 적용합니다.

CSS 정보

CSS는 대부분 스타일을 적용할 위치와 적용할 스타일을 정의하는 규칙 집합이라는 언어 단위로 구성됩니다.

다음은 규칙 집합의 예입니다.

.app-Projects-Form1CreateButton {
      background-color: #B2FF59;
      color: #03A9F4;
    }
    

규칙 집합에 대한 설명은 다음과 같습니다.

  • 하나 이상의 선택기가 스타일을 적용할 위치를 정의합니다. 위의 예에서 선택기는 .app-Projects-Form1CreateButton입니다. 이는 App Maker에게 Projects 페이지의 Form1CreateButton 버튼에 스타일을 적용하도록 지시합니다.
  • 선언은 적용할 스타일을 정의합니다. 위의 예에서 선언은 배경색과 색상을 설정합니다.

스타일 시트는 3가지 방식을 통해 계단식으로 처리됩니다.

  • App Maker가 외부 CSS 파일 및 스타일 편집기 내용의 규칙 집합을 위에서 아래로 평가합니다. 둘 이상의 선택기가 특정 위젯에 동일한 선언을 적용할 경우 CSS 파일에서 더 아래쪽에 있는 규칙 집합의 선언이 위쪽에 있는 선언을 재정의합니다.

    예를 들어 다음과 같은 두 규칙 집합에서 모든 버튼이 연한 파란색임을 먼저 지정한 후 Form1CreateButton 버튼이 주황색임을 지정하면 Form1CreateButton button이 주황색이 됩니다. 모든 버튼 텍스트의 색상은 진한 회색입니다. Form1CreateButton 버튼은 이 색상으로 재정의되지 않습니다.

    .app-Button {
          background-color: #A1C2FA;
          color: #212121;
         }
        .app-Projects-Form1CreateButton {
          background-color: #FFB74D;
        }
        
  • App Maker가 일반 설정에 추가된 순서대로 외부 CSS 파일을 평가합니다.

  • App Maker가 외부 CSS 파일을 평가한 후 스타일 편집기의 내용을 마지막으로 평가합니다.

커스텀 스타일 변형 만들기

버튼 또는 패널의 커스텀 모양 지정 등을 위해 위젯 유형의 커스텀 스타일 변형을 만들 수 있습니다. 커스텀 변형을 정의한 후에는 변형 드롭다운 목록에서 해당 변형을 선택합니다.

커스텀 변형의 클래스 선택기 구문은 다음과 같습니다.

    .app-widget_type--widget_style
    

이중 하이픈이 있는데, 이는 그 다음에 변형 이름이 온다고 App Maker에 알려주는 신호입니다.

예를 들면 다음과 같습니다.

.app-Button--Orange

위젯 유형의 커스텀 스타일 변형을 만들려면 다음 안내를 따르세요.

  1. 속성 편집기 위의 탭 표시줄에서 스타일 편집기 palette를 선택하여 스타일 편집기를 엽니다. 여기에서 앱 스타일을 지정하는 CSS 스타일 시트를 만들 수 있습니다. 코드를 입력할 때 코드 완성 기능이 표시되는 경우도 있습니다. 또한 Ctrl+Space를 눌러 코드 완성 기능을 볼 수도 있습니다.

  2. 버튼에 주황색 변형을 추가합니다. 이 코드를 복사하여 스타일 편집기에 붙여넣습니다.

    .app-Button--Orange {
          background-color: #FFB74D;
        }
        
  3. 앱에서 만들기 버튼을 클릭합니다.

  4. 변형 드롭다운 목록에서 주황색 변형을 선택합니다. 만들기 버튼이 주황색으로 바뀝니다.

  5. 변형 드롭다운 목록에서 FlatColor 변형을 선택합니다.

    팁: 커스텀 변형을 만드는 대신 기존 변형을 재정의할 수 있습니다. 예를 들어 버튼의 경우 .app-Button--Icon 선택기를 사용하여 규칙 집합을 추가하고 다른 배경색(예: 청록색)을 지정합니다.

    .app-Button--Icon {
          background-color: #4DD0E1;
        }
        

    아이콘 변형이 선택된 모든 버튼의 배경색이 청록색이 됩니다.

스타일 속성을 사용하여 특정 위젯의 스타일 지정

위젯의 styles 속성을 사용하면 특정 위젯에 하나 이상의 스타일을 손쉽게 적용할 수 있습니다. styles 속성의 value 값에서 클래스 이름으로 CSS 규칙 집합을 참조합니다. 스타일 편집기, 외부 스타일 시트 또는 둘 다에서 스타일을 정의할 수 있습니다.

  1. 스타일 편집기에서 스타일의 규칙 집합을 추가합니다. 스타일에 앱의 여러 부분에 직접 스타일을 지정하지 않는 클래스 이름을 지정합니다(즉, app-를 참조하지 않음). 예를 들어 다음 CSS 규칙 집합을 추가합니다.

    .Green {
          background-color: #0F9D58;
          border-style: double;
          border-width: 4px;
          border-color: #000000;
          border-radius: 7px;
        }
        .Border {
          border: 4px solid #000000;
          box-shadow: 5px 5px 10px #BDBDBD;
          margin: 15px;
        }
        
  2. 스타일을 지정할 위젯을 선택합니다. 수정 양식에서 만들기 단추를 클릭합니다.

  3. 적용할 스타일의 클래스 이름을 공백으로 구분하여 스타일 속성 값에 입력합니다.

    1. 속성 편집기 edit에서 표시 섹션을 확장합니다. 드롭다운 목록 아이콘 arrow_drop_down 옆에 값이 이미 선택된 상태로 표시되어야 합니다.
    2. 스타일 속성에 GreenBorder라는 클래스 이름을 입력합니다.

외부 스타일 시트 사용

외부 스타일 시트를 사용하여 위젯의 스타일을 지정할 수 있습니다. 스타일 편집기와 마찬가지로 외부 스타일 시트에도 위젯에 자동으로 스타일을 적용하거나 사용자가 위젯의 styleClasses 속성을 사용하여 위젯에 수동으로 적용하는 CSS 규칙 집합이 포함되어 있어야 합니다. HTML 요소에 스타일을 적용하는 규칙 집합이 있는 외부 스타일 시트는 App Maker 위젯의 스타일을 지정하지 않습니다.

외부 스타일 시트는 App Cloud가 Google Cloud에서 액세스할 수 있는 URL에 있어야 합니다. 이 URL은 일반 설정에서 지정합니다. 예를 들어 CSS 파일의 URL을 Google 글꼴 URL로 지정할 수 있습니다.

https://fonts.googleapis.com/css?family=Roboto+Condensed:regular,bold

Google Cloud의 URL에 스타일 시트 배치

Google Cloud에 CSS 파일이 아직 없다면 App Maker를 통해 손쉽게 배치할 수 있습니다.

  1. 파일 관리자에서 CSS 파일을 찾습니다.
  2. App Maker에서 설정 settings chevron_right 리소스를 클릭합니다.
  3. 추가 add 영역에 텍스트 파일을 드래그합니다.
  4. 리소스 URL 복사 content_copy를 클릭합니다.
  5. 설정 settings 일반 설정을 클릭합니다.
  6. CSS URL에 리소스 URL을 붙여넣고 CSS 추가를 클릭합니다.
  7. 추가 CSS 파일에 2단계부터 6단계까지 반복합니다.

앱에서 스타일 시트에 참조 추가

Google Cloud의 URL에 있는 외부 스타일 시트를 사용하려면 다음 안내를 따르세요.

  1. CSS 파일의 리소스 URL을 확인합니다.
  2. 설정 settings chevron_right 일반 설정을 클릭합니다.
  3. CSS URL에 리소스 URL을 붙여넣고 CSS 추가를 클릭합니다.
  4. 추가 CSS 파일에 1단계부터 3단계까지 반복합니다.

다음 단계