Save the date! Android Dev Summit is coming to Sunnyvale, CA on Oct 23-24, 2019.

Layout Editor로 UI 빌드

Layout Editor에서는 레이아웃 XML을 직접 쓰지 않고 UI 요소를 시각적 디자인 편집기로 드래그하는 방식으로 레이아웃을 신속하게 빌드할 수 있습니다. 이 디자인 편집기는 여러 Android 기기 및 버전에서 레이아웃을 미리 볼 수 있으며, 개발자는 레이아웃이 여러 다른 화면 크기에서 제대로 작동하도록 레이아웃의 크기를 동적으로 조정할 수 있습니다.

Layout Editor는 Android 2.3(API 레벨 9) 이상과 호환되는 지원 라이브러리에 제공된 레이아웃 관리자인 ConstraintLayout을 사용하여 새 레이아웃을 빌드할 때 특히 유용합니다.

이 페이지에서는 Layout Editor에 대한 개요를 제공합니다. 레이아웃에 대한 기본적인 정보는 레이아웃을 참조하세요. ConstraintLayout을 사용하여 레이아웃을 빌드하는 방법에 대한 자세한 내용은 ConstraintLayout으로 반응형 UI 빌드를 참조하세요.

Layout Editor 소개

Layout Editor는 XML 레이아웃 파일을 열 때 나타납니다.

편집기의 영역은 다음과 같으며, 해당 번호는 그림 1의 숫자에 대응됩니다.

  1. Palette: 레이아웃에 드래그할 수 있는 뷰와 뷰 그룹 목록입니다.
  2. Component Tree: 레이아웃의 뷰 계층 구조를 표시합니다.
  3. Toolbar: 편집기에서 레이아웃 외형을 구성하고 일부 레이아웃 속성을 변경하기 위한 버튼입니다.
  4. Design Editor: Design이나 Blueprint 뷰, 또는 그 두 가지의 레이아웃입니다.
  5. Attributes: 선택한 뷰의 속성에 대한 컨트롤입니다.

그림 1. Layout Editor

XML 레이아웃 파일을 열면 디자인 편집기가 기본적으로 열립니다(그림 1 참조).

텍스트 편집기에서 레이아웃 XML을 편집하려면 창 맨 아래에 있는 Text 탭을 클릭합니다. 텍스트 편집기에서 창 오른쪽에 있는 Preview를 클릭하면 Palette, Component Tree, 디자인 편집기도 볼 수 있습니다. 텍스트 편집기에서는 Attributes 창을 사용할 수 없습니다.

팁: Alt + Shift + 좌/우 화살표(Mac: Control + Shift + 좌/우 화살표)를 클릭하면 디자인과 텍스트 편집기를 상호 전환할 수 있습니다.

미리보기 모양 변경

디자인 편집기의 맨 위 행에 있는 버튼을 사용하여 편집기에서 레이아웃의 모양을 구성할 수 있습니다. 이 툴바는 텍스트 편집기의 Preview 창에서도 사용할 수 있습니다.

그림 2. Layout Editor 툴바에서 레이아웃 모양을 구성하는 버튼

사용할 수 있는 버튼은 다음과 같으며, 해당 번호는 그림 2의 번호에 대응됩니다.

  1. Design and blueprint: 편집기에서 레이아웃을 보는 방식을 선택합니다. Design 뷰(레이아웃의 실제 미리보기), Blueprint 뷰(각 뷰의 윤곽선만) 또는 두 개의 뷰를 나란히 보려면 Design + Blueprint를 선택합니다.

    팁: B를 누르면 뷰를 전환할 수 있습니다.

  2. Screen orientation and layout variants: 가로와 세로 화면 방향 또는 기타 화면 모드를 선택합니다. 기타 화면 모드의 경우 앱에서 야간 모드와 같은 대체 레이아웃을 제공합니다. 이 메뉴에는 새 레이아웃 변형 생성을 위한 명령이 있습니다.
  3. Device type and size: 기기 유형(휴대폰/태블릿, Android TV 또는 Wear OS) 및 화면 구성(크기 및 밀도)을 선택합니다. 여러 가지 미리 구성된 기기 유형과 자체 AVD 정의 중에서 선택하거나 목록에서 Add Device Definition을 선택하여 새 AVD를 시작할 수도 있습니다.

    팁: 레이아웃의 오른쪽 아래를 드래그하여 기기 크기를 조정할 수 있습니다.

  4. API version: 레이아웃을 미리 볼 Android의 버전을 선택합니다.
  5. App theme: 미리보기에 적용할 UI 테마를 선택합니다. 앱 테마는 지원되는 레이아웃 스타일에만 적용되므로, 이 목록의 많은 테마에서 오류를 표시합니다.
  6. Language: UI 문자열에 표시할 언어를 선택합니다. 이 목록은 문자열 리소스에 사용할 수 있는 언어만 표시합니다. 번역을 편집하려는 경우 드롭다운 메뉴에서 Edit Translations를 클릭합니다(Translations Editor를 사용하여 UI 현지화 참조).

