[Windows 10에서 안드로이드 앱 개발] 코틀린(Kotlin)을 이용한 '누구나 스마트폰 앱 개발' (2/16) - 안드로이드 스튜디오와 친해지기

안드로이드 스튜디오

 >>> 이전 글 보기
앞서 접했던 안드로이드 스튜디오에 대해 몇 가지 설명을 해 드릴게요. 앱 개발을 위해서 스튜디오와 친해져야 하니까요~
차분하게 아래 내용 하나 하나를 직접 조작해 보면 개발 환경에 대해 대략적인 파악을 할 수 있을 거예요.

앞에서 생성한 프로젝트는 안드로이드 스튜디오에서 다음과 같이 열립니다. 아래는 에디터 창에서 MainActivity.kt 탭을 클릭한 상태입니다. activity_main.xml 탭을 선택하면 기본적인 앱 화면의 레이아웃 모양을 시각적으로 확인할 수 있습니다.

프로젝트 탐색기와 에디터

   프로젝트 탐색기는 프로젝트가 저장되는 폴더의 파일들을 트리(Tree) 형태로 요약해서 표시해 줍니다. 폴더들을 열면 그 안에 여러가지 많은 파일들이 보일 것 입니다. 우리가 앱을 작성하면 컴퓨터 내부적으로 여러가지 조각 파일들이 만들어지면서 저장됩니다. 이 프로젝트 탐색기에서 수정하고자 하는 파일을 더블클릭하면 우측 에디터 화면에 파일의 내용이 표시 됩니다. 우리는 에디터에 원하는 기능들을 작성 함으로써('코딩') 프로그램을 만들면 됩니다.

 

알림 및 실행도구 창

   이 창은 안드로이드 스튜디오의 동작 상태를 표시(Logcat 탭)하기도 하고 우리가 프로그램할 명령어들을 테스트(TODO 탭) 해 볼 수도 있는 유용한 공간입니다.

 

프로젝트 탐색기에 있는 파일들의 역할을 잠깐 알아봅시다. 

App > Manifests > AndroidManifest.xml - 위에서 안드로이드 앱이 여러 조각 파일 형태로 저장된다고 했죠? 그 조각 파일들의 종류와 상태 정보가 자동으로 이 파일에 저장됩니다. 이 정보들을 가리켜 '매니페스트 정보'라고 부릅니다.

 

MainActivity.kt 와 Activity_main.xml - 이 두 파일이 우리가 프로그래밍 해줘야 하는 파일입니다. (파일 이름을 외워두세요) 위 안드로이드 스튜디오 화면 에디트 창에 이 두 파일에 대한 탭이 열려있는 것이 보이시죠? MainActivity.kt는 앱의 동작을 프로그램하는 소스 코드이고 Activity_main.xml은 스마트폰에 표시될 화면 모습의 디자인을 프로그램하는 소스 코드입니다. 그러니까 이 두 개의 파일로 앱의 동작과 디자인을 정의합니다. 앱의 가장 핵심이 되는 파일이고 항상 세트로 구성되어 있습니다. 프로그램 작업 때 좋은 팁이 하나 있는데, *.kt 파일 에디터 화면의 좌측 부분에 작은 문서 모양과 그 아래에 <>표시가 있는 아이콘이 있죠? 그 아이콘을 누르면 이렇게 세트로 된 파일의 디자인 정의 파일로 쉽게 이동해서 작업을 할 수 있습니다. 클릭해 보세요. 디자인 파일에서 거꾸로 동작 정의 파일로 이동하려면 ctrl+E를 눌러 최근에 사용했던 파일을 선택하면 됩니다.

 

drawable - 이미지들을 모아놓는 폴더

layout - 화면 레이아웃 정보를 저장하는 폴더

mipmap - 앱 아이콘들을 모아놓는 폴더

values - 여러가지 값 정보들을 저장하는 폴더

 

Gradle Scripts - 빌드 정보들이 저장되어 있는 폴더. 우리가 작성한 코드들을 스마트폰이 실행할 수 있도록 컴퓨터 내부적으로 '컴파일' 작업이 이뤄지고 스마트폰 용 기계어 코드가 만들어지는데, 이 과정을 '빌드'라고 합니다. 우리가 빌드에 대해서 알 필요는 없고 단지 몇 가지 조작 요청은 해줘야 합니다. (build.gradle이라는 파일들을 나중에 수정하게 될 것 입니다) 마치 방앗간에 쌀을 가져다 주고 떡을 만들어 달라고 하면서 (떡이 만들어지는 '빌드' 과정은 우리가 알 필요는 없고) 떡 고물로 뭐뭐를 넣어 무슨 무슨 떡을 만들어 달라고 조작 요청을 하는 것과 같습니다.

 

 

