SwiftUI 컴포넌트 가이드

📱 SwiftUI 컴포넌트 완벽 가이드

컴포넌트별 고유 메소드 + 공통 View Modifiers

🧭 빠른 이동

원하는 컴포넌트를 클릭하면 해당 섹션으로 이동합니다

1. 📝 Text 2. 🖼️ Image 3. 🔘 Button 4. 🏷️ Label 5. ⌨️ TextField 6. 🔄 Toggle 7. 🎚️ Slider 8. 🎯 Picker 9. ⏳ Progress 10. ➕ Stepper

🎨 공통 View Modifiers (모든 컴포넌트 적용 가능)

📝 Text 컴포넌트

메소드	설명	예시
.font()	시스템 폰트 스타일	Text("Hello").font(.title)
.fontWeight()	폰트 굵기 설정	Text("Bold").fontWeight(.bold)
.bold()	볼드체 적용	Text("Bold").bold()
.italic()	이탤릭체 적용	Text("Italic").italic()
.underline()	밑줄 추가	Text("Underline").underline(color: .blue)
.strikethrough()	취소선 추가	Text("Strike").strikethrough(color: .red)
.kerning()	글자 간격 조절	Text("Spaced").kerning(2.0)
.tracking()	자간 조절	Text("Track").tracking(1.5)
.baselineOffset()	기준선 오프셋	Text("Up").baselineOffset(10)
.multilineTextAlignment()	여러 줄 텍스트 정렬	Text("Multi\nLine").multilineTextAlignment(.center)
.lineLimit()	최대 줄 수 제한	Text("Long...").lineLimit(2)
.lineSpacing()	줄 간격 설정	Text("Line\nSpace").lineSpacing(10)
.textCase()	대소문자 변환	Text("Upper").textCase(.uppercase)
.monospaced()	고정폭 폰트	Text("12345").monospaced()

🖼️ Image 컴포넌트

메소드	설명	예시
.resizable()	크기 조정 가능하게	Image("photo").resizable()
.scaledToFit()	비율 유지하며 맞춤	Image("photo").resizable().scaledToFit()
.scaledToFill()	비율 유지하며 채움	Image("photo").resizable().scaledToFill()
.aspectRatio()	가로세로 비율	Image("photo").aspectRatio(16/9, contentMode: .fit)
.interpolation()	이미지 보간 품질	Image("pixel").interpolation(.none)
.renderingMode()	렌더링 모드	Image(systemName: "star").renderingMode(.template)
.symbolVariant()	SF Symbol 변형	Image(systemName: "heart").symbolVariant(.fill)
.symbolRenderingMode()	심볼 렌더링 모드	Image(systemName: "star").symbolRenderingMode(.palette)
.imageScale()	SF Symbol 크기	Image(systemName: "star").imageScale(.large)

🔘 Button 컴포넌트

메소드	설명	예시
.buttonStyle()	버튼 스타일 적용	Button("Tap").buttonStyle(.borderedProminent)
.borderedProminent	강조된 버튼	Button("Save").buttonStyle(.borderedProminent)
.bordered	테두리 버튼	Button("Cancel").buttonStyle(.bordered)
.borderless	테두리 없는 버튼	Button("Link").buttonStyle(.borderless)
.plain	기본 스타일 제거	Button("Text").buttonStyle(.plain)
.controlSize()	버튼 크기	Button("Size").controlSize(.large)
.buttonBorderShape()	버튼 모양	Button("Round").buttonBorderShape(.capsule)
.role()	버튼 역할 (destructive/cancel)	Button("Delete", role: .destructive) { }

🏷️ Label 컴포넌트

메소드	설명	예시
Label(title, systemImage:)	텍스트와 SF Symbol	Label("Home", systemImage: "house")
Label(title, image:)	텍스트와 커스텀 이미지	Label("Profile", image: "avatar")
.labelStyle(.titleOnly)	텍스트만 표시	Label("Text", systemImage: "doc").labelStyle(.titleOnly)
.labelStyle(.iconOnly)	아이콘만 표시	Label("Icon", systemImage: "star").labelStyle(.iconOnly)
.labelStyle(.titleAndIcon)	둘 다 표시	Label("Both", systemImage: "heart").labelStyle(.titleAndIcon)

