CS50 Probelm set 0 - Scratch

부스트코스에서 제공하는 CS50 2019 강의를 듣고 있다. 부스트코스 페이지에는 없지만 영상을 보다보니 수강생들을 위한 과제가 있길래 찾아보았다. 첫번째 과제는 스크래치를 이용해서 프로젝트를 완성해보는 것이고, 아래와 같은 조건을 만족해야 한다.

• Your project must have at least two sprites, at least one of which must resemble something other than a cat.
• Your project must have at least three scripts total (i.e., not necessarily three per sprite).
• Your project must use at least one condition, one loop, and one variable.
• Your project must use at least one sound.
• Your project should be more complex than most of those demonstrated in lecture (many of which, though instructive, were quite short) but it can be less complex than Ivy’s Hardest Game. As such, your project should probably use a few dozen puzzle pieces overall.

과제 안내문 문구가 뻔하지만 좋았다. 비슷한 수준의 다른 것을 참고하되 나만의 아이디어를 생각할 것, 한 번에 전체를 만들려고 하지 말고 한 단계씩 차근차근 만들어볼 것.

You might find these tutorials or starter projects helpful. And you’re welcome to explore scratch.mit.edu for inspiration. But try to think of an idea on your own, and then set out to implement it. However, don’t try to implement the entirety of your project all at once: pluck off one piece at a time. In other words, take baby steps: write a bit of code (i.e., drag and drop a few puzzle pieces), test, write a bit more, test, and so forth. And select File > Save now every few minutes so that you don’t lose any work!

그래서 일단은 기본적으로 제공되는 스프라이트(객체가 되는 이미지) 리스트를 구경했고, 야구공과 타자 이미지가 있길래 공을 던지면 타자가 스윙을 하는 프로그램을 만들면 되겠다고 생각했다.

첫 버전

⚾️ 야구 배팅 프로그램 ver.0

• 규칙 : PLAY 버튼을 누르면 공이 던져지고 타자가 스윙을 한다
  • 버튼을 누르면 0~6의 난수가 생성되고 그에 따라 모션이 달라진다
    • 0 : 파울
    • 1 : 플라이
    • 2 : 홈런
    • 3 : 안타
    • 4 : 헛스윙
    • 5 : 볼
  • 종료 조건은 없음
• 제작 소요 시간 : 8시간

✅ 만든 것

• 그래픽
  • 타자 & 고양이
    • 타자의 스윙 모션은 기본 코스튬, 안타를 쳤을때 웃는 모습은 변형해서 사용
    • 게임을 안내하는 고양이도 기본 코스튱 변형해서 사용
  • 야구공
    • 결과에 따라 공의 움직임을 다르게 했다. 홈런을 친 경우에는 빠르게 튕겨나가고 플라이볼의 경우에는 천천히 움직인다.
    • 공이 움직일 때 회전하게 했는데 매우 미묘하지만 아주 조금 더 역동적이다 ^^
  • HIT / HOMERUN 이펙트
    • HIT : 한 글자씩 나타나며 커짐
    • HOMERUN : 반짝거리며 회전하는 배경 + 한 글자씩 나타나고 좌우로 움직임
• 사운드
  • 효과음
    • 타격음 / 미트 소리 : 적절한 효과음이 없어서 tennis hit 효과음을 내장 에디터로 수정해서 사용
    • BGM : starter project에 있는 human beatbox 사용. 조금 수정해서 반복했을 때 아주아주 조금 자연스럽게 했다..ㅎ

✍️ 아쉬운 점

• 확률 문제
  • 홈런의 확률은 1/6이니까 약 17%이고 안타나 플라이 등 다른 결과도 마찬가지로 17%이다.
  • 확률을 각각 다르게 하고 싶다면 어떻게 해야 할까?

✍️ 궁금한 점

• 이벤트를 쓰기는 했는데 맞게 쓰고 있는 것인지 잘 모르겠다. 좀 더 잘 알고싶다.
• forever 블록을 썼을 때 종종 생각한 것처럼 동작하지 않았다. 자바에서 while(true)를 썼을 때도 그랬는데, 내가 뭔가 잘못 이해하고 있는 것 같은데 정확히 무엇인지 잘 모르겠다.

✍️ 느낀 점