다음은 activity_main.xml 탭을 열어 레이아웃 디자인 화면에 대해 알아봅시다. 

activity_main.xml 탭을 클릭하면 에디터 창이 위와 같은 디자인 창으로 전환됩니다.

 

디자인 창 속에는 팔레트 창, 컴포넌트 트리 창, 속성 창들이 들어있고 한 가운데는 레이아웃 모양을 표시해주는 창이 있습니다.

(텍스트만 표시될 경우, 디자인 창 하단의 'Design' 탭을 클릭해줘야 위 화면을 볼 수 있습니다. 'Text' 탭에는 위 디자인이 프로그래밍 코드로 표현되어 있습니다. 바꿔말하자면 'Text' 탭의 내용을 그대로 그림으로 그려 표시한 것이 'Design' 탭 입니다)

 

팔레트 - 앱 상에서 보이는 모든 요소들을 '뷰'라고 합니다. 버튼, 이미지, 문자열 등등이 모두 뷰 입니다. 팔레트 창은 이런 뷰 조각들을 모아 놓은 창으로서 추가하고 싶은 뷰가 있다면 마우스로 끌어다가 디자인 창 중앙의 레이아웃 위에 올려 놓으면 됩니다. 참 쉽죠~

(프로그래밍 하는 입장에서는 뷰 조각들을 '컴포넌트(요소)'라고 부릅니다.

 

컴포턴트 트리 - 뷰 조각, 그러니까 컴포넌트들이 레이아웃 상에 어떻게 쌓여 있는지를 트리 구조로 표시해 줍니다. 레이아웃 상에서 위 쪽 컴포넌트와 아래 쪽에 가려진 컴포넌트 간에 구분이 안될 때 이 트리구조를 보면 명백하게 알 수 있죠.

 

속성 - 레이아웃 상의 특정 뷰를 클릭하면 그 뷰에 대한 속성이 속성 창에 표시됩니다. 수직 스크롤 바를 움직이거나 'All Attributes'를 눌러 세부 속성으로 확장해 보면, 엄청나게 많은 속성 값들이 표시됩니다. 여기에 표시된 속성들을 'Constraint' 즉, 번역하자면 '제약, 제한'이라고 합니다. 예를 들자면, 위 속성창에는 현재 선택되어 있는 뷰의 상하좌우 여백이 표시되어 있죠. 모두 값이 0으로 설정되어 있습니다. 물론 다른 값으로 조절할 수도 있고요. 여백이 0으로 설정되어 있으므로 현재 선택되어 있는 뷰는 전체 화면으로 표시되게 됩니다. 뷰가 차지할 공간을 공백 설정을 통해 '제한'하는 것이죠. 모든 뷰들이 이런 식으로 화면에 배치됩니다. 이런 뷰 배치방식을 'ConstraintLayout 방식'이라고 부릅니다. 속성 창의 많은 항목들을 변경해보거나 속성 창 속 layout에 있는 값이나 아이콘을 움직이면 디자인 화면 중앙에 실시간으로 그 형태가 표시됩니다. 직접 이것 저것 바꿔보세요. 대략 어떻게 화면의 레이아웃을 조절하는지 알 수 있을 거예요.

 

 디자인창 아이콘들 중에, '위로향한 말굽자석' 아이콘 - AutoConnect를 On/Off 합니다. On (Enable AutoConnection to Parent)으로 하면 뷰를 배치할 때 자동으로 Constraint가 추가됩니다. (이 아이콘 기억해 두세요. 다음 포스트에서 사용할 예정입니다)

 

 디자인창 아이콘들 중에, '0dp' 아이콘 - 기본 여백을 표시하는 숫자입니다.

 

속성창 ID 항목 - 현재 선택된 뷰의 이름을 정해줄 수 있습니다. 그리고 코틀린에서 이 이름을 이용해 뷰에 접근할 수 있습니다.

속성창 layout_width, layout_height - 수평, 수직 배치 형태를 설정합니다. (match_constraint: 꽉차게, wrap_content:컨텐츠 크기에 맞게, Fixed: 임의의 값 지정)

 

 

다음 포스트에서는 위에서 열어놓은 파일에 약간의 코딩을 해서 첫 안드로이드 앱을 만들어 봅시다. (다음 포스트에 계속~)
<<< 이전 글 보기     다음 글 보기 >>>