[토이프로젝트 - 항해 플러스: 제1회 코육대] 행맨 만들기

개요

2023년 추석 명절, 항해 플러스에서 재미있는 대회(제1회 코육대)를 준비한 것을 보았다. 연휴간 제시된 주제들 중 하나를 선택 해 완성작을 내 놓으면 되는 것이다. 해커톤에 도전 해 보고싶었던 나로선, 해커톤과 비슷해 보이는 해당 대회가 무척 흥미로웠다. 주제들은 대부분이 게임이어서 거의 프론트로 이루어져있기 때문에 상 받는 게 목적이 아닌, 출전(완성)에 목적을 두고 개발하였다.
도전기간은 2023년 9월 28일(목)-2023년 10월 3일(화)였으나 시간이 없어 10월 2일-3일 약 2일간 만들게 되었다.(실질적으로 만든 시간만 본다면 하루도 안 걸렸을 것이다.)

도전 과제는 총 6가지였다.
1. 세뱃돈 계산기
2. 행맨 게임
3. 송편 터뜨리기
4. 테트리스
5. 총알 피하기
6. 자유 종목

그 중 제일 친근하고 쉽게 만들 수 있을 것 같던 행맨 게임을 만들기로 했다.

개발 스택

• React

내가 사용할 수 있는(그렇다고 쓸 줄 안다고 하긴 좀 그렇지만) 프론트 언어라곤 리액트밖에 없어 리액트로 개발 하게 되었다.

기능 구현

• 대회에서 요구한 기능
  1. 가족들이 함께 볼 수 있도록 프론트도 구현해서 배포하세요.
  2. 문제를 선택할 수 있도록 영어 단어를 랜덤으로 3개 띄워주세요.
  3. 선택한 문제의 단어를 글자 단위로 숨깁니다. (e.g., "apple" -> "_ _ _ _ _")
  4. 화면에 26개 알파벳을 띄워주세요.
  5. 선택한 알파벳과 정답을 비교합니다.
  6. 일치하는 알파벳이 있을 경우 기존 UI에서 사라지고 해당 위치에 표시됩니다.
  7. 틀릴 경우 기존 위치에서 알파벳이 빨간색으로 바뀌고, 오류 횟수를 증가시킵니다.
  8. 오류 날 때마다 ‘교수대-밧줄-머리-팔-손-몸통-다리-발’ 순서로 그려서 그림이 완성되면 ‘실패’ 를 띄웁니다. (오류 횟수 8번 이상은 실패)

  이 중 6-8번은 문제와 완전 일치하게는 만들지 않았다.
  (오류 횟수 8번 이상일 때 실패하는 기능 자체는 동일)

행맨 구하기 성공시 나타나는 화면(성공 시 폭죽을 터뜨린다.) 행맨 구하기 실패시 나타나는 화면 재시작 버튼 눌렀을 때 나타나는 화면

참여 소감

이렇게 단기간에 미션으로 뭔가를 만들어 제출 해 보는 것은 처음이어서 만들면서 즐겁게 했다. 그래도 프론트는 정말 나와 안 맞는 것 같다. 정말 간단한 웹사이트지만, 오랜만에 리액트로 개발 해 보면서 그래도 프론트 부분을 아예 손대지 못하는 수준은 아니구나... 를 느꼈다. 다음 프로젝트 때도 자신감을 갖고 프론트를 개발 할 수 있을 것 같다!
그리고... 여담이지만 개발 중 구글링 하면서 행맨 오픈소스들을 많이 볼 수 있었는데, 그 오픈 소스에서 필요한 단어 30개 중 반 정도를 들고 오고, 내가 주변에 있는 단어들로 반을 채웠는데 생각보다 난이도가 어려워 아쉬운 부분이긴 하다. 😂

행맨 게임 구경하기

• 행맨 게임을 하고 싶다면?
  → Github Page(행맨 게임하기)
• 배포된 코드가 궁금하다면?
  → Github