불러오는 중...
HELLO MARS(2021/06 ~2021/11/10
약 3분 분량
HELLO MARS(2021/06 ~2021/11/10
2023.09.16·프론트엔드1, 백엔드1, UX/UI 1, 기획자 1·반응형, webRTC, AWS, RestAPI, VUE
💬 프로젝트 소개
- 참가자 96명, 레이싱 타임 112시간의 webRTC 레이싱 대회입니다.
- 화성탐사를 컨셉으로 한 레이싱 대회입니다.
- 참가자들이 웹을 이용하여 다른 장소에 있는 RC-Car를 실시간으로 컨트롤하는 대회입니다.
🛠️ 기술 & 라이브러리
- Vue3
- SCSS
- WebRTC
- webSocket
- canvas
담당 기능
- 전체 웹 개발
- WebRTC & WebSocket을 이용한 실시간 미디어 전송 기능.
- RC-Car 컨트롤 기능
- 배차 시스템, 예약 시스템
- 로그인, 로그아웃, 게시판, 회원가입
이슈
예약 시스템
연습이라는 명목으로 대회 전에 유저를 이용하여 하드웨어 테스트를 할 필요성을 느꼈습니다.
- 현상 : 원격으로 접속하여 레이싱 연습을 하는 예약 시스템 개발.
- 원인 : 급하게 추가된 요구사항으로 디자인과 명확한 기능명세가 없음.
- 해결 : 적절한 디자인을 벤치마킹 하여 컨셉적용 + 유저의 예약시간이 끝나면 레이싱을 자동 종료시키도록 기능 작성
- 성과 : 하루 연습 시간 8시간 중 6시간을 아낄 수 있었습니다.
요소마다 다른 로드 속도
화면이 깨져 보일 때가 있다는 이슈 발견.
- 현상 : 캐시 데이터가 존재하지 않을 경우 이미지 다운로드가 느리니 이미지가 없이 먼저 화면이 로드되어 깨져 보이다가 서서히 웹의 형태가 되는 현상.
- 원인 : 요소들이 각자 로드되는 것.
- 해결 : 모든 요소가 로드되면 화면을 보여주도록 변경. (lazy loading을 사용)
미디어 권한
미디어 권한을 컨트롤하기 위해 Permissions API를 사용.
- 현상 : 가끔 화면이 안 나오는 버그 발생.
- 원인 : 권한을 받고 화면이 나오기까지 한 번의 라우팅 혹은 새로고침이 필요.
- 해결 : 미디어 사용 페이지 이전 페이지에서 권한을 요구. (라우터 가드 사용하여 접근 제어)
프로젝트에서 성장한 부분
기획 참여 & 적극성
기획자는 제품, 디자이너는 사용자를 중심으로 사고하고 일한다는 것을 알게 되었습니다.
- 기획자와의 소통 : 제품으로써 조건을 만족하기 위해 기능을 도출하고 완성도 협의를 하며 개발과 디자인 파트와 일정을 협의하였습니다.
- 디자이너와의 소통 : 타깃에 맞는 편의성에 중점을 두고 기능과 UI에 대해 논의했습니다.
기획 & 디자인에 도움을 주기 위해 피그마 기획안을 작성하였습니다.
- 기능에 대해 생각해 보고 어떤 UI가 나와야 할지 작성하여 디자이너와 의논하였습니다.
처음 의견을 낸 조종화면 디자인
제작된 디자인
- 기획 & 디자인에 의견을 제시하여 최종적으로 반영되었습니다.
- 현실처럼 양 사이드에 바퀴가 있으면 더욱 리얼하지 않을까 하는 생각에 해당 그림을 디자이너 분에게 보여주었습니다.
- 실제로 적용해본 결과 실제 바퀴처럼 만들기에는 디자인과 개발 모두 많은 시간이 소요된다고 판단되어 중단되었습니다.
백엔드와의 첫 협업
http에 대한 이해도가 낮다는 것을 깨닫게 되는 계기가 되었습니다. http header와 response, request에 대해 자세히 공부하게 되었습니다.
여러기능 개발
로그인, 회원가입, 예약, PDF 출력 등을 개발하며 이러한 기능들이 어떻게 만들어지는지 직접 제작해 보며 감을 잡고 다음에 만들 때는 어느 정도의 시간이 걸릴지 예상을 할 수 있게 되었습니다.
한정된 시간과 많은 요구사항에 의한 성장
- 역량과 요구사항에 따른 기한을 어느 정도 파악하게 되었습니다.
- 많은 요구사항에서 우선순위를 분류하고 높은 우선순위부터 해결하는 Task 관리 능력을 얻었습니다.
다음 프로젝트에서 도입하기 위해 공부한 기술
- TypeScript
- Cypress
- graphQL
- SCSS