Theme Editor로 앱 테마 디자인

경고: 버전 3.3부터는 Theme Editor가 더 이상 Android 스튜디오에 포함되지 않습니다.

Android 스튜디오에는 Theme Editor라는 시각적 보조 도구가 포함되어 있으며, 다음 작업에 도움을 줍니다.

  • 앱의 테마를 만들고 수정합니다.
  • 여러 가지 리소스 분류 기준의 테마를 조정합니다.
  • 공통 UI 요소에서 색상 변경 효과를 시각적으로 보여줍니다.

이 페이지에서는 Theme Editor로 수행할 수 있는 기본 작업을 소개하고 그 방법을 설명합니다.

Theme Editor 기본 사항

이 섹션은 Theme Editor에 액세스하는 방법과 레이아웃을 설명합니다.

Theme Editor 액세스

Theme Editor를 여는 방법은 두 가지가 있습니다.

  • 열려 있는 스타일 XML 파일(예: styles.xml)에서 파일 창 오른쪽 상단 근처에 있는 Open editor를 클릭합니다.
  • 도구 메뉴에서 Theme Editor를 선택합니다.

Theme Editor 탐색하기

Theme Editor의 기본 화면은 두 부분으로 나뉩니다. 편집기의 왼쪽에서는 현재 테마를 적용했을 때 특정 UI 요소(예: 앱 바 또는 돌출된 버튼)가 어떤 모습인지 보여줍니다. 편집기의 오른쪽에는 미리보기 형식으로 현재 테마의 이름과 테마가 정의된 모듈, 테마 리소스(예: Theme parentcolorPrimary) 설정이 표시됩니다. 이러한 리소스 설정을 변경하여 디자인 테마를 수정할 수 있습니다.

테마 및 색상

Theme Editor를 사용하면 새로운 테마를 만들고, 기존 테마를 수정하고, 테마를 구성하는 색상을 관리할 수 있습니다.

새로운 테마 만들기

테마를 만들려면 다음 단계를 따르세요.

  1. Theme Editor의 오른쪽 위에 있는 Theme 드롭다운 메뉴를 엽니다.
  2. Create New Theme을 클릭합니다.
  3. New Theme 대화상자에 새 테마의 이름을 입력합니다.
  4. Parent theme name 목록에서 테마가 최초 리소스를 상속하는 상위 항목을 클릭합니다.

테마 이름 바꾸기

테마 이름을 바꾸려면 다음 단계를 따르세요.

  1. Theme Editor의 오른쪽 위에 있는 Theme 드롭다운 메뉴를 엽니다.
  2. theme-name Rename을 클릭합니다.
  3. Rename 대화상자에 새 테마 이름을 입력합니다.
  4. (선택사항) 변경된 스타일을 확인하려면 Preview를 클릭합니다.
  5. 변경사항을 적용하려면 Refactor를 클릭합니다.

색상 리소스 변경

기존 색상 리소스(예: colorPrimary)를 변경하려면 다음 단계를 따르세요.

  1. Theme Editor에서 변경하려는 리소스의 이름 옆에 있는 색상이 적용된 사각형을 클릭합니다. Resources 대화상자가 나타납니다. 왼쪽에는 색상 그룹 목록이 표시되고, 오른쪽에서는 현재 선택된 리소스 색상의 설정 및 정보가 표시됩니다.
  2. 아래 설명에 따라 왼쪽 패널에서 색상을 선택하거나 새 색상을 정의하여 테마 리소스의 색상을 설정합니다.

색상 선택

색상은 Resources 대화상자의 왼쪽 열에 나열되며 다음과 같은 그룹으로 정렬됩니다.

  • Project: 프로젝트 내 색상입니다. 일부는 프로젝트 소스의 부분이므로 수정할 수 있고, 일부는 개발자가 프로젝트에 포함한 라이브러리의 부분이므로 수정할 수 없습니다.
  • android: android 네임스페이스에 속하는 색상 리소스입니다. Android 프레임워크의 일부분으로 수정할 수 없습니다.
  • Theme Attributes: 현재 선택한 테마의 속성입니다. 테마에서 참조되며 선택한 테마에 따라 변경될 수 있습니다. 테마 속성은 Resources 대화상자에서 전혀 수정할 수 없습니다.