참고: 이러한 구성은 앱의 코드나 매니페스트에 어떠한 영향도 미치지 않으며(Layout Variants에서 새 레이아웃 파일을 추가하도록 선택한 경우는 제외), 레이아웃 미리보기에만 영향을 미칩니다.

새 레이아웃 생성

앱에 대한 새 레이아웃을 추가할 때는 먼저 새 레이아웃이 모든 기기 구성에 적용되도록 프로젝트의 기본 layout/ 디렉토리에 레이아웃 파일을 생성합니다. 기본 레이아웃을 생성했으면 특정한 기기 구성(예: 초대형 화면)에 대해 레이아웃 변형을 생성할 수 있습니다.

Project 창 뷰에 따라 새 레이아웃을 생성할 수 있는 각기 다른 몇 가지 방법이 있지만, 다음 절차는 모든 뷰에서 수행할 수 있습니다.

  1. Project 창에서 레이아웃을 추가할 모듈(예: app)을 클릭합니다.
  2. 기본 메뉴에서 File > New > XML > Layout XML File을 선택합니다.
  3. 나타나는 대화상자에서 파일의 이름과 루트 레이아웃 태그, 그리고 레이아웃이 속하는 소스 세트를 입력합니다. 그런 다음 Finish를 클릭합니다.

새 레이아웃 파일을 시작할 수 있는 두어 가지 방법(나타나는 대화상자가 다른 경우에도 적용됨)은 다음과 같습니다.

  • Project 창에서 Project 뷰를 선택한 경우: 앱 모듈의 res 디렉토리를 열고 레이아웃을 추가할 레이아웃 디렉토리를 마우스 오른쪽 버튼으로 클릭한 후 New > Layout resource file을 클릭합니다.
  • Project 창에서 Android 뷰를 선택한 경우: layout 폴더를 마우스 오른쪽 버튼으로 클릭한 후 New > Layout resource file을 선택합니다.

레이아웃 변형 생성

레이아웃이 이미 있으며 다른 화면 크기나 방향에 맞게 레이아웃을 최적화하기 위해 대체 버전을 생성하고자 하는 경우 다음 단계를 따르세요.

  1. 원래 레이아웃 파일을 열고 디자인 편집기가 표시되어 있는지 확인합니다(창 맨 아래에 있는 Design 탭 클릭).
  2. 툴바에서 Orientation for Preview 를 클릭합니다. 드롭다운 목록에서 Create Landscape Variant와 같은 권장 변형 옵션을 클릭하고 작업을 마치거나 Create Other를 클릭하여 다음 단계로 진행합니다.
  3. 나타나는 대화상자에서는 디렉토리 이름에 대한 리소스 한정자를 정의하기만 하면 됩니다. 리소스 한정자를 Directory name에 입력하거나 Available qualifiers 목록에서 선택한 후 Add 를 클릭합니다.
  4. 모든 한정자를 추가했으면 OK를 클릭합니다.

같은 레이아웃에 대한 여러 변형을 생성했으면 Layout Variants 를 클릭했을 때 나타나는 목록에서 손쉽게 전환할 수 있습니다.

다양한 화면에 대한 레이아웃을 생성하는 방법에 대한 자세한 내용은 다양한 화면 크기 지원을 참조하세요.

뷰 또는 레이아웃 전환

뷰를 다른 종류의 뷰로 전환하고 레이아웃(뷰 그룹)을 다른 종류의 레이아웃으로 전환할 수 있습니다.

  1. 편집기 창의 맨 아래에 있는 Design 탭을 클릭합니다.
  2. Component Tree에서 뷰 또는 레이아웃을 마우스 오른쪽 버튼으로 클릭한 다음, Convert view를 클릭합니다.
  3. 대화상자가 나타나면 새로운 유형의 뷰/레이아웃을 선택한 다음, Apply를 클릭합니다.

