02. Text 수정하고 Image 추가하기

기본으로 생성된 코드를 직접 수정하며 SwiftUI와 친해져 보겠습니다. 이번 글의 목표는 화면의 텍스트를 수정하고 원하는 이미지를 띄우는 것입니다.

 

이번 단계를 통해 Text, Image, VStack 이라는 기본적인 3가지 UI 요소를 배워보겠습니다.

 

 

---

 

 

1. 코드 파일 열기

먼저 Xcode 왼쪽의 파일 네비게이터에서 ContentView 파일을 클릭하세요. (아마 이미 열려있을 겁니다)

이 파일이 바로 우리 눈에 보이는 화면의 설계도입니다.

 

 

 

2. "Hello, world!" 텍스트 수정하기

가운데 코드 에디터를 보면 이런 코드가 보일 겁니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!") // <-- 바로 이 부분!
        }
        .padding()
    }
}

 

Text("Hello, world!") 라고 쓰인 부분을 찾아, 자신의 이름이나 원하는 문구(예: "반가워, SwiftUI!")로 바꿔보세요.

 

수정하는 즉시, 오른쪽 프리뷰 캔버스의 글자가 실시간으로 바뀌는 것을 확인할 수 있습니다. 이것이 SwiftUI의 실시간 프리뷰(Live Preview) 기능입니다. (만약 프리뷰가 멈춰있다면 'Resume' 버튼을 누르거나 단축키 Option + Command + P를 눌러주세요.)

 

 

 

 

3. 이미지 준비 및 추가하기

이제 이름 아래에 이미지를 넣어보겠습니다.

 

1. 이미지 준비: 화면에 띄우고 싶은 이미지 파일(jpg, png 등)을 하나 준비합니다. 저는 제 프로필 이미지를 사용하겠습니다.

myProfileImage.jpeg

 

2. Assets에 이미지 추가:

- Xcode 왼쪽 파일 네비게이터에서 Assets 파일을 클릭합니다. 이곳이 앱에서 사용할 이미지, 색상 등을 보관하는 창고입니다.

- 가운데 빈 공간에 준비한 이미지 파일을 마우스로 끌어다 놓으면 아래 그림처럼 이미지 파일을 추가할 수 있습니다.

- 이미지 파일 이름은 나중에 코드에서 사용해야 하니 기억하기 쉬운 영문(예: myProfileImage)처럼 지정하는 것이 좋습니다.

 

 

 

4. 코드로 이미지 보여주기

다시 ContentView.swift 파일로 돌아와 주세요.

 

VStack 이란? 지금 코드를 보면 Image(...)와 Text(...)가 VStack { ... } 으로 감싸여 있습니다. VStack은 Vertical Stack의 줄임말로, 그 안에 있는 것들을 수직(세로)으로 차곡차곡 쌓아주는 상자라고 생각하시면 됩니다.

 

1. 기존 이미지 코드 수정: 현재 있는 Image(systemName: "globe") 코드는 애플이 기본으로 제공하는 아이콘(지구본 모양)을 보여주는 코드입니다. 이 부분을 우리가 방금 추가한 이미지 이름으로 바꿔보겠습니다.

 

- Image(systemName: "globe") 와 그 아래 두 줄(.imageScale, .foregroundStyle)을 모두 지웁니다.

- 그 자리에 Image("아까 정한 이미지 이름") 을 입력합니다. 예를 들어 이미지 파일 이름이 myProfileImage 였다면 Image("myProfileImage") 가 됩니다.

// ...
var body: some View {
    VStack {
        Image("myProfileImage") // <-- 이렇게 수정!
        Text("반가워, SwiftUI!")
    }
    .padding()
}
// ...

 

 

정상적으로 동작한다면 아래처럼 화면에 이미지가 나타납니다.

 

 

 

 

2. 이미지 크기 조절하기: 이미지를 추가하면 너무 크게 나와서 화면을 꽉 채울 수 있습니다. 이미지 크기를 적절하게 조절하는 코드를 추가해 봅시다.

 

- .resizable(): 이미지 크기를 조절할 수 있도록 만들어줍니다.

- .aspectRatio(contentMode: .fit): 이미지의 원래 비율을 유지하면서 프레임 안에 맞게 조절합니다.

- .frame(width: 200, height: 200): 이미지의 가로, 세로 크기를 지정합니다.

 

아래와 같이 Image(...) 바로 다음 줄부터 코드를 추가해 보세요.

// ...
struct ContentView: View {
    var body: some View {
        VStack {
            Image("myProfileImage")
                .resizable() // 크기 조절 가능하도록 설정
                .aspectRatio(contentMode: .fit) // 비율 유지
                .frame(width: 200, height: 200) // 크기 지정
            Text("반가워, SwiftUI!")
        }
        .padding()
    }
}
// ...

 

 

 

최종 결과

이제 프리뷰 화면을 보면 이미지가 이전보다 줄어든 것을 확인할 수 있습니다. 추가한 이미지 아래에 앞서 작성한 텍스트가 세로로 배치되어 있을 겁니다.

 

 

마지막으로 아이폰 시뮬레이터(Command + R)를 실행하면 시뮬레이터 화면에서도 똑같이 나타나는 것을 확인할 수 있습니다.

 

 

여기까지 SwiftUI의 Text, Image를 사용해 화면에 정보를 표시하고, VStack을 이용해 UI 요소들을 배치하는 방법을 배웠습니다. 

 

다음 글에서는 사용자의 행동에 앱이 반응하도록 만드는 인터랙션(Interaction)을 구현해보겠습니다.