[CS193p] Assignment 3 - Set Game 문제 번역

 

과제 수행 중에 원본이 영어라서 보고도 까먹는 경우가 많아 한글로 번역합니다.

영한 번역이 아니라 이해한 것을 기반으로 작성한 번역입니다.

2021년 Spring 강의입니다

원본 보러 가기

 

 

Objective

이번 과제의 목표는 새로운 애플리케이션을 처음부터 만들어보는 것입니다. 이전 2개의 과제와 매우 유사하지만 전체 경험을 얻기에는 충분히 다릅니다.

 

Due

생략

 

materials

• 이전 강의에서 나온 코드를 사용해도 됩니다.
• 보드게임 Set의 규칙을 잘 확인하세요

Required Tasks

1. 1인용 Set 게임을 구현합니다.
2. 게임이 진행될 때, 모든 카드는 보이는 상태여야 하고 가능한 커야 합니다. 즉, 카드는 크기가 크게(작게) 보일 수도 있고 개수가 많게(적게) 나타날 수 있습니다. 카드에 최소 크기를 적용하고 카드가 매우 많을 때 스크롤링으로 되돌리는 것도 괜찮습니다. 많은 카드를 화면에서 어떻게 다루든지 간에 게임 플레이가 가능해야 합니다.
3. 카드는 aspect ratio가 있고 모두 통일된 ratio를 가집니다. 카드의 크기가 변경된다고 해서 카드가 늘어나면 안 됩니다.
4. 카드의 symbol은 카드 크기에 따라서 비율을 유지해야 합니다.
5. 사용자는 3개의 카드를 선택해서 set을 만들어볼 수 있습니다. 사용자가 어떤 카드를 선택했는지는 확실하게 보여야 됩니다.
6. 3개의 카드가 선택되면 이 3개의 카드의 set여부를 표시해야 합니다. 이 방법은 원하는 방식으로 구현하면 됩니다. 3개의 카드가 선택되었을 때는 유저가 확실하게 set여부를 인지할 수 있어야 합니다. (set이 아닌 3개의 카드를 골랐을 때는 1개의 카드나 2개의 카드를 고를 때와는 다르게 보여야 됩니다.)
7. 선택한 카드를 재선택해서 선택을 취소할 수 있는 "deselection"을 지원합니다.(첫 번째, 두 번째 카드를 선택했을 때만 해당됩니다.)
8. 3개의 set를 이루는 카드가 선택된 상태에서, 새로운 카드를 선택한다면,
   1. set 게임의 룰대로, 선택된 3개의 카드를 deck의 새로운 카드로 교체합니다.
   2. 만약 deck에 카드가 없다면, 선택한 카드의 자리는 공석으로 두어야 합니다.
   3. 새로 선택한 카드가 Set의 일부가 아니라면, 그 카드를 선택합니다.
   4. 새로 선택한 카드가 Set의 일부라면, 카드를 선택하지 않습니다.
      * 번역자 첨언, 이미 선택한 카드를 다시 선택하는 경우입니다. 예를 들어 A, B, C 카드를 선택해서 set이 된 상태에서 A or B or C 카드를 선택한 경우입니다.
9. 3개의 Set가 아닌 카드가 선택된 경우, 새로운 카드를 선택하면 3개의 카드는 선택이 취소되고 새로운 카드를 선택합니다.(3개의 카드에 새로 선택한 카드가 포함된 경우도 동일합니다.)
10. Set의 규칙에 따라 "Deal 3 More Cards"버튼을  만들어야 합니다.
    1. 버튼을 선택하면, 선택된 카드들이 Set라면 새 카드로 교체합니다.
    2. 선택한 카드가 Set를 만들지 않는 경우(선택한 카드 개수 0~2개인 경우를 포함), 3개의 새 카드를 추가하여 화면에 있는 카드에 추가합니다.(기존 카드 선택에 영향이 없어야 합니다)
       
    3. Deck에 카드가 없는 경우에는 이 버튼이 비활성화됩니다.
