์๋ ํ์ธ์, ์ค๋๋ง์ ๋์์จ ๊ฐ์์ ๋๋ค. ๋ ผ๊ฑด ์๋๊ตฌ,,, ์ ํ์์นด๋ฐ๋ฏธ์์ ์ด์ฌํ ํ๋ก์ ํธ ์ค์ธ๋ฐ, ๊ทธ๊ฑธ ๋ธ๋ก๊ทธ์ ์ ๋ก๋ ํด๋ ๋๋ค๋ ํ๋ฝ์ด ๋จ์ด์ง๋ค๋ฉด, ์ด๋ค ํ๋ก์ ํธ๋ฅผ ์งํํ๋์ง ์ฐพ์์ฌ ์์ ์ ๋๋ค. ใ ใ
ํ๋ก์ ํธ๋ฅผ ์งํํ๋ ๊ณผ์ ์์ SwiftUI๋ฅผ ์ฌ์ฉํ๊ฒ ๋์๋๋ฐ, ์ด๋ ํ์ํ ๊ฒ๋ค์ ๊ณต๋ถํ๋ฉด์ ํฌ์คํ ํด๋ณผ ์์ ์ ๋๋ค! ๊ทธ๋์ ๊ธฐ์ด๋ถํฐ ์ฐจ๊ทผ์ฐจ๊ทผ ํฌ์คํ ๋๋ ๊ธฐ๋ถ์ด ์๋๋ผ, ๊ทธ๋๊ทธ๋ ํ์ํ ๊ธฐ๋ฅ๊ณผ ๊ณต๋ถํ ๊ธฐ๋ฅ์ ๋ํด์ ์ ๋ก๋ํ๋ค~ ๋ผ๊ณ ์ดํดํด์ฃผ์๋ฉด ๋ ๊ฒ ๊ฐ์ต๋๋ค ใ ํํ
์ค๋์ Modal View ์ ๋ํด์ ํฌ์คํ ํด๋ณด๊ฒ ์ต๋๋ค.
๐ ๏ธ Modal View ๋?
iOS ๊ฐ๋ฐ์ ์ค๋นํ๋ฉด์ ๋๋์ ์, ์ ํ์ด ์ ์ฝํ๊ณ ์๋ ๊ฒ์ด ๊ต์ฅํ ๋ง๋ค๋ ์ ์ ๋๋ค! ์ฅ์ ์ด๋ฉด์ ๋จ์ ์ด๊ธฐ๋ ํ๋ฐ์, ์ฐ์ ์ ํ์์ ์ ์ํ๋ Modal View ์๋ํด์ ์์๋ด ์๋ค.
์ฐธ๊ณ ) Apple Developer ๋ผ๋ฉด ๊ผญ ๋ด์ผํ HIG (Human Interface Guidelines) - Modality
Modality - App Architecture - iOS - Human Interface Guidelines - Apple Developer
Modality Modality is a design technique that presents content in a temporary mode that requires an explicit action to exit. Presenting content modally can: Help people focus on a self-contained task or set of closely related options Ensure that people rece
developer.apple.com
๐ ๏ธ Modality ์ ๋ํ ์ ์
Modality is a design technique that presents content in a temporary mode that requires an explicit action to exit.
ํด์ํด๋ณด์๋ฉด, Modailty๋ ๋์์ธ ๊ธฐ์ ์ค ํ๋์ ๋๋ค. ์ปจํ ์ธ ๋ฅผ ์ข ๋ฃํ๊ธฐ ์ํด ๋ช ์์ ์ธ ์์ ์ด ํ์ํ ์์๋ชจ๋๋ก ๋ํ๋ด๋ ๊ฒ์ ๋๋ค.
์ด๊ฒ ๋ฌด์จ.. ๋ง์ด์ง..? ๊ทธ๋ผ ๋ค์ ๊ทธ๋ฆผ์ ๋ณด์. ์์ดํฐ์ ์ฌ์ฉํ๋ ์ฌ๋์ด๋ผ๋ฉด, ํด๋น view ์ ๋ํด์ ์ต์ํ ๊ฒ๋๋ค. ์์ดํฐ ๊ธฐ๋ณธ์ฑ "Mail"์ ๋ค์ด๊ฐ๋ณด๋ฉด, ๋ฉ์ผ List ๊ฐ ์ญ ๋จ๋๋ฐ, ์ฌ๊ธฐ์ "๋ฉ์ผ์์ฑ"๋ฒํผ์ ๋๋ฌ๋ด ์๋ค. ๊ทธ๋ผ ๋ฐ์์ ๋ฌด์จ View๊ฐ ํ๋ ๋ถ ํ๊ณ ์ฌ๋ผ์ต๋๋ค. ์ด๊ฒ ๋ฐ๋ก Modal view!
์ด์ธ์๋ HIG์ ๋ฐ๋ฅด๋ฉด, iOS๋ Modality๋ก์ alerts, activity views, share sheets, action sheets ๋ฅผ ์ ๊ณตํ๊ณ ์์ต๋๋ค. ์ด๋ฐ modality์ ๋ํ ์ค๋ช ๊ณผ ์์ธํ Guidelines๋ ์ถํ HIG ํฌ์คํ ์ ํ ๋ ์์ธํ ๋ค๋ค๋ณด๋๋ก ํ๊ณ , ์ค๋์ Modal View๋ฅผ ๊ฐ๋จํ๊ฒ ๊ตฌํํด ๋ณผ ์์ ์ ๋๋ค.
๐ ๏ธ SwiftUI ๋ก Modal View ๊ตฌํํ๊ธฐ
- ์ฐ์ 'Body' ์ Text์ Button์ ์์ฑํด ์ฃผ์์ต๋๋ค.
- Button ๋ด๋ถ์๋ Action ๊ณผ Text ๋ถ๋ถ ๋ ๊ฐ๋ก ๋๋์ด์ง๋๋ฐ, Action ๋ถ๋ถ์๋ Modal ์ฐฝ์ด ๋จ๊ฒ ๋ง๋ค์๊ณ , Text ๋ถ๋ถ์๋ ๋ฒํผ ๋ชจ์์ ๋ํ ์์ฑ์ ๋ฃ์ด์ฃผ์์ต๋๋ค.
- Action ๋ถ๋ถ
- showModal ์ด๋ผ๋ ๋ณ์๋ฅผ false ๋ผ๊ณ ๋จผ์ ์ ์ธํด์ค๋๋ค.
- ํด๋น ๋ณ์๊ฐ true ๊ฐ ๋๋ฉด, modal ์ฐฝ์ด ๋ณด์ฌ์ง๋๋ค.
- action ๋ถ๋ถ์ showModal = true ๋ก ๋ฐ๊ฟ์ฃผ๋ฉด์ ๋ชจ๋ฌ์ฐฝ์ด ๋จ๊ฒ ๋ง๋ค์ด์ฃผ์์ต๋๋ค.
- ๋ฒํผ ์์ฑ๋ถ๋ถ
- Button ๋ถ๋ถ์ ๋ฐ๋ก ํฌ์คํ ์์ ์ ๋๋ค.
- ๊ฐ๋จํ ์ค๋ช ํ์๋ฉด, Button ์ ๊ธฐ๋ณธ์ ์ผ๋ก ํ์ด ์์ด text๋ก๋ง ๋จผ์ ์ ๊ณต๋๊ธฐ ๋๋ฌธ์ frame ์์ฑ์ ์ฃผ์ด์ ๋ฒํผ ํฌ๊ธฐ๋ฅผ ์ ํด์ฃผ์์ต๋๋ค.
- background ์์ฑ์ ํ์ฉํด์ button ์ ๋ชจ์์ RoundedRectangle๋ก ๋ฐ๊พธ์ด ์ฃผ์๊ณ , ์์์ ์น ํด์ฃผ์์ต๋๋ค.
- primaryColor๋ ์ ๊ฐ ์์๋ก ์์ฑํ ์์ด๊ธฐ ๋๋ฌธ์, ํด๋น ์ฝ๋๋ก ํ ์คํธ๋ฅผ ์ํ์๋ ๋ถ๋ค์ Color.black ์ผ๋ก ์งํํด์ฃผ๋ฉด ๋ฉ๋๋ค!!
- foregroundColor ์์ฑ์ ์ฌ์ฉํด์ ๊ธ์ ์์์ white ๋ก ๋ฐ๊พธ์ด ์ฃผ์์ต๋๋ค.
- sheet ์์ฑ์ ํ์ฉํด์ ModalView๋ฅผ sheet๋ก ์ง์ ํด์ฃผ์์ต๋๋ค.
- Modal View ๋ ์๋์์ ๊ตฌ์กฐ์ฒด๋ก ์ ์ํ ์์ ์ ๋๋ค.
- Action ๋ถ๋ถ
import SwiftUI
struct TestView: View {
@State private var showModal = false
var body: some View {
VStack{
Text("'๋ํ๋๋ผ'๋ฒํผ ๋๋ฅด๋ฉด ๋ชจ๋ฌ ์ถ๋ ฅ!")
Button(action: {
self.showModal = true
}){
Text("๋ํ๋๋ผ").bold()
}
.frame(width: 80, height: 30, alignment: .center)
.background(RoundedRectangle(cornerRadius: 10).fill(Color.primaryColor))
.font(.system(size: 16))
.foregroundColor(Color.white)
.sheet(isPresented: self.$showModal) {
ModalView()
} //Button ๋
} //Vstack ๋
}
}
3. Modal View ์ํธ๋ฅผ ๊ตฌ์ฑํด๋ด ์๋ค.
- ๊ตฌ์กฐ์ฒด ModalView ๋ฅผ ๋ง๋ค์์ต๋๋ค.
- @Environment ์ ๋ํ ์ค๋ช ์ ์ฌ๊ธฐ ๋ฅผ ์ฝ์ด๋ด ์๋ค.
- ์์์ ๊ตฌ์ฑํ ๊ฒ๊ณผ ๋์ผํ๊ฒ text์ button ์ ๋ฃ์ด์ฃผ์์ต๋๋ค.
- @Environment ๋ก ์ ์ธํ ๋ณ์์์๋ถํฐ dismiss() (๋ซ๋๊ฑฐ!!) ๋ฅผ ๋ฐ์์์ต๋๋ค. ๊ทธ๋์ buttion์ ๋๋ฅด๋ฉด, dismiss ํด์ฃผ๋ ๊ฒ์ button์ action ๋ถ๋ถ์ ๋ฃ์ด์ค๋๋ค. (dismiss ๊ฐ ๋ซ๊ธฐ!)
struct ModalView: View {
@Environment(\.presentationMode) var presentation
var body: some View {
VStack {
Text("Modal view ๋ฑ์ฅ")
Button(action: {
presentation.wrappedValue.dismiss()
}) {
Text("Modal view ๋ซ๊ธฐ").bold()
}
.frame(width: 150, height: 30, alignment: .center)
.background(RoundedRectangle(cornerRadius: 40).fill(Color.subColor))
.font(.system(size: 16))
.foregroundColor(Color.white)
}
}
}
์ด๋ ๊ฒ ์์ฑํ ์ฝ๋๊ฐ ํ๋ฆฌ๋ทฐ๋ก ๋ณด์ด์ง ์๋๋ค๊ณ ์??? ๊ทธ๋ผ ์๋ ์ฝ๋๋ฅผ ์ถ๊ฐํด์ฃผ์ธ์!! ์๋ ์ฝ๋๋ฅผ ์ถ๊ฐํ๋๋ฐ๋ ํ๋ฆฌ๋ทฐ๊ฐ ๋จ์ง ์๋๋ค๋ฉด option + command + enter ๋ฅผ ๋๋ฌ์ฃผ์ธ์. (ํ๋ฆฌ๋ทฐ๊ฐ ๋ซํ์๋๊ฒ๋๋ค!)
struct ModalView_Previews: PreviewProvider {
static var previews: some View {
TestView()
}
}
๐ ๏ธ Modal View ์์ฑ๋ณธ ํ์ธํ๊ธฐ
์ด๋ ๊ฒ ๊ฐ๋จํ๊ฒ SwiftUI ๋ก Modal View ๋ฅผ ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ํด์ ์์๋ณด์์ต๋๋ค. ์์ผ๋ก ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๋ค์ํ ํฌ์คํ ์ผ๋ก ์ฐพ์๋ต๊ฒ์!! ์ ์ฒ๋ผ,,, ์ค์ํํธ ์์ด๋ณด์ด์ ๋ถ๋ค,,,,, ํ์ดํ ์ ๋๋ค!!! ์ฐธ ํ ๊ฒ ๋ง๋ค์ :)