[Swift] Xcode 앱 개발 시 옵셔널 언래핑 방법

승민·2024년 11월 25일

swift

iOS

목록 보기

10/12

알아야 할 점

본 문서는 iOS 프로그래밍 강의 내용을 중심으로 작성되었어요.
이전 내용을 모르면 이해가 어려울 수 있어요.
앞으로도 계속 내용을 추가할 예정이에요.

목적

이전 BMI 앱의 설정을 더 해볼거에요.
아이폰에서 입력 받아 처리하는 과정을 더 알아볼거에요.

학습 순서

Auto Layout → 기능 구현 → Tab Bar Controller

1. `Auto Layout`

Auto Layout은 Xcode에서 iOS와 macOS 애플리케이션에서 UI 요소들의 위치와 크기를 제어하는 기능이에요.

1 - 1. `Auto Layout` 란?

Auto Layout은 View 간의 제약 조건을 이용해서 UI를 구성해요.
이를 통해 화면이 크거나 작은 디바이스에서 UI 요소들이 어떻게 배치될지 자동으로 계산해요.
Auto Layout은 상대적인 레이아웃을 제공한다는 특징이 있어요.

1 - 2. 미사용 시 문제점

Layout이 아무런 제약 없이 존재하는 경우 View가 겹칠 수 있다는 경고 문구를 나타내요.

아래 그림과 같이 세로 화면을 디자인 했지만 가로 화면으로 회전 시켰을 때 원하는 디자인으로 나타나지 않아요.

1 - 3. 기본 원리

Auto Layout에서 제약 조건은 다음과 같이 있어요.

제약의 종류

위치 제약 (Position Constraints)
크기 제약 (Size Constraints)
비율 제약 (Aspect Ratio Constraints)

우선순위(Priority)

필수 제약(Required)
선택 제약 (Low Priority)

2. 기능 구현

이제 디자인을 이용해서 기능을 구현해볼게요.

2 - 1. 연결

다음과 같이 Ctrl + 드래그로 설정해줘요.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var lblReult: UILabel!
    @IBOutlet weak var txtHeight: UITextField!
    @IBOutlet weak var txtWeight: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

연결이 제대로 되어있는지 확인하고 싶은 경우에는 다음과 같이 이동해서 확인할 수 있어요.

View Controller 클릭 → 우측 아이콘 클릭 → 연결 상태 확인

다음과 같이 버튼까지 추가하면 연결은 끝나요.

2 - 2. 함수 설정 : 임의값

이전의 연결을 통해 BMI 계산 버튼을 누르면 calcBmi 함수를 실행하도록 설정했어요.

기능 구현의 정확도를 높이기 위해 임의의 값을 지정하고 주요 기능만 먼저 구현해요.

@IBAction func calcBmi(_ sender: UIButton) {
        let weight = 60.0
        let height = 170.0
        
        let bmi = weight / (height * height * 0.0001) // kg/m²
        let shortenedBmi = String(format: "%.1f", bmi)
        var body = ""
        
        if bmi >= 40 {
            body = "3단계 비만"
        } else if bmi >= 30 && bmi < 40 {
            body = "2단계 비만"
        } else if bmi >= 25 && bmi < 30 {
            body = "1단계 비만"
        } else if bmi >= 18.5 && bmi < 25 {
            body = "정상"
        } else {
            body = "저체중"
        }
        
        print("BMI: \(shortenedBmi), 판정: \(body)")
    }

실행 후에 버튼을 눌렀을 때 콘솔 창에 정상적으로 값이 출력되는지 확인해요.

정상적으로 출력되었다면 이제 값을 입력 받아서 출력하도록 코드를 수정해요.

만약 다음과 같이 코드를 작성한다면 주의할 점이 있어요.

let height = Double(txtHeight.text!)!
let weight = Double(txtWeight.text!)!

느낌표(!)를 통한 강제 언래핑을 하는 경우 느낌표가 2번 사용되는 것이 정상적이에요.

그 이유는 txtHeight.text는 String? 형으로 옵셔널이에요.