⌨️ TextField 컴포넌트

메소드	설명	예시
.textFieldStyle()	텍스트필드 스타일	TextField("Name", text: $name).textFieldStyle(.roundedBorder)
.roundedBorder	둥근 테두리 스타일	.textFieldStyle(.roundedBorder)
.plain	기본 스타일	.textFieldStyle(.plain)
.keyboardType()	키보드 타입 설정	TextField("Email", text: $email).keyboardType(.emailAddress)
.textContentType()	자동완성 힌트	TextField("Password", text: $pw).textContentType(.password)
.autocapitalization()	자동 대문자 설정	TextField("Name", text: $name).autocapitalization(.words)
.disableAutocorrection()	자동 수정 비활성화	TextField("ID", text: $id).disableAutocorrection(true)
.submitLabel()	키보드 완료 버튼 텍스트	TextField("Search", text: $query).submitLabel(.search)
.onSubmit()	제출 시 액션	TextField("", text: $text).onSubmit { print("Submit") }
.focused()	포커스 상태 바인딩	TextField("", text: $text).focused($isInputActive)

🔄 Toggle 컴포넌트

메소드	설명	예시
.toggleStyle()	토글 스타일	Toggle("WiFi", isOn: $wifi).toggleStyle(.switch)
.switch	iOS 스위치 스타일	Toggle("On", isOn: $on).toggleStyle(.switch)
.button	버튼 토글 스타일	Toggle("Select", isOn: $selected).toggleStyle(.button)
.automatic	자동 스타일	Toggle("Auto", isOn: $auto).toggleStyle(.automatic)

🎚️ Slider 컴포넌트

메소드	설명	예시
Slider(value:in:)	기본 슬라이더	Slider(value: $volume, in: 0...100)
Slider(value:in:step:)	단계별 슬라이더	Slider(value: $rating, in: 0...5, step: 1)
minimumValueLabel	최소값 라벨	Slider(value: $val) { } minimumValueLabel: { Text("0") }
maximumValueLabel	최대값 라벨	Slider(value: $val) { } maximumValueLabel: { Text("100") }
onEditingChanged	편집 상태 콜백	Slider(value: $val, onEditingChanged: { editing in })

🎯 Picker 컴포넌트

메소드	설명	예시
.pickerStyle()	피커 스타일	Picker("Select", selection: $selected) { }.pickerStyle(.wheel)
.wheel	휠 스타일	.pickerStyle(.wheel)
.segmented	세그먼트 스타일	.pickerStyle(.segmented)
.menu	드롭다운 메뉴	.pickerStyle(.menu)
.navigationLink	네비게이션 링크 스타일	.pickerStyle(.navigationLink)
.inline	인라인 스타일	.pickerStyle(.inline)

⏳ ProgressView 컴포넌트

메소드	설명	예시
ProgressView()	불확정 프로그레스	ProgressView()
ProgressView(value:total:)	확정 프로그레스	ProgressView(value: 0.7, total: 1.0)
.progressViewStyle()	프로그레스 스타일	ProgressView().progressViewStyle(.circular)
.circular	원형 프로그레스	.progressViewStyle(.circular)
.linear	선형 프로그레스	.progressViewStyle(.linear)

➕➖ Stepper 컴포넌트

메소드	설명	예시
Stepper(value:in:)	값 범위 지정	Stepper("Count: \(count)", value: $count, in: 0...10)
Stepper(value:in:step:)	증감 단위 지정	Stepper("x5", value: $value, in: 0...100, step: 5)
onIncrement/onDecrement	커스텀 액션	Stepper("Custom") { count += 2 } onDecrement: { count -= 2 }

🎨 공통 View Modifiers (모든 View에 적용 가능)