• 무언가를 만들어 보는 것이 정말 중요하구나
  • 강의만 들었을 때는 집중이 안돼서 자주 일시정지를 누르곤 했는데, 스크래치로 게임을 만들어보니 시간가는 줄 모르고 몰입했다. 만들다가 막히는 부분도 있고 궁금한 것도 계속 생기고 하니까 하나씩 해결해가면서 배우게 되는 것 같다. 이론 공부만 하지 말고 무언가를 만들어보라는 조언은 많이 들었지만, 항상 뭘 해야할 지 몰랐는데 어떻게 해야할 지 조금 알 것도 같다.
• 스크래치는 듣던대로 좋다
  • 학교에서 코딩을 배운 세대는 아니라 스크래치는 듣기만 했지 이번에 처음 만져보는데 명성만큼 좋은 프로그램이었다. 최대한 쉽게 프로젝트를 완성할 수 있도록 도와준다. 함수도 블록이라는 형태로 쉽게 제공하고, 이미지나 사운드 편집을 위한 에디터도 간편하면서 필수적인 기능은 다 갖추고 있다. 또 다른 사람의 코드도 모두 볼 수 있어서 어떻게 구현해야 할 지 모를 때 참고하면 좋다.
• 기타
  • 어릴 때 어도비 일러스트나 goldwave 같은 프로그램을 만져봤던 경험이 도움이 좀 됐다. 무엇이든 배워두면 나중에 어떻게든 쓸 일이 생긴다는 게 재밌는 것 같다.
  • 예전에 홈페이지를 만들어보면서 프론트엔드는 재미없다고만 생각했는데... 내가 필요한 모션을 만들다 보니 사람들이 어떤 점에서 재미를 느끼는지 알 것 같았고, 앞단은 이런 것을 하는 걸까 조오금은 알게 되는 계기가 되었다.

✍️ 개선하고 싶은 점

• '숫자 야구 게임' 응용하기
  • 숫자 야구 게임은 예전에 만들어봤던 간단한 프로그램이다. 컴퓨터가 랜덤으로 3개의 순서가 있는 숫자를 정하면 사용자도 3개의 숫자를 순서대로 선택하고, 이를 비교해서 숫자와 위치를 둘 다 맞추면 스트라이크, 숫자만 맞추면 볼이 되는 게임이다.
  • 이처럼 사용자의 인풋을 받아서 컴퓨터가 선택한 난수와 비교해서 결과를 내면 좀 더 재밌는 게임이 될 것 같았다. (엄마에게 만든 프로그램을 해봐달라고 했는데 엄마의 소감은 '재미는 없어' 였다.ㅋㅋㅋ)
• 종료 조건 추가하기
  • 이런 게임은 승패가 있어야 재밌는 것 같다. 종료 조건을 추가하면 좋을 것 같다.
    
    
    
    

개선 버전

⚾️ 야구 배팅 프로그램 ver.1

<크게 휘두르며>라는 만화의 초반 에피소드에서 아이디어를 얻었다. 처음 야구부원들을 모집하는 과정에서 하나이라는 타자가 투수인 주인공을 인정해주지 않자, 감독의 제안으로 투수와 타자가 1:1 게임을 하는 장면이다(수비수와 포수는 배치되어 있다). 야구 전체를 게임으로 만들려면 너무 복잡해져서 단순화할 수 없을까 생각하던 차에 떠올랐다. 단 편의를 위해 내맘대로 몇 가지의 특수 규칙을 정했다.

• 규칙 : 사용자(타자)가 투수(컴퓨터)의 구종과 공이 오는 위치를 예측하고, 그에 따라 결과가 달라지는 게임.
  • 승리 조건 : 3점 이상 득점
  • 패배 조건 : 3 아웃
  • 특수 규칙 :
    • 홈런 = 2점
    • 안타 = 1점
    • 포볼 = 1점
    • 득점 후 스트라이크 및 볼 카운트 0으로 초기화
    • 땅볼은 파울과 같이 스트라이크 카운트. (1 스트라이크씩 올라가며 이미 2 스트라이크인 경우 카운트하지 않는다.)

✅ 개선한 것

• 확률 문제
  • 컴퓨터는 구종 3개(직구, 슬라이더, 포크)와 공이 오는 위치(가운데, 안쪽, 바깥쪽) 3개 중 1개씩 고를 수 있다. 사용자도 3개 중 1개씩 선택한다.
  • 컴퓨터의 값과 사용자가 선택한 값을 비교해서 확률에 따라 결과가 달라진다
    • 구종과 위치를 모두 맞추는 경우 : 홈런 20% + 안타 30% + ...
    • 하나만 맞추는 경우 : 홈런 10% + 안타 20% + ...
    • 둘 다 틀린 경우 : 헛스윙 50% + ...
  • 나올 수 있는 결과 : 홈런, 안타, 파울, 땅볼, 플라이, 헛스윙, 볼
    • 플라이의 경우 일정 확률로 수비수가 놓친다. (게임에서는 이 경우 카운트 없음)
