HACKING WITH SWIFT - Guess the Flag

🧑‍💻이번 시간에는 WeSplit 이후 새로운 프로젝트로 한번 Swift에 대해 알아보자!

 

이번 프로젝트의 이름은 "Guess the Flag"로 말 그대로 사용자가 문제로 제시된 국가의 국기를 맞춰보는 간단한 앱이다. 

이를 통해 VStack, Image, LinearGradient 등을 주로 다루면서 전체적인 앱을 만들어 보자!

 

 

---

VStack.

Xcode에서는 기본적으로 두개이상의 TextView에 대해서는 하나의 view에서 각각 표시되는데 만약 두 개의 TextView가 한 페이지 안에 같이 출력되길 바란다면 어떻게 해야 할까??

var body: some View {
    Text("Hello, world!")
    Text("This is another text view")
}

아마 이렇게 코딩을 해보면 캔버스를 통해 두개의 다른 뷰로 출력되고 있다는 것을 쉽게 확인할 수 있다. 

여기서 우리는 VStack 을 이용하면 쉽게 해결할 수 있다. 여기서 V는 vertical, 즉 수직을 의미하고 있다. 따라서 VStack안에 2개의 Text를 아래와 같이 넣어 보면

VStack {
    Text("Hello, world!")
    Text("This is inside a stack")
}

한 페이지 안에 두개의 Text가 함께 출력되는 것을 확인할 수 있다. 여기서 VStack에 속성을 추가하여 더욱 이용할 수 있는 방법이 많다.

1. spacing을 이용하여 간격을 제어 할 수 있다. 
2. alignment를 이용하여 정렬을 제어 할 수 있다. 

//VStack(spacing: 20)
//VStack(alignment: .leading)

위와 같이 속성을 이용하여 자신이 필요한 속성을 편하게 가져다 쓸 수 있다. 

 

그리고 VStack내부에 중간 중간 spacer를 이용하면 한쪽으로 푸시할 수 있다. 만약 내가 spacer를 다음과 같이 추가하면 위쪽 공간의 1/3을 아래쪽에 3/2를 가질 수 있다. 

VStack {
    Spacer()
    Text("First")
    Text("Second")
    Text("Third")
    Spacer()
    Spacer()
}

 

 

HStack, ZStack

VStack과 반대로 이번에는 가로 즉 수평으로 배열 할 수 있다. 여기서 위에서 언급한 속성 spacing을 그대로 사용해볼 수도 있다. 

ZStack은 깊이에 따라 정렬을 하게 되는데 겹쳐보이게 되면서 텍스트를 읽기에는 다소 어려워진다. 그래서 ZStack의 경우 간격 개념이 없고 정렬의 개념은 있게 된다. 이걸 이용해서 이미지와 텍스트를 겹쳐 보이게 할 때 더욱 강조하고 싶은 것을 원하는 대로 표현할 수 있게 된다. 

 

 

 

SwiftUI에서는 색상을 렌더링 할 수있는 다양한 기능을 제공한다. 이를 ZStack을 이용해서 한번 표현해보자

 

//1
ZStack {
    Text("Your content")
}
.background(.red)

//2
ZStack {
    Text("Your content")
        .background(.red)
}

앞서 말한 대로 텍스트 뒤에 무언가, 예를 들면 색상을 넣고 싶을 때는 어떻게 할까??

한 가지 옵션이 있는데 여기서는 .background()를 통해 그릴 색상을 지정할 수 있다.  코드를 캔버스를 통해 확인 해본다면 아마 첫번째와 두번째 코드가 조금 다르지만 결과상으로는 다른것이 없다.

 

 

이번에는 그럼 텍스트 뒤 전체 영역을 빨간색으로 채워보자. 이는 Color.red를 사용하면 된다. 여기서 Color.red는 그 자체로 하나의 view이기 때문에 모양과 텍스트처럼 사용할 수있다. 그리고 또한 frame()을 사용하여 특정 크기로 설정해볼 수 있다. 200 * 200 정사각형의 영역에만 빨간색을 칠하고 싶다면 다음과 같이 해볼 수 있다. 

 

Color.red
    .frame(width: 200, height: 200)

 

 

원하는 레이아웃에 따라 최소 및 최대 너비와 높이를 지정할 수도 있다. 예를 들어 높이가 200 이하인 색상을 원하지만 너비는 너비가 최소 200포인트 여야 하지만 다른 항목에서 사용되지 않는 사용 가능한 모든 너비를 채우기 위해 늘릴 수 있는 색상을 원한다고 말할 수 있다. 

