행복한 삶을 찾아서

1. textarea의 focus 이벤트

2. blur 이벤트와 click이벤트 순서 정리

포스팅: https://luceeverde.tistory.com/entry/blur-이벤트와-click-이벤트-발생-순서-문제

3. setTimeout()을 이용한 디바운싱 구현

4. JWT를 이용한 로그인 기능 구현 - JWT 개념정리 + 어떻게 사용하는지 정리

이전글: 2024.08.03 - [🔨 개발/💡 PROJECT.흑백논리] - 프로젝트 개요

앱을 실행했을 때, 스플래시 화면이 1.5초간 보여지고 다음 화면으로 넘어가도록 하는 기능

프로젝트 착수 이후, 아직 로고도, 완벽한 기획도 없지만 바로 개발에 뛰어들었다. 무엇보다 swift를 이용한 iOS 앱 개발이 처음이었기에, 나름의 공부도 필요하기 때문에, 기획이 다 나오고 나서 재빠르게 개발이 뒤따라갈 수 있는 구조는 아니다. 그래서 xcode라는 개발환경에 친숙해질 겸, swift가 어떻게 돌아가는지도 알아볼 겸 디자인 하나없는 빈 앱의 뼈대를 세워나가기 시작했다.

먼저, Main.storyboard 파일에 두 개의 ViewController(SplashViewController.swift, GamingViewController.swift)를 추가하고, 대략적인 로고와 내용물(?)을 던져넣었다. 가장 먼저 할 일은 앱을 실행했을 때, 스플래시 화면이 2초간 보여지고 게임 중 화면으로 트랜지션 되도록 할 것.

Main.storyboard 구성

swift에는 LaunchScreen.storyboard라는 파일이 프로젝트 생성과 동시에 만들어져 있는데, 처음엔 여기에다 로고를 넣었더니 문제가 발생했다. 앱을 설치하고 최초 실행할때에는 LaunchScreen의 화면이 길게 보여지는데, 이후에는 정말 재빠르게 사라지는 문제가 있었다. 이를 해결하고자 Main.storyboard 파일에 스플래시 화면과 게임중 화면을 둘 다 집어넣은 것. 구글링을 좀 해보니 하나의 .storyboard 파일에 하나의 viewcontroller를 사용하는 것이 앱의 성능에 유리하다고 하는데, 우리의 사이드프로젝트는 많은 화면으로 구성되지 않을 듯하여(사실 아직 내가 잘 몰라서ㅋㅋ) 하나의 .storyboard에 두 개의 viewcontroller를 연결하였다.

SplashViewController.swift

첫 번째 viewcontroller는 Splash화면을 보여주는 뷰컨트롤러로, 1.5초 시간을 머물고 다음 화면인 게임중화면(GamingViewController.swift)로 넘어가도록 만들었다.

import UIKit

class SplashViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 1.5초 후에 게임중 화면으로 전환
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
            self.transitionToGamingViewController()
        }
    }
    
    func transitionToGamingViewController() {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        if let gamingViewController = storyboard.instantiateViewController(withIdentifier: "GamingViewController") as? GamingViewController {
            gamingViewController.modalTransitionStyle = .crossDissolve
            gamingViewController.modalPresentationStyle = .fullScreen
            self.present(gamingViewController, animated: true, completion: nil)
        }
    }
}

SceneDelegate.swift

SceneDelegate.swift에서 Main.storyboard를 최초 로드해서 띄워주도록 구성

import UIKit

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        
        guard let windowScene = (scene as? UIWindowScene) else { return }
        
        let window = UIWindow(windowScene: windowScene)
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let initialViewController = storyboard.instantiateInitialViewController()
        window.rootViewController = initialViewController
        self.window = window
        window.makeKeyAndVisible()
    }

    func sceneDidDisconnect(_ scene: UIScene) {
    }

    func sceneDidBecomeActive(_ scene: UIScene) {
    }

    func sceneWillResignActive(_ scene: UIScene) {
    }

    func sceneWillEnterForeground(_ scene: UIScene) {
    }

    func sceneDidEnterBackground(_ scene: UIScene) {
    }
}

이렇게 작성하고 build하면, 아주 귀엽고 작은 첫 빌드가 생성된다.

이전글: 2024.08.03 - [개발/swift] - swift를 이용한 iOS 앱 개발 입문 1: 각 파일들의 역할

swift를 이용한 iOS 앱 개발 입문 2: 앱(App), 씬(Scene), 생명주기(Lifecycle)

