2048 첫 사이드 프로젝트를 마치며
2048 링크
http://2048-game-deployment.s3-website.ap-northeast-2.amazonaws.com/
2048
2048-game-deployment.s3-website.ap-northeast-2.amazonaws.com
프로젝트 소개 및 회고
React, JS, AWS배포와 알고리즘 공부를 하면서 여태 배운 내용을 되돌아보고 복습하며 간단한 사이드 프로젝트를 하고 싶던 와중에 동기분께서 2048 프로젝트를 제안해주셔서 같이 협업하여 프로젝트를 경험할 수 있는 좋은 기회를 얻게 되었습니다.
혼자서 했다면 정말 힘들었을텐데 같이 협업함으로써 정말 왜 협업이 필요한 것인지를 몸으로 느낄 수 있었습니다.
에러를 마주하게 되거나 오랫동안 풀리지 않는 코드를 붙잡고 있다면 번아웃이 오고 간단하게 생각하면 풀릴 문제들도 점점 산으로 가게 되어서 금방 지치게 되는데 협업으로 같이 진행하다보면 산으로 가는 코드를 막아주기도 하고 좀 더 좋은 코드를 제안하여 문제해결에 있어서 더 다양한 방식의 코드를 연구할 수 있다는 큰 장점이 있었습니다.
혼자서 사이드 프로젝트라고 하기에는 민망하지만 JS를 처음 공부할 때, 바닐라 JS로 calendar를 구현하는 프로젝트를 해봤었는데 혼자 하는것과는 확실히 다르다는 것을 많이 느꼈고 그때보다 더욱 더 내가 성장했다는 것을 많이 느끼게 해준 프로젝트였습니다.
반응형 웹앱으로 기획하였으나 아직 모바일에서의 스와이프 기능은 구현하지 못한 상태이고, 많이 부족하지만 나름 반응형으로 css를 작성하였습니다. 첫 프로젝트인 것을 고려한다면 나름 정말 만족스러운 결과물이고 프로젝트를 하면서 예전의 나와 비교했을 때 발전해가고 있는 나를 마주하게 되어 개발에 더욱 더 흥미를 느낄 수 있던 기회가 되었습니다.
저와 같이 프로젝트를 진행한 동기분께도 감사드리고 코드리뷰와 피드백을 주신 많은 동기분들에게도 모두모두 감사하다는 인사 드립니다!! 덕분에 정말 즐겁고 좋은 경험을 할 수 있었습니다!! :)
게임을 하시다가 에러가 발견되거나 피드백 주실게 있으시다면 언제든지 환영입니다!
저는 다음 작업들을 했습니다.
- UI를 설계하고 간단한 애니메이션과 반응형을 고려한 css로 구현하였습니다.
- React를 사용하여 각 기능마다 컴포넌트로 적절하게 쪼개어 나눌 수 있고, 동적으로 생성되는 컴포넌트들과 조건부 렌더링을 기준으로
컴포넌트를 잘 분리할 수 있습니다. - 게임에 필요한 로직들을 재사용 가능한 코드로 작성하기 위해 같이 진행한 페어분과 함께 알고리즘에 대해 아이디어를 공유하고 수도코드로 작성하였고, 이 수도코드를 코드로 옮길 수 있습니다.
- AWS를 사용하여 다른 브라우저에서도 링크를 통해 접속할 수 있게 배포할 수 있습니다.
동기분들에게 받은 피드백들
1. 방향키를 눌렀을 때, 움직이는 애니메이션이나 소리를 적용하면 좋을 것 같습니다.
방향키를 누르면 해당 칸이 움직일 때 슬라이딩 하는 것처럼 움직이는 것과 같은 애니메이션을 적용해보고 싶다는 생각만 했었는데 시간이 많이 부족했어서 이정도도 괜찮겠지 싶었지만 사용자 입장에서 보면 너무 단순해보이기도 하고 내가 어떤 방향키를 눌렀는지 시각적으로 보여지는 것이 더 필요할 것이라는 생각을 하게 되었습니다.
해당 피드백을 주신 분들께 감사하고 시간을 내서 꼭 반영해보도록 하겠습니다!
2. 반응형으로 css를 작성한 만큼 모바일에서도 게임을 할 수 있게 스와이프 기능을 추가해주세요.
아직 스와이프 기능을 적용해본 경험이 없어서 이 프로젝트에 적용해보지는 못했지만 추후에 꼭 적용하고 싶은 피드백 입니다.
모바일을 고려한 웹앱에 관심이 많기 때문에 꼭!!!! 공부해서 사용자 경험을 더 충족시킬 수 있는 프로젝트로 완성도를 높혀보고 싶습니다.
부족했던 점과 아쉬운 점
알고리즘에 많이 약해서 페어분께 도움을 정말 많이 받았고 게임 로직을 생각하면서 문제 해결을 할 때 어떤 방식으로 접근해야 하는지에 대해서도 많이 약하다는 것을 알게 되었습니다.
처음에 막연하게 생각나는대로 코드를 작성해보았는데 정말 가독성도 떨어지는 것 같고 비효율적인 코드를 작성하게 되었습니다.
물론 생각나는대로 코드를 치고 계속해서 수정을 해나가는 것도 좋지만 좀 더 명확하게 수도코드를 작성하고 로직에 대한 충분한 생각을 거친 후에 코드를 작성하는 습관을 가져야 겠다는 것을 많이 느꼈습니다.
알고리즘 공부와 수도코드 작성하는 습관이 부족하다는 것을 느꼈습니다.
아쉬운 점은 시간이 좀 더 주어졌다면 로그인 기능을 추가하여 각각의 유저들이 존재하고 mysql로 db 설계를 하여 이 유저들이 자신의 점수를 기록할 수 있고 기록된 점수들은 db에 저장하여 자신만의 점수 목록들을 가질 수 있는 기능을 구현하고 싶습니다.
조금 더 욕심을 내자면 다른 유저들과 점수를 공유할 수 있도록 설계한다던가 유저들이 갱신한 최고기록을 보여주는 것과 같은 기능을 더 추가해보고 싶습니다.
마치며
여기까지가 제 첫 협업 프로젝트에 대한 회고이고 2048을 구현하면서 주요한 게임 로직에 대한 설명을 다음 컨텐츠에서 이어서 작성해 볼 계획입니다.
짧은 기간내에 진행한 첫 사이드 프로젝트가 너무 재밌고 유익하게 다가와서 앞으로 해나갈 사이드 프로젝트들이 너무 기대되고 설레이기도 했습니다! 저와 같이 협업하시느라 고생하신 페어분께 다시 한번 감사인사 드리면서 글을 마치도록 하겠습니다! :)
바로가기 - 2048 주요 코드 설명
코드 깃허브에서 확인하기 - https://github.com/HyojinLee96/2048