새로운 색상 정의

    그림 1. 색상 편집기

  1. Resources 대화상자의 오른쪽 위에 있는 드롭다운 메뉴에서 Add new resource > New color Value를 클릭합니다. Resources 대화상자에 수정 가능한 오른쪽 창이 표시되며 이 창에 있는 빈 Name 필드에 맞춤 색상의 이름을 입력할 수 있습니다.
  2. 다음과 같이 맞춤색상을 만듭니다. 그림 1의 콜아웃에 해당하는 단계입니다.
    1. Name 필드에 새 색상 값의 이름을 입력합니다. 이름에 공백이나 특수문자는 허용되지 않습니다. 밑줄과 숫자는 사용할 수 있습니다.
    2. 색상 스케일, Custom color 필드, 색상 선택 도구:
      • 색상 스케일에서 원하는 색상을 클릭합니다. 색상이 Custom color 필드에 표시됩니다.
      • Custom color 필드 왼쪽에 있는 색상 선택 도구를 사용하여 색상을 선택합니다. 색상 선택 도구 를 클릭한 후 컴퓨터 화면의 임의의 위치에 표시된 무언가를 클릭합니다. Custom color 필드의 색상이 선택한 색상으로 변경됩니다.
    3. Custom color 필드 바로 아래에서 수정 가능한 필드와 왼쪽의 드롭다운 메뉴를 사용하여 숫자값으로 RGB, HSB 또는 ARGB 색상을 지정합니다. 색상의 HEX 등가가 오른쪽 맨 끝의 수정 가능한 필드에 표시됩니다.
    4. 색상 불투명도와 색조를 설정하려면 색상 스케일 아래의 슬라이더를 이동합니다.
    5. 사용 가능한 사전 정의된 색상 사각형 중 하나를 선택합니다. 색상이 Custom Color 필드에 표시되고, 색상 이름은 선택한 색상의 이름으로 변경됩니다.
  3. OK를 클릭하여 설정을 저장합니다. Resources 대화상자가 닫히고 화면이 Theme Editor로 돌아갑니다.

색상 수정

수정 가능한 색상은 무엇이든 수정할 수 있습니다. 색상을 수정할 수 있는 경우 수정 가능한 색상, 색조, 불투명도, 이름 필드, 기기 구성 필드가 표시됩니다. 일부 필드는 수정 가능하고 일부 필드는 불가능한 이유를 알아보려면 색상 선택을 참조하세요.

  1. 설정을 조정합니다.
  2. OK를 클릭합니다.

머티리얼 색상 일치시키기

맞춤 프로젝트 색상을 정의했거나 수정했다면 Custom color 옆에 있는 CLOSEST MATERIAL COLOR를 클릭하여 색상이 가장 가까운 머티리얼 팔레트 색상과 일치하는지 확인할 수 있습니다. Android 스튜디오는 선택한 색상의 색상 값과 불투명도를 머티리얼 색상과 가장 비슷하게 변경하고 Custom color를 머티리얼 팔레트의 색상명으로 바꿉니다.

참고: CLOSEST MATERIAL COLOR 기능은 색상이 기존 머티리얼 색상이 아닌 경우에만 표시됩니다.

상태 목록 및 색상 보기

Theme Editor를 사용하면 여러 상태와 관련된 색상을 미리 볼 수 있습니다. 이렇게 하려면 수정 가능한 상태 목록 리소스 이름 옆에 있는, 색상이 설정된 사각형을 클릭하여 Resources 대화상자를 엽니다. Resources 대화상자는 상태 목록(예: Selected) 및 상태와 연결된 색상 값을 표시합니다. 상태에 맞는 색상을 클릭하여 다른 색상 값을 선택합니다.

상태 자체를 더욱 세밀하게 제어하려면 상태를 정의하는 XML 파일에서 속성을 직접 확인하고 편집할 수 있습니다. 자세한 내용은 ColorStateList 클래스 문서를 참조하세요.

기기별 구성

색상을 수정할 수 있는 경우 앱에서 지원할 기기별 구성을 선택할 수 있습니다. 구성을 선택하려면 다음 단계를 따르세요.

  1. Resources 대화상자를 엽니다. Resources 대화상자를 여는 방법을 자세히 알아보려면 색상 리소스 변경하기를 참조하세요.
  2. Project 색상을 선택한 다음, 오른쪽 창 하단에서 Device Configuration을 클릭해 펼쳐서 리소스가 포함된 XML 파일의 소스 세트와 이름 및 이 파일을 배치할 구성별 디렉터리 목록을 표시합니다.
  3. 필요한 경우, XML 파일 이름을 변경합니다.
  4. 지원하려고 하는 기기별 구성에 맞는 디렉터리 옆의 체크박스를 선택합니다. 디렉터리를 지정하지 않은 모든 구성은 values 디렉터리를 사용하도록 기본 설정됩니다.

디렉터리 이름과 구성 간 관계에 관한 자세한 내용은 다중 화면 지원을 참고하세요. 지원되는 디렉터리 이름에 관한 자세한 내용은 리소스 제공을 참조하세요.