HACKING WITH SWIFT - Guess the Flag(3)

여기서부터 앞선 프로젝트와 문법에서 배운 것들을 총동원해서 혼자 마무리를 해본 경험을 한번 정리해볼 거다~

 

전체적으로 해결해야 하는 부분과 추가하고 싶은 부분을 정리하자면

1. 라운드로 진행할 때 일정 라운드가 진행되었을 때 alert에서 게임의 종료를 알려야 함
2. 틀렸을 경우 사용자가 선택한 국기는 어떤 국기인지 알려주는 기능
3. 맞추면 10점을 획득하게 되고 scoreTitle에서도 확인 가능하게 하기
4. 국기를 선택할 시 나머지 국기와 해당 국기에 대한 Effect 추가
5. 등등

 

@State private var scoreMessage = ""

@State private var score = 0
@State private var gameCount = 0
@State private var alertAction = ""

var isLastRound: Bool { gameCount == 10 }

 

위에서 언급한 추가적인 기능과 아직 미완성인 부분을 해결하기 위해 필요한 것들을 미리 선언해두었다. 총라운드는 10라운드로 정해 두고 매 게임이 진행될 때마다 gameCount는 게임의 라운드를 하나씩 증가시킬 것이다. 또한 현재 점수를 담고 있을 score로 이뤄져 있다.

그리고 틀렸을 경우와 맞췄을 때 출력할 텍스트들을 담고 있을 scoreMessage도 선언해주었다. 마지막으로 alertAction은 마지막 라운드가 되었을 때 게임을 다시 할지 그냥 확인을 누르고 경고창을 닫을지에 대한 여부를 담고 있게 된다. 

 

func flagTapped(_ number:Int) {

     tappedFlag = countries[number]
     showingScore = true
     
     gameCount += 1

 

여기서 앞서 말했던 것처럼 국기를 탭 하는 순간 점수를 보여주고 게임 카운트가 하나 증가된다.

 

if number == correctAnswer {
            score += 10
            scoreTitle  = isLastRound ? "게임 종료" : "정답입니다!"
            scoreMessage = isLastRound ? "당신의 최종 점수는 \(score) 입니다." : "당신의 점수는 \(score) 입니다."
            
        } else {
            scoreTitle = isLastRound ? "게임 종료" : "오답입니다!"
            scoreMessage = "선택하신 정답은 \(countries[number])의 국기입니다"
        }
        alertAction = isLastRound ? "게임 다시 하기" : "확인"
        
    }

이전의 if else와는 다르게 더 많은 코드들을 추가하였다. 해석하기는 더 쉽다. 만약 사용자가 선택한 국기가 정답이라면 score는 10만큼 증가되는 건데..

 

여기서 오랜만에 정말 요긴하게 쓴 개념인 삼항 연산자의 개념을 한번 사용해보았다!

오랜만에 잠깐 삼항 연산자의 개념을 다시 정리해보자.

 

condition? expresion1 : expresion2

판단하고 싶은 condition뒤에?을 사용하여 :을 기준으로 참으로 판단되면 왼쪽의 표현식을 리턴하고 거짓이라면 오른쪽 표현식을 리턴하게 된다. 

마지막 라운드는 10으로  지정해두었고 정답을 고르든 오답을 선택하든 scoreTitle은 마지막 라운드예요?? 하고 물어봤는데 맞다면? 참이기 때문에 게임 종료를 출력하게 되고 반대로 아니라면? 정답인 경우 정답을 오답인 경우 오답이라고 출력한다. 그리고 추가적으로 scoreMessage에서도 동일하게 삼항 연산자를 사용하여 정답과 오답인 경우 그리고 마지막 라운드인 경우에 따라서 출력되는 텍스트는 달라지게 된다. alertAction의 경우에도 똑같다. 

 

---

 

 

 

이러면 미니게임의 기능은 다 구현한 것이다. 여기서 끝낼 수 있었지만 이미지 버튼에 대해 공부하는 중에 특별한 기능을 추가하면서 더욱 생동감 넘치는 게임을 만들 수 있겠다 싶은걸 찾았는데 멋있을 거 같아서 제대로 공부도 안 하고 맨땅에 헤딩했는데 그래서 그런지 이 부분에서 가장 많은 시간을 쏟은 거 같다.. 건들지도 않은 VStack이 ZStack이랑 안 맞는다. 속성 값이 이상하다~~ 하나 고치면 다른 하나가 터지는 난감한 상황에서 오래 안 걸릴 거 같아서 건드렸다가 발도 못 빼게 됐다.

 

 

