[TIL] 22-10-21: SwiftUI 기초(룰렛 게임)

22-10-21 금요일
6주차

 

 

 

오전에는 앱 서비스에 대한 특강을 진행하였다. 특강 내용은 블로그에 안올리고 노션에 정리했다!

짧았지만 현업에서발생하는 이야기를 들을 수 있어서 좋았다. 🫶 이런 특강 좋다.......

 

 

 

---

 

 

🦢 SwiftUI

어제 진행했던 숫자 게임을 만들고 궁금해할 점들을 이야기해주셨다.

 

 

 

---

 

 

📒 어제 하던 숫자 게임을 구현하면서 QnA

• VStack 안에서 if문 쓸 수 없을까?
  • No. 순서대로 컴포넌트를 보여주는 것이기 때문에 print와 같이 실행을 목적으로 하는 문장을 넣을 수 없다. HTML 사이에 JS 코드가 들어가던가? 아니다. 유사하게 VStack 안에서는 실행문을 적을 수 없다.
  • 그럼 제어에 관련된 코드는 어떻게 적나? print()같은 건 안된다. 필요한건 밖에서 해결해야 한다.
  • 그럼 ForEach는 뭔가요? 잘보면 앞글자가 대문자이다. 스택안에서 쓸 수 있도록 따로 만든 것이다. 대문자니까.. 당연히 이 친구도 구조체이다. 제어문이 아니다!

 

 

---

 

 

✔️ Mission: 돌려돌려돌림판(룰렛)

유연하게 커스텀 가능합니다.

• ZStack, frame을 적절히 사용해서 돌림판을 만들어보자.
• 꼭 돌림판일 필요는 없다. 창의력을 발휘해서 맥주병 돌리기, 슬롯머신 등의 어떤 문제를 해결하기 위한 목표 해결에 충실하면 된다.

팀원이 총 7명이어서 3명, 4명으로 나눠서 프로젝트를 진행하였다.

나는 zuhee님과 chano님과 한팀이 되었다! 그럼 고고링.

 

 

1부터 6시까지 진행되었고, 처음부터 코드를 짜는게 아니라 구글 슬라이드로 아이디어를 이야기하고 화면을 디자인하고 기능을 기획 후에 Xcode를 열었다.

 

처음엔 룰렛처럼 빙빙 돌아가는 Pie Chart를 만드려고 했는데, 애플에서 기본으로 제공해주는 Pie Chart가 없었다. Bar나 Line같은 Charts만 있었다.

https://developer.apple.com/documentation/charts

 

 

물론 공식으로 제공해주는 방법말고, 직접 그림을 그려서 충분히 구현할 수 있었다.

https://betterprogramming.pub/build-pie-charts-in-swiftui-822651fbf3f2

 

 

그러나 제한된 시간내에 적어도 게임이 구동되게는 만들자가 큰 목표였기에, 이해를 못한채로 복붙하기 보다는 다른 아이디어를 채택하기로 했다.

 

그래서 선택된 아이디어는… 어린시절 문방구 앞에서 하던 ‘메달교환기’ 게임이었다! (소위 말해 짱깸뽀라고 하는.. 그것이다)

 

그래서 일본어로 가위바위보를 의미하는 말을 적어 넣었다. (혹시 틀린 글자이면 알려주세요..)

 

 

이제 아이디어를 선택했으니 어떤 식으로 화면을 구성할지 기획했다. 이미 있는 게임이다 보니 실제 구동하는 영상을 함께 시청했고(ㅋㅋ) 구동 방식이 이렇고, 저렇다 하면서 같이 분석했다.

https://www.youtube.com/watch?v=k9_5YNPZxk8

 

 

분석한 기능을 바탕으로 화면을 짰고, 배당금 시스템도 넣었다. ㅋㅋ 배당금을 걸로 이기면 배당률에 따라 돈을 얻고, 지면 그만큼 없어지고, 비기면 다시 원상복귀되는 시스템이다.

Xcode로 코드를 짜기 전, 기획 단계

 

 

최종 로직은 아래와 같다

 

1.  ‘가위바위보’ 게임이 시작된다.

