SwiftUI: Form을 활용한 입력 폼 제작하기

SwiftUI에서 사용자 입력을 받는 UI를 만들 때 Form을 활용하면 손쉽게 구조화된 입력 폼을 생성할 수 있습니다. Form은 설정 화면이나 회원가입 폼, 프로필 편집 화면 등에서 많이 사용됩니다.

 

이 글에서는 Form의 기본 개념부터 다양한 입력 요소(TextField, Toggle, Picker 등)를 활용하는 방법까지 상세히 알아보겠습니다.

---

1️⃣ Form이란?

 

SwiftUI의 Form은 정리된 형태의 입력 UI를 쉽게 구성할 수 있도록 도와주는 컨테이너입니다.

UIKit의 UITableView 스타일과 유사하며, 섹션 단위로 그룹화하여 구성할 수 있는 것이 특징입니다.

 

📌 주요 특징:

• Form 내부에 다양한 입력 요소(TextField, Toggle, Picker 등)를 배치할 수 있음
• 자동으로 리스트 스타일이 적용됨
• 각 입력 필드는 Section으로 구분 가능
• iOS 설정 앱과 유사한 형태의 UI 구현 가능

---

2️⃣ Form을 활용한 기본 입력 폼 만들기

 

가장 기본적인 Form 예제를 살펴보겠습니다.

import SwiftUI

struct ContentView: View {
    @State private var name: String = ""
    @State private var email: String = ""

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("사용자 정보")) {
                    TextField("이름", text: $name)
                    TextField("이메일", text: $email)
                        .keyboardType(.emailAddress)
                }
                
                Section {
                    Button("저장") {
                        print("저장 버튼 클릭됨: \(name), \(email)")
                    }
                }
            }
            .navigationTitle("회원 정보 입력")
        }
    }
}

📝 코드 설명

1. @State 변수를 사용하여 입력값을 저장합니다.
2. Form 내부에 Section을 추가하여 입력 필드를 그룹화합니다.
3. TextField를 이용해 이름과 이메일을 입력받습니다.
4. 이메일 입력 필드에 .keyboardType(.emailAddress)를 적용하여 이메일 입력에 적합한 키보드를 표시합니다.
5. Button을 추가하여 저장 기능을 구현합니다.

---

3️⃣ 다양한 입력 필드 추가하기

 

입력 폼을 확장하여 Toggle, Stepper, DatePicker 등을 추가해보겠습니다.

import SwiftUI

struct ContentView: View {
    @State private var name: String = ""
    @State private var isNotificationsEnabled: Bool = false
    @State private var birthDate: Date = Date()
    @State private var age: Int = 18

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("사용자 정보")) {
                    TextField("이름", text: $name)
                }
                
                Section(header: Text("설정")) {
                    Toggle("알림 받기", isOn: $isNotificationsEnabled)
                    Stepper("나이: \(age)", value: $age, in: 0...100)
                    DatePicker("생년월일", selection: $birthDate, displayedComponents: .date)
                }
            }
            .navigationTitle("설정 화면")
        }
    }
}

📝 코드 설명

1. Toggle → 토글 버튼을 추가하여 사용자가 알림을 켜거나 끌 수 있도록 설정
2. Stepper → 나이를 선택할 수 있는 스텝퍼 추가 (in: 0...100 범위 지정)
3. DatePicker → 사용자가 생년월일을 선택할 수 있도록 DatePicker 추가

---

4️⃣ Picker를 활용한 옵션 선택 UI 구현

 

Picker를 활용하면 사용자가 여러 옵션 중 하나를 선택할 수 있는 드롭다운 형태의 UI를 만들 수 있습니다.

import SwiftUI

struct ContentView: View {
    @State private var selectedGender: String = "남성"
    let genders = ["남성", "여성", "기타"]

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("성별 선택")) {
                    Picker("성별", selection: $selectedGender) {
                        ForEach(genders, id: \.self) {
                            Text($0)
                        }
                    }
                    .pickerStyle(SegmentedPickerStyle()) // Segmented 스타일 적용
                }
            }
            .navigationTitle("회원 가입")
        }
    }
}

📝 코드 설명

1. Picker를 사용하여 성별을 선택할 수 있도록 구성합니다.
2. genders 배열을 ForEach와 함께 사용하여 각 옵션을 표시합니다.
3. .pickerStyle(SegmentedPickerStyle())을 적용하여 iOS 설정 앱과 유사한 선택 UI를 만듭니다.

 

📌 Tip: pickerStyle()을 변경하면 다른 스타일(예: .wheelPickerStyle(), .menu)도 적용할 수 있습니다.

---

5️⃣ 폼 데이터 저장 및 활용하기

 

입력한 데이터를 저장하고 활용하는 방법도 중요합니다.

아래 예제에서는 사용자가 입력한 정보를 저장하고, 버튼 클릭 시 콘솔에 출력하는 기능을 구현했습니다.

import SwiftUI

struct ContentView: View {
    @State private var name: String = ""
    @State private var email: String = ""
    @State private var isSubscribed: Bool = false

    var body: some View {
        NavigationView {
            Form {
                Section(header: Text("개인 정보")) {
                    TextField("이름", text: $name)
                    TextField("이메일", text: $email)
                        .keyboardType(.emailAddress)
                }
                
                Section(header: Text("설정")) {
                    Toggle("뉴스레터 구독", isOn: $isSubscribed)
                }
                
                Section {
                    Button("저장") {
                        print("이름: \(name), 이메일: \(email), 구독 여부: \(isSubscribed)")
                    }
                }
            }
            .navigationTitle("회원 정보 입력")
        }
    }
}

📝 데이터 저장 원리

• @State 변수를 사용하여 입력 데이터를 저장합니다.
• 버튼 클릭 시 print()를 활용하여 입력한 데이터를 확인합니다.

---

✨ 마무리: Form을 활용한 입력 폼 제작 정리

 

✅ 핵심 정리

• Form은 SwiftUI에서 입력 필드를 구조화하는 컨테이너 역할을 합니다.
• Section을 활용하여 입력 필드를 그룹화할 수 있습니다.
• 다양한 입력 요소(TextField, Toggle, Picker, Stepper, DatePicker)를 조합하여 실제 앱에서 활용 가능한 입력 폼을 제작할 수 있습니다.
• 입력된 데이터를 @State로 관리하며, 필요한 경우 저장 및 활용하는 기능도 추가할 수 있습니다.🚀