Color.red
    .frame(minWidth: 200, maxWidth: .infinity, maxHeight: 200)

기존에 우리는 색상으로 blue, orange, green 등등 여러 가지 종류의 색에 대해서 알고 있다. SwiftUI에서는 이뿐만 아니라 Segmentic Color가 있다. 이는 설명하기 모호한 점이 많으니 바로 예시를 들어보면

 

1. Color.primary : SwiftUI의 기본 텍스트 색상이며 사용자의 장치가 밝은 모드에서 실행 중인지 어두운 모드에서 실행 중인지에 따라 변하게 된다. 
2. Color.secondary : 보조 콘텐츠에 사용할 색생으로 약간의 투명도가 있어 뒤에 있는 색상이 약간 비친다. 한마디로 조금 색이 연해? 지는 느낌이다.  

 

 

특정 색상이 필요한 경우 rgb값을 이용하여 0과 1 사이의 값을 전달해 사용자 지정 색상을 만들 수도 있다.

Color(red: 1, green: 0.8, blue: 0)

 

 

이번에는 이전 프로젝트에서도 잠깐 나왔던 안전 영역에도 잘리지 않고 그릴 수 있는지도 보자.

ZStack {
    Color.red
    Text("Your content")
}
.ignoresSafeArea()

다음과 같이 .ignoresSafeArea()을 사용하면 된다. 이는 안전영역에 대해 아무 제약 없이 접근 가능 하지만 사용자가 보기에는 딱히 좋지는 않다. 따라서 중요한 콘텐츠가 아니라면 안전 영역 외부에 두는 것은 별로 좋지 않은 것 같다.

 

위에서 배운 것을 한번 전체적으로 정리할 겸 한번 원하는 대로 만들어서 어떻게 되는지 보자.

ZStack {
    VStack(spacing: 0) {
        Color.red
        Color.blue
    }   

    Text("Your content")
        .foregroundColor(.secondary)
        .padding(50)
        .background(.ultraThinMaterial)
}
.ignoresSafeArea()

 

코드 부분을 하나씩 살펴보면 ZStack내부에 VStack을 배치해두고 이후 그 내부에 다시 두 가지 색상을 배치하여 분할하였다. 그런 다음 텍스트 뷰에 수정자 foregroundColor()를 추가해 글자 자체의 색상을 회색으로 바꿔보았고, 그 바로 뒤에 매우 얇은 뭔가 불투명한 느낌의 색상을 하나 더 배치하였는데 이는. ultraThinMaterial을 배경색으로 사용하여서 다음과 같이 표현할 수 있었다. 

또한 바로 앞에서 배운 ignoresSafeArea을 이용하여 안전 영역을 벗어나게도 해보았다. 

 

 

 

---

 

 

Gradients.

SwiftUI는 작업할 3가지 종류의 그라디언트를 제공하며 색상과 같이 UI에서 그릴 수 있는 뷰이다. 

 

구성 요소 

• 표시할 색상 배열
• 크기 및 방향 정보
• 사용할 그라디언트 유형 

그레디언트의 종류는 크게 3가지로 나뉘게 된다. 

1. 선형 그레디언트
2. 방사형 그레디언트
3.  

 

예를 들어 선형 그레디언트는 한쪽 방향으로 진행되기 때문에 다음과 같이 시작점과 끝점을 제공하여 결과를 확인해볼 수 있다. 

LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)

 

 

방사형 그레디언트는 원 모양으로 바깥쪽으로 이동하기 때문에 방향을 지정하는 대신 시작과 끝 반경을 지정한다. 예시로 바로 확인해보자

RadialGradient(gradient: Gradient(colors: [.blue, .black]), center: .center, startRadius: 20, endRadius: 200)

원의 중앙에서 바깥쪽으로 이동하면서 색이 자연스럽게 바뀌는것을 볼 수있다.

 

마지막 원뿔형 그레디언트는 바깥쪽으로 방사되지 않고 원을 중심으로 색상이 순환되어서 생각보다 아름다운 효과를 표현할 수 있다.

 

 

---

 

 

Buttons and images.

이전에 SwiftUI의 버튼을 간략하게 살펴보았고 광범위한 사용 사례에 대해서도 적응할 수 있었다. 이번에는 버튼에 시각적 효과를 부여해보는 과정에 대해서 알아보자. 

 

가장 먼저 버튼에 내장된 스타일 중 하나를 사용할 수 있다. 예를 들면 .bordered과 .borderedProminent과 같이 버튼에 차별점을 부여해볼 수 있다. 예시로 한번 스타일에 변화를 찾아보자.

