GACHIMIND

개발자 면접을 게임으로 재밌고 쉽게 준비해요!

🐱 개발자 면접에 자주 등장하는 키워드를 게임으로 준비하는 서비스입니다. 🐱
🐱 면접 합격률 100%를 목표로 재밌고 쉽게 준비할 수 있도록 준비했답니다. 🐱
🐱 나만의 고양이를 커스터마이징 하고 획득한 점수로 캣타워를 쌓아보세요! 🐱

개발 과정 및 기록은 위키에서 확인할 수 있어요!

🐱 프로젝트 간단 소개

개발자 면접에 자주 등장하는 키워드를 게임으로 준비하는 서비스입니다.

최소 2명 / 최대 6명까지 게임 플레이가 가능합니다.
모든 참가자들이 레디를 누르면 방장이 게임 시작을 할 수 있습니다.
발표자인 참가자는 키워드를 설명합니다.
발표자 외 참가자는 채팅창에 키워드를 입력해 정답을 맞춥니다.
토론 시간 자유롭게 대화하는 동안 채팅창에서 발표자를 평가할 수 있습니다.

😸 Frontend 프로젝트 개발 기간

2023.01.04 ~ 2023.02.10

😻 주요 기능


방 생성	내 정보 수정


게임 플레이	게임 플레이	게임 플레이


발표자 평가	게임 결과	마이 페이지

🏗️ 프로젝트 아키텍쳐

✏️ Frontend 기술 스택

🧑‍🤝‍🧑 [Frontend] 유저 피드백 개선사항

🐰 방에 입장했을 때 기본 설정이 마이크/캠이 OFF 였으면 좋겠어요! 캠이 거울모드가 아니라 부담스러워요!

꽤 많은 사용자분들이 다음과 같은 문의를 남겼어요.

수정하여 반영하는 것은 어렵지 않지만 사소한 것이라도 사용자의 입장에서 생각해보고 개발하며 내린 의사결정과 작성한 코드가 사용자에게 어떤 영향을 미칠 지 늘 생각하는 습관을 가져야겠다고 생각했어요!

🐰 맥 환경에서 이용 할 때 한글 채팅이 2회 보내져요요 래퍼가 된 것 같아요요!

한글과 같은 조합문자가 조합중인지 끝났는지 파악하기 어려워 마지막 문자를 조합중일 때와 조합이 끝난 후 두번 enter 키 이벤트가 발생하는 문제로 보았어요

KeybordEvent의 isComposing 속성을 이용해 조합이 끝난 뒤 이벤트가 발생하게 하여 문제를 해결했어요

새로운 것을 또 알게되어 피드백에 너무 감사함을 느꼈고 프론트엔드 개발자로서 여러 클라이언트 기기나 환경을 고려하여 생각하고 개발해야겠다는 교훈을 얻었어요!

🐰 실시간 채팅중에 채팅을 길게 쓰면 채팅창이 오른쪽으로 길게 넓혀지면서 채팅이 보이지 않는 현상이 있어요

정말로 처음 알게 된 문제였고 피드백을 통해 해결해 볼 수 있어서 감사했어요!

  word-wrap: break-word;
  word-break: break-all;

프론트엔드 개발자는 실제 서비스 이용자와 직접적으로 연결되고 소통하고 있지 않나 생각해요

사용자가 서비스 이용에 불편함을 느끼지 않도록 작은 부분이라도 오류가 발생하지 않도록 개발할 수 있는 지식과 꼼꼼함을 갖출 수 있도록 노력해야겠습니다!

🐰 다른 상호작용이 캠과 마이크에 영향을 주어 자동으로 on/off 상태가 변화하던 문제

발표자가 바뀌었는데 마이크가 꺼져서 안나와요!

런칭 직전 식별된 레디 버튼을 누르면 캠이 모두 꺼지는 등 일부 심각한 상호작용의 결합도 문제들을 빠르게 해결하여 런칭했지만 결국 또 다른 문제를 런칭 전 잡아내지 못했어요

기존에 동작하던 부분들이 새로운 기능과 컴포넌트의 추가에 영향을 받아 오동작했던 가장 심각한 사용자 피드백이었어요. 배포 후 하루 넘게 몰랐었습니다.

