[Swift] SplashView - 스플래시 화면

 

---

스플래시?

앱을 처음 실행했을 때 사용자에게 보여지는 첫 화면을 '스플래시 화면(Splash Screen)이라고 한다.
단순히 브랜드 로고를 보여주는 경우도 있고,
초기화 작업이나 원격 데이터를 불러오기 전에 잠시 노출되는 용도로 활용되기도 한다.
그러나 구현 방식에 따라 UX와 심사 기준에 차이가 발생할 수 있기 때문에 올바른 구현법을 정리해보려고 한다.

---

▷ LaunchScreen
- 시스템에서 제공하는 초기 화면
- 앱 실행 직후 가장 먼저 표시되며, Xcode의 LaunchScreen.storyboard를 통해 구성
- 장점: 깔끔하고 실행 직후 표시, iOS 심사 가이드라인에 부합
- 단점: 동적 로직 적용 불가 → 네트워크 이미지 로딩, 애니메이션 삽입 등이 불가능함

▷ Custom SplashView
- 앱 실행 후, rootViewController에서 직접 띄우는 ViewController
- 장점: 동적 이미지 교체, 애니메이션, API 연동 가능
- 단점: 앱 실행 속도에 따라 화면 전환 지연 가능성 있음

즉, 고정적인 스플래쉬 화면을 구현해야한다면? LaunchScreen 사용
서버로 부터 받은 이미지 등 동적인 스플래시 화면을 구현해야한다면? 커스텀 뷰 구성

---

이번 글에는 'API 기반 동적 이미지 로딩 구현 방법'에 대해서 정리해보려고 한다.
구현하려는 동작은 앱 브랜드 이미지를 Default로 저장해놓고,
서버에서 이미지를 보내주면 해당 이미지를 다음 실행때부터 노출하려고 한다. (만약 없다면, 다시 Default로)

흐름은 아래와 같다.

① 앱 실행 → LaunchScreen 노출(이때 배경색을 앱 브랜드 컬러로 지정하는 것을 추천)
② 커스텀 SplashView 전환 후 Default 이미지 표시 → API 호출 → 다음 뷰에 보여줄 이미지 저장
③ Duration 만큼 보여준 후, 메인 뷰(MainViewController)로 전환

<구현 시 고려사항>
- 심사 가이드라인: LaunchScreen은 광고성 이미지 삽입 불가. 단순 브랜드/앱 정체성을 나타내야함. (그냥 빈 화면으로 둬도 무관함)
- 성능 최적화: API 호출 및 이미지 다운로드는 비동기 처리, 메인 스레드 블로킹 금지.
- Fallback 전략: API 실패 시에도 자연스럽게 앱이 실행되도록 기본 이미지를 항상 준비해야함.
- 백업 정책: Application Support에 저장한 캠페인성 이미지는 iCloud 백업 제외(isExcludedFromBackup)
   로 설정해 용량 및 심사 리스크를 줄여야함
- 용량 제한: 비정상 대용량 리소스 유입을 막기 위해 '이미지 최대 용량'을 초과하면 폐기하도록 구현하는 것을 권장함.

 

---

아래 예시 코드는 '서버 이미지는 저장해두었다가 다음 실행부터 보여주고, 실패 또는 이미지가 없다면 기본 이미지를 보여주기' 구조이다.

import UIKit

// 스플래시 이미지 파일과 메타데이터 관리
enum SplashAssetStore {
    private static var baseDir: URL = {
        let dir = try! FileManager.default
            .url(for: .applicationSupportDirectory, in: .userDomainMask, appropriateFor: nil, create: true)
            .appendingPathComponent("splash", isDirectory: true)
        try? FileManager.default.createDirectory(at: dir, withIntermediateDirectories: true)
        return dir
    }()

    private static let fileName = "splash.jpg"
    private static let urlKey   = "splash.lastRemoteURL"
    private static let dateKey  = "splash.savedAt"