📐 레이아웃 & 크기

메소드	설명	예시
.frame()	크기와 정렬 지정	View.frame(width: 200, height: 100)
.padding()	여백 추가	View.padding(20)
.offset()	위치 이동	View.offset(x: 10, y: 20)
.position()	절대 위치 지정	View.position(x: 100, y: 100)
.fixedSize()	고정 크기	View.fixedSize(horizontal: true, vertical: false)
.layoutPriority()	레이아웃 우선순위	View.layoutPriority(1)
.alignmentGuide()	정렬 가이드	View.alignmentGuide(.leading) { d in d[.trailing] }

🎨 스타일 & 색상

메소드	설명	예시
.foregroundColor()	전경색 (iOS 15까지)	View.foregroundColor(.blue)
.foregroundStyle()	전경 스타일 (iOS 17+)	View.foregroundStyle(.blue.gradient)
.background()	배경 추가	View.background(Color.yellow)
.backgroundStyle()	배경 스타일 (iOS 16+)	View.backgroundStyle(.thinMaterial)
.tint()	틴트 색상	View.tint(.purple)
.border()	테두리 추가	View.border(Color.red, width: 2)
.overlay()	오버레이 추가	View.overlay(RoundedRectangle(cornerRadius: 10).stroke())

✨ 효과 & 변형

메소드	설명	예시
.opacity()	투명도 설정	View.opacity(0.5)
.shadow()	그림자 효과	View.shadow(radius: 5, x: 2, y: 2)
.blur()	블러 효과	View.blur(radius: 3)
.brightness()	밝기 조절	View.brightness(0.2)
.contrast()	대비 조절	View.contrast(1.5)
.saturation()	채도 조절	View.saturation(0.8)
.grayscale()	흑백 효과	View.grayscale(0.9)
.hueRotation()	색조 회전	View.hueRotation(.degrees(45))

🔄 변형 & 애니메이션

메소드	설명	예시
.rotationEffect()	회전	View.rotationEffect(.degrees(45))
.rotation3DEffect()	3D 회전	View.rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0))
.scaleEffect()	크기 변환	View.scaleEffect(1.5)
.transformEffect()	변형 매트릭스	View.transformEffect(CGAffineTransform(rotationAngle: .pi))
.animation()	애니메이션 적용	View.animation(.easeInOut, value: state)
.transition()	전환 효과	View.transition(.slide)

✂️ 클리핑 & 마스킹

메소드	설명	예시
.clipShape()	모양으로 자르기	View.clipShape(Circle())
.clipped()	경계 밖 자르기	View.clipped()
.mask()	뷰로 마스킹	View.mask(Circle().frame(width: 100, height: 100))
.cornerRadius()	모서리 둥글게	View.cornerRadius(10)
.clipShape(RoundedRectangle)	둥근 사각형 클리핑	View.clipShape(RoundedRectangle(cornerRadius: 20))

⚡ 인터랙션 & 접근성

메소드	설명	예시
.disabled()	비활성화	View.disabled(true)
.allowsHitTesting()	터치 이벤트 제어	View.allowsHitTesting(false)
.onTapGesture()	탭 제스처	View.onTapGesture { print("Tapped") }
.onLongPressGesture()	롱프레스 제스처	View.onLongPressGesture { print("Long press") }
.gesture()	커스텀 제스처	View.gesture(DragGesture())
.accessibilityLabel()	접근성 라벨	View.accessibilityLabel("Button")
.accessibilityHint()	접근성 힌트	View.accessibilityHint("Double tap to select")

💡 Pro Tips

✅ 메소드 체이닝: Image(systemName: "star").foregroundColor(.yellow).font(.title).shadow(radius: 3)

✅ 조건부 modifier: Text("Hello").foregroundColor(isImportant ? .red : .black)

✅ ViewModifier 재사용: struct MyStyle: ViewModifier { ... }

✅ 최신 iOS 기능: iOS 17+ 에서는 foregroundStyle()로 그라디언트 적용 가능

↑