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

SwiftUI는 iOS 13부터 도입된 새로운 UI 프레임워크로, 간결하고 직관적인 코드로 UI를 구성할 수 있습니다. 이번에는 SwiftUI를 활용하여 간단한 계산기 앱을 만들어 보면서 SwiftUI의 기본적인 사용법을 익혀보도록 하겠습니다.

1. Xcode 프로젝트 생성

• Xcode를 실행하고, 새로운 프로젝트를 생성합니다.
• 템플릿에서 "App"을 선택하고, 언어는 "Swift"를 선택합니다.
• 프로젝트 이름과 저장 위치를 설정하고, "Create" 버튼을 클릭합니다.

2. ContentView.swift 파일 수정

• 생성된 프로젝트에서 ContentView.swift 파일을 열어 다음과 같이 코드를 작성합니다.

import SwiftUI

struct ContentView: View {
    @State private var input = ""
    @State private var result = "0"

    var body: some View {
        VStack {
            Text(result)
                .font(.largeTitle)
                .padding()
            
            HStack {
                ForEach(0..<10, id: \.self) { number in
                    Button(String(number)) {
                        input += String(number)
                        calculate()
                    }
                    .frame(width: 50, height: 50)
                }
            }
            // ... (나머지 버튼들 추가)
        }
    }

    func calculate() {
        // 계산 로직 구현
        // ...
    }
}

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

 

3. 코드 설명

• @State: input과 result 변수를 선언하고, 값이 변경될 때마다 View를 다시 그리도록 합니다.
• VStack, HStack: View를 수직 또는 수평으로 배치합니다.
• ForEach: 숫자 버튼을 반복적으로 생성합니다.
• Button: 버튼을 생성하고, 클릭 시 calculate() 함수를 호출합니다.
• calculate() 함수: 실제 계산 로직을 구현하는 함수입니다.

4. 계산 로직 구현

calculate() 함수에 계산 로직을 구현합니다. 예를 들어, 입력된 문자열을 계산하여 결과를 result 변수에 저장하는 방식으로 구현할 수 있습니다.

Swift

func calculate() {
    // 입력 문자열을 계산하여 결과를 result에 저장
    guard let result = NSExpression(format: input).expressionValue(with: nil, context: nil) as? Double else {
        return
    }
    self.result = String(result)
}

코드를 사용할 때는 주의가 필요합니다.

 

5. 추가 기능 구현

• 연산자 버튼: +, -, *, / 등의 연산자 버튼을 추가하고, 입력된 수식을 계산하도록 구현합니다.
• 소수점 버튼: 소수점을 입력할 수 있는 버튼을 추가합니다.
• AC 버튼: 모든 입력을 초기화하는 버튼을 추가합니다.
• 삭제 버튼: 마지막 입력 문자를 삭제하는 버튼을 추가합니다.
• 우선순위 계산: 괄호를 사용하여 복잡한 수식을 계산할 수 있도록 구현합니다.

6. 디자인 커스터마이징

• 색상: Color 프로퍼티를 사용하여 버튼, 텍스트 등의 색상을 변경할 수 있습니다.
• 폰트: Font 프로퍼티를 사용하여 폰트를 변경할 수 있습니다.
• 레이아웃: Spacer, VStack, HStack 등을 사용하여 레이아웃을 조정할 수 있습니다.

주의사항:

• 안전성: 사용자가 잘못된 입력을 할 경우 예외 처리를 해주어야 합니다.
• 성능: 복잡한 계산을 할 경우 성능 저하가 발생할 수 있으므로 최적화가 필요합니다.
• UI 디자인: 사용자 인터페이스를 직관적이고 사용하기 편리하게 디자인해야 합니다.

더 나아가기

• Dark Mode: Dark Mode를 지원하도록 코드를 수정합니다.
• 테스트: 다양한 입력값에 대해 테스트를 진행하여 오류를 수정합니다.
• Localization: 다국어 지원을 위해 Localization을 설정합니다.
• Accessibility: 시각 장애인을 위한 Accessibility 기능을 추가합니다.

SwiftUI는 간결하고 직관적인 코드로 강력한 UI를 구현할 수 있는 프레임워크입니다. 이 튜토리얼을 통해 SwiftUI의 기본적인 사용법을 익히고, 더욱 복잡하고 다양한 앱을 개발할 수 있도록 발전시켜 나가시기 바랍니다.

참고: 위 코드는 간단한 예시이며, 실제 앱 개발에서는 더욱 복잡하고 다양한 기능을 구현해야 합니다.