[UIKit] Storyboard로 간단한 앱 만들기 (1) - 업다운 앱

https://www.inflearn.com/course/ios-uikit-15apps/dashboard

앨런 iOS 앱 개발 (15개의 앱을 만들면서 근본원리부터 배우는 UIKit) - MVVM까지 | 앨런(Allen) - 인프런

 

이번 시간에는 StoryBoard를 활용해서 간단한 업다운 앱을 만들어보려고 한다.

인프런 앨런님의 iOS 앱 개발 강의를 따라가며 공부하는 중이다.

얼른 익혀서 이번 자율 프로젝트에 UIKit로 앱을 만들어 보려 한다!

 

CLI (맥 앱) 만들기

앱을 만들기 전에 맥 앱부터 만들어보자.

참고로 String을 Int로 변환해도 Optional Int 타입으로 변환된다.

숫자로 변환될 수도 있지만, "asdf"같은 문자는 변환할 수 없기 때문이다.

따라서 if let을 써주었다.

import Foundation

var computerChoice = Int.random(in: 1...100)
var myChoice: Int = 0

while true {
    var userInput: String? = readLine()
    
    if let input = userInput {
        if let number = Int(input) {
            myChoice = number
        }
    }
    
    print(myChoice)
    
    if computerChoice > myChoice {
        print("up")
    } else if computerChoice < myChoice {
        print("down")
    } else {
        print("Bingo")
        break
    }
}

 

 

iOS 앱 만들기

 

 

AutoLayout을 활용하며 코드 한 줄 없이 디자인을 할 수 있다는 사실을 알았다.. 미쳤다..

이제 논리를 구성하고 코드로 기능을 구현해보자.

 

아이폰 시뮬레이터를 실행시킨 후, Control + Option + Command + Enter를 누르면

아래와 같은 첫 화면이 나온다.

 

 

여기서 viewDidLoad란 앱의 화면에 들어오면 가장 처음에 실행되는 함수다.

 

앱을 하나씩 연결해보자.

먼저 두개의 Label을 각각 누른 뒤 Control을 누른 채로 코드로 드래그해서 변수를 만들어주자.

이름은 mainLabel, numberLabel로 지었다.

 

 

이제 초록 버튼을 하나하나 연결을 해야 한다.

아래처럼 만들었는데, 10개의 버튼을 모두 연결시키기는 힘들다.

게다가 버튼의 성격도 유사하다.

하나의 함수에 버튼을 여러 개 연결시키는 방법을 사용해보자.

 

 

이 함수 옆에 있는 동그라미를 각각의 버튼에 연결시켜주면,

어떤 버튼을 누르던buttonTapped 함수가 실행된다.

 

 

Select 버튼과 Reset 버튼도 동일하게 함수를 만들어보자.

 

이제 기본적인 세팅을 마쳤고,

각자의 함수의 위치에서 뭘 하면 될까를 생각해보자.

대략적으로 다음과 같이 생각해볼 수 있다.

 

위 기능들을 구현한 코드는 다음과 같다.

import UIKit

class ViewController: UIViewController {

    
    @IBOutlet weak var mainLabel: UILabel!
    @IBOutlet weak var numberLabel: UILabel!
    
    // 컴퓨터가 랜덤으로 숫자 선택 (1...10)
    var comNumber = Int.random(in: 1...10)
    // 내가 선택한 숫자를 담는 변수
//    var myNumber: Int = 1
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 1) 메인 레이블에 "선택하세요"
        mainLabel.text = "선택하세요"
        // 2) 숫자 레이블은 ""
        numberLabel.text = ""

    }

    @IBAction func buttonTapped(_ sender: UIButton) {
        // 1) 버튼의 숫자를 가져와야 함
        guard let numString = sender.currentTitle else { return }
        
        // 2) 숫자 레이블이 변하도록 (숫자에 따라)
        numberLabel.text = numString
        
        // 3) 선택한 숫자를 변수에다가 저장 (선택)
//        guard let num = Int(numString) else { return }
//        myNumber = num
    }
    
    @IBAction func selectButtonTapped(_ sender: UIButton) {
        // 또 다른 방법 제시
        // 숫자 레이블에 있는 문자열 가져오기
        guard let myNumString = numberLabel.text else { return }
        // 타입 변환 (문자열 --> 정수로)
        guard let myNumber = Int(myNumString) else { return }
        
        // 1) 컴퓨터의 숫자와 내가 선택한 숫자를 비교 UP / DOWN / BINGO (메인 레이블)
        if comNumber > myNumber {
            mainLabel.text = "Up"
        } else if comNumber < myNumber {
            mainLabel.text = "Down"
        } else {
            mainLabel.text = "Bingo😃"
        }
    }
    
    
    @IBAction func resetButtonTapped(_ sender: UIButton) {
        // 1) 메인 레이블 "선택하세요"
        mainLabel.text = "선택하세요"
        
        // 2) 숫자 레이블을 "" (빈 문자열)
        numberLabel.text = ""
        
        // 3) 컴퓨터의 랜덤 숫자를 다시 선택하게
        comNumber = Int.random(in: 1...10)

    }
}

 

잘 작동한다~!

 

 

이렇게 간단한 업다운 앱을 만들어봤다.

지금까지는 오토 레이아웃이나 기능 구현이 그렇게 어렵지 않다.

얼른 배워서 프로젝트 만들어보자!