SwiftUI로 간단한 계산기 앱 만들기

작성일 : 2024-07-13

SwiftUI로 간단한 계산기 앱 만들기

SwiftUI는 Apple이 제공하는 사용자 인터페이스 프레임워크로, 코드를 통해 쉽고 직관적으로 앱 인터페이스를 설계할 수 있습니다. 이번 글에서는 SwiftUI를 통해 간단한 계산기 앱을 만들어보겠습니다. 이 글은 SwiftUI에 대한 기본 지식을 가지고 있다고 가정합니다.

프로젝트 생성 및 기본 설정

Xcode에서 새로운 프로젝트 생성하기: Xcode를 열고 새 프로젝트 생성을 클릭합니다. 앱 템플릿을 선택하고 다음을 클릭한 후, 프로젝트 이름과 기타 설정을 완료합니다.
SwiftUI 선택하기: 인터페이스에서 SwiftUI를 선택하고, 프로젝트가 생성되면 ContentView.swift 파일이 기본적으로 포함되어 있을 것입니다.

UI 구성 요소 작성

간단한 계산기 앱의 UI를 설계하면서 필요한 구성 요소는 다음과 같습니다:

출력 레이블 (계산 결과를 표시)
숫자 버튼 (0-9)
연산자 버튼 (+, -, *, /, =)
기타 기능 버튼 (클리어)


swift
import SwiftUI

struct ContentView: View {
    @State private var display: String = "0"

    var body: some View {
        VStack {
            Text(display)
                .font(.largeTitle)
                .padding()

            Spacer()

            VStack {
                HStack {
                    CalculatorButton(label: "7") { addToDisplay("7") }
                    CalculatorButton(label: "8") { addToDisplay("8") }
                    CalculatorButton(label: "9") { addToDisplay("9") }
                    CalculatorButton(label: "/") { addOperator("/") }
                }
                HStack {
                    CalculatorButton(label: "4") { addToDisplay("4") }
                    CalculatorButton(label: "5") { addToDisplay("5") }
                    CalculatorButton(label: "6") { addToDisplay("6") }
                    CalculatorButton(label: "*") { addOperator("*") }
                }
                HStack {
                    CalculatorButton(label: "1") { addToDisplay("1") }
                    CalculatorButton(label: "2") { addToDisplay("2") }
                    CalculatorButton(label: "3") { addToDisplay("3") }
                    CalculatorButton(label: "-") { addOperator("-") }
                }
                HStack {
                    CalculatorButton(label: "0") { addToDisplay("0") }
                    CalculatorButton(label: "C") { clearDisplay() }
                    CalculatorButton(label: "=") { calculate() }
                    CalculatorButton(label: "+") { addOperator("+") }
                }
            }
            .padding()
        }
    }

    private func addToDisplay(_ value: String) {
        if display == "0" {
            display = value
        } else {
            display.append(value)
        }
    }

    private func addOperator(_ op: String) {
        display.append(" ")
        display.append(op)
        display.append(" ")
    }

    private func clearDisplay() {
        display = "0"
    }

    private func calculate() {
        // 계산 로직을 여기에 추가합니다
    }
}

struct CalculatorButton: View {
    let label: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            Text(label)
                .font(.largeTitle)
                .frame(width: 70, height: 70)
                .background(Color.gray)
                .foregroundColor(.white)
                .cornerRadius(35)
                .padding(5)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

기능 구현

계산기의 각 버튼이 작동하도록 함수를 구현해야 합니다. 현재는 표시만 변경하고 있지만, 실제 계산을 수행하도록 몇 가지 추가적인 처리가 필요합니다.

계산 로직 구현

UI는 거의 완성되었으므로, 이제 실제로 계산할 수 있도록 로직을 추가합니다. calculate 함수를 다음과 같이 구현할 수 있습니다:


swift
private func calculate() {
    let components = display.split(separator: " ").map { String($0) }
    guard components.count == 3 else {
        return
    }

    let operand1 = Double(components[0]) ?? 0
    let operatorSymbol = components[1]
    let operand2 = Double(components[2]) ?? 0

    let result: Double
    switch operatorSymbol {
    case "+":
        result = operand1 + operand2
    case "-":
        result = operand1 - operand2
    case "*":
        result = operand1 * operand2
    case "/":
        guard operand2 != 0 else {
            display = "Error"
            return
        }
        result = operand1 / operand2
    default:
        return
    }

    display = String(result)
}

초기화 및 추가 옵션 구현

clearDisplay 함수는 이미 구현되어 있으므로, 초기화 및 기타 옵션들을 조금 더 다듬을 수 있습니다. 필요한 경우 계산 결과를 저장하거나, 여러 연산을 지원할 수도 있습니다. 하지만 간단함을 유지하기 위해 여기서는 생략합니다.

마무리

이로써 SwiftUI를 사용하여 간단한 계산기 앱을 완성했습니다. 이 앱은 SwiftUI의 기본적인 사용 방법과 데이터를 바인딩하는 방법을 보여줍니다. 더 복잡한 기능을 추가하고 싶은 분들은 이 예제를 바탕으로 새로운 기능을 구현해보세요. SwiftUI의 강력한 기능을 활용하면 훨씬 더 복잡하고 멋진 인터페이스를 쉽게 만들 수 있습니다.