SwiftUI 플레이그라운드

코드 스니펫을 작성, 실행, 공유하세요 - 별도 설치가 필요 없습니다.

ContentView.swift

미리보기자동 미리보기

import SwiftUI

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var done = false
}

struct ContentView: View {
    @State private var items = [
        TodoItem(title: "Run SwiftUI in the browser", done: true),
        TodoItem(title: "Tap a task to check it off"),
        TodoItem(title: "Add a task of your own"),
    ]
    @State private var newTitle = ""

    var remaining: Int {
        items.filter { !$0.done }.count
    }

    var body: some View {
        NavigationStack {
            List {
                Section("\(remaining) left to do") {
                    ForEach($items) { $item in
                        Toggle(item.title, isOn: $item.done)
                    }
                }
                Section {
                    HStack {
                        TextField("New task", text: $newTitle)
                        Button("Add") {
                            items.append(TodoItem(title: newTitle))
                            newTitle = ""
                        }
                        .disabled(newTitle.isEmpty)
                    }
                }
            }
            .navigationTitle("My Tasks")
        }
    }
}

SwiftUI를 온라인으로 실행하고 iPhone에서 앱 확인하기

무료 온라인 SwiftUI 플레이그라운드입니다. ContentView를 작성하면 코드 옆의 iPhone 크기 화면에 뷰가 나타납니다. 버튼, 토글, 텍스트 필드가 탭에 반응하므로 @State의 변화가 실제 기기에서처럼 보입니다. Mac도, Xcode도, 내려받을 시뮬레이터도 필요 없습니다.

코드는 swiftc로 Coddy가 직접 구현한 SwiftUI에 맞춰 컴파일됩니다. Coddy SwiftUI 레슨의 실시간 미리보기를 움직이는 바로 그 구현입니다. 스택, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, 시트와 알림, 그리고 @State, @Binding, ObservableObject, @Published 같은 일상적인 API를 지원합니다. Apple의 프레임워크 자체는 아니므로 UIKit, MapKit, Core Data 같은 Apple 전용 프레임워크는 쓸 수 없습니다.

이 SwiftUI 플레이그라운드가 유용한 이유

실시간 iPhone 미리보기: 화면이 상태 표시줄과 Dynamic Island가 있는 기기 프레임 안에 iPhone 크기로 그려지므로, 레이아웃이 휴대폰에서와 같은 모습으로 보입니다.
앱을 탭해 보세요. 버튼, 토글, 스테퍼, 텍스트 필드가 반응하고, 미리보기가 새 상태에서 탭을 다시 재생하므로 @State와 @Binding이 실제 앱처럼 동작합니다.
자동 미리보기: 입력을 멈추고 잠시 후 화면이 다시 빌드되며, 새로고침 버튼으로 앱을 처음부터 다시 시작할 수 있습니다. 컴파일러 오류는 파일의 해당 줄을 가리킵니다.
편집기의 SwiftUI 코드 제안: 점 뒤의 모디파이어, 인수가 받는 값(.font(., .foregroundStyle(.), @ 뒤의 프로퍼티 래퍼, SF Symbols 이름.
휴대폰 화면의 스크린샷을 PNG로 저장하고 ContentView.swift를 내려받아 나중에 Xcode에서 열 수 있습니다. Xcode에서 붙여 넣은 파일도 빌드되며, #Preview 블록은 무시됩니다.

SwiftUI 플레이그라운드에서 만들 수 있는 것

List, ForEach($items), 행마다 Toggle이 있는 할 일 목록과, 새 행을 추가하는 TextField와 버튼.
설정 화면: 섹션으로 나뉜 Form에 Picker, Stepper, Slider를 두고 모두 @State에 바인딩.
내비게이션: 제목이 있는 NavigationStack과 상세 화면을 여는 NavigationLink 행.
레이아웃 실험: VStack, HStack, ZStack에 .padding, .frame, .background와 둥근 도형을 조합해 모디파이어가 쌓이는 방식을 확인.

온라인 SwiftUI 플레이그라운드 자주 묻는 질문

Mac 없이 SwiftUI를 실행할 수 있나요?

네. 이 플레이그라운드는 Windows, Linux, Chromebook, iPad 등 모든 최신 브라우저에서 동작합니다. 코드는 Coddy 서버에서 컴파일되고 화면은 페이지 안에 그려지므로, SwiftUI를 써 보는 데 Xcode도, Mac도, iOS 시뮬레이터도 필요 없습니다.

온라인 SwiftUI 플레이그라운드는 무료인가요?

네. 무료이며 가입도 필요 없습니다. 페이지를 열고 코드를 수정하면서 휴대폰 화면을 보면 됩니다.

Apple의 SwiftUI인가요?

아니요. SwiftUI의 뷰, 모디파이어, 프로퍼티 래퍼를 Coddy가 직접 구현한 것으로, swiftc로 컴파일되어 iPhone 화면으로 그려집니다. 일상적인 SwiftUI 코드는 그대로 실행되며, 미리보기는 Coddy SwiftUI 레슨이 사용하고 채점에도 쓰는 것과 같습니다. UIKit, MapKit, Core Data 같은 Apple 전용 프레임워크는 쓸 수 없고, 애니메이션은 최종 상태로 표시됩니다.

@Observable이나 #Preview를 쓸 수 있나요?

공유 데이터에는 @Published, @StateObject와 함께 ObservableObject를 사용하세요. @Observable 매크로와 #Preview에는 Xcode의 매크로 플러그인이 필요합니다. #Preview 블록은 무시되므로 Xcode에서 붙여 넣은 파일도 그대로 빌드되고, 앱에는 ContentView가 표시됩니다. 직접 만든 @main App 구조체를 추가할 수도 있습니다.

플레이그라운드를 써 본 다음 SwiftUI는 어떻게 배우나요?

예제 앱을 바꾸고 미리보기를 탭하며 살펴보세요. 체계적으로 배우고 싶다면 Coddy의 SwiftUI 코스가 뷰, 모디파이어, 스택, @State, 목록, 내비게이션, @Binding, 관찰 가능한 데이터를 짧은 레슨으로 가르쳐 줍니다. 모든 레슨에 같은 실시간 iPhone 미리보기가 있습니다.

SwiftUI에 유용한 도구

SwiftUI 플레이그라운드와 잘 어울리는 브라우저 기반 무료 도구 - 모두 Coddy의 일부입니다.

SwiftUI 편집기 임베드 코딩 플랫폼 비교