    static func loadCachedImage() -> UIImage? {
        let path = baseDir.appendingPathComponent(fileName)
        guard let data = try? Data(contentsOf: path) else { return nil }
        return UIImage(data: data)
    }

    static func save(imageData: Data, remoteURL: URL) throws {
        let path = baseDir.appendingPathComponent(fileName)
        try imageData.write(to: path, options: .atomic)

        UserDefaults.standard.set(remoteURL.absoluteString, forKey: urlKey)
        UserDefaults.standard.set(Date().timeIntervalSince1970, forKey: dateKey)
    }

    static func savedRemoteURL() -> URL? {
        guard let s = UserDefaults.standard.string(forKey: urlKey) else { return nil }
        return URL(string: s)
    }

    static func clear() {
        let path = baseDir.appendingPathComponent(fileName)
        try? FileManager.default.removeItem(at: path)
        UserDefaults.standard.removeObject(forKey: urlKey)
        UserDefaults.standard.removeObject(forKey: dateKey)
    }
}

• Application Support에 splash.jpg를 저장
• 파일은 다음 실행 때 로드
• UserDefaults에는 어떤 URL에서 내려온 이미지인지, 언제 저장했는지 기록

- 앱 삭제 후에도 남길 필요가 없다면 Caches 디렉터리
- 좀 더 안정적으로 유지하려면 Application Support 권장 ✅

Caches 디렉터리
- 특징: 시스템이 필요할 때 자동으로 삭제할 수 있는 공간
- 사용 목적: 다시 받아올 수 있는 데이터(ex. 이미지 캐시, API 응답 캐시)
- 장점: 디스크 공간이 부족하면 iOS가 알아서 정리해주므로 관리 부담이 적음
- 단점: 앱 삭제 전에도 사라질 수 있기 때문에 '꼭 유지해야 하는 데이터'를 저장하기에는 적합하지 않음

Application Support 디렉터리
- 특징: 앱이 삭제되기 전까지는 OS가 임의로 삭제하지 않음.
- 사용 목적: 앱 실행에 꼭 필요한 데이터, 안정적으로 보관해야 하는 설정 파일이나 리소스
- 장점: 개발자가 직접 지우지 않는 이상 앱이 살아있는 동안은 보존됨
- 단점: 디스크 공간을 차지하므로 불필요한 데이터는 직접 정리해줘야함

개인적으로 구현하고자 하는 구조는 후자! (앱 삭제 전까지는 저장되도록 하고 싶음.)
- 이미지 파일은 Application Support에 저장
- 메타데이터(이미지 URL, 저장 시각, 노출 Duration 등)은 UserDefaults에 저장

import Foundation
import UIKit

struct SplashPayload: Decodable {
    let imageUrl: URL?
}

// 서버에서 스플래시 이미지 URL 받아오기 + 실제 이미지 다운로드
enum SplashService {
    static func fetchPayload() async throws -> SplashPayload {
        let url = URL(string: "https://yegr.com/api/splash")!
        var req = URLRequest(url: url)
        req.timeoutInterval = 5
        let (data, resp) = try await URLSession.shared.data(for: req)
        guard let http = resp as? HTTPURLResponse, (200..<300).contains(http.statusCode) else {
            throw URLError(.badServerResponse)
        }
        return try JSONDecoder().decode(SplashPayload.self, from: data)
    }

    static func downloadImageData(from url: URL) async throws -> Data {
        let (data, resp) = try await URLSession.shared.data(from: url)
        guard let http = resp as? HTTPURLResponse, (200..<300).contains(http.statusCode) else {
            throw URLError(.badServerResponse)
        }
        guard UIImage(data: data) != nil else {
            throw URLError(.cannotDecodeRawData)
        }
        return data
    }
}

• fetchPayload()를 통해 서버에서 imageUrl을 받아옴
• downloadImageData(from:)은 실제 이미지를 내려받고 유효성 검증까지 수행함

