[Tutorial] 01. 프로젝트 생성과 기본 View 구성 알아보기

Apple에서 제공하는 SwiftUI 공식 튜토리얼 가이드가 있습니다.

https://developer.apple.com/tutorials/swiftui

Introducing SwiftUI | Apple Developer Documentation

이 가이드라인을 따라하다보면 SwiftUI가 어떻게 동작하고 어떤 환경으로 이루어져 있는지 학습하기 쉽습니다.

여기서는 간단하게 해당 강의를 따라하면서 어떤 의미를 지니는지  간단하게 알아보겠습니다.

 

챕터 1에서는 '뷰를 만들고 합쳐보는' 방법을 배워보겠습니다.

 

Section 1. 프로젝트 생성

Xcode 실행화면

 

템플리 선택

 

프로젝트 이름 설정

ContentView

Xcode를 실행한 다음 프로젝트를 생성합니다. 

앱 이름을 Landmark로 설정(임의의 다른 이름으로 설정해도 상관 X)하고 프로젝트를 생성하면 ContentView 화면이 나오게 됩니다.

 

Section 2.SwiftUI View의 기본 구성

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

 

🔹 1. import SwiftUI

먼저 맨 위에 import SwiftUI라는게 있습니다.

SwiftUI는 Apple에서 제공하는 "UI 프레임워크"인데 우리가 화면에 뭘 그리거나 버튼, 텍스트, 이미지 등을 표현하려면 저 플레임워크를 불러줘야합니다. 만약, 이 줄이 없으면 아래에 있는 View, VStack, Image, Text라는거에 빨간줄이 뜨면서 에러가 발생하게 됩니다.

-> 아, 아무튼 저걸 상단에 넣어줘야 뭐가 돌아가는구나로 이해하면 됩니다.

 

🔹 2.  struct ContentView: View { ... }

ContentView라는 이름이 붙은 구조체(struct)가 있습니다. (이름은 뭐든지 상관없음)

이건 '우리가 화면(View)을 정의하는 단위'이고, : View라고 붙어 있는 건 '이게 SwiftUI의 View 프로토콜을 따른다' 라는 의미입니다.

즉, 이 구조체가 UI가 될 거야 라는 의미입니다.

-> 구조체? 뷰? 프로토콜? 대충 이런게 있구나 하고 넘기셔도 됩니다.

대충 저 ContetView라는게 이 화면(View)을 구성한다는거구나!

 

🔹3. VStack { ... } - 여러 View를 '세로'로 쌓는다!

아래에 VStack으로 감싸진 뭐가 있습니다. 

VStack은 'Vertical Stack'의 약자로, 여러 뷰를 위에서 아래 방향으로 쭉 수직으로 나열해주는 컨테이너입니다.

예전 UIkit을 해보셨으면 아시겠지만 UIStackView의 SwiftUI 버전이라고 생각하시면 됩니다.

 

만약 VStack을 쓰지 않고 그냥 두 개 이상의 뷰(Text, Image)를 나열하면 SwiftUI는 "얘네를 어떻게 배치하지"하고 혼란에 빠집니다.

그래서 반드시 컨테이너(VStack, HStack, ZStack) 안에 넣어줘야 합니다. 

 

🔹 4. Image(sytstemName: "globe") - 기본 아이콘 그리기

Image(systemName: "globe")는 말그대로 이미지를 그리는데 쓰이는 이미지 뷰입니다.

여기서 systemName: "globe"는 우리가 따로 이미지 파일을 준비한게 아니라, iOS/macOS가 기본으로 제공하는 아이콘 모음(SF Symbols) 중에서 "globe"라는 이름의 아이콘을 꺼내온다는 의미입니다.

 

cf.) .imageScale과 .foregroundStyle은 "아이콘의 크기 조절" + "아이콘의 색상/스타일 조절"을 해주는 부분입니다.

.imageScale(.large)는 아이콘을 크게, .foregroundStyle(.tint)는 시스템/앱의 테마 색상(또는 기본 색상)으로 채워달라는 뜻입니다.

 

🔹 5. Text("Hello, World!") - 텍스트 보여주기

Text("") 는 화면에 텍스트를 보여주는 뷰입니다.

지금은 Hello, World!라는 글자를 넣어줬지만 사용자가 원하는대로 수정할 수 있습니다.

 

🔹 6. padding() - 여유 공간 주기

.padding()은 '전체 VStack안의 내용(텍스트 + 아이콘)을 화면의 모서리 혹은 뷰의 경계에서 약간 안쪽으로 밀어내라'는 뜻입니다.즉, 여백을 줘서 UI가 답답하지 않게 보이려는 역할입니다.

 

---

정리

• SwiftUI는 기존의 UIKit과 다르게 '선언형(Declarative UI) 프레임워크'라서, "이 화면에 뭐가 있다"를 코드로 선언하면 시스템이 알아서 그려줍니다. https://en.wikipedia.org/wiki/SwiftUI?utm_source=chatgpt.com
• ContentView는 하나의 화면을 정의하는 구조이고, body 안에 뷰 계층(hierarchy)을 작성합니다.
• 여러 뷰를 함꼐 쓰려면 뷰 컨테이너(VStack / HStack / ZStack)안에 넣어줘야합니다.
• Image(systemName: )은 시스템 안에서 이미지를 불러오기, Text(...)는 텍스트를 나타내는 뷰입니다.
• modifier(ex. .imageScale, .foregroundStyle, .padding())로 스타일이나 레이아웃 조절

 

프리뷰 화면

기본 프리뷰 화면

 

프로젝트의 Canvas를 통해 위 프리뷰를 확인할 수 있습니다.

 

응용! Text 글자와 색상을 바꿔보자

지금 현재 상황에서

 

수정 결과화면

 

지금까지 배운걸 토대로 위 화면처럼 수정해보자!

힌트) Text의 색상은 .foregroundStyle, Text의 글씨체 및 크기는 .font를 이용하면 된다!

https://developer.apple.com/documentation/swiftui/view/foregroundstyle(_:)

foregroundStyle(_:) | Apple Developer Documentation

https://developer.apple.com/documentation/swiftui/font

Font | Apple Developer Documentation

 

---

답지 확인!

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Turtle Rock")
                .font(.title)
                .foregroundStyle(.green)
        }
        .padding()
    }
}

#Preview {
    ContentView()
}

 

해설 : Text 내부의 Hello, World!가 Turtle Rock으로 바뀌었다.

그리고 하단에 .fontd와 .foregroundStyle을 통해 글씨 크기와 색상을 바꾼것을 확인할 수 있다!

 

이제 여러분은 Text와 Image등을 통해 간단한 SwiftUI View를 만들 수 있게 되었다!