콘텐츠로 이동

1. 어떤 앱을 만들까

여러분은 "언젠가 꼭 가 보고 싶은 곳" 목록을 어디에 적어 두고 있습니까?

수첩에 적어 둔 사람도 있고, 메모 앱에 적어 둔 사람도 있고, 머릿속에만 담아 둔 사람도 있을 것입니다. 이렇게 죽기 전에 꼭 해 보고 싶은 일들을 적은 목록을 버킷리스트(bucket list)라고 부릅니다.

그런데 "가 보고 싶은 곳"은 글자로 적는 것보다 지도 위에 표시하는 쪽이 훨씬 실감 납니다. 지도를 열 때마다 "여기 아직 못 가 봤네", "여기는 지난달에 다녀왔지" 하고 한눈에 보이기 때문입니다.

이 과정에서 우리는 바로 그 앱, 버킷맵을 만듭니다.

버킷맵 미리보기

앞으로 8개 챕터를 지나면 여러분의 손으로 이런 앱이 완성됩니다.

완성된 버킷맵 메인 화면: 네이버 지도 위에 다녀온 곳 경복궁이 초록 마커로, 가보고 싶은 덕수궁이 주황 마커로 함께 표시되어 있고, 하단에 장소 찾기와 내 장소 버튼이 있다

메인 화면입니다. 진짜 네이버 지도 위에 내가 담은 장소들이 마커로 표시됩니다. 가보고 싶은 곳은 주황색, 다녀온 곳은 초록색입니다.

검색 화면: 검색창에 palace 를 입력하자 경복궁, 덕수궁, 국립고궁박물관 등 실제 장소가 주소·평점과 함께 목록으로 나타난 모습

장소 찾기 화면입니다. 검색어를 입력하면 Google 의 장소 데이터베이스에서 진짜 장소를 찾아 이름·주소·평점을 보여 줍니다.

상세 화면: 경복궁의 실제 사진과 주소, 평점 4.6 아래에 '가보고 싶은 곳으로 저장했어요' 상태와 다녀왔어요, 빼기 버튼이 표시되고 하단에 버킷리스트에 담았어요 토스트가 떠 있다

상세 화면입니다. 장소의 실제 사진이 나오고, 가보고 싶어요 버튼을 누르면 버킷리스트에 담깁니다. 다녀온 뒤에는 방문 도장을 찍을 수 있습니다.

내 장소 화면: 가볼 곳과 다녀온 곳 필터 칩 아래에 창경궁과 덕수궁이 주소·평점과 함께 목록으로 표시된 모습

내 장소 화면입니다. 지금까지 담은 장소를 가볼 곳 / 다녀온 곳으로 나눠서 모아 봅니다.

무엇을 배우는가

버킷맵은 장난감 예제가 아닙니다. 실제 서비스 앱들이 쓰는 기술을 그대로 사용합니다.

챕터 만드는 것 배우는 기술
2 4개 화면과 화면 이동 액티비티, 인텐트(Intent), Extra 데이터 전달
3 앱의 색·아이콘·화면 모양 레이아웃 XML, 리소스, 테마, 다크 모드
4 장소 목록 RecyclerView 와 어댑터
5 진짜 지도 네이버 지도 SDK, 위치 권한, 현위치
6 진짜 장소 검색 REST API, Retrofit, JSON, Glide
7 저장되는 버킷리스트 Room 데이터베이스
8 마무리 전체 구조 복습과 도전과제

한 챕터가 끝날 때마다 앱은 항상 실행되는 상태로 끝납니다. 중간에 반쯤 부서진 채 다음 장으로 넘어가는 일은 없습니다.

개발 준비물

  1. Android Studio — 안드로이드 공식 개발 도구입니다. 아직 없다면 https://developer.android.com/studio 에서 내려받아 설치합니다. 이 과정은 설치가 끝난 상태에서 시작합니다.
  2. AVD(에뮬레이터) — 컴퓨터 안에서 도는 가상 스마트폰입니다. Android Studio 에 포함되어 있어서 실제 폰이 없어도 됩니다.
  3. Java 기초 — 변수, 조건문, 반복문, 클래스와 메서드를 이미 배웠다고 전제합니다.
  4. 네이버 클라우드 플랫폼 계정 / Google 계정 — 5장과 6장에서 지도·검색 키를 발급받을 때 필요합니다. 지금은 없어도 됩니다.