• 고양이 캐스터 추가
  • 홈런, 안타 등 결과를 설명해주는 고양이 캐스터를 추가했다.
  • 투수가 던진 공이 무엇이었는지 설명해주는 고양이2도 추가했다.
• 그래픽
  • ver.0은 너무 정적이어서 지루했다. 타자와 고양이 캐스터 등의 움직임을 늘렸다.
• 사운드
  • ver.0의 무한반복 비트박스가 너무 거슬려서 pixabay에서 좋은 음악을 가져다 썼다(Positive Way by Anton Vlasov). 음악 하나로 훨씬 재밌어지는 것 같다.
  • 배팅 효과음도 홈런과 플라이와 구분되도록 일반 타격은 짧게 바꿨다.

✍️ 궁금한 점

• 확률
  • 일단 확률은 0~9까지 10개의 난수를 생성한 다음 홈런을 20% 확률로 하고 싶은 경우 조건문에서 0,1의 경우 홈런 코드가 실행되게 했는데... 이런 방법으로 괜찮은 걸까?ㅋㅋ 만약 홈런 확률을 5%로 바꾸고 싶다면 다시 20개의 난수를 생성... 하는 과정을 거치는 노가다가 되는데. 이건 아닌 것 같다.
• 기획
  • 큰 틀만 짜놓고 기능을 하나씩 추가하면서 만들다보니 많은 걸 뒤엎고 또 뒤엎고는 했다. 이번에는 간단한 프로그램이라 그렇게 오래 걸리지는 않았지만 훨씬 복잡한 프로그램이라면 이렇게 하면 안되겠지 싶었다.
  • 기획은 어떤 식으로 하는 걸까? 분명 방법론이나 도구가 있을 텐데 천천히 배워가야지.
• 테스트
  • ver.0은 매우 단순해서 결과 변수를 0~9까지 하나씩 조정해가며 모션을 체크하기만 하면 됐었다. 하지만 ver.1 정도만 되어도 하나씩 다 체크하기에는 너무 많은 수고가 들었는데... 그렇게 체크를 하고 나서도 다른 사람한테 테스트를 부탁해보면 정말 의외에 곳에서 자잘한 버그를 발견하곤 했다.
  • 테스트에 관한 공부도 하고 싶다.
• 모션 타이밍
  • 여러 객체를 사용하다보니 각 객체가 움직일때 조화가 되도록 타이밍을 맞추는 작업이 필요했다. 이벤트를 사용하기도 하고 wait 블록을 사용해서 시간차를 두어 맞추고는 했는데. 시간을 조정해서 맞추는 경우 약간 틀어짐이 생기기도 하고 디바이스 별로 미세하게 달라지는 것 같은데... 좋은 방법이 아닌 건가 궁금해졌다.

✍️ 느낀 점

• 조정의 연속
  • 디자인에 관한 밈 중에 1px에 관한 것이 있다. 근데 정말 1px, 0.1초, 1 프레임에 따라서 분명한 차이가 있음을 느꼈다. 수정을 반복하면 절대 완벽에 닿지는 못하지만 개선은 되니까 조정에 대한 욕심이 끝이 없었다.
  • 그래픽 외적으로도 자잘한 것까지 자꾸 수정하고 싶은 욕심이 났다. 하지만 하나에 모든 에너지를 쓸 수는 없으니까 적당히가 중요하겠지.
• 기타
  • 공부하며 들었던 많은 것들을 수박 겉핥기로 체험했다. 기획이 왜 중요한지, 테스트가 왜 중요한지, 이게 레거시인가? 느끼기도 하고, 추상화를 하면 이런 식으로 편하구나 싶기도 하고.
  • 게임의 난이도를 조정하는게 그렇게 어렵다는데... 왜인지 조금이나마 알 것 같았다.
    
    
    

마치며

계속해서 수정하고 싶은 부분이 많지만 이제 그만하는게 좋을 것 같다. 코딩 공부하려고 시작한 건데 계속 그래픽 만지고 있고 확률 조정하고..ㅋㅋ 여기서부터는 들이는 품에 비해 얻는게 적은 것 같다.