늘상 웹개발만 하다가, 앱개발의 세계에 처음 발을 담궈보니, 앱의 생명주기라는 것에 대해 알 필요가 있어서 정리해본다. 이전 글에서 앱의 생명주기를 'AppDelegate.swift'라는 파일에서 관리한다고 적었는데, 조금 더 깊이 들어가보자.

앱의 생명주기(App Lifecycle)은 iOS앱이 실행되는 동안 다양한 상태 전환을 설명하는 중요한 개념이다. 앱의 생명주기를 이해하면 앱의 시작, 중지, 다시 시작, 종료 시 적절한 작업을 수행할 수 있다. 다음은 iOS앱의 생명주기와 각 상태에 대한 자세한 설명이다.

1. 앱의 상태

앱은 다음과 같은 상태를 가질 수 있다:

• Not Running: 앱이 실행되지 않음
• Inactive: 앱이 포어그라운드에 있지만 이벤트를 처리하지 않음
• Active: 앱이 포어그라운드에 있으며 이벤트를 처리하고 있음
• Background: 앱이 백그라운드에 있지만 여전히 코드 실행이 가능
• Suspended: 앱이 백그라운드에 있으며 코드 실행이 중단됨. 메모리에 유지됨

2. 씬(Scene)은 뭔데?

유사하게 'SceneDelegate.swift'라는 파일에는 씬의 생명주기를 관리하는데, 그럼 씬은 도대체 뭘까 하고 찾아보니... 씬은 iOS 13 이후 도입된 개념으로, 하나의 앱 내에서 여러 개의 윈도우를 관리할 수 있게 한다. 씬은 사용자가 동시에 여러 개의 UI환경을 다룰 수 있도록 지원한다. 씬의 주요 특징으로는,

• 멀티태스킹 지원: 씬을 사용하면 사용자가 하나의 앱에서 여러 개의 독립적인 UI 환경을 동시에 사용할 수 있다. 예를 들어, iPad에서 멀티윈도우 모드를 사용할 수 있다.
• 독립적인 생명 주기: 각 씬은 독립적인 생명 주기를 가지고 있으며, 'SceneDelegate'를 통해 관리된다. 각 씬의 생성, 활성화, 비활성화, 종료 등의 이벤트를 개별적으로 처리한다.
• 윈도우 관리: 씬은 하나 이상의 윈도우를 포함할 수 있으며, 각 윈도우는 자체적인 뷰 컨트롤러 계층을 갖고 있다.

3. 생명주기 이벤트를 처리하는 메서드

위에서 알아본 생명주기의 변화 이벤트를 받아주는 메서드가 존재하여, 'AppDelegate.swift'파일과 'SceneDelegate.swift'파일에서 이러한 이벤트를 핸들링 해 주어야 할 것이다. 아래는 앱과 씬의 생명주기에 관련된 메서드들을 소개한다.

AppDelegate 메서드

1. application(_:didFinishLaunchingWithOptions:) - 앱이 시작될 때 호출. 앱의 초기 설정을 여기서 진행
2. applicationDidBecomeActive(_:) - 앱이 활성 상태로 전환될 때 호출. 일반적으로 앱이 포어그라운드로 들어올 때나 일시 정지 상태에서 돌아올 때 호출
3. applicationWillResignActive(_:) - 앱이 비활성 상태로 전환되기 전에 호출. 전화나 메시지 등으로 인해 일시 중단될 때 호출
4. applicationDidEnterBackground(_:) - 앱이 백그라운드로 전환될 때 호출. 상태를 저장하거나 리소스를 해제하는 등의 작업을 여기서 수행
5. applicationWillEnterForeground(_:) - 앱이 백그라운드에서 포어그라운드로 전환될 때 호출
6. applicationWillTerminate(_:) - 앱이 종료될 때 호출. 상태를 저장하고 정리 작업을 수행

SceneDelegate 메서드

1. scene(_:willConnectTo:options:) - 새로운 씬이 생성될 때 호출. 씬의 초기 설정을 여기서 진행
2. sceneDidDisconnect(_:) - 씬이 연결 해제될 때 호출. 씬이 더 이상 사용되지 않음을 의미
3. sceneDidBecomeActive(_:) - 씬이 활성 상태로 전환될 때 호출
4. sceneWillResignActive(_:) - 씬이 비활성 상태로 전환되기 전에 호출
5. sceneWillEnterForeground(_:) - 씬이 백그라운드에서 포어그라운드로 전환될 때 호출
6. sceneDidEnterBackground(_:) - 씬이 백그라운드로 전환될 때 호출

