[Swift] Xcode 앱 만들고 분석하기

알아야 할 점

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

목적

• iOS 앱을 만드는 방법에 대해 알아볼거에요.
• 더 다양한 기능을 만들어보고, 앱 아이콘을 추가할 예정이에요.

학습 순서

기능 추가 → 사진 및 아이콘 설정

1. 기능 추가

이전에 만든 기능은 버튼을 눌러도 텍스트 필드(Text Field)의 값이 바뀌지 않아서 지우고 다시 써야하는 불편함이 있어요.
이제 초기화 버튼을 만들어서 더욱 편리하게 앱을 만들거에요.

또한, 다양한 기능을 알기 위해 증가, 감소 버튼을 만들어서 같이 적용해볼게요.

1 - 1. 프로젝트 불러오기

Xcode를 실행하고 아래 두 가지 방법 중 하나로 프로젝트를 불러와요.

• Xcode 실행 후 가져오기

가장 최근에 실행했던 프로젝트라면 Xcode 실행 시 바로 확인하고 실행할 수 있어요.

• 프로젝트 파일 바로 실행하기

또는 파일위치를 알고 있으면 프로젝트 파일 더블 클릭으로 바로 실행시킬 수 있어요.

1 - 2. 앱 버튼 배치 및 디자인

먼저 다음과 같이 버튼(Button)과 레이블(Label)을 추가해요.
버튼과 레이블은 우측 상단의 + 버튼을 통해 추가할 수 있어요.

1 - 3. 배치 요소 연결