• 게임이 시작되면 중앙의 가위, 바위, 보 이미지가 빠르게 바뀌어져 보인다.

2.  사용자가 하단의 가위, 바위, 보 버튼 중 하나를 선택하면 게임의 승패가 갈린다.

• 중앙에서 계속 바뀌던 이미지가 멈추고, 랜덤 값(가위,바위,보)가 선택된다.
• 그 값에 따라 사용자의 값과 랜덤 값을 비교하여 승패를 가른다.
  • win : score += 배당금*배당률
  • lose : score -= 배당금*배당률
  • draw : score += 배당금 - 100 (원래 걸었던 돈이 다시 돌아감)
• 단, 배당률은 게임의 승패가 갈릴 때 랜덤으로 결정된다.

3.  계속 게임이 반복된다.

 

 

 

이렇게 로직을 짜고, 화면 컴포넌트들의 요소도 간단하게 코드로 옮기고 난 후에 Xcode 작업을 시작했다!

 

 

Xcode로 작업한 모습

 

 

중앙에 있는 가위, 바위, 보와 배팅 버튼은 임시로 만들어두고 컴포넌트들을 먼저 배치했다. 이미 기획을 다 끝낸 상태였기 때문에 어려움이 없었다.

 

이미 가위, 바위, 보를 어떻게 연속해서 보여줄지는… 여전히 고민하고 있었다.

 

일단 그건 재쳐두고 내부적으로 게임이 실행될 수 있도록 했다. 그래서 애니메이션, 이미지가 빠르게 변경되는 모션들은 우선순위를 미뤄두었고, 로직에서 가장 큰 줄기에 먼저 집중했다. 최종 로직의 1,2,3에 해당하는 부분이다.

 

 

 

그래서 가장 먼저 사용자가 가위, 바위, 보 버튼을 눌렀을 때 승패가 결정나는 부분의 코드를 작성했다.

 

작업 방식은 페어 프로그래밍을 사용하였고, 25분 간격으로 드라이버의 역할을 바꿨다. 나머지 두사람은 네비게이터 역할을 했다. 드라이버가 키보드를 잡고 네비게이터가 이야기를 하고 서로 조율해가면서 코딩을 했다.

 

역할의 변경은 깃허브의 도움을 받았다. 푸시하고 풀받고 화면공유를 하면서 작업을 진행했다.

 

 

내 생각만 강요하고 집어 넣는게 아니라, 서로의 의견을 들어보고 내 의견을 납득시키거나 다른 의견을 듣고 수용하여 작업을 완성해갔다. 중간에 가위 바위 보 이미지와 배팅 버튼은 zuhee님이 직접 ppt로 손수... 만들어주셨다.

(압도적 감사 ;´༎ຶਊ ༎ຶ`;)

 

 

서로 역할을 바꿔가면서 작업하다 보니 시간이 훌쩍 지나있었다. 로직대로 게임은 잘 작동했고, 이제 앱의 퀄리티를 위한 애니메이션, 세부사항을 적용해야 했다.

 

가장 어려웠던 건 중앙의 이미지가 빠르게 바뀌는 것이었다. 서로 더 좋은 작업물을 위해 구글 슬라이드에 로직을 논의하였다. ZStack을 쓰자 혹은 Image에 state 변수를 넣자 여러 의견이 나왔다.

 

그러나 더 많이 고민하느라 사진에 대한 부분은 시간안에 구현하지 못하였다. 아쉬웠다.

 

그래도 끝까지 팀원들과 그 문제에 대해 고민한건 너무 좋았다. 서로의 생각이 모여져서 단단해지는 느낌을 받았다.

 

 

뿌듯했던 점은 이것저것 건드리느라 어떠한 것도 완성하지 못한게 아니라, 기획부터 화면 구성까지 단계를 밟아갔고 코드 구현도 우선순위를 둬서 문제 해결을 해간 것이다. 그것도 3명이 모두 함께!

 

 

그리고 다른 팀에서 만든 작업물도 같이 공유했는데, 정말 개성있게 만든 것을 확인했다. 이게 집단지성..?

 

 

재밌었고 또 재밌었다. 쉽지 않았지만 그만큼 얻어가는게 많다…

:p ㅎㅎ