import UIKit
import SnapKit

final class SplashViewController: UIViewController {
    private let imageView = UIImageView()
    private let defaultImage: UIImage
    private let minimumDisplaySeconds: TimeInterval

    init(defaultImage: UIImage, minimumDisplaySeconds: TimeInterval = 2.0) {
        self.defaultImage = defaultImage
        self.minimumDisplaySeconds = minimumDisplaySeconds
        super.init(nibName: nil, bundle: nil)
    }
    required init?(coder: NSCoder) { fatalError("init(coder:) not implemented") }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .yegrBrandColor // 브랜드 컬러로 지정!
        imageView.contentMode = .scaleAspectFit
        view.addSubview(imageView)
        
        imageView.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.width.lessThanOrEqualTo(view.snp.width).multipliedBy(0.6)
            $0.height.lessThanOrEqualTo(view.snp.height).multipliedBy(0.6)
        }

        imageView.image = SplashAssetStore.loadCachedImage() ?? defaultImage

        Task { await prefetchNextRunImage() }
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        Task { @MainActor in
            try? await Task.sleep(nanoseconds: UInt64(minimumDisplaySeconds * 1_000_000_000))
            transitionToMain()
        }
    }

    @MainActor
    private func transitionToMain() {
        let main = MainViewController()
        let window = view.window ?? UIApplication.shared.connectedScenes
            .compactMap { ($0 as? UIWindowScene)?.keyWindow }
            .first
        window?.rootViewController = main
        window?.makeKeyAndVisible()

        let t = CATransition()
        t.type = .fade
        t.duration = 0.25
        window?.layer.add(t, forKey: kCATransition)
    }

    // 서버에서 새 이미지를 받으면 파일로 저장
    private func prefetchNextRunImage() async {
        do {
            let payload = try await SplashService.fetchPayload()
            guard let url = payload.imageUrl else { return } // 이미지 없음 → 현상 유지

            if SplashAssetStore.savedRemoteURL() == url { return }

            let data = try await SplashService.downloadImageData(from: url)
            try SplashAssetStore.save(imageData: data, remoteURL: url) // 다음 실행부터 사용
        } catch {
	        print("이미지 받기 실패!(실행에 영향없음 기본/캐시 이미지로 표시됨)")
        }
    }
}

• 실행 → 즉시 캐시 이미지 혹은 Default 이미지 표시
• 백그라운드에서 서버 호출 → 이미지 다운로드 성공 시 파일 저장
• 저장된 이미지는 다음 실행 시 즉시 표시
• 실패/이미지 없음이면 그냥 넘어가도록 구현

import UIKit

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

    func scene(_ scene: UIScene,
               willConnectTo session: UISceneSession,
               options connectionOptions: UIScene.ConnectionOptions) {
        guard let ws = scene as? UIWindowScene else { return }
        let window = UIWindow(windowScene: ws)

        // 에셋에 넣어둔 브랜드 기본 이미지 사용
        let splashVC = SplashViewController(defaultImage: UIImage(named: "splash_default")!,
                                            minimumDisplaySeconds: 2.0)
        window.rootViewController = splashVC
        window.makeKeyAndVisible()
        self.window = window
    }
}

---

위와 같이 구현함으로서, LaunchScreen과 Custom SplashView의 차이를 정리하고,
API 기반 동적 스플래시 화면을 어떻게 설계하면 좋을지 고민할 수 있었다.

(사실 회사에서 요청했던 사항이라 고민하게됨.
단순히 그냥 저장하고 다음 실행에 새로운 이미지 보여주면 되겠지~ 정도로만 생각했다가,
막상 구조를 짜다보니 단순하지 않은 부분이 많다는 것을 깨달음..
그래서 API 만들어지기 전에 미리 정리해두면 좋겠다고 생각했고,
이번 글을 블로그 주제로 삼게 되었다는..🥹)

끝!!!!

---