VStack {
    Button("Button 1") { }
        .buttonStyle(.bordered)
    Button("Button 2", role: .destructive) { }
        .buttonStyle(.bordered)
    Button("Button 3") { }
        .buttonStyle(.borderedProminent)
    Button("Button 4", role: .destructive) { }
        .buttonStyle(.borderedProminent)
}

 

.bordered과.borderedProminent을 단독으로 사용하거나 role과 함께 사용하는 것 또한 가능하다. 

Apple에서는 눈에 너무 잘 띄는 버튼을 너무 많이 사용하지 말 것을 권장하는데 이는 모든 것이 눈에 띄게 되면 실제 사용자가 사용하기에는 매우 지저분해 보이고 정신없어 보이기 때문인 것 같다. 

 

 

이번에는 이미지와 버튼을 통합하여 사용해보는 차례이다.

//1 이미지만 사용하는 방법
Button {
    print("Edit button was tapped")
} label: { 
    Image(systemName: "pencil")
}


//2 이미지와 텍스트를 함께 사용하는 방법
Button {
    print("Edit button was tapped")
} label: {
    Label("Edit", systemImage: "pencil")
}

위쪽의 이미지만 사용하는 경우 말 그대로 버튼에 이미지가 추가됨으로써 아래와 같이 볼펜의 이미지가 표현되는 것을 확인할 수 있다. 

(1)

다음으로 이미지와 텍스트를 Label을 이용하여 함께 출력하는 경우 아래와 같이 Label에 Edit이라는 텍스트를 추가함으로써 텍스트와 이미지가 함께 표현되는 것을 확인할 수 있다. 

 

(2)

 

 

 

---

 

Alert messages(경고 메시지).

중요한 일이 발생하면 사용자에게 알리는 일반적인 방법은 제목, 메시지, 필요한 항목에 따라 하나 또는 두 개의 버튼이 포함된 팝업 창인 경고를 사용하는 것이다.

하지만 언제 경고를 표시해야 하고 어떻게 표시해야 할까? view는 프로그램 상태의 기능이며 경고의 경우에서도 예외는 아니다. 따라서 "경고 표시"라고 말하는 대신 경고를 생성하고 표시되어야 하는 조건을 설정합니다.

 

다음과 같이 경고 표시 여부를 추적하는 일부 상태를 만들 수 있다. 

@State private var showingAlert = false

 

그 이후 사용자 인터페이스에 경고를 첨부하고 경고 표시 여부를 결정하기 위해 해당 상태를 사용하도록 지시할 수 있다. 그리고 showingAlert를 통해 실제로 경고를 해야 하는 순간에 즉시 경고를 보여 준다. 아래는 이를 이용한 예시이다. 

struct ContentView: View {
    @State private var showingAlert = false

    var body: some View {
        Button("Show Alert") {
            showingAlert = true
        }
        .alert("Important message", isPresented: $showingAlert) {
            Button("OK") { }
        }
    }
}

 

 

코드를 이해하기에는 큰 어려움이 없을 것이다. "show Alert"라는 버튼을 클릭하면 위에 있는 결과 화면처럼 중요한 메시지라면서 하나의 경고 창이 출력된다.

 

 

 

.alert를 통해 알림에 버튼을 추가할 수 있고, 각 버튼이 하는 일에 역할을 부여할 수 있다. 

.alert("Important message", isPresented: $showingAlert) {
    Button("Delete", role: .destructive) { }
    Button("Cancel", role: .cancel) { }
}

위쪽 코드에서는 경고 창에서 확인할 수있는 버튼이 1개 였지만 이번에는 Delete, Cancel로 2개가 뜨는것을 확인 할 수 있을 것이다. 

 

 

 

 

마지막으로 아래와 같이 두 번째 후행 클로저가 있는 Text에 추가 적으로 메시지 텍스트 또한 배치할 수 있다. 

Button("Show Alert") {
    showingAlert = true
}
.alert("Important message", isPresented: $showingAlert) {
    Button("OK", role: .cancel) { }
} message: {
    Text("Please read this.")
}

 

 

---

 

이번 프로젝트에서 사용하게 될 기본적인 예제들을 통해 VStack, Gradients, 버튼과 이미지, 경고창 출력까지 구체적이지는 않지만 전체적인 느낌과 실습 전 먼저 알아볼 수 있었다. 이제 바로 실제 프로젝트로 한번 더 복습해보면서 따라 가보자!

 

 

learning by repetition