생일 카드 앱 만들기

1. 소개

이 Codelab에서는 텍스트를 표시하는 간단한 Android 앱을 빌드합니다. Android의 사용자 인터페이스(UI) 구성요소를 더 자세히 알아봄으로써 화면에서 텍스트를 배치할 수 있습니다.

기본 요건

Android 스튜디오에서 새 앱을 만드는 방법
에뮬레이터 또는 Android 기기에서 앱을 실행하는 방법

학습할 내용

Views 및 ViewGroups와 같은 사용자 인터페이스 요소는 무엇인가
앱의 TextView에 텍스트를 표시하는 방법
TextView에서 텍스트, 글꼴, 여백과 같은 속성을 설정하는 방법

빌드할 프로그램

텍스트 형식으로 생일 축하 메시지를 표시하는 Android 앱입니다.

완료되면 앱은 다음과 같이 표시됩니다.

필요한 항목

Android 스튜디오가 설치된 컴퓨터

2. Happy Birthday 앱 설정

Empty Activity 프로젝트 만들기

먼저 Android 스튜디오에서 Empty Activity 템플릿을 사용하여 새 Kotlin 프로젝트를 만듭니다.
최소 API 수준 19(KitKat)로 'Happy Birthday'라는 앱을 만듭니다.

중요: Android 스튜디오에서 새 프로젝트를 만드는 데 익숙하지 않다면 첫 번째 Android 앱 만들기 및 실행하기를 참고하여 자세한 내용을 알아보세요.

앱을 실행합니다. 앱은 아래의 스크린샷과 같이 표시됩니다.

Empty Activity 템플릿으로 Happy Birthday 앱을 만들면 Android 스튜디오에서는 화면 중앙의 'Hello World!' 메시지를 포함하여 기본 Android 애플리케이션용 리소스를 설정합니다. 이 Codelab에서는 메시지가 중앙에 위치하는 방법, 텍스트를 생일 축하 메시지로 변경하는 방법, 메시지를 추가하고 형식을 지정하는 방법을 알아봅니다.

사용자 인터페이스 정보

앱의 사용자 인터페이스(UI)는 화면에 표시되는 텍스트, 이미지, 버튼, 기타 여러 유형의 요소입니다. UI를 통해 앱은 사용자에게 콘텐츠를 표시하고 사용자는 앱과 상호작용합니다.

이러한 각 요소를 View라고 합니다. 앱 화면에 표시되는 대부분의 내용은 View입니다. Views는 클릭 가능한 버튼이나 수정 가능한 입력란처럼 상호작용할 수 있습니다.

이 Codelab에서는 텍스트를 표시하는 View 유형인 TextView를 사용해 봅니다.

Android 앱의 Views는 단순히 화면에 자체적으로 플로팅되지 않습니다. Views는 서로 관계가 있습니다. 예를 들어 이미지는 텍스트 옆에 있을 수 있고 버튼은 행을 형성할 수 있습니다. Views를 구성하려면 컨테이너에 배치합니다. ViewGroup은 View 객체를 담을 수 있는 컨테이너로, 내부에 있는 Views를 정렬하는 역할을 합니다. 정렬 또는 레이아웃은 앱이 실행되는 Android 기기 화면의 크기와 가로세로 비율에 따라 변경될 수 있고 레이아웃은 기기가 세로 모드인지 가로 모드인지에 따라 조정될 수 있습니다.

ViewGroup의 한 종류인 ConstraintLayout을 통해 내부 Views를 유연한 방식으로 정렬할 수 있습니다.

Layout Editor 정보

Views와 ViewGroups를 정렬하여 사용자 인터페이스를 만드는 것은 Android 앱을 만드는 주요 부분입니다. Android 스튜디오에서는 이 작업을 실행하는 데 도움이 되는 Layout Editor라는 도구를 제공합니다. Layout Editor를 사용하여 'Hello World!'를 'Happy Birthday!'로 변경하고 나중에 텍스트의 스타일을 지정해 봅니다.

