[초보자들 EP.01] 레벨테스트 : 슬롯머신 만들기

bs-newbie-e01-cover
지난시간 초보자들 이야기

혹독한 인턴 과정에서 살아남은 dimanche와 summer. 비사이드 정규직 취업의 기쁨도 잠시…. 어마어마한 미션이 그들 앞에 등장하는데…
과연 그들은 좋은 개발자의 길의 끝까지 살아남을 수 있을 것인가?!?!

레벨테스트top

때는 9월 2일. 제가 정식 직원으로 채용된 바로 다음날이었습니다. 기쁜 마음으로 여느때와 같이 책을 보며 공부를 하고 있는데 실장님이 미션을 주셨습니다.

“dimanche, summer, 너희가 어느 수준인지 알아야겠다. 레벨테스트를 하자. 2시간을 줄테니 슬롯머신을 만들어보아.”

slotmachine

슬롯머시이이이인? 코디이이이잉?

한동안 TCP/IP, HTTP, CSS을 외우며 살다가 오랜만에 코딩을 하려니 덜컥 겁이 났습니다. ‘아… 나 프로그래밍 언어 진짜 모르는데… 내 실력이 다 들통나겠군!’ …. 그렇습니다. 이미 실장님은 간파하고계셨겠지만 저의 실력을 만천하에 드러내야하기 때문입니다. (그리고 이젠 회사 블로그를 통해 전국에 들통나겠…)

실장님께서는 어떤 슬롯머신을 만들어야하는지 몇가지 조건을 말해주셨습니다.

  1. 슬롯머신에는 시드머니가 1000원이 있다. 가지고 있는 시드 머니 내에서 판돈을 걸 수 있는데, 계속 걸고 플레이 하면서 시드머니가 다 떨어지면 게임이 끝난다. 돈이 다 떨어지면 다시 시작하겠냐고 물어보고, 원하면 게임을 다시 시작할 수 있다.
  2. 슬롯머신의 심볼은 총 7가지이고, 패턴에는 5가지가 있다. 1등, 2등, 3등은 각각 1개씩고 4등은 2개 패턴을 가진다. 1등부터 시작해서 상금으로 판돈의 4배, 3배, 2배를 받을 수 있고 4등은 패턴이 2개인데 원금을 돌려받을 수 있다.
  3. 슬롯머신의 결과는 휠(wheel)을 몇 번 랜덤하게 돌렸는가의 기준으로 한다.

그리고 몇가지 팁을 주시기를…

  1. 무엇을 어떻게 전개해나갈지 잘 정리하고서 시작해아 한다. 그렇지 않으면 서로 어긋나기 시작하면서 아무것도 완성 못하게 될 것이다.
  2. 변수 관리를 잘 생각해봐야 한다. 어떤 변수를 한번 쓰고 버릴지, 어떤 변수를 전달할건지, 어떤 변수는 계속 생명을 유지해야할지 잘 따져볼 것.

이 팁을 잘 들어야 했거늘…. 당시엔 실장님의 팁이 공기마냥 ‘너무 당연한 것’이라고 생각해 그리 중요하게 생각하지 않았습니다. 저에게 중요한건 ‘2시간 내에 슬롯머신을 만들어내야한다!!!’이었고, 저에겐 ‘나는 코딩 즉, 프로그래밍 언어 문법모르는데 어떡하지??? 못만들면 어떡하지??????’라는 걱정만 가득했습니다.

멘붕의 초보개발자top

우선 생각을 정리하기로 합니다. 줄 글로 메모한 요구사항을 다음 필기처럼 정리했습니다. 나름 순서도 비슷한 것도 그려봅니다.

bs-newbie-e01-memo

‘한시라도 빨리 코드를 써야할거같은데… ‘

마음이 급합니다. 정리는 이정도로 마무리 합니다.

‘제일 처음에는 돈 부터 걸어야겠네. 그럼 시드머니 저장하는 곳이 필요하고, 또 판돈도 거는게 필요하네? 아 화면에서 입력 받아야하는데 어떻게 받더라? jQuery만 써서 잘 생각이 안나는데 어떡하지..?^^ 우선 급하니까 콘솔로 찍으면서 해보자. 당첨 패턴은 5가지라는데… 임의로 그냥 아무거나 정해서 하면 되나? 음 뭐가 좋을까? 영화같은데에서 뭔가 777이 좋은거 같았어. 1등은 777로 하자. 그리고 보니 체리 문양도 본 것 같아… 체리도 넣고 하트랑 다이아몬드도 넣어볼까? 근데 ㅁ으로 특수문자 넣어서 코딩해도 되나? 음 왠지 안될거 같은데.. (게다가 ㅁ특수문자엔 체리가 없잖아!) 그냥 다 숫자로 해야겠다. 그 다음에 하면 되는게 뭐지? 아 모르겠다 우선 쓰면서하자.’

