코틀린 안드로이드 앱개발 강좌, 이미지 공유 앱 만들기

안드로이드 앱 개발은 현재 많은 개발자들이 선호하는 분야 중 하나입니다. 이 글에서는 코틀린을 활용하여 간단한 이미지 공유 앱을 만드는 방법을 자세히 설명하겠습니다. 이 과정을 통해 사용자 인증, 이미지 업로드 및 표시, 그리고 Firebase와 같은 클라우드 서비스를 활용하는 방법을 배우게 될 것입니다.

1. 프로젝트 준비하기

안드로이드 스튜디오를 설치한 후 새 프로젝트를 생성합니다. 아래의 설정을 선택하세요:

• 프로젝트 이름: ImageShareApp
• 패키지 이름: com.example.imageshareapp
• 언어: Kotlin
• 최소 API 레벨: API 21 (Lollipop)

2. Firebase 설정

이 앱은 Firebase를 통해 이미지 데이터를 저장하고 관리합니다. Firebase의 Realtime Database와 스토리지를 설정해야 합니다.

1. Firebase 콘솔에 로그인합니다.
2. 새 프로젝트를 생성합니다.
3. 프로젝트 설정에서 Android 앱을 추가하고 패키지 이름을 입력합니다.
4. google-services.json 파일을 다운로드하여 프로젝트의 app 디렉토리에 추가합니다.

이제 Firebase Realtime Database와 Firebase Storage를 활성화합니다.

Firebase Gradle 설정

프로젝트의 build.gradle 파일에 Firebase 종속성을 추가합니다:

dependencies {
    implementation platform("com.google.firebase:firebase-bom:30.0.0")
    implementation "com.google.firebase:firebase-storage"
    implementation "com.google.firebase:firebase-database"
}

3. UI 디자인

다음은 앱의 기본 레이아웃을 설계하는 방법입니다. activity_main.xml 파일을 열고 다음 코드를 추가하여 UI를 만듭니다:

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

    <Button
        android:id="@+id/button_upload"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="이미지 업로드"/>

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/button_upload">
    </ListView>

</RelativeLayout>

4. 이미지 선택 및 업로드

이미지를 선택하고 Firebase Storage에 업로드하기 위해 필요한 코드입니다. MainActivity.kt 파일에서 다음 코드를 추가하세요:

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.ListView
import androidx.appcompat.app.AppCompatActivity
import androidx.core.app.ActivityCompat
import com.google.firebase.storage.FirebaseStorage
import com.google.firebase.database.FirebaseDatabase

class MainActivity : AppCompatActivity() {

    private lateinit var storage: FirebaseStorage
    private lateinit var database: FirebaseDatabase
    private val IMAGE_PICK_CODE = 1000
    private var imageUri: Uri? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        storage = FirebaseStorage.getInstance()
        database = FirebaseDatabase.getInstance()

        findViewById(R.id.button_upload).setOnClickListener {
            pickImage()
        }
    }

    private fun pickImage() {
        val intent = Intent(Intent.ACTION_PICK)
        intent.type = "image/*"
        startActivityForResult(intent, IMAGE_PICK_CODE)
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == IMAGE_PICK_CODE && resultCode == RESULT_OK && data != null) {
            imageUri = data.data
            uploadImage()
        }
    }

    private fun uploadImage() {
        val fileRef = storage.reference.child("images/${System.currentTimeMillis()}.jpg")
        imageUri?.let { uri ->
            fileRef.putFile(uri).addOnSuccessListener { taskSnapshot ->
                // 성공적으로 업로드한 후 URL을 얻습니다.
                fileRef.downloadUrl.addOnSuccessListener { uri ->
                    saveImageUrlToDatabase(uri.toString())
                }
            }.addOnFailureListener { e ->
                // 오류 처리
            }
        }
    }

    private fun saveImageUrlToDatabase(imageUrl: String) {
        val imageRef = database.reference.child("images").push()
        imageRef.setValue(imageUrl)
    }
}

5. 이미지 목록 표시하기

업로드한 이미지를 ListView에 표시하기 위해 다음 코드를 추가합니다.

import android.widget.AdapterView
import android.widget.ArrayAdapter
import com.google.firebase.database.DataSnapshot
import com.google.firebase.database.DatabaseError
import com.google.firebase.database.ValueEventListener
import com.google.firebase.database.ktx.database
import com.google.firebase.ktx.Firebase

class MainActivity : AppCompatActivity() {
    // 생략...

    override fun onCreate(savedInstanceState: Bundle?) {
        // 생략...

        loadImageUrls()
    }

    private fun loadImageUrls() {
        database.reference.child("images").addValueEventListener(object : ValueEventListener {
            override fun onDataChange(snapshot: DataSnapshot) {
                val imageUrls = mutableListOf<String>()
                for (imageSnapshot in snapshot.children) {
                    val imageUrl = imageSnapshot.getValue(String::class.java)
                    imageUrls.add(imageUrl ?: "")
                }
                displayImages(imageUrls)
            }

            override fun onCancelled(error: DatabaseError) {
                // 오류 처리
            }
        })
    }

    private fun displayImages(imageUrls: List<String>) {
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, imageUrls)
        findViewById<ListView>(R.id.list_view).adapter = adapter
    }
}

6. 앱 실행하기

코드가 모두 준비되면, 앱을 실행해 보세요. 이미지 업로드와 목록 표시 기능이 잘 작동하는지 확인합니다. 문제가 발생하면 Logcat을 통해 오류를 확인하세요.

7. 앱 개선하기

기본 이미지 공유 앱을 만든 후, 아래와 같은 기능을 추가하여 앱을 개선할 수 있습니다:

• 이미지 목록을 썸네일 형태로 표시하기
• 이미지 선택 시 미리보기 기능 추가하기
• 사용자 인증을 추가하여 개인화된 이미지 공유 기능 구현하기
• 앱 UI/UX 개선하기

결론

이번 강의를 통해 코틀린을 활용한 간단한 이미지 공유 앱을 만드는 과정을 살펴보았습니다. Firebase를 활용하면 서버 구축 없이 데이터를 쉽게 저장하고 관리할 수 있습니다. 더 나아가 다양한 기능을 추가하여 지속적으로 개선해 나갈 수 있습니다. 이 강의가 여러분의 안드로이드 앱 개발 여정에 도움이 되길 바랍니다.