이제 이전 주차 내용을 참고해서 요소를 연결해줘요.

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var lblNumber: UILabel!
    
    @IBOutlet weak var lblHello: UILabel!
    @IBOutlet weak var txtName: UITextField!
    
    @IBAction func btnUp(_ sender: UIButton) {

    }
    @IBAction func btnDown(_ sender: UIButton) {

    }
    
    @IBAction func btnSend(_ sender: UIButton) {
        lblHello.text = "Hi, " + txtName.text!
    }
    
    @IBAction func btnReset(_ sender: UIButton) {

    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

1 - 4. 코드 작성

각 부분에 맞게 코드를 작성하고 기능이 정상적으로 동작하는지 확인해요.

import UIKit

class ViewController: UIViewController {
    var x : Int = 0
    @IBOutlet weak var lblNumber: UILabel!
    
    @IBOutlet weak var lblHello: UILabel!
    @IBOutlet weak var txtName: UITextField!
    
    @IBAction func btnUp(_ sender: UIButton) {
        x += 1
        lblNumber.text = "\(x)" // 또는 String(x)
    }
    @IBAction func btnDown(_ sender: UIButton) {
        x -= 1
        lblNumber.text = "\(x)"
    }
    
    @IBAction func btnSend(_ sender: UIButton) {
        lblHello.text = "Hi, " + txtName.text!
    }
    
    @IBAction func btnReset(_ sender: UIButton) {
        lblHello.textColor = .systemOrange
        lblHello.text = "안녕하세요!"
        txtName.text = ""
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

실행해서 확인해요.

초기화 및 증가 감소 버튼도 기능을 확인해요.

잘 동작하는 것을 확인할 수 있어요.

1 - 5. UILabel 관련 함수 정리

추가적으로 도움이 될만한 UILabel에서 많이 사용하는 함수들이에요.

---

• text : 텍스트 내용 설정하기

UILabel의 가장 기본적인 속성으로, 표시할 텍스트를 설정하는 데 사용해요.

let label = UILabel()
label.text = "Hello, World!"

• font: 텍스트의 폰트 설정하기

텍스트의 폰트 스타일과 크기를 지정할 수 있어요.
UIFont를 사용해 폰트를 설정해요.

label.font = UIFont.systemFont(ofSize: 20)

• textColor: 텍스트 색상 설정하기

UILabel의 텍스트 색상을 변경하려면 textColor 속성을 사용해요.

label.textColor = UIColor.red

• textAlignment: 텍스트 정렬 설정하기

텍스트를 왼쪽, 가운데, 오른쪽으로 정렬할 수 있어요.

label.textAlignment = .center

• numberOfLines: 텍스트의 최대 줄 수 설정하기

텍스트가 여러 줄로 표시될 때 최대 줄 수를 지정할 수 있어요. 0으로 설정하면 텍스트가 제한 없이 여러 줄로 표시돼요.

label.numberOfLines = 2

• lineBreakMode: 텍스트 줄 바꿈 방식 설정하기

긴 텍스트가 잘릴 때, 텍스트가 어떻게 처리될지 결정하는 속성이에요. 예를 들어, 단어 단위로 줄을 바꾸거나, 줄임표(...)로 텍스트를 자를 수 있어요.

label.lineBreakMode = .byWordWrapping

• adjustsFontSizeToFitWidth: 텍스트 크기 자동 조정하기

UILabel의 너비에 맞게 텍스트의 폰트 크기를 자동으로 조정할 수 있어요. 텍스트가 잘리지 않도록 폰트 크기를 줄여주는 유용한 기능이에요.

label.adjustsFontSizeToFitWidth = true
label.minimumScaleFactor = 0.5  // 폰트 크기의 최소 비율 설정

• baselineAdjustment: 텍스트 기준선 조정하기

텍스트의 기준선을 위나 아래로 이동시킬 수 있는 속성이에요. 텍스트의 세부적인 위치를 조정하고 싶을 때 유용해요.

label.baselineAdjustment = .alignCenters

• shadowColor & shadowOffset: 텍스트 그림자 효과 적용하기

UILabel에 그림자 효과를 추가하여 텍스트를 더 강조하거나 입체감 있게 만들 수 있어요.

label.shadowColor = UIColor.gray
label.shadowOffset = CGSize(width: 2, height: 2)

• attributedText: 스타일이 적용된 텍스트 설정하기

attributedText를 사용하면 텍스트의 일부에 다른 스타일을 적용할 수 있어요. 예를 들어, 일부 텍스트에 굵은 글씨나 색상을 다르게 설정할 수 있어요.

let attributes: [NSAttributedString.Key: Any] = [
    .foregroundColor: UIColor.blue,
    .font: UIFont.boldSystemFont(ofSize: 18)
]
let attributedString = NSAttributedString(string: "Bold Blue Text", attributes: attributes)
label.attributedText = attributedString

• isEnabled: UILabel의 활성화 여부 설정하기

UILabel은 일반적으로 상호작용을 하지 않지만, 일부 상황에서는 isEnabled 속성을 통해 활성화 또는 비활성화 상태를 설정할 수 있어요.

label.isEnabled = false  // 텍스트는 보이지만 상호작용은 불가능

• highlightedTextColor: 강조 텍스트 색상 설정하기

UILabel이 강조 상태일 때 텍스트의 색상을 변경할 수 있는 속성이에요. 주로 사용자 상호작용 시 사용해요.

label.highlightedTextColor = UIColor.green

2. 사진 및 아이콘 설정

이제 앱에 사진과 아이콘을 추가해볼거에요.
이미지가 들어가면 사용자가 앱을 더욱 직관적이고 간편하게 사용할 수 있어요.

2 - 1. Assets

Xcode 프로젝트에서 아래 사진처럼 아이콘을 클릭하면 Assets 메뉴가 나타나요.

이제 위 사진의 파란 박스 부분에 원하는 이미지를 드래그 앤 드롭해서 다음과 같이 추가할 수 있어요.

2 - 2. 이미지 추가

이제 다시 Main으로 돌아와서 Image View를 추가하고 우측의 Inspector 창에서 Image를 클릭하면 불러온 이미지가 나타나요.
해당 이미지를 클릭해서 다음과 같이 추가해요.

---

주의할 점은 우측 Content Mode를 Aspect Fit으로 설정해서 종횡비가 바뀌지 않도록 지정해줘야 해요.

2 - 3. 아이콘 추가

아이콘 추가도 이미지 추가와 비슷한 방식으로 할 수 있어요.
먼저 1024 X 1024 크기의 아이콘 이미지를 구한 후에 AppIcon 부분에 드래그 앤 드롭 해주면 끝나요.

정리

• iOS 앱을 만드는 방법에 더 알아봤어요.
• 증감 버튼과 사진 추가, 아이콘 추가 방법을 이해했어요.

출처 : Smile Han - iOS 프로그래밍 기초