menboong

네.. 이것이 바로 초보 개발자의 생각 이었습니다.

드림위버를 켜고 코드를 써내려가기 시작합니다. 아차, 언어는 Javascript로 선택해 슬롯머신 코드를 작성했습니다. 이것이 그나마 제일 익숙하고 많이 아는 언어이기에…

우선 위에서 쓴 순서도에 있는 내용들을 주석으로 다 달아놓고 코드를 적어나가기 시작했습니다.  가장 처음은 seedmoney 변수에 시드머니를 지정하고, var  prompt 명령을 통해 사용자가 판돈을 얼마나 거는지를 받아오는 부분이었습니다.

code1

그 다음은 슬롯머신의 핵심! 휠 돌리기였습니다. 그래도 들은 건 있어서 Math.random()으로 랜덤한 값을 뽑아내기로 합니다.  심볼이 7개라고 했으니 1부터 7을 패턴으로 정했습니다. 랜덤수는 Math.random()에 10을 곱해서 7이하는 나온 수를, 8이상은 8로 나눠서 그 나머지를 취하는 방식으로 정했습니다. 그리고 이것을 3번 반복해서 나온 결과값 즉, 패턴 3개를 slot_number라는 배열에 저장해두었습니다.code2

오오오오오!!! 작동시켜보니 console 실제로 숫자 3개가 나왔고 배열에도 잘 담겼습니다. 초보개발자의 눈에는 감격의 눈물이 맺혔습니다.

슬롯머신에서 가장 중요한 것이 랜덤한 숫자를 뽑아내는 것이니 이제 다 했다고 생각했습니다. 그 다음인 패턴 매칭은 별 것이 아니라고 생각했지만, 이것은 크나큰 착각이었습니다.

우선 저는 우승 패턴으로

  • 1등 : 777
  • 2등 : 3개가 모두 같은수
  • 3등:  2개가 7
  • 4등 : 똑같은 숫자가 2개,

라고 정했습니다. ( 다시 돌아갈 수 있다면 그때의 저를 매우 호되게 혼내고 싶습니다.)

4등의 패턴은 2갠데 패턴 1개는 어디로 간건지…  어쨌든 다음과 같이 1등에서부터 4등별로 경우의 수를 나눠 코드를 짜기 시작했습니다.

code3

 

하지만 여기서부터 진 짜 멘붕이 시작되었습니다. 7이 2번 이상 나오는 경우에 수에서 3개가 모두 같으면 안되었기 때문에 if에 수많은 && ||가 들어가게 생긴것입니다. 게다가, 작동도 하지 않고…. 뭐가 잘못된거지??????????? 시간은 가기만하고 저는 더 다급해졌습니다. 어쨌거나 우선 완성해야하니까 넘어가도록 합니다.

마지막으로 게임을 계속 진행할 수 있는지 판단하는 함수를 추가합니다. 그리고 마지막엔 모든 함수를 묶어서 play라는 함수 안에 넣어서 화면에서 버튼을 클릭하면 play라는 기능이 동작하게 합니다.

code4

완성(….?)과 반성top

16:00

마감시간이 되었습니다. console 출력을 html 출력으로 바꾸려고 하던 중 시간이 끝나버렸습니다.

결론적으로 저는 슬롯머신을 완성을 하지 못했습니다.

우선 dimanche와 저는 서로 만든 슬롯머신 코드를 보며 느낀점을 간단하게 나눴습니다. 그리고 실장님 및 상사분들의 피드백이 진행되었습니다. 많은 피드백이 있었지만 가장 기억에 남는 지점은 다음이었습니다.

1. 무엇을 만들어야 하는지 정확히 알기

‘무엇을 만들었는지 몰랐다구? 슬롯머신 만드는거 아니었어..?’라고 말하실 수 도 있습니다. 네 저도 그렇게 생각했구요. 하지만 슬롯 머신의 패턴 5가지가 어떤 것인지 저는 물어보지 않았습니다. 그냥 제 임의로 패턴을 정해 슬롯머신을 정했던거죠. (게다가 패턴 1개는 사라짐)

슬롯머신은 어떤 패턴을 가지고 있는 지에 따라 당첨 확률도 달라지고, 슬롯머신 회사의 이익률도 달라질 것입니다. 클라이언트가 말해주지 않았다고 해서 제 멋대로 당첨률 20%나 되는 슬롯머신을 납품해드렸다면 “망해라!!!!!”라고 클라이언트에게 말씀드리는거겠죠? 저는 물어봤어야 합니다. 어떤 슬롯머신을 만드는지, 제가 어떤 제품을 만들어내는 건지 정확하고 꼼꼼하게 알아야 했습니다.