Layout Editor를 열면 많은 부분으로 구성되어 있습니다. 이 Codelab에서 대부분의 사용법을 알아봅니다. 아래의 주석이 달린 스크린샷을 통해 Layout Editor의 창을 알아보세요. 앱을 변경하면서 각 부분에 관해 자세히 알아봅니다.

왼쪽 (1)은 이전에 봤던 Project 창입니다. 프로젝트를 구성하는 파일을 모두 나열합니다.
가운데에는 앱의 화면 레이아웃을 나타내는 2개의 그림 (4)와 (5)가 있습니다. 왼쪽 그림 (4)는 앱이 실행될 때 표시될 화면의 모습과 가깝습니다. 이를 Design 뷰라고 합니다.
오른쪽 그림 (5)는 Blueprint 뷰이고 특정 작업에 유용할 수 있습니다.
Palette (2)에는 앱에 추가할 수 있는 다양한 유형의 Views 목록이 포함됩니다.
Component Tree (3)은 화면 뷰의 다른 표현입니다. 화면의 모든 뷰가 나열됩니다.
맨 오른쪽 (6)은 Attributes입니다. View의 속성을 표시하고 변경할 수 있도록 합니다.

Layout Editor와 그 구성 방법에 관한 자세한 내용은 개발자 참조 가이드를 참고하세요.

주석이 달린 전체 Layout Editor의 스크린샷

Layout Editor에서 몇 가지 사항을 변경하여 앱을 생일 카드와 비슷하게 만들어 보겠습니다.

Hello World 메시지 변경

Android 스튜디오에서 왼쪽의 Project 창을 찾습니다.
다음 폴더와 파일을 확인합니다. app 폴더에는 변경할 앱의 파일이 대부분 있습니다. res 폴더는 이미지 또는 화면 레이아웃과 같은 리소스용입니다. layout 폴더는 화면 레이아웃용입니다. activity_main.xml 파일에는 화면 레이아웃에 관한 설명이 포함되어 있습니다.
app 폴더, res 폴더, layout 폴더를 차례로 펼칩니다.
activity_main.xml을 더블클릭합니다. 그러면 Layout Editor에 activity_main.xml이 열리고 Design 뷰에서 설명한 레이아웃이 표시됩니다.

Component Tree에서 뷰 목록을 확인합니다. ConstraintLayout과 그 아래에 TextView가 있습니다. 이는 앱의 UI를 나타냅니다. TextView는 ConstraintLayout 내부에 있으므로 들여쓰기 되어 있습니다. ConstraintLayout에 Views를 더 추가하면 이 목록에 추가됩니다.
TextView에는 그 옆에 보이는 'Hello World!'라는 텍스트가 있는데 이는 앱을 실행할 때 표시되는 텍스트입니다.

Component Tree에서 TextView를 클릭합니다.
오른쪽에서 Attributes를 찾습니다.
Declared Attributes 섹션을 찾습니다.
Declared Attributes 섹션의 text 속성에 Hello World!가 포함되어 있습니다.

text 속성은 TextView 내에 출력된 텍스트를 표시합니다.

Hello World! 텍스트가 있는 text 속성을 클릭합니다.
Happy Birthday!로 변경하고 Enter 키를 누릅니다. 하드코딩 문자열에 관한 경고가 표시되면 지금은 걱정하지 않아도 됩니다. 다음 Codelab에서 경고를 삭제하는 방법을 알아봅니다.
Design View에서 텍스트가 변경되었습니다. 변경사항을 바로 확인할 수 있습니다.
앱을 실행하면 Happy Birthday!가 표시됩니다.

훌륭합니다. Android 앱을 처음으로 바꾸어 보았습니다.

3. 레이아웃에 TextView 추가

만들고 있는 생일 카드가 현재 앱에 있는 카드와 다릅니다. 중앙에 있는 작은 텍스트 대신 왼쪽 상단과 오른쪽 하단에 큰 메시지 하나씩 두 개가 필요합니다. 이 작업에서는 기존 TextView를 삭제하고 새 TextViews를 두 개 추가하여 ConstraintLayout 내에 배치하는 방법을 알아봅니다.