이렇게 보니까 앱과 씬이 개념적으로는 좀 구분이 되는 듯 하기도 하고...  역시 가장 중요한 것은 직접 부딪히며 코드를 짜보는게 이해하기에 가장 쉽고 빠른 방법인 듯 하다. 사이드 프로젝트 앱의 스플래시 화면을 만들어가며 공부해보자.

swift를 이용한 iOS 앱 개발 입문 1: 각 파일들의 역할

Xcode로 프로젝트를 생성하고 난 뒤, 친절한 튜토리얼을 찾기 어려워서 스스로 정리해 보기로 결심했다.

프로젝트를 생성하면, AppDelegate.swift, SceneDelegate.swift, LaunchScreen.storyboard, ViewController.swift 와 같은 파일들이 같이 생성된다. 각 파일들의 역할을 간략하게 짚고 넘어가자.

1. AppDelegate.swift

'AppDelegate.swift' 파일은 앱의 생명 주기를 관리하는 핵심 파일이다. 앱의 시작, 상태 전환, 종료 등의 주요 이벤트를 처리한다.

주요 역할

1. 앱이 시작될 때 초기 설정

2. 푸시 알림 처리

3. 백그라운드 및 포어그라운드 상태 전환 처리

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    // 앱 시작 시 호출
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // 초기화 코드
        return true
    }
    
    // 앱이 백그라운드로 전환될 때 호출
    func applicationDidEnterBackground(_ application: UIApplication) {
        // 백그라운드 전환 시 작업
    }
    
    // 앱이 포어그라운드로 돌아올 때 호출
    func applicationWillEnterForeground(_ application: UIApplication) {
        // 포어그라운드 복귀 시 작업
    }
}

2. SceneDelegate.swift

'SceneDelegate.swift' 파일은 iOS 13 이후 도입된 멀티 윈도우 및 멀티 씬 지원을 위한 파일로 각 씬의 생명 주기를 관리한다.

주요 역할

1. 씬 생성 및 파괴 처리

2. 씬의 활성화 및 비활성화 상태 관리

3. UI 상태 복원 및 유지

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    // 씬이 활성화될 때 호출
    func sceneDidBecomeActive(_ scene: UIScene) {
        // 씬이 활성화될 때 작업
    }
    
    // 씬이 비활성화될 때 호출
    func sceneWillResignActive(_ scene: UIScene) {
        // 씬이 비활성화될 때 작업
    }
}

3. LaunchScreen.storyboard

'LaunchScreen.storyboard' 파일은 앱이 실행될 때 처음으로 보여지는 화면을 정의한다. 이 화면은 앱이 실제로 로드되기 전에 사용자에게 표시되며, 스플래시 화면으로 사용됨.

주요 역할

1. 앱이 로드될 때 사용자에게 보여지는 초기 화면 디자인

2. 초기 로딩 시간을 감추기 위해 간단한 이미지나 로고 표시

4. ViewController.swift

'ViewController.swift' 파일은 기본적으로 생성되는 뷰 컨트롤러로, 앱의 첫 번째 화면을 관리한다. 뷰의 로드 및 사용자 인터페이스 이벤트를 처리.

주요 역할

1. 뷰 로드 시 초기화 작업

2. 사용자 상호작용 처리 및 UI 업데이트 관리

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        // 뷰가 로드될 때 초기화 작업
    }
}

간단히 정리하면, .storyboard 파일은 UI를 그리는 html+css 같은 역할을, viewcontroller.swift 파일은 액션을 정의하는 javascript와 유사하다고 이해하였음.

재미난 아이디어가 생겨서 아내 그리고 친한 친구 한명과 함께 사이드 프로젝트를 시작했다.

• 팀원1. PM 겸 프론트개발
• 팀원2. 기획자 겸 디자이너
• 팀원3. 백엔드개발

로 RnR을 설정. 물론 프론트와 백엔드 개발은 상황에 따라 유연하게 서로가 서로를 도와가며 하게 될 듯.

나에의 프로젝트 목표는 생소한 앱 개발 경험을 쌓고, 좀더 재밌게 퇴근 이후 시간을 보내는 것을 목표로 한다.

일정은 2025년 1월에는 핵심 기능을 포함한 mvp 개발 완료를 목표. 끝까지 잘 마무리 할수있길!

컴퓨터과학, 건축학을 공부하고 건축가도 개발자도 아닌 삶 사는 중.

instagram: @wake_up_hj

strava: https://www.strava.com/athletes/128419447

github: https://github.com/hjnoh11