새 프로젝트 만들기

이제 시작합니다. 프로젝트 이름은 BucketMap, 우리가 만드는 앱의 뼈대입니다.

[CH-1 아래 과정을 그대로 진행하시오.]

  1. Android Studio 를 실행하고 New Project 를 누른다.
  2. 템플릿 목록에서 Empty Views Activity 를 선택하고 Next 를 누른다. (이름이 비슷한 "Empty Activity"는 Compose 라는 다른 방식의 템플릿이다 — 이 과정은 XML 레이아웃을 쓰는 Views 방식으로 진행한다.)
  3. 항목을 아래와 같이 입력한다.
Name          : BucketMap
Package name  : com.example.myapplication
Save location : (원하는 폴더)
Language      : Java
Minimum SDK   : API 25 ("Nougat"; Android 7.1)
  1. Finish 를 누르고, 오른쪽 아래 진행 표시줄이 끝날 때까지 기다린다.

[설명]

  1. Package name 은 정확히 com.example.myapplication 으로 입력한다. 5장에서 발급받는 네이버 지도 키가 이 패키지 이름에 묶이기 때문에, 다르게 입력하면 지도가 뜨지 않는다.
  2. Language 는 반드시 Java 를 고른다. 기본값이 Kotlin 인 버전도 있으니 주의한다.
  3. Minimum SDK 는 "이 앱이 설치될 수 있는 가장 오래된 안드로이드 버전"이다. API 25 로 하면 2016년 이후 폰 대부분에 설치할 수 있다.

프로젝트 구조 훑어보기

Finish 를 누르면 Android Studio 가 수십 개의 파일을 만들어 줍니다. 겁먹을 필요 없습니다 — 우리가 직접 만지는 곳은 몇 군데뿐입니다.

app/
 └─ src/main/
     ├─ java/com/example/myapplication/   ← Java 코드 (우리가 주로 작업)
     │   └─ MainActivity.java
     ├─ res/                              ← 리소스 (화면·글자·색·그림)
     │   ├─ layout/activity_main.xml      ← 화면 배치
     │   ├─ values/strings.xml            ← 앱에 쓰는 문자열 모음
     │   └─ values/themes.xml             ← 앱 전체 색·스타일
     └─ AndroidManifest.xml               ← 앱의 신분증 (화면 목록·권한)

[설명]

  1. java/ 아래에는 동작(로직) 을 적고, res/ 아래에는 모양(화면·문자열·색) 을 적는다. 안드로이드는 이 둘을 분리하는 것이 기본 규칙이다.
  2. AndroidManifest.xml 은 "이 앱에는 어떤 화면이 있고, 어떤 권한이 필요한가"를 시스템에 알리는 문서다. 2장에서 다시 만난다.
  3. build.gradle 이라는 파일이 두 개 보이는데(프로젝트용, app 모듈용), 외부 라이브러리를 추가할 때 쓰는 파일이다. 4~7장에서 계속 쓰게 된다.

첫 화면 직접 만들기

템플릿이 만들어 준 코드에는 아직 배우지 않은 내용이 섞여 있습니다. 전부 지우고, 가장 단순한 형태로 직접 다시 작성하면서 시작하겠습니다.

[CH-2 아래 코드를 그대로 작성하고 실행하시오.]

java/com.example.myapplication/MainActivity.java 를 열고, 내용 전체를 아래 코드로 바꿉니다.

package com.example.myapplication;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

이어서 res/layout/activity_main.xml 을 열고, 오른쪽 위의 Code 탭을 눌러 XML 편집 모드로 바꾼 뒤 내용 전체를 아래로 바꿉니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textSize="20sp" />

</LinearLayout>