레이아웃을 ConstraintLayout으로 변환

ConstraintLayout은 Constraint Layout 라이브러리에서 사용할 수 있는 뷰 그룹이며, Android Studio 2.2 이상에 포함되어 있습니다. 이 레이아웃은 Layout Editor와 함께 완전히 새로 빌드되었습니다. 따라서 모든 항목을 디자인 편집기에서 액세스할 수 있으므로 XML을 직접 편집할 필요가 없습니다. 무엇보다도, 제약 조건을 기반으로 하는 이 레이아웃 시스템에서는 중첩된 뷰 그룹이 없는 대부분의 레이아웃을 빌드할 수 있습니다.

레이아웃 성능 향상을 위해 이전의 레이아웃을 ConstraintLayout으로 변환해야 합니다.

기존 레이아웃을 ConstraintLayout으로 변환하려면 다음 절차를 따라 합니다.

  1. Android Studio에서 기존 레이아웃을 열고 편집기 창의 맨 아래에 있는 Design 탭을 클릭합니다.
  2. Component Tree 창에서 레이아웃을 마우스 오른쪽 버튼으로 클릭한 후 Convert layout to ConstraintLayout을 클릭합니다.

레이아웃을 ConstraintLayout으로 변환하는 명령은 앞의 섹션에서 설명한 간단한Convert view 명령보다 더욱 지능적으로 제약 조건을 추론하고 레이아웃을 보존합니다.

ConstraintLayout을 사용하여 레이아웃을 빌드하는 방법에 대한 자세한 내용은 ConstraintLayout으로 반응형 UI 빌드를 참조하세요.

Palette에서 항목 찾기

Palette에서 뷰 또는 뷰 그룹을 이름으로 검색하려면 Palette 맨 위에 있는 Search 버튼을 클릭하거나 Palette 창이 활성화된 상태에서 항목 이름을 입력하기 시작합니다.

PaletteCommon 범주에서 자주 사용하는 항목을 찾을 수 있습니다. 이 범주에 항목을 추가하려면 Palette에서 뷰 또는 뷰 그룹을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Favorite을 클릭합니다.

Palette에서 문서 열기

뷰 또는 뷰 그룹에 대한 Android 개발자 참조 문서를 열려면 Palette에서 UI 요소를 선택하고 Shift+F1을 누릅니다.

뷰 또는 뷰 그룹에 대한 머티리얼 가이드라인 문서를 열려면 Palette에서 UI 요소를 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 Material Guidelines을 선택합니다. 이 명령을 사용했을 때 그 항목의 내용이 없을 경우 머티리얼 가이드라인 문서의 홈 페이지가 열립니다.

레이아웃에 뷰 추가

레이아웃 빌드 작업을 시작하려면 Palette의 뷰와 뷰 그룹을 디자인 편집기로 간단하게 드래그합니다. 레이아웃에 뷰를 놓으면 편집기에서 그 뷰와 나머지 레이아웃의 관계에 대한 정보가 표시됩니다.

ConstraintLayout을 사용하고 있다면 Infer Constraints와 Autoconnect 기능을 사용해 제약 조건을 자동으로 생성 할 수 있습니다.

뷰 속성 편집

그림 3. Attributes

XML에서 뷰 속성을 편집하는 대신, Attributes 창(Layout Editor 오른쪽에 있음)에서 이 작업을 수행할 수 있습니다. 이 창은 디자인 편집기가 열려 있는 동안에만 사용할 수 있으므로 창 맨 아래에 있는 Design 탭을 선택했는지 확인해야 합니다.

Component Tree나 디자인 편집기에서 뷰를 클릭하는 방법으로—뷰를 선택하면 Attributes 창에 그림 3과 같이 다음 내용이 표시됩니다.

  1. 너비/높이 스타일, 여백, 편중에 대한 컨트롤이 있는 뷰 검사기(ConstraintLayout에 있는 뷰에 대해서만 제공). 자세한 내용은 ConstraintLayout으로 반응형 UI 빌드를 참조하세요.
  2. 선택한 뷰의 공통 속성 목록. 모든 이용 가능한 속성을 보려면 창 맨 위에 있는 View all attributes 를 클릭합니다.
  3. 사용자가 선택한 즐겨찾기 속성. 속성을 추가하려면 View all attributes 를 클릭한 다음 별표 을 클릭합니다.