2. 내 제품이 올바르게 만들어졌다는 것은 오직 문서를 통해서 확인할 수 있다.

우선 저는 만들다 말았기 때문에 오류가 발생해서 제품 완성조차 안되었습니다. 하지만 만들어졌어도 이 제품이 제대로 만들어졌다는 것은 어떻게 알 수 있을까요? 제품이 제대로 만들어졌다는 것을 확인 할 수 방법은 오직 ‘문서’를 통해서만입니다. 즉, 제품이 완성되기 전에 먼저 클라이언트 요구사항이 뭔지 잘 정리하고, 그것을 바탕으로 QA테스트 목록을 작성해야 기준이 생기는 것입니다. 더불어 사이트맵도 작성해야하구요. 이것이 없이는 저처럼 중간에 변수를 만들었다, 삭제하다, 이름을 바꾸다가 중간에 빼먹어서 오류가 발생하게 되구요… 무엇보다 이 제품이 제대로 된 것인지 알 수 없게 됩니다.

단순히 코드를 짜서 완성하는 것 뿐만이 아니라 코드 작성 전에 기획과 문서 작업이 정말 중요하다는 것을 깨달은 계기였습니다. 또 이런 것들을 효율적으로 만들고 관리할 수 있는 방법, 툴 들도 공부해야함을 알게 되었습니다.

3. 코드부분 피드백

실장님께서 변수 관리를 잘 하라고 팁을 주셨거늘, 저는 거의 모든 변수를 전역변수로 선언해 이곳 저곳에서 변수를 참조하게 했습니다. (심지어 함수 표현식도 전역변수에 담는 어마어마한 짓을…). 게다가 함수간에 어떠한 검증도 없이 모든 play에 모든 함수를 담아 전에 것이 잘 작동되든 말든 모두 플레이 되게 했습니다.

사실 이 외에도 코드 지적할 것이 매우 많지만, Javascript 문법을 거의 모른다고 감안해주고 계시기에 언어 외적인 것에서 더 많은 지적을 받았습니다. 받은 지적을 모두 여기에 썼다가는 영영 끝나지 않을 것이기에… 또 인간은 실수를 반복할것이기에 앞으로 조금씩 더 나눠드리도록 하겠습니다.

 

초보의 구세주, 다함께프로그래밍top

첫번째 미션으로 의기소침해있는 두 초보자들에게 구세주가 나타났습니다. 요구사항 파악도 제대로 되지 않음을 간파하신 실장님! 책으로 공부하는 교육의 다음 책으로 <다함께 프로그래밍>책을 선정하셨습니다.

다함께프로그래밍

찬양하라 초보자들의 구세주… 다함께 프로그래밍!

비주얼도 실제 내용도 일반 도서 같지만 두 신입을 계몽시켜준 대단한 책입니다. 책 이름처럼 기초 개념과 코드를 탄탄하게 쌓을 수 있게 프로그래밍에 대한 기본적인 상식과 프로그래밍 작성 방법에 대한 내용을 다루고 있습니다. 변수, 함수, 테스팅, 포인터 등… 프로그래밍하며 한번씩은 들어봤지만 정확히 몰랐던 개념들을 “쉬운 말”로 “꼼꼼하게” 설명해줍니다. 무엇보다 3장에서 나오는 프로그래밍 작성의 7단계는 다음 미션에서부터 훌륭한 가이드가 되어 주었습니다. 단순히 개념이나 언어센스를 넘어 개발자가 기본적으로 갖춰야할 자세 및 방법론이 있으니 꼭 읽어보시고 실천해보시길 권합니다.


레벨테스트, 저의 첫 프로그래밍 미션의 경험은 솔직히 부끄러움이 컸습니다. 공부좀 제대로 해둘걸.. 진작에 좀 많이 해둘걸 하면서요. 하지만 이제부터 잘하자, 많이 모자르다는 것은 그만큼 성장할 수 있는 가능성도 많다는 것이다 라고 생각하기로 했습니다.

오늘도 개발왕이 될 그날을 그리며!

 


summersummer| bsidesoft 신입사원
디자인을 공부했던 섬머는 개발까지 해버리겠다는 욕심으로 개발자의 세계에 입문하게 되었습니다. 개발왕이 되어 멋진 제품을 만들어내는 꿈을 꾸고 있습니다. 코드, 디자인을 포함한 세상의 모든 아름다운 것들과 미드, 그리고 달리기를 좋아합니다.