이제 실행합니다. 실행 절차는 다음과 같습니다.

  1. 화면 위쪽 장치 선택 상자에서 에뮬레이터(예: Pixel 8 Pro API 34)를 고른다. 목록이 비어 있으면 Device Manager 에서 Create Virtual Device 로 하나 만든다.
  2. 초록 세모(▶ Run) 버튼을 누른다.
  3. 처음에는 에뮬레이터가 부팅되느라 1~2분 걸릴 수 있다.

실행 결과

에뮬레이터에 실행된 첫 화면: 연보라색 배경 가운데에 Hello World! 텍스트가 표시되어 있다

화면 한가운데에 Hello World! 가 떴다면 성공입니다. 여러분의 첫 안드로이드 화면입니다.

[설명]

  1. 액티비티(Activity) 는 앱의 화면 하나를 담당하는 클래스다. MainActivity 는 앱을 켜면 처음 보이는 화면이다.
  2. onCreate() 는 화면이 만들어질 때 시스템이 호출해 주는 메서드다. 화면의 준비 작업은 전부 여기서 시작한다.
  3. setContentView(R.layout.activity_main) 은 "이 화면의 모양은 activity_main.xml 을 쓰겠다"는 선언이다. Rres/ 폴더의 모든 리소스에 번호표를 붙여 둔 자동 생성 클래스다 — XML 에 만든 것을 Java 에서 R.layout.…, R.id.… 로 찾아 쓴다.
  4. LinearLayout 은 자식들을 한 방향으로 줄 세우는 상자다. gravity="center" 라서 내용물이 화면 가운데에 온다. 레이아웃은 3장에서 제대로 배운다.

앱 이름 바꾸기

앱 서랍을 열어 보면 방금 만든 앱의 이름이 "My Application" 입니다. 우리 앱의 이름 버킷맵으로 바꿔 주겠습니다. 이때 화면에 보이는 문자열을 코드에 직접 적지 않고 strings.xml 이라는 문자열 보관소에 모아 두는 것이 안드로이드의 규칙입니다.

[CH-3 아래 코드를 그대로 작성하고 실행하시오.]

res/values/strings.xml 을 열고 내용 전체를 아래로 바꿉니다.

<resources>
    <string name="app_name">버킷맵</string>
    <string name="main_welcome">버킷맵에 오신 것을 환영합니다!</string>
</resources>

res/layout/activity_main.xml 의 TextView 한 줄을 고칩니다.

        android:text="@string/main_welcome"

실행 결과

앱 이름을 바꾼 뒤의 첫 화면: 화면 가운데에 '버킷맵에 오신 것을 환영합니다!' 문구가 표시되어 있다

에뮬레이터의 앱 서랍: 기본 안드로이드 로봇 아이콘 아래에 앱 이름이 '버킷맵'으로 표시되어 있다

앱 서랍(홈 화면에서 위로 쓸어올리기)에서 이름이 버킷맵으로 바뀐 것을 확인합니다. 아이콘은 아직 기본 로봇입니다 — 3장에서 우리만의 아이콘으로 바꿉니다.

[설명]

  1. app_name 은 앱 서랍·설정 화면 등에서 보이는 앱의 공식 이름이다. AndroidManifest.xml@string/app_name 을 참조하고 있어서 이 한 줄만 고치면 어디서든 바뀐다.
  2. @string/main_welcome 처럼 @리소스종류/이름 으로 적으면 "strings.xml 에 있는 main_welcome 을 가져와라"는 뜻이 된다.
  3. 문자열을 코드나 레이아웃에 직접 적지 않고 리소스로 빼 두면, 나중에 문구를 바꾸거나 다른 언어를 지원할 때 strings.xml 한 곳만 고치면 된다. 이 과정 내내 이 규칙을 지킨다.

[self Test 1] - 앱 이름을 자기만의 이름(예: "OO의 버킷맵")으로 바꾸고, 환영 문구도 마음에 드는 문장으로 바꿔서 실행해 보시오. 문자열은 반드시 strings.xml 에서만 고칠 것.