SwiftUI 예제 튜토리얼: '좋아요' 버튼 만들기

SwiftUI 예제 튜토리얼: 간단한 '좋아요' 버튼 UI를 만들며 핵심 개념을 실습하세요. @State, 스택, 버튼, 이미지, 텍스트 활용법을 단계별 코드로 익힙니다.

 

지금까지 Swift 언어의 기본 문법과 SwiftUI의 개요, 개발 환경, 기본 프로젝트 구조, 그리고 상태 관리의 기초까지 학습했습니다. 이제 머리로만 알던 지식을 손으로 직접 코딩하며 익힐 차례입니다! SwiftUI는 직접 코드를 작성하고 결과를 즉시 확인하는 과정을 통해 가장 빠르게 배울 수 있습니다.

 

이번 글에서는 이전 글들에서 배운 개념들을 활용하여 간단하지만 실제 앱에 적용될 법한 UI 요소인 '좋아요' 버튼을 만들어 보는 튜토리얼을 진행하겠습니다. 이 튜토리얼을 통해 @State를 사용한 상태 관리, 스택을 이용한 레이아웃, 버튼/이미지/텍스트 뷰의 기본 사용법을 복습하고 실습할 수 있습니다.

 

어떤 UI를 만들어 볼까요?

우리가 만들어 볼 '좋아요' 버튼 UI는 다음과 같은 기능을 가집니다.

1. 하트 모양의 아이콘과 '좋아요' 수를 보여주는 텍스트 레이블이 함께 표시됩니다.
2. 버튼을 누르면 '좋아요' 수가 1씩 증가합니다.
3. '좋아요' 수가 0보다 크면 하트 아이콘이 빨간색으로 표시되고, 0이면 회색으로 표시됩니다.

이 UI를 만들기 위해 @State, VStack, HStack, Image, Text, Button 뷰와 몇 가지 뷰 수정자를 사용할 것입니다.

새 SwiftUI 프로젝트 생성하기

먼저 Xcode에서 새로운 SwiftUI 프로젝트를 생성해야 합니다. 이전 글 "SwiftUI 모드로 Xcode 이용하기"를 참고하여 다음 단계에 따라 진행합니다.

1. Xcode 실행
2. File > New > Project... 선택
3. iOS 탭에서 App 템플릿 선택 후 Next
4. Product Name: LikeButtonTutorial (또는 원하는 이름)
5. Interface: SwiftUI
6. Life Cycle: SwiftUI App
7. Language: Swift
8. Next 클릭 후 프로젝트 저장

프로젝트가 생성되면 Xcode 창에 기본 파일들이 나타날 것입니다. 우리는 ContentView.swift 파일을 주로 수정하며 작업할 것입니다.

ContentView 수정하기

ContentView.swift 파일을 엽니다. 기본적으로 Text("Hello, world!")와 Image(systemName: "globe")를 포함하는 간단한 VStack 코드가 보일 것입니다. 이 코드를 수정하여 우리의 '좋아요' 버튼 UI를 만들어 나갑니다.

1. 상태 변수 (@State) 추가

'좋아요' 수를 저장하고 이 값이 변경될 때 UI가 자동으로 업데이트되도록 @State 변수를 사용합니다.

import SwiftUI

struct ContentView: View {
    // 좋아요 수를 저장할 상태 변수. 초기값은 0입니다.
    @State private var likedCount = 0

    var body: some View {
        // ... 여기에 UI 코드를 작성합니다.
    }
}

#Preview {
    ContentView()
}

@State private var likedCount = 0 코드를 ContentView 구조체 내부에 추가합니다. private는 이 상태가 ContentView 내부에서만 사용됨을 의미하며, @State는 SwiftUI에게 이 변수의 변화를 감지하고 뷰를 업데이트하도록 지시합니다.

2. 뷰 구조 만들기 (스택, 이미지, 텍스트, 버튼)

이제 body 내부에 하트 아이콘, 좋아요 수 텍스트, 그리고 버튼을 배치하는 코드를 작성합니다. VStack 안에 HStack을 넣어서 아이콘과 텍스트를 가로로 나란히 배치하고, 그 아래에 버튼을 세로로 배치하는 구조를 만들겠습니다.

ContentView의 body 부분을 다음과 같이 수정합니다.

import SwiftUI

struct ContentView: View {
    @State private var likedCount = 0

    var body: some View {
        VStack(spacing: 20) { // 전체를 세로로 배치하고 간격 20
            HStack { // 하트 아이콘과 카운트 텍스트를 가로로 배치
                // 하트 아이콘 (색상은 아래에서 동적으로 변경 예정)
                Image(systemName: "heart.fill")
                    .imageScale(.large) // 이미지 크기 조정

                // 좋아요 수 텍스트 (likedCount 상태 변수 값 표시)
                Text("\(likedCount)") // \(변수이름) 형태로 변수 값을 텍스트에 포함
                    .font(.title) // 폰트 크기 조정
            } // HStack 종료

            // '좋아요' 버튼
            Button("좋아요") {
                // 버튼이 눌렸을 때 실행될 코드 (클로저)
                likedCount += 1 // likedCount 상태 변수 값을 1 증가시킵니다.
            } // Button 종료
        } // VStack 종료
        .padding() // VStack 전체에 패딩 적용
    }
}

#Preview {
    ContentView()
}

코드를 저장하고 Xcode 미리보기 캔버스(필요시 Resume 클릭)를 확인해 보세요. 화면에 하트 아이콘, 숫자 0, 그리고 '좋아요' 버튼이 표시될 것입니다. 미리보기 캔버스의 하단에 있는 재생 버튼을 눌러 실시간 미리보기 모드로 전환한 후 '좋아요' 버튼을 여러 번 눌러보세요. 숫자 값이 증가하는 것을 볼 수 있습니다! @State 변수인 likedCount의 값이 변경될 때마다 SwiftUI가 자동으로 Text("\(likedCount)") 부분을 업데이트하기 때문입니다.

