선형, 방사형 및 각도 그라데이션
부드러운 색상 전환으로 뷰를 채웁니다.
선형, 방사형 및 각도 그라데이션은(는) CoddyKit의 무료 SwiftUI Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 SwiftUI Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. SwiftUI Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
그라데이션이란?
그라데이션은 두 가지 이상의 색상 사이를 부드럽게 섞습니다. 단색 채우기만으로는 만들기 어려운 깊이감과 세련미를 더해 줍니다. 🌈
그라데이션도 뷰입니다
Color와 마찬가지로 LinearGradient도 뷰입니다. 직접 배치하거나 도형 또는 배경을 채우는 데 사용할 수 있습니다.
첫 번째 LinearGradient
LinearGradient는 직선을 따라 색상을 이어 줍니다. 방향을 정하려면 색상과 시작점, 끝점을 지정하면 됩니다.
LinearGradient(
colors: [.blue, .purple],
startPoint: .top,
endPoint: .bottom
)시작점과 끝점 선택하기
.topLeading 및 .bottomTrailing과 같은 점을 사용하면 그라데이션이 대각선 방향으로 향합니다. 두 점을 바꾸면 색상이 섞이는 각도가 달라집니다.
startPoint: .topLeading
endPoint: .bottomTrailing두 가지를 넘는 색상
여러 색상을 전달하면 그라데이션이 전체 길이에 걸쳐 색상을 고르게 펼칩니다. 노을 느낌의 배경을 만들기에 좋습니다.
LinearGradient(
colors: [.orange, .pink, .purple],
startPoint: .leading,
endPoint: .trailing
)RadialGradient는 바깥쪽으로 퍼집니다
RadialGradient는 중심점에서 원형으로 바깥쪽을 향해 퍼집니다. 스포트라이트와 은은한 빛을 표현하기에 적합합니다.
RadialGradient(
colors: [.yellow, .red],
center: .center,
startRadius: 5,
endRadius: 120
)반지름 조정하기
startRadius와 endRadius는 빛이 얼마나 좁거나 넓게 퍼질지 조절합니다. 두 값의 차이가 클수록 더 부드럽고 천천히 색이 흐려집니다.
AngularGradient는 둘레를 따라 펼쳐집니다
AngularGradient는 색상을 색상환처럼 중심을 기준으로 둘러 배치합니다. 멋진 원뿔형 소용돌이 효과를 만들 수 있습니다.
AngularGradient(
colors: [.red, .green, .blue, .red],
center: .center
)배경으로 사용하는 그라데이션
background 수정자로 그라데이션을 추가하면 콘텐츠 뒤의 모든 뷰를 더욱 밝게 만들 수 있습니다. 즉시 시각적인 생동감이 더해집니다.
Text("Hi")
.padding()
.background(LinearGradient(
colors: [.blue, .cyan],
startPoint: .top, endPoint: .bottom))간단한 그라데이션
빠르게 색상을 섞으려면 어떤 색상에든 .gradient를 호출하면 됩니다. SwiftUI가 위에서 아래로 이어지는 은은한 그라데이션을 즉시 만들어 줍니다.
Circle()
.fill(Color.blue.gradient)알맞은 그라데이션 선택하기
방향에 따른 색상 변화를 표현할 때는 선형, 빛이 퍼지는 효과에는 방사형, 색상환에는 각도형을 사용합니다. 각각 UI에 서로 다른 분위기를 더해 줍니다. 🎨
빠른 확인
어떤 그라데이션이 중심점을 기준으로 색상을 둘러 펼칠까요?
복습: 그라데이션
이제 세 가지 방식으로 색상을 섞을 수 있습니다. 선을 따라 섞는 선형, 중심에서 퍼지는 방사형, 색상환처럼 둘러가는 각도형입니다. 정말 멋지게 해내셨습니다!
AI 튜터와 함께 Swift을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“선형, 방사형 및 각도 그라데이션” 강의는 무료인가요?
네 — “선형, 방사형 및 각도 그라데이션” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 SwiftUI Academy 강의 전체를 잠금 해제할 수 있습니다. SwiftUI Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“선형, 방사형 및 각도 그라데이션”에서 뭘 배우나요?
부드러운 색상 전환으로 뷰를 채웁니다. 브라우저에서 직접 실행하는 실습 코드로 SwiftUI Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
SwiftUI Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 SwiftUI Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“선형, 방사형 및 각도 그라데이션” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 SwiftUI Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 SwiftUI Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Color 형식과 에셋 색상
- 선형, 방사형 및 각도 그라데이션
- 내장 도형
- 선, 채우기 및 오버레이