어려웠다 이야기하다가 그 기능이 뭔지도 안 말할 뻔했는데 그건

 

ForEach(0..<3) { number in
                        
    Button {                     
      flagTapped(number)
                           
		} label: {
			Image(countries[number])
                  .clipShape(RoundedRectangle(cornerRadius: 20))
                  .shadow(radius: 5)
                  .rotation3DEffect(.degrees(showingScore && tappedFlag == countries[number] ? 360 : 0), axis: (x: 0, y: 1, z: 0))
                  .opacity(showingScore && tappedFlag != countries[number] ? 0.25 : 1)
                  .animation(.spring(), value: gameCount)
                  .accessibilityLabel(description[countries[number], default: "Unknown flag."])

 

 

국기를 이미지 버튼과 ForEach를 이용하여 출력하는 부분에서 이미지에 rotation3 DEffect(), opacity(), animation(), accessibilityLabel()를 추가하면서 국기 버튼이 빙글빙글 돌아가는 애니메이션 효과를 표현해보았다.

 

 

 

 

그럼 영상으로도 확인해봤으니 어떻게 표현했는지 각 기능들이 어떤 역할을 하고 어떻게 사용하는지 알아보자!

 

• rotation3DEffect(): 주어진 회전축을 중심으로 이 뷰에 랜더링 된 출력을 3차원으로 회전하게 해 준다. 

rotation3DEffect(_:axis:anchor:anchorZ:perspective:)로 정의를 하게 되고 rotation의 경우 내부에서 삼항 연산자를 사용할 수 있기 때문에 만약 일단 탭을 했다면 해당 국기에 대해 360도를 아닌 국기에 대해서는 0도로 회전 각도를 표현해보았다.

• opacity(): 해당 view의 투명도를 설정한다. 

영상을 잘 보면 사용자가 선택한 국기를 제외한 나머지 국기의 투명도가 선택한 국기에 비해 많이 탁해지는 것을 확인할 수 있다. 

 

• animation() : 지정된 시간만큼 하나 이상의 view에 대한 변경 사항을 애니메이션 한다. 

animation의 커스터마이징 종류는 정말 개발자 입맛대로 웬만한 건 다 표현할 수 있을 만큼 다양한 옵션이 있는데 그중 대표적으로

기본 애니메이션 효과를 주는 default, 빠르게 움직였다가 천천히 움직이는 easeOut, 해당 시간만큼의 시간 동안 효과를 표현하는 

easeinOut 등등 매우 다양한데 해당 프로젝트에서는 스프링 효과 즉 목표지점에 도착한 후에 다시 튕겨서 제자리로 돌아오는 효과를 발견하여서 이걸 사용해보았다. 

• accessibilityLabel() : 접근성 요소를 식별하는 지역화된 문자열의 간결한 레이블이다.

이 property에 들어 있는 값 현재 프로젝트에서 예를 들자면 description의 값이 되겠다. 이 안에 있는 값을 end user Facing을 대상으로 제공한다는 건데, 이 말이 처음 봤을 때는 매우 이해하기 어려운데 쉽게 말하면 보이스 오버 기능의 사용자들은 accessibilityLabel에 할당되어 있는 값을 들을 수 있게 되는 것이다. 그래서 이 property에는 문자열이 들어간 것을 추천한다고 apple 공식문서에 찾아볼 수 있다. 

 

VoiceOver기능은 일반인들은 자주 사용할 기능은 아니지만 정보를 일반인에 비해 전달받기 힘든 장애인들에게는 매우 좋은 기능을 제공할 수 있게 된다. 

 

마지막으로 이번 프로젝트를 마치면서 해당 결과물을 확인해보면서 마무리하겠습니다~

 

 

 

 

---

해당 기능들은 apple공식 문서를 비롯해 다양한 타 블로그들에서 참고하여 작성해보았고, 그대로 쓰기보다는 어떻게 사용하고 변형하였을 때 결과가 달라지는 것에서 가장 큰 흥미를 느낀 것 같다. 이전에 학습하였던 내용과 프로젝트 내용에서 참고할만한 것을 직접 찾아보고 조사 과정에서 보다 많은 정보를 얻을 수 있었던 것 같습니다~