현재 TextView 삭제

Layout Editor에서 레이아웃 중앙에 있는 TextView를 클릭하여 선택합니다.

Delete 키를 누릅니다. Android 스튜디오에서 TextView를 삭제하면 앱은 이제 Layout Editor와 Component Tree에 ConstraintLayout만 표시합니다.

TextView 추가

이 단계에서는 앱 왼쪽 상단에 생일 축하 메시지를 유지하기 위한 TextView를 추가합니다.

Layout Editor의 왼쪽 상단에 있는 Palette에는 앱에 추가할 수 있는 다양한 유형의 Views 목록이 카테고리별로 구성되어 있습니다.

TextView를 찾습니다. Common 카테고리와 Text 카테고리에 모두 표시됩니다.

TextView를 Palette에서 Layout Editor의 디자인 화면 왼쪽 상단으로 드래그하여 드롭합니다. 정확하지 않아도 됩니다. 왼쪽 상단 가까이에 드롭하면 됩니다.

TextView가 추가되었으며 Component Tree에 빨간색 느낌표가 표시됩니다.
느낌표 위로 포인터를 가져가면 뷰가 제한되지 않아 앱을 실행할 때 다른 위치로 이동한다는 경고 메시지가 표시됩니다. 다음 단계에서 이 문제를 해결합니다.

TextView 배치

생일 카드의 경우 TextView는 주위에 공간을 포함해 왼쪽 상단 근처에 있어야 합니다. 경고를 해결하려면 TextView에 일부 제약조건을 추가하여 배치 방법을 앱에 알립니다. 제약조건은 View가 레이아웃에 있을 수 있는 위치에 관한 방향과 제한사항입니다.

상단과 왼쪽에 추가한 제약조건에는 여백이 있습니다. 여백은 View가 컨테이너의 가장자리에서 떨어진 정도를 지정합니다.

오른쪽의 Attributes에서 Layout 섹션에 있는 Constraint Widget을 찾습니다. 정사각형은 뷰를 나타냅니다.

정사각형 상단의 +를 클릭합니다. 이는 TextView의 상단과 ConstraintLayout의 상단 가장자리 사이의 제약조건을 위한 것입니다.
상단 여백을 설정하는, 숫자가 있는 입력란이 표시됩니다. 여백은 TextView에서 컨테이너 ConstraintLayout의 가장자리까지 거리입니다. TextView를 드롭하는 위치에 따라 표시되는 숫자가 달라집니다. 상단 여백을 설정하면 Android 스튜디오는 텍스트 뷰의 상단에서 ConstraintLayout의 상단까지 제약조건을 자동으로 추가합니다.

상단 여백을 16으로 변경합니다.

왼쪽 여백에도 동일한 작업을 실행합니다.

'Happy Birthday, Sam!'과 같이 text를 친구에게 보내는 생일 축하 메시지로 설정하고 Enter를 누릅니다.

Design 뷰가 업데이트되어 앱의 모양을 보여 줍니다.

다른 TextView 추가 및 배치

생일 카드에는 오른쪽 하단에 두 번째 텍스트 줄이 필요하며 이전 작업과 동일한 방식으로 이 단계에서 추가합니다. 이 TextView의 여백은 어느 정도여야 할까요?

Palette에서 새 TextView를 드래그하여 Layout Editor의 앱 뷰 오른쪽 하단 근처에서 드롭합니다.

오른쪽 여백을 16으로 설정합니다.
하단 여백을 16으로 설정합니다.

Attributes에서 text 속성을 'From Emma'와 같이 카드에 서명하는 것으로 설정합니다.
앱을 실행합니다. 왼쪽 상단에 생일 축하 메시지가 표시되고 오른쪽 하단에 서명이 표시됩니다.