특정 뷰 속성을 검색하려면 View all attributes 를 클릭한 다음 창 상단의 Search 를 클릭합니다.

샘플 데이터를 뷰에 추가하기

대다수의 Android 레이아웃은 런타임 데이터에 의존합니다. 따라서 앱을 디자인할 때 레이아웃의 모양과 느낌을 시각화하기 어려울 수 있습니다. Android Studio 3.2 이후에서는 Layout Editor 내에서 샘플 미리보기 데이터를 TextView, ImageView 또는 RecyclerView에 추가할 수 있습니다.

마우스를 뷰에 가져가면 design-time 속성 버튼 Design 창의 뷰 아래에 나타납니다. 이 버튼을 클릭하면 그림 4에 나타난 것과 같이 Design-time View Attributes 창이 표시됩니다.

그림 4. Design-time View Attributes

TextView에서는 여러 가지 샘플 텍스트 범주 중에서 선택권이 주어집니다. 샘플 텍스트를 사용하면 Android Studio가 개발자가 선택한 샘플 데이터로 TextViewtext 속성을 게재합니다. 참고로 Design-time View Attributes 창을 통해 샘플 텍스트를 선택할 수 있는 경우는 text 속성이 비어있을 때뿐입니다.

그림 5. 샘플 데이터가 있는 TextView

ImageView에서는 여러 가지 샘플 이미지 중에서 선택권이 주어집니다. 샘플 이미지를 선택할 때 Android Studio는 ImageViewtools:src 속성을 게재합니다(또는 지원 라이브러리를 사용하는 경우 tools:srcCompat).

그림 6. 샘플 데이터가 있는 ImageView

RecyclerView에서는 샘플 이미지와 텍스트를 포함한 일련의 템플릿 중에서 선택할 수 있습니다. 이러한 템플릿을 사용하면 Android Studio가 res/layout 디렉터리에 샘플 데이터의 레이아웃을 포함한 recycler_view_item.xml 파일을 추가합니다. Android Studio는 RecyclerView에 메타데이터도 추가하는데, 이것은 샘플 데이터를 적절히 표시하기 위해서입니다.

그림 7. 샘플 데이터가 있는 RecyclerView

레이아웃 경고 및 오류 표시

레이아웃에 문제가 탐지되면 Component Tree에 표시되고 느낌표 아이콘( 또는 )이 해당 뷰 옆에 나타납니다. 자세한 오류 정보를 보려면 아이콘을 클릭합니다.

편집기 아래의 창에서 모든 알려진 문제를 보려면 툴바에서 Show Warnings and Errors ( 또는 )를 클릭합니다.

이 창에서 Show issues on the preview를 활성화할 수 있습니다. 이 기능은 미리보기에서 각 해당 뷰에 경고 또는 오류 아이콘을 추가합니다(Blueprint 뷰는 제외하고 Design 뷰에만 적용).

글꼴을 다운로드하여 텍스트에 적용

Android 8.0(API 레벨 26) 또는 Android Support Library 26.0.0 이상을 사용하면 다음 절차에 따라 수백 가지 글꼴에서 선택할 수 있습니다.

  1. Layout Editor에서 Design 탭을 클릭하고 디자인 편집기에서 레이아웃을 봅니다.
  2. Text 뷰를 클릭합니다.
  3. Attributes 창에서 textAppearance를 펼치고 fontFamily 상자를 클릭하여 펼칩니다.
  4. 목록 맨 아래로 스크롤하여 More Fonts를 클릭하고 Resources 대화상자를 엽니다.
  5. Resources 대화상자에서 목록을 탐색하거나 맨 위의 검색창에 입력하여 글꼴을 선택합니다. Downloadable에 있는 글꼴을 선택하면 Create downloadable font를 클릭하여 런타임에 다운로드 가능한 글꼴로 로드하거나 Add font to project를 클릭하여 TTF 폰트 파일을 APK에 패키징할 수 있습니다. (Android 아래에 있는 글꼴은 Android 시스템에서 제공되므로 다운로드하거나 APK에 번들로 포함할 필요가 없습니다.)
  6. OK를 클릭합니다.