SwiftUI로 만드는 미니 프로젝트

SwiftUI로 만드는 미니 프로젝트

SwiftUI는 간결한 코드와 선언적 문법으로 다양한 미니 프로젝트를 손쉽게 만들 수 있는 강력한 UI 프레임워크입니다.

이 글에서는 SwiftUI를 활용하여 간단한 미니 프로젝트 아이디어와 구현 방법을 소개합니다.

---

1. 할 일 목록(To-Do List) 앱

주요 기능

• 사용자가 새로운 할 일을 추가하고 삭제할 수 있는 기능.
• 완료된 할 일에 체크 표시.

구현 방법

• List와 @State 변수를 사용하여 동적인 데이터 관리를 수행합니다.

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var isCompleted: Bool
}

struct TodoListView: View {
    @State private var todos = [TodoItem(title: "Swift 공부", isCompleted: false)]
    @State private var newTodo = ""

    var body: some View {
        VStack {
            HStack {
                TextField("할 일을 입력하세요", text: $newTodo)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                Button("추가") {
                    if !newTodo.isEmpty {
                        todos.append(TodoItem(title: newTodo, isCompleted: false))
                        newTodo = ""
                    }
                }
            }.padding()
            
            List {
                ForEach(todos) { todo in
                    HStack {
                        Text(todo.title)
                        Spacer()
                        if todo.isCompleted {
                            Image(systemName: "checkmark.circle")
                        }
                    }
                    .onTapGesture {
                        if let index = todos.firstIndex(where: { $0.id == todo.id }) {
                            todos[index].isCompleted.toggle()
                        }
                    }
                }
                .onDelete { indexSet in
                    todos.remove(atOffsets: indexSet)
                }
            }
        }
    }
}

---

2. 간단한 타이머 앱

주요 기능

• 시작, 일시정지, 초기화 버튼.
• 실시간으로 시간 업데이트.

구현 방법

• Timer와 @State 변수를 활용하여 타이머 기능을 구현합니다.

struct TimerView: View {
    @State private var timeCount: Int = 0
    @State private var timerRunning: Bool = false
    var timer = Timer.publish(every: 1, on: .main, in: .common).autoconnect()

    var body: some View {
        VStack {
            Text("\(timeCount) 초")
                .font(.largeTitle)
                .padding()

            HStack {
                Button(action: { timerRunning = true }) {
                    Text("시작")
                }
                .padding()

                Button(action: { timerRunning = false }) {
                    Text("일시정지")
                }
                .padding()

                Button(action: {
                    timerRunning = false
                    timeCount = 0
                }) {
                    Text("초기화")
                }
                .padding()
            }
        }
        .onReceive(timer) { _ in
            if timerRunning {
                timeCount += 1
            }
        }
    }
}

---

3. 간단한 계산기 앱

주요 기능

• 기본 사칙연산(덧셈, 뺄셈, 곱셈, 나눗셈).
• 결과 실시간 출력.

구현 방법

• @State를 사용하여 계산 결과를 관리합니다.

struct CalculatorView: View {
    @State private var input1: String = ""
    @State private var input2: String = ""
    @State private var result: Double? = nil

    var body: some View {
        VStack {
            HStack {
                TextField("숫자 1", text: $input1)
                    .keyboardType(.decimalPad)
                    .textFieldStyle(RoundedBorderTextFieldStyle())

                TextField("숫자 2", text: $input2)
                    .keyboardType(.decimalPad)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
            }.padding()

            HStack {
                Button("+") { calculate { $0 + $1 } }
                Button("-") { calculate { $0 - $1 } }
                Button("*") { calculate { $0 * $1 } }
                Button("/") { calculate { $1 != 0 ? $0 / $1 : nil } }
            }.padding()

            if let result = result {
                Text("결과: \(result)")
                    .font(.title)
                    .padding()
            }
        }
    }

    private func calculate(_ operation: (Double, Double) -> Double?) {
        if let num1 = Double(input1), let num2 = Double(input2) {
            result = operation(num1, num2)
        } else {
            result = nil
        }
    }
}

---

결론

SwiftUI로 미니 프로젝트를 진행하면 iOS 개발의 기초와 다양한 UI 구성 요소에 대한 이해를 빠르게 높일 수 있습니다.

위 예제들을 활용하여 나만의 앱을 만들어 보시기 바랍니다.