안드로이드 스튜디오 프로젝트 생성 및 앱 빌드 기초

< 안드로이드 스튜디오 기초 >

안드로이드 스튜디오를 처음 사용하는 사람을 위해서 작성한 글이다. 프로젝트 생성 및 앱 빌드에 관한 내용을 다루고 있으며 처음 사용하는 사람도 쉽게 따라 할 수 있도록 글을 작성했다.

< 프로젝트 템플릿 선택 >

안드로이드 스튜디오에서 프로젝트 템플릿은 특정 유형의 앱에 대한 청사진을 제공한다. 템플릿은 프로젝트 구조와 안드로이드 스튜디오가 프로젝트를 빌드하는 데 필요한 파일을 생성한다. 선택한 템플릿에 따라 시작 코드를 제공하여 더 빠르게 진행할 수 있다. 다양한 유형의 장치와 다양한 유형의 앱에 대한 템플릿이 있다. 가장 기본적인 앱을 빌드하기 위해서 휴대폰 및 태블릿 탭을 클릭한다. Empty Activity 템플릿을 선택하고 Next 버튼을 누른다.

< 프로젝트 설정 값 선택 >

프로젝트 템플릿을 선택했다면 프로젝트 설정 값을 선택할 차례다. 설정 가능한 프로젝트 속성들은 아래와 같다. 각 속성 별 의미를 적어놓았으니 참고 바란다. 모든 설정을 마쳤다면 하단의 Finish 버튼을 누른다.

 

- Name : 프로젝트의 이름

- Package name : 파일 구조에서 파일이 구성되는 방식(그대로 둠)

- Save location : 프로젝트와 관련된 파일이 저장되는 위치

- Language : 프로젝트에 사용할 프로그래밍 언어

- Minimum SDK : 앱이 실행될 수 있는 Android의 최소 버전

< 프로젝트 진행률 표시줄 >

Finish 버튼을 클릭하고 나서 안드로이드 스튜디오 하단에 있는 진행률 표시줄과 메시지는 아직 안드로이드 스튜디오 프로젝트를 설정 중인 것을 나타낸다. 처음 사용하는 경우 설정을 완료하는 데 시간이 약간 걸릴 수도 있다. 하단 좌측에 "Gradle build finished"라는 메시지가 나타난다면 완료되었다는 뜻이다.

< 화면 보기 설정 >

안드로이드 스튜디오의 우측 상단 화면을 보면 3가지 아이콘이 존재한다. 각 아이콘을 누를 때마다 프로그램 화면이 달라진다. Split를 클릭하여 코드와 디자인을 동시에 볼 수 있도록 한다.

 

- Code view : 코드만 보여줌

- Split : 코드와 디자인을 동시에 보여줌

- Design : 디자인만 보여줌

< 안드로이드 스튜디오 화면 구성 >

안드로이드 스튜디오의 화면 구성은 위와 같다.

 

- Project view : 프로젝트의 파일과 폴더가 표시되는 곳

- Code view : 코드를 편집하는 곳

- Design view : 앱의 모양을 미리 볼 수 있는 곳

< 프로젝트 트리 구조 >

안드로이드 스튜디오는 패키지로 구성된 디렉터리 구조로 프로젝트를 구성한다. 상단 좌측에 Android라고 적혀있는 상태에서는 앱에서 작업할 파일에 쉽게 액세스 할 수 있으므로 프로젝트 코드를 작성할 때 유용하다. Android라는 글자를 클릭하여 다른 트리 구조로 보기 방식을 변경할 수 있다. Project Files 트리 구조에서는 파일 탐색기에서와 동일한 방식으로 파일을 찾아볼 수 있다.

< 주요 함수 >

앱을 구성하는 코드에서 중요한 함수가 2가지 있다. onCreate, setContent 함수다.

 

- onCreate 함수

이 앱의 진입점이며 다른 함수를 호출하여 사용자 인터페이스를 구축한다. 코틀린 프로그램에서 main 함수는 코틀린 컴파일러가 시작되는 코드의 특정 위치다. 안드로이드 앱에서는 onCreate 함수가 해당 역할을 수행한다.

 

- setContent 함수

구성 가능한 함수를 통해 레이아웃을 정의하는 데 사용된다.

< @Composable 함수 >

함수 앞에 @Composable이라고 적혀있는 함수들은 다른 함수에서 호출할 수 있는 함수다. @Composable은 해당 함수가 Jetpack Compose에서 UI를 생성하는 데 사용된다는 것을 코틀린 컴파일러에 알려준다.  @Composable 함수는 이름이 대문자로 시작한다. Composable 함수는 아무것도 반환할 수 없다. Greeting 함수는 Composable 함수인데, 일부 입력을 받아 화면에 표시되는 내용을 생성한다.

@Preview 주석은 전체 앱을 구축하지 않고도 앱이 어떻게 보이는지 확인할 수 있는 멋진 기능이다. 미리 보기 기능을 사용하려면 함수 앞에 @Preview 주석을 추가해야 한다. @Preview 함수는 showBackground라는 매개변수를 사용한다. 이게 true라면 앱 미리 보기에 배경이 추가된다. 

< 앱 미리보기 결과 >

코드를 수정하지 않고 빌드하여 앱을 미리 볼 수 있다. 빌드 단축키는 Ctrl + Shift + F5다. 배경색을 변경하고 싶다면 아래 과정을 따르도록 한다.

< 줄 강조하기 >

다른 배경색을 설정하기 위해서는 Text를 Surface로 둘러싸야한다. Surface는 배경색이나 테두리와 같은 모양을 변경할 수 있는 UI 섹션을 나타내는 컨테이너다. Surface로 감싸기 위해서 Text 코드가 적힌 줄을 더블 클릭하고 윈도우 사용자는 Alt + Enter, Mac 사용자는 Option + Enter를 누른다.

< 드롭다운 메뉴 1 >

첫 번째 드롭다운 메뉴에서 Surround with widget을 선택한다. 다음으로 나타나는 드롭다운 메뉴에서 Surround with container를 선택한다.

< Box 컨테이너 >

< Surface 컨테이너 >

기본적으로 Box가 입력되지만 Surface로 변경한다. Surface 컨테이너는 색상 매개변수가 있으므로 색상을 추가한 다음 마침표를 추가한다. 마침표만 입력해도 다양한 색상 옵션을 보여주는 팝업이 표시된다. 거기서 원하는 색상을 선택해 입력한다.

< 앱 빌드 후 배경색이 바뀐 모습 >

다시 앱을 빌드해 본다. 배경색이 흰색에서 파란색으로 변경된 것을 확인할 수 있다. 이제는 글자 주변에 일정량의 공간을 적용해 본다. 패딩 수정자를 이용하면 된다.

< 패딩 수정자 추가 >

< 패딩이 적용된 모습 >

modifier는 앱을 장식하는 데 사용된다. 패딩 수정자를 사용하면 텍스트 주위에 공간을 추가한다. 이는 Modifier.padding 함수를 사용하여 수행된다. 위와 같이 코드를 입력하면 24dp 크기의 텍스트 패딩 수정자를 추가한다. 앱을 빌드하여 미리 보기를 확인해 보면 여유공간이 생긴 것을 확인할 수 있다.