Skip to content

Most visited

Recently visited

navigation

Layout Editor로 UI 빌드

Android Studio의 Layout Editor에서는 레이아웃 XML을 직접 쓰지 않고 위젯을 시각적 디자인 편집기로 드래그하는 방식으로 레이아웃을 신속하게 빌드할 수 있습니다. 이 편집기는 여러 Android 기기 및 버전에서 레이아웃을 미리 볼 수 있으며, 개발자는 레이아웃이 여러 다른 화면 크기에서 제대로 작동하도록 레이아웃의 크기를 동적으로 조정할 수 있습니다. Layout Editor는 Android 2.3(API 레벨 9) 이상과 호환되는 지원 라이브러리에 제공된 레이아웃 관리자인 ConstraintLayout을 사용하여 새 레이아웃을 빌드할 때 특히 유용합니다.

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

편집기 소개

Layout Editor는 XML 레이아웃 파일을 열 때 나타납니다. 편집기의 영역은 다음과 같으며, 해당 번호는 그림 1의 숫자에 대응됩니다.

  1. Palette: 편집기에서 레이아웃으로 드래그할 수 있는 위젯 및 레이아웃의 목록을 제공합니다.
  2. Component Tree: 레이아웃의 뷰 계층 구조를 표시합니다. 여기서 항목을 클릭하면 편집기에 선택한 항목이 표시됩니다.
  3. Toolbar: 편집기에서 레이아웃 모양을 구성하고 레이아웃 속성을 편집할 수 있는 버튼을 제공합니다.
  4. Design Editor: Design 및 Blueprint 뷰가 결합된 형태로 레이아웃을 표시합니다.
  5. Properties: 현재 선택된 뷰에 대한 속성 제어를 제공합니다.

그림 1. Design 편집기를 보여주는 Layout Editor

XML 레이아웃 파일을 열면 Design 편집기가 기본적으로 열립니다(그림 1 참조). 그 대신 Text 편집기에서 XML을 편집하려면 창 맨 아래에 있는 Text 탭을 클릭합니다. Text 편집기에서는 창의 오른쪽에 있는 Preview 를 클릭하여 Palette, Component TreeDesign 편집기를 표시할 수도 있습니다(그림 2 참조). 하지만 Properties 창은 Text 편집기에서 사용할 수 없습니다.

팁: Control+Shift+오른쪽 화살표/왼쪽 화살표를 눌러 Design 편집기와 Text 편집기 간을 전환할 수 있습니다.

그림 2. Preview 창이 열린 상태의 Text 편집기

미리보기 모양 변경

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

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

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

  1. Design and blueprint: 편집기에서 레이아웃을 보려는 방법을 선택합니다. Design 뷰는 레이아웃의 색상 미리보기를 표시하는 반면, Blueprint 뷰는 각 뷰에 대한 윤곽선만 표시합니다. 또는 Design + Blueprint 를 모두 나란히 표시할 수 있습니다.

    팁: B 키를 눌러 이러한 뷰 간을 전환할 수 있습니다.

  2. Screen orientation: 가로 모드와 세로 모드 간에 기기를 회전합니다.
  3. Device type and size: 기기 유형(휴대폰/태블릿, Android TV 또는 Android Wear) 및 화면 구성(크기 및 밀도)을 선택합니다. 여러 가지 미리 구성된 기기 유형과 자체 AVD 정의 중에서 선택하거나 목록에서 Add Device Definition을 선택하여 새 AVD를 시작할 수도 있습니다.

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

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

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

새 레이아웃 생성

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

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

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

그림 4. 새 레이아웃 XML 파일을 추가할 수 있는 대화상자

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

레이아웃 변형 생성

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

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

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

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

레이아웃을 ConstraintLayout으로 변환

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

레이아웃 성능 향상을 위해 이전의 레이아웃을 ConstraintLayout으로 변환해야 합니다. Android Studio에는 다음 작업을 수행하는 데 도움이 되는 변환기가 내장되어 있습니다.

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

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

레이아웃에 뷰 추가

앱에 대한 레이아웃을 빌드하려면 레이아웃 기본 사항을 알고 있어야 하지만, Android Studio를 사용하면 XML 파일에서 직접 수행해야 하는 많은 복잡한 작업을 피할 수 있습니다. Layout Editor에서는 위젯을 Design 편집기로 드래그하고 Properties 창에서 레이아웃 특성을 조정하여 많은 작업을 손쉽게 수행할 수 있습니다.

레이아웃 빌드 작업을 시작하려면 Palette 창의 뷰를 Design 편집기로 간단하게 드래그합니다. 레이아웃에 뷰를 배치하면 편집기가 뷰를 배치할 레이아웃의 유형에 적합한 방법으로 뷰와 나머지 레이아웃 간의 관계를 나타냅니다.

예를 들어, 동영상 1에서는 TextViewConstraintLayout으로 드래그하는 경우 위의 TextView(여기에는 Autoconnect가 활성화되어 있음)에 대한 belowaligned left 제약 조건이 어떤 식으로 생성되는지를 보여줍니다.

동영상 1. 뷰를 편집기로 드래그할 때 Layout Editor에서 뷰에 대한 제약 조건을 추가할 수 있습니다.

뷰를 ConstraintLayout이 아닌 레이아웃으로 드래그하면 Layout Editor가 해당 레이아웃에 사용할 수 있는 레이아웃 속성에 적합하게 다르게 반응합니다.

레이아웃에서 탐지되는 모든 오류는 툴바에 계산되어 표시됩니다. 오류를 보려면 Show Warnings and Errors 를 클릭합니다.

Design 편집기에 표시되는 모양은 미리보기 전용입니다. Design 편집기에서 레이아웃을 편집하면 정확한 모양에서 멀어질 수 있으므로 에뮬레이터나 실제 기기에서 앱을 실행하여 결과를 확인해야 합니다.

Android의 View API가 레이아웃을 빌드하기 위해 어떤 식으로 작동하는지에 대한 자세한 내용을 보려면 레이아웃 기본 사항을 참조하세요. 또는 ConstraintLayout으로 반응형 UI 빌드에서 ConstraintLayout을 사용하는 지침을 확인할 수 있습니다.

뷰 속성 편집

그림 5. Properties

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

뷰에 대한 일반적인 속성을 보고 편집하려면 편집기에서 해당 뷰를 선택합니다. 뷰에 대한 추가 속성에 액세스해야 하는 경우 View all properties 를 클릭합니다.

선택한 뷰가 ConstraintLayout의 하위 요소인 경우, Properties 창의 맨 위에 여러 컨트롤과 함께 뷰 검사기가 포함되어 있습니다(그림 7 참조). ConstraintLayout에 포함된 뷰에 대한 속성 컨트롤과 관련한 자세한 내용은 ConstraintLayout으로 반응형 UI 빌드를 참조하세요.

This site uses cookies to store your preferences for site-specific language and display options.

Hooray!

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a one-minute survey?
Help us improve Android tools and documentation.