11. "New Game" 버튼을 만들어야 합니다.
12. 모양 중에서 "squiggle"은 사각형을 이용합니다.
13. 모양 중에서 "Diamond"는 Shape struct를 이용합니다.
14. shading 중에서 "striped"는 반투명한 상태로 처리하도록 보이도록 합니다. "solid"와는 구분이 되어야 합니다.
15. 3개의 구분되는 색상을 사용해야 합니다.
16. 의미 있는 부분에는 enum을 사용합니다.
17. 의미 있는 부분에는 closure을 사용합니다.
18. 디바이스의 가로모드나 세로 모드에서도 잘 동작해야 합니다.

 

Hints

1. 제공되는 코드 AspectVGrid 사용하세요. 수정해도 됩니다.
2. Model에 뭐가 있는지, VIewModel에 뭐가 있는지, View에 뭐가 있는지 확실히 해야 합니다. 항상 "이 부분이 Set 게임의 진행과 관련된 부분인지 보이는 것과 관련된 부분인가?"라고 자문자답해야 합니다.
3. Model은 모든 카드의 상태를 알고 있어야 합니다. deck에 있는 카드도 포함입니다. 모든 상태가 card struct안에 isSomething 변수로 있을 필요는 없습니다. 예를 들어 '선택'같은 것은 상대적으로 일시적이며 다른 자료구조를 이용하는 것보다 유용합니다.
4. View, ViewModel의 복잡도는 trade-off 관계입니다. View를 간단하게 만드세요.
5. Model은 복잡도에 trade-off가 없습니다. Set 게임 실행에 효율적인 UI와 독립된 프로그래밍 인터페이스를 제공하기 때문입니다. ViewModel은 model의 디자인에 적응해야 합니다. (좋은 디자인의 model은, viewmodel에 적용하기 어렵지 않습니다.)
6. View는 Model의 reflection이라는 것을 잊지 마세요. 이것은 "reactive", "declarative" UI 프로그래밍입니다. Model은 변경하고 View는 그냥 Model의 현재 상태에 대한 것을 보여주는 것에 대한 선언만 합니다. 개발해오면서 프로그래밍해온 모델에서 벗어나려고 노력하세요.
7. 좋은 MVVM 디자인은 모델 안에 color, shape, shading 같은 'display-oriented" 데이터를 Model에 넣지 않는 것입니다. Set game에 테마가 생기는 것을 생각해보세요. model은 게임이 어떻게 보일지에 대해서는 전혀 모릅니다.
8. 카드를 그리기 가장 쉬운 방법은 종횡비를 가지고 symbol을 그리는 것입니다. 즉, 카드 종횡비가 2/3이면, 각 sybol은 2/1입니다.(높이의 2배만큼 넓게). padding과 spacing을 주의해서 사용하세요.
9. "end game"을 테스트를 주의하세요. 테스트를 쉽게 하려면 3개의 카드를 만들어서 게임을 빨리 끝나게 하세요. 아니면 deck을 일부분만 사용하세요.
10. var과 func에 적절한 access control을 잊지 마세요
11. 다음 과제(assignment 4)에서 애니메이션을 추가할 예정입니다. 이번 과제에선 넣지 마세요.
12. 앞에 @ViewBuilder를 붙인 리턴이 some View인 computed var(or func)를 이용하시면 view에서 if-else나 switch 쪽에서 사용하면 편합니다.
13. some Shape를 리턴하려고 시도할 것입니다. 하지만 이것은 안됩니다. ShapeBuilder 같은 게 없습니다. 코드가 var 또는 func return some View를 갖도록 배치하세요. 예를 들면, strokedSymbol, filledSymbol, shadedSymbol var/func이 있다면, shadedSymbol은 앞에 2개를 합쳐서 opacity만 조절한 것입니다.
14. Swift는 Bool이 있습니다. Bool은 2가지 상태만 표현이 가능합니다. 3가지 상태를 표현하는 타입은 없습니다. Set game에서 그런 것이 많이 필요하기 때문에 만들어야 합니다.
15. custom Shape(diamond)는 strokeBorder를 사용할 수 없습니다. stroke를 사용하세요.(바라건대 당신의 상징은 당신의 카드 가장자리 근처에도 없어야 합니다.)
16. 평가와 관련되어있어서 생략
17. ㅇㄹㅇㄹㄷㄹ