옵셔널을 느낌표를 통해 강제 언래핑한 상태에요.

Double(...)!의 경우 문자열을 Double형으로 형변환하고 있기 때문에 Swift에서는 실패하는 경우를 대비하고 있어요.

바로 옵셔널로 반환하는 것이죠.

때문에 형변환을 하는 경우에도 옵셔널을 언래핑해줘야 해요.

따라서 입력받은 값의 언래핑과 형변환의 언래핑으로 총 두 번의 느낌표를 사용해야 컴파일 시 에러가 발생하지 않아요.

2 - 3. 함수 설정 : 입력 값

이제 입력 받은 값을 계산할 수 있도록 수정할거에요.
주의할 점은 아무 값도 입력하지 않고 버튼을 누르는 경우 에러가 발생할 수 있기 때문에 따로 처리해야 해요.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var lblReult: UILabel!
    
    @IBOutlet weak var txtHeight: UITextField!
    @IBOutlet weak var txtWeight: UITextField!
    
    @IBAction func calcBmi(_ sender: UIButton) {
        if txtHeight.text == "" || txtWeight.text == "" {
            lblReult.textColor = .red
            lblReult.text = "키와 체중을 입력하세요!"
            return
        } else {
            let weight = 60.0
            let height = 170.0
            
            let bmi = weight / (height * height * 0.0001) // kg/m²
            let shortenedBmi = String(format: "%.1f", bmi)
            var body = ""
            
            if bmi >= 40 {
                body = "3단계 비만"
            } else if bmi >= 30 && bmi < 40 {
                body = "2단계 비만"
            } else if bmi >= 25 && bmi < 30 {
                body = "1단계 비만"
            } else if bmi >= 18.5 && bmi < 25 {
                body = "정상"
            } else {
                body = "저체중"
            }
            
            print("BMI: \(shortenedBmi), 판정: \(body)")
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}

이제 값을 입력해서 정상적으로 실행되는지 확인해요.

2 - 4. 출력 결과 디자인

이제 입력된 값에 따라서 다양한 결과 디자인을 나타내도록 해볼게요.
colorUI를 통해 색을 지정하고 라벨의 backgroundColor 를 통해 적용할 수 있어요.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var lblReult: UILabel!
    
    @IBOutlet weak var txtHeight: UITextField!
    @IBOutlet weak var txtWeight: UITextField!
    
    @IBAction func calcBmi(_ sender: UIButton) {
        if txtHeight.text == "" || txtWeight.text == "" {
            lblReult.textColor = .red
            lblReult.text = "키와 체중을 입력하세요!"
            return
        } else {
            let weight = 60.0
            let height = 170.0
            
            let bmi = weight / (height * height * 0.0001) // kg/m²
            let shortenedBmi = String(format: "%.1f", bmi)
            var body = ""
            var color = UIColor.white
            if bmi >= 40 {
                color = UIColor(displayP3Red: 1.0, green: 0.0, blue: 0.0, alpha: 1.0)
                body = "3단계 비만"
            } else if bmi >= 30 && bmi < 40 {
                color = UIColor(displayP3Red: 0.7, green: 0.0, blue: 0.0, alpha: 1.0)
                body = "2단계 비만"
            } else if bmi >= 25 && bmi < 30 {
                color = UIColor(displayP3Red: 0.4, green: 0.0, blue: 0.0, alpha: 1.0)
                body = "1단계 비만"
            } else if bmi >= 18.5 && bmi < 25 {
                color = UIColor(displayP3Red: 0.0, green: 0.0, blue: 1.0, alpha: 1.0)
                body = "정상"
            } else {
                color = UIColor(displayP3Red: 0.0, green: 1.0, blue: 0.0, alpha: 1.0)
                body = "저체중"
            }
            lblReult.backgroundColor = color
            lblReult.layer.cornerRadius = 10
            lblReult.clipsToBounds = true
            lblReult.text = "BMI: \(shortenedBmi), 판정: \(body)"
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
}