축하합니다. 앱에 UI 요소를 추가하고 배치했습니다.

4. 텍스트에 스타일 추가

사용자 인터페이스에 텍스트를 추가했지만 아직 최종 앱처럼 보이지는 않습니다. 이 작업에서는 TextView의 모양에 영향을 미치는 크기, 텍스트 색상, 기타 속성을 변경하는 방법을 알아봅니다. 다양한 글꼴을 시도해 볼 수도 있습니다.

Component Tree에서 첫 번째 TextView를 클릭하고 Attributes 창의 Common Attributes 섹션을 찾습니다. 경우에 따라 아래로 스크롤해야 할 수 있습니다.
fontFamily, textSize, textColor 등 속성은 다양합니다.

textAppearance를 찾습니다.
textAppearance가 펼쳐지지 않으면 역삼각형을 클릭합니다.
textSize에서 textSize를 36sp로 설정합니다.

Layout Editor에서 변경사항을 확인합니다.

fontFamily를 casual로 변경합니다.
다양한 글꼴을 시도하여 확인해 봅니다. 목록 하단의 More Fonts... 아래에서 더 많은 글꼴을 선택할 수 있습니다.
다양한 글꼴을 시도해 봤다면 fontFamily를 sans-serif-light으로 설정합니다.
textColor 속성의 편집 상자를 클릭하고 black을 입력합니다. 입력하는 동안 Android 스튜디오는 지금까지 입력한 텍스트가 포함된 색상 목록을 표시합니다.

색상 목록에서 @android:color/black을 선택하고 Enter를 누릅니다.
서명이 있는 TextView에서 textSize, textColor, fontFamily를 일치하도록 변경합니다.
앱을 실행하고 결과를 확인합니다.

축하합니다. 생일 카드 앱을 만드는 첫 번째 단계를 완료했습니다.

5. 해결 방법

프로젝트에 제공된 GitHub 저장소 페이지로 이동합니다.
브랜치 이름이 Codelab에 지정된 브랜치 이름과 일치하는지 확인합니다. 예를 들어 다음 스크린샷에서 브랜치 이름은 main입니다.

프로젝트의 GitHub 페이지에서 Code 버튼을 클릭하여 팝업을 엽니다.

팝업에서 Download ZIP 버튼을 클릭하여 컴퓨터에 프로젝트를 저장합니다. 다운로드가 완료될 때까지 기다립니다.
컴퓨터에서 파일을 찾습니다(예: Downloads 폴더).
ZIP 파일을 더블클릭하여 압축을 해제합니다. 프로젝트 파일이 포함된 새 폴더가 만들어집니다.

Android 스튜디오에서 프로젝트 열기

Android 스튜디오를 시작합니다.
Welcome to Android Studio 창에서 Open을 클릭합니다.

참고: Android 스튜디오가 이미 열려 있는 경우 File > Open 메뉴 옵션을 대신 선택합니다.

파일 브라우저에서 압축 해제된 프로젝트 폴더가 있는 위치로 이동합니다(예: Downloads 폴더).
프로젝트 폴더를 더블클릭합니다.
Android 스튜디오가 프로젝트를 열 때까지 기다립니다.
Run 버튼 을 클릭하여 앱을 빌드하고 실행합니다. 예상대로 작동하는지 확인합니다.

6. 요약

Layout Editor를 사용하면 Android 앱용 UI를 만들 수 있습니다.
앱 화면에 표시되는 대부분의 내용은 View입니다.
TextView는 앱에서 텍스트를 표시하는 UI 요소입니다.
ConstraintLayout은 다른 UI 요소의 컨테이너입니다.
Views는 ConstraintLayout 내에서 가로와 세로로 제한되어야 합니다.
View를 배치하는 한 가지 방법은 여백을 사용하는 것입니다.
여백을 통해 View가 컨테이너의 가장자리에서 떨어진 정도를 설정할 수 있습니다.
TextView에 글꼴, 텍스트 크기, 색상과 같은 속성을 설정할 수 있습니다.