01. 명언 생성기 앱

곰주·2022년 8월 2일
2
post-thumbnail

명언 생성기 앱

명언 생성 버튼을 누를 때마다 명언과 함께 그 명언을 말한 인물의 이름이 랜덤하게 화면에 표시되는 앱이다. 이 프로젝트는 StoryBoard, AutoLayout을 이용하여 UI를 구성하였고, 명언과 인물 이름을 표시할 UILabel과 랜덤한 명언과 이름을 생성해 주는 UIButton을 이용하였다.


프로젝트 들어가기 전 알아야 할 개념들

  1. Cocoa touch Framework
  2. UIKit
  3. UIView
  4. AutoLayout
  5. StroyBoard

1. Cocoa touch Framework

이는 iOS 개발 환결을 구축하기 위한 최상위 프레임워크이다. UIKit, Foundation 등을 포함한 대부분의 클래스 개체들이 이 프레임워크에 속해 있단 말씀... 가장 많이 사용되는 프레임워크는 앞서 말한 UIKit, Foundation이다.

Foundation

가장 기본적인 데이터 타입부터 각종 구조체, 타이머, 네트워크 통신, 파일 관리 등 기본적인 프로그램의 중심을 담당하는 프레임워크이다.

2. UIKit

사용자의 인터페이스를 담당하고 이벤트를 처리하는 것을 담당하는 프레임워크이다. 주로 사용하는 이벤트는 제스처 처리, 애니메이션, 그림 그리기, 이미지 처리, 테이블 뷰, 텍스트 버튼, Alert 창, 그리고 애플리케이션의 화면을 구성하는 요소를 포함하는 것들이 있다... 참 많다...

그리고!

UI가 붙는 클래스를 사용하려면 UIKit를 import 해야 한다는 것!! 잊지 말기!

UIKit 앱의 구조

UIKit 앱의 구조는 기본적으로 MVC 디자인 패턴을 사용한다.

M : Model, V: View, C: Controller

Model은 앱의 데이터와 비지니스 로직을 가지고 있고, View는 사용자에게 데이터를 보여 주는 UI를 담당하며, Controller는 View와 Model의 중간 다리 역할을 한다. View로부터 사용자 액션을 전달받아서 Model에게 어떤 작업을 해야 하는지 알려 주거나, Model의 데이터 변화를 View에게 전달하여 View를 어떻게 업데이트해야 할지 알려 주는 것이다!

어렵다....^^

하지만... 현실 MVC는
ViewController가 강하게 연결되어 있기에 View Controller가 거의 모든 일을 담당하게 되어 ViewContoller를 분리하기 어렵다. 그래서 프로젝트 규모가 커질수록 Controller가 비대해지고 내부 구조가 복잡하게 되어 유지보수가 힘들다...... 그래서! 이것을 해결하기 위해 MVVM, 바이버 패턴 등 다양한 디자인 패턴을 통해 문제점을 해결할 수 있다는 말씀..


3. UIView

UIView는 화면의 직사각형 영역에 대한 내용을 관리하는 개체이다. 화면을 구성하는 요소의 기본 클래스라고 생각하면 된다!

View Controller

ViewController는 앱의 근간을 이루는 객체로, 모든 앱은 최소 하나 이상의 View Controlelr를 가지고 있다. 한마디로 사용자가 화면을 보는 것에 대한 관리 기능을 제공하는 녀석인 것이다! 이 녀석에 주요 역할에 대해 알아보자면,

(1) 데이터 변화에 따라서 View 컨텐츠를 업데이트
(2) 뷰들과 함께 사용자 상호작용에 응답
(3) 뷰를 리사이징하고, 전체적인 인터페이스의 레이아웃 관리
(4) 다른 뷰 컨트롤러들과 함께 앱을 구성

4. AutoLayout

이는 두 뷰의 사이 관계를 제약 조건(Constraints)을 이용하여 뷰의 위치를 지정하는 것이다. 아이폰의 크기가 다향해지면서 아이폰 크기마다 해상도도 달라졌는데, 다른 크기에서도 똑같은 화면을 보여 주기 위해 AutoLayout을 사용하는 것이다.

5. StoryBoard

스토리보드는 iOS 앱의 사용자 인터페이스를 시각적으로 표현하여 컨텐츠 화면과 화면 간의 연결을 보여 주는 도구이다. `Scene`으로 구성되어 있으며, 각 `Scene`은 View Controller와 View를 나타낸다. 여러 화면들을 스토리보드를 통해 만드는 것이라고 생각하면 쉽다!



프로젝트 실행 결과 화면

Code

Quote.swift

import Foundation

struct Quote {
    let content: String
    let name: String
}

ViewController.swift

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var quoteLabel: UILabel!
    @IBOutlet weak var nameLabel: UILabel!
    
    let quotes = [
        Quote(content: "죽음을 두려워하는 나머지 삶을 시작조차 못하는 사람이 많다.", name: "벤다이크"),
        Quote(content: "나는 나 자신을 빼 놓고는 모무 안다.", name: "비용"),
        Quote(content: "편견이란 실효성이 없는 의견이다.", name: "암브로스 빌"),
        Quote(content: "분노는 바보들의 가슴 속에서만 살아간다.", name: "아인슈타인"),
        Quote(content: "몇 번이라도 좋다! 이 끔찍한 생이여... 다시!", name: "니체")
        ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func tap(_ sender: Any) {
        let random = Int(arc4random_uniform(5))  // 0~4 사이의 난수를 랜덤하게 만들어줌. 배열의 인덱스에 접근해야 하기 때문에 Int 형으로 변환시켜줌.
        let quote = quotes[random]
        
        quoteLabel.text = quote.content
        nameLabel.text = quote.name
    }
}

참고 사이트 및 강의 : 패스트 캠퍼스
About App Development with UIKit

profile
아기코쟁이 🧑🏻‍💻

0개의 댓글