몇 없는 소중한 사용자들 중에서도 관심을 가지고 서비스를 이용하려 들어왔는데 마이크 문제로 게임을 플레이 하지 못했다는 피드백을 보고 정말 속상했습니다 😢

하나의 컴포넌트의 책임이 너무 많아 결합도가 높아 확장성이 별로인지, 상태의 변화가 하위 컴포넌트들에 어떤 영향을 미칠 지 늘 고려하며 개발해야겠다고 반성했습니다.

🐰 채팅으로 발표자를 평가하는 것의 불편함, 평가할 수 있는 화면이 따로 있다면 좋을 것 같아요

게임 스코어 입력하는 부분이 조금 헷갈렸어요! 점수를 채팅창으로 입력하기보다 모달창이 떠서 점수를 입력할 수 있으면 더 직관적일 것 같아요 : ) 전반적으로 좋았습니다 !

사실 채팅창에서 발표자 평가를 하는 부분은 알아채기 쉽지 않고 개발하는 입장에서도 마음에 들지 않았었어요

발표자 평가를 강제하지 않고 발표 후 발표자를 중심으로 발표자의 얼굴을 확인하며 토론하는 시간을 가져야 한다고 생각해서 따로 평가창을 띄우지 않았었는데

평가창이 뜨는 것이 평가의 존재여부를 알아채지 못하는 것 보다는 나을 것이라는 판단으로 개선해보았어요


기존	수정 후

평가 시스템에 대해 100% 인지할 수 있게 되었고 직접 점수를 입력하는 것 보다 빠르고 재밌어지지 않아졌나 생각해요

호평이 많았던 고양이를 재탕활용하여 평가를 제출할 수 있게 구성했어요

발표자를 가리는 것에 불편함을 느낄 수 있는 부분을 고려해 드래그 할 수 있도록 기능을 추가했어요

기획에 없던 내용이라 먼저 개발하고 슬랙,카카오톡,PR,스토리북 등으로 공유하여 의견, 피드백을 요청드려 확인 받고 빠르게 적용해보았어요

여전히 고민해야 할 문제

마우스를 가져다대보면 드래그 되는지 알 수 있다 하더라도 눈으로만 보면 사용자 입장에서는 고정된 창 하나가 띄워져있는 것으로 밖에 보이지 않을 수 있을 것 같아요

어떻게 하면 이런 상호작용이 있다는 것을 쉽고 효과적으로 보여줄 수 있을 지 앞으로도 고민해보아야 할 것 같습니다.

💡 추가 및 개선해보고 싶은 것들

시간과 체력이 더 있다면 해보고 싶은 아쉬웠던 것들이예요!

키워드 개선

이용자가 직접 키워드를 선정하는 것이 아니기 때문에 사실 키워드가 결국 핵심인 서비스라고 생각해요.

난이도라던가 키워드 그 자체의 적절함에 대해서는 개발한 우리들 입장에서도 아직 의문부호가 남아있는 것 같아요

CS지식만으로는 양 자체에 한계가 있기 때문에 카테고리화를 해서 사용자가 출제될 문제 분야들을 선택할 수 있게 한다면 좋을 것 같습니다!

복습

마이페이지 키워드 히스토리를 세분화해서 보여주어 어떤 상황에 해당 키워드를 접했는지 알 수 있게 하고

각 키워드들에 대한 간단한 메모를 남길 수 있게 하여 보여주는 등 복습에 도움될만한 기능들을 추가하면 좋을 것 같습니다

솔로모드

사실 유저 피드백에 솔로모드에 대한 수요가 많았어요.

연습모드 느낌으로 사용자가 빠르게 주어진 키워드를 설명해볼 수 있는 공간을 마련해보면 좋을 것 같다고 생각했습니다.

Frontend 팀원 소개

FE/박동석	FE/최혜연	DE/변경리

pds0309	heayounchoi	변경리

Backend 팀원 소개

리더/최예나	BE/편도영	BE/백세현

jn33-dev	dy-p-code	bsh714-dev

gachimind/frontend