SwiftUI Basics - Text 와 Image 생성하기

본 포스팅은 Swift 5.2.4 기준으로 작성되었습니다.

이번 포스팅에서는 Text, Image, Stack, Button, List 를 SwiftUI 환경에서 생성하는 법을 간단하게 알아보도록 하겠습니다. SwiftUI 의 코드가 얼마나 간결해졌냐면 저 instance 들을 생성하기 위해 우리가 알아야하는 단어는 정말 저게 끝이에요. 저 단어들과 괄호를 조합하여 간단하게 instance 를 생성할 수 있습니다. 레이아웃도 자동으로 잡아주고요!

Text

텍스트를 생성하는 법은 Xcode 를 실행하자마자 바로 알 수 있습니다. 기본적으로 “Hello World” 가 써져있으니까요.

그럼 텍스트를 표시하기 위해 필요한 과정을 UIKit 과 한번 비교해볼까요? UIKit 에서는 UILabel 을 생성하고 생성된 instance 에 원하는 텍스트를 붙이고 View 에 올린 다음 레이아웃까지 따로 잡아줘야 하잖아요? 그런데 이 모든 과정이 SwiftUI 에서는 Text(“Hello World”) 한 문장으로 끝납니다. 🙀

그럼 이제 조금 더 깊게 들어가볼게요. 다음 코드를 같이 살펴봅시다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Netflix")
            .font(.custom("AppleGothic-bold", size: 50))
            .foregroundColor(.red)
            .kerning(5)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().preferredColorScheme(.dark)
    }
}

Text 로 화면에 Netflix 가 표시되도록 구현했고 추가로 폰트 종류와 색상, 자간 크기도 조절을 했습니다. UIKit 에서는 이런 세부 조절과정을 method 를 사용해 진행했다면, SwiftUI 에서는 modifier 를 사용해 조절한다고 표현합니다. 내부적으로 구현되는 방법이 달라지고 적용 순서가 더 중요해졌지만 결과적으로 코드 내에서 맡는 역할은 method 와 modifier 가 비슷합니다. 일단은 거의 같다고 생각하면 될 것 같아요

Preview 에서 텍스트는 좌측 이미지와 같이 표시됩니다. 이쯤되면 웬만한 개발환경에서 처음에 Hello Wolrd Print 찍고 Console 에서 입력된 내용 확인하는 것과 비슷한 난이도가 아닐까 싶어요. 이보다 더 쉬워질 수가 있을까요?

마지막으로 PreviewProvider 부분에서 .preferredColorScheme(.dark) 를 지정해놓고 실제 넷플릭스 화면처럼 배경을 어둡게 만들어줬어요. 다만 이건 실제 배경이 검은색으로 변한게 아니라 단순히 다크모드가 적용된 것이니까 light 모드에서도 검은 화면을 만드려면 다른 방법을 써야합니다. 이건 나중에.

Image

이미지를 넣는 방법도 정말 간단합니다. 먼저 준비된 이미지를 Preview Assets.xcassets 에 드래그 해서 붙여 넣습니다. 저는 이미지의 크기가 큰 편이라 3x 에 넣었어요. 작은 이미지를 준비했다면 1x 에 넣어주세요.

그러고보니 위 폴더도 UIKit 에 없던거에요. 이곳은 개발 중에만 사용하게되는 이미지를 넣어두는데 사용된다고 하네요. 기존부터 사용해 익숙한 Assets.xcassets 폴더에 넣어도 전혀 문제 없습니다.

아래 코드를 입력하면 이미지가 Preview 에 이미지가 생성됩니다.

var body: some View {
    Image("SwiftUI")
}

이미지를 넣는 것도 단 한줄로 끝났어요.

다만 Image 의 Attributes 를 조절해야할 때 반드시 알아야하는 부분이 있어요. 이미지에 frame 을 늘리고 색상을 넣어볼게요.

var body: some View {
    Image("SwiftUI")
        .frame(width: 200, height: 200)
        .background(Color.green)
}

결과를 봅시다. 이미지의 크기는 그대로고 정말로 frame 그 자체만 커졌어요. 보통 우리가 frame 을 늘린다는 것은 이렇게 사용하겠다는 의미가 아니잖아요? 그럼 이미지를 실제로 크게 만들려면 어떻게 해야할까요?

간단합니다. .resizable() modifier 한줄만 추가해주면 돼요! 단 순서가 중요합니다. frame 을 먼저 설정해버리면 resizable 을 적용할 수가 없거든요. 왜 그런지 이유를 한번 알아볼까요?

frame 의 Description 을 살펴보면 반환 타입으로 View 를 돌려준다는 것을 알 수 있습니다. 하지만 우리가 조절하려는 것은 이미지의 크기지 frame 이 아니잖아요? 애초에 View 은 resizable modifier 가 지원되지 않기 때문에 뒤에 넣으면 에러가 발생하기도 하고요~ 아무튼 이러한 이유로 .resizable 이 먼저 입력되어야 합니다. 이제 결과를 보면!!

정상적으로 이미지 크기가 수정되었습니다!! 어렵지 않죠??

Text#

Image#

Text

Image