[SwiftUI] Figma 비율 그대로! 개발하는 Constants 구조체 만들기

📌 들어가며

Figma로 디자인한 화면 속 이미지 크기를 그대로 구현하고 싶은데,

기기마다 해상도가 달라서 비율이 맞지 않아 고민해본 적 있으신가요?

 

저는 프로젝트를 하면서 디자이너분께 “피그마대로 정확하게 나왔으면 좋겠어요!” 라는 요청을 정말 많이 받아왔습니다.

 

하지만 실제 iPhone 기기마다 화면 크기와 Safe Area가 다르기 때문에,

디자인대로 보이도록 구현하는 일은 생각보다 까다로운 작업이었죠.

 

Figma 기준으로 많이 사용하는 사이즈인 가로 393pt, 세로 852pt 화면을 기준으로,

모든 iPhone에서 디자인 비율을 자연스럽게 유지하는 방법을 찾아서 적용을 해본 결과

아래의 방법이 제일 오차가 적었습니다.

---

🔧 Constants 코드 설명

전체코드

import Foundation
import UIKit

struct Constants {
    static let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene
    static let screenWidth = windowScene?.screen.bounds.width ?? 0
    static let screenHeight = windowScene?.screen.bounds.height ?? 0
    
    // Figma 디자인 기준 크기
    static let baseScreenWidth: CGFloat = 393
    static let baseScreenHeight: CGFloat = 852
    
    // 현재 디바이스 대비 비율
    static let ControlWidth = screenWidth / baseScreenWidth
    static let ControlHeight = screenHeight / baseScreenHeight
}

 

1. windowScene

static let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene

• 현재 실행 중인 앱의 UIWindowScene 객체를 가져옵니다.
• 이는 실제 디바이스의 화면 크기를 얻기 위한 전제 조건입니다.

 

2. screenWidth, screenHeight

static let screenWidth = windowScene?.screen.bounds.width ?? 0
static let screenHeight = windowScene?.screen.bounds.height ?? 0

• 현재 디바이스의 물리적인 화면 너비와 높이(pt 단위)를 가져옵니다.
• 만약 windowScene이 없을 경우를 대비해 nil일 때는 0으로 대체합니다.
• 실제 사용하는 iPhone 화면 너비와 높이를 얻는 핵심 코드입니다.

 

3. baseScreenWidth, baseScreenHeight

static let baseScreenWidth: CGFloat = 393
static let baseScreenHeight: CGFloat = 852

• Figma 디자인에서 기준으로 사용하는 화면 크기입니다.
• 보통 iPhone 14 기준으로 Figma에서 393x852로 작업하는 경우가 많아 이를 기준값으로 설정합니다.
• 이 값은 사용하는 Figma 디자인 해상도에 따라 다르게 지정할 수 있습니다.

 

4. ControlWidth, ControlHeight

static let ControlWidth = screenWidth / baseScreenWidth
static let ControlHeight = screenHeight / baseScreenHeight

• Figma 디자인 비율을 실제 기기에 맞게 환산하는 비율 값입니다.

---

🧠 활용 예시

Figma에서 250pt로 설정된 이미지가 있다면, 아래처럼 설정하면 기기 화면에 맞춰 자동으로 비율 조정된 크기가 됩니다.

Image("logo")
	.resizable()
	.aspectRatio(contentMode: .fit)
	.frame(width: Constants.ControlWidth * 250)

---

🧩 마무리

지금까지 살펴본 Constants.swift는 단순한 유틸 파일처럼 보일 수 있지만,

Figma로 디자인된 화면을 실제 디바이스에서 정확하게 구현하는 데 있어 아주 강력한 도구가 되어줍니다.

 

SwiftUI는 물론이고, Storyboard 프로젝트에서도 똑같이 활용할 수 있다는 점도 큰 장점이에요.

frame, padding, constraint constant 등 UI 요소의 크기나 위치를 설정할 때

이 비율 값들을 곱해주기만 하면 됩니다. 쉽죠???

 

다음 글에서는 SwiftUI로 구현한 “나만의 Todo 앱”의 Splash와 Onboarding 화면 리뷰를 소개드릴 예정입니다.

 

앞으로도 꾸준히 기록하며 성장하는 개발자가 되기 위해 달려보겠습니다! 🚀

읽어주셔서 감사합니다 😊