3. 아이콘 색상 동적으로 변경하기

이제 likedCount 값에 따라 하트 아이콘의 색상이 바뀌도록 만듭니다. Image 뷰의 .foregroundColor() 수정자에 조건을 적용합니다.

import SwiftUI

struct ContentView: View {
    @State private var likedCount = 0

    var body: some View {
        VStack(spacing: 20) {
            HStack {
                Image(systemName: "heart.fill")
                    .imageScale(.large)
                    // 좋아요 수가 0보다 크면 빨간색, 아니면 회색
                    .foregroundColor(likedCount > 0 ? .red : .gray) // <-- 이 부분 추가/수정
                    .animation(.easeIn, value: likedCount) // (선택 사항) 색상 변경 시 애니메이션 추가

                Text("\(likedCount)")
                    .font(.title)
            }

            Button("좋아요") {
                likedCount += 1
            }
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

.foregroundColor(likedCount > 0 ? .red : .gray) 코드는 삼항 조건 연산자를 사용하여 likedCount가 0보다 크면 색상을 .red로, 그렇지 않으면 .gray로 설정합니다. .animation(.easeIn, value: likedCount)는 likedCount 값이 변경될 때 색상 변화에 부드러운 애니메이션 효과를 추가하는 선택적인 수정자입니다.

실시간 미리보기 모드에서 다시 버튼을 눌러보세요. 이제 좋아요 수가 1 이상이 되는 순간 하트 아이콘이 빨간색으로 변하는 것을 확인할 수 있습니다!

최종 ContentView 코드 확인하기

지금까지 작성한 ContentView.swift 파일의 전체 코드는 다음과 같습니다.

import SwiftUI

struct ContentView: View {
    // 좋아요 수를 저장하고 변화를 추적하는 상태 변수
    @State private var likedCount = 0

    var body: some View {
        // 전체 레이아웃을 세로 스택으로 구성
        VStack(spacing: 20) {
            // 아이콘과 좋아요 수를 가로로 나란히 배치하는 스택
            HStack {
                // 하트 아이콘 뷰
                Image(systemName: "heart.fill")
                    .imageScale(.large)
                    // 좋아요 수에 따라 아이콘 색상 동적 변경 (빨간색 또는 회색)
                    .foregroundColor(likedCount > 0 ? .red : .gray)
                    // 좋아요 수 변화에 따른 색상 변경 애니메이션 적용
                    .animation(.easeIn, value: likedCount) // iOS 13+

                // 좋아요 수를 표시하는 텍스트 뷰
                Text("\(likedCount)")
                    .font(.title)
            } // HStack 종료

            // 좋아요 수를 증가시키는 버튼 뷰
            Button("좋아요") {
                // 버튼 클릭 시 실행될 클로저 (액션)
                likedCount += 1 // 상태 변수 값 변경
            } // Button 종료
        } // VStack 종료
        .padding() // VStack 전체에 패딩 적용
    }
}

// Xcode 미리보기 캔버스에서 뷰를 보여주기 위한 코드 (실제 앱에 포함되지 않음)
#Preview {
    ContentView()
}

Xcode 미리보기와 실행

Xcode 미리보기 캔버스에서 실시간 미리보기 모드를 활용하여 UI의 동작을 직접 확인해보세요. 더 나아가, 상단 스킴 영역에서 시뮬레이터를 선택하고 재생 버튼(▶︎)을 눌러 시뮬레이터에서 앱을 실행해 볼 수도 있습니다. 시뮬레이터에서도 동일하게 버튼이 동작하며 상태 변화에 따라 UI가 업데이트되는 것을 확인하면 튜토리얼 성공입니다!

튜토리얼 요약 및 학습 내용 되짚어보기

이번 간단한 '좋아요' 버튼 튜토리얼을 통해 우리는 다음 SwiftUI 핵심 개념들을 실습했습니다.

• @State 프로퍼티 래퍼: 뷰의 상태를 선언하고 관리하며, 상태 변경이 자동 UI 업데이트로 이어지는 것을 확인했습니다.
• VStack과 HStack: 여러 뷰를 세로나 가로로 배치하여 레이아웃을 구성하는 방법을 사용했습니다.
• Image, Text, Button: 가장 기본적인 SwiftUI 뷰들을 사용하여 시각적인 요소와 사용자 상호작용을 구현했습니다.
• 뷰 수정자: .foregroundColor(), .font(), .padding(), .animation() 등 뷰의 모양과 동작을 변경하는 수정자들을 적용했습니다.
• 상태 기반 UI: @State 값에 따라 Text와 Image의 색상이 동적으로 변하도록 하여, 상태가 UI를 결정하는 SwiftUI의 방식을 경험했습니다.

마무리

축하합니다! 간단하지만 상태 관리와 레이아웃, 상호작용이 포함된 기본적인 SwiftUI UI를 성공적으로 만들어 보았습니다. 이 예제는 SwiftUI 앱 개발의 기본 원리인 상태 기반 UI와 뷰 조합(Composition)을 명확하게 보여줍니다.

이 튜토리얼의 코드를 기반으로 자유롭게 수정하고 확장해보세요. 이미지나 텍스트를 다른 것으로 바꿔보거나, @State 변수를 추가하여 다른 UI 요소의 상태를 변경해보거나, .frame() 수정자를 추가하여 뷰들의 크기를 조절해보는 등 다양한 시도를 해보면 SwiftUI에 대한 이해도를 더욱 높일 수 있습니다. 계속해서 직접 코딩하며 SwiftUI의 즐거움을 느껴보시길 바랍니다!