—– 목차 —–
- 금주 아이디어 및 기획
- 금주 개선 및 업데이트 내용
- 다음 주 개발 및 고려 사항
- 기타 사항
1. 금주 아이디어 및 기획
- 1. 기타 개선 사항
- 큰 모니터에서도 화면과 채팅창이 지나치게 벌어지지 않도록 화면 배치 비율 최적화 기획
- 사용자 취향에 맞게 밝은 화면과 어두운 화면을 선택할 수 있는 다크 / 라이트 모드 기능 기획
- 방에 들어갈 때 순간적으로 화면이 깜빡거리는 현상을 막기 위한 로딩 화면 기획
- 대기실에서 시작 가능한 인원수를 한눈에 알아볼 수 있도록 게임 목록 카드 디자인 개선 기획
- 저사양 컴퓨터나 노트북에서도 대기실이 버벅이지 않고 부드럽게 작동하도록 성능 개선 기획
- 이번 주는 UI/UX 및, 화면 비율, 렉등을 중점으로 개선했습니다.
2. 금주 개선 및 업데이트 내용
- 1-1. 게임의 전체적인 개선 사항
- 화면 너비 및 배치 최적화했습니다.
- 큰 모니터 환경에서 화면 양옆이 너무 넓게 벌어지는 문제를 해결하기 위해 전체 화면 크기와 채팅창의 비율을 알맞게 고정하였습니다.
- 채팅창이 게임 화면을 가리지 않으면서도 메인 게임 공간이 쾌적하게 보이도록 균형을 맞추었습니다.
- 개발 목적 : 기존에 존재하던 이질적인 빈 공간을 줄이고, 어색함 없이 깔끔하고 안정적인 화면을 보여주기 위함입니다.
- 화면 너비 및 배치 최적화했습니다.
(사진 1) – 화면 비율을 조정하기 전 대기실 화면.
(사진 2) – 화면 비율을 조정한 대기실 화면.
- 1-2. 다크 / 라이트 모드 전환 기능 추가
- 채팅창 상단에 모드 변경 버튼을 두어 클릭 한 번으로 밝은 테마와 어두운 테마를 자유롭게 바꿀 수 있도록 구현하였습니다.
- 대기실, 게임 진행 화면, 채팅창, 알림 창 등 모든 화면이 선택한 테마에 맞춰 자연스럽게 변경되도록 하였습니다.
- 사용자가 고른 테마가 브라우저에 저장되어 다음에 다시 접속해도 그대로 유지되도록 처리하였습니다.
- 개발 목적 : 사용자 취향과 주변 밝기에 맞춰 눈의 피로를 줄여주기 위함입니다.
(사진 3) – 다크 모드(기존 컬러) 화면
(사진 4) – 라이트 모드 화면
- 1-3. 방 입장 로딩 화면 추가
- 방에 들어갈 때 준비가 덜 된 화면이 순간적으로 깜빡이며 나타나는 현상을 가려주는 로고 로딩 화면을 적용하였습니다.
- 인터넷 연결이 불안정할 때는 화면에 남은 연결 시간을 숫자로 보여주어 현재 상태를 쉽게 파악할 수 있도록 개선하였습니다.
- 개발 목적 : 방에 들어가는 과정을 자연스럽고 깔끔하게 연출하고 연결 상태를 명확히 안내하기 위함입니다.
(사진 5) – 로딩 화면 (다크모드)
(사진 6) – 로딩 화면 (라이트 모드)
- 1-4. 게임 목록 카드 디자인 및 인원수 표시 개선
- 게임 목록 카드에 고유한 색상 효과를 넣고, 마우스를 올렸을 때 살짝 떠오르는 반응을 주어 선택 편의성을 높였습니다.
- 게임을 시작하는 데 필요한 최소/최대 인원수를 눈에 잘 띄는 뱃지 형태로 강조하였습니다.
- 개발 목적 : 방에 모인 인원으로 어떤 게임을 할 수 있는지 방장이 한눈에 파악할 수 있도록 돕기 위함입니다.
(사진 7) – 인원수 뱃지가 강조된 게임 목록 카드.
- 1-5. 대기실 조작 반응 및 렉 개선
- 대기실 화면에 들어가 있던 무거운 그래픽 효과를 걷어내어 시스템 부담을 줄였습니다.
- 사양이 낮은 컴퓨터나 노트북에서도 끊김 없이 부드럽게 대기실을 이용할 수 있도록 개선하였습니다.
- 개발 목적 : 컴퓨터 성능에 상관없이 모든 사용자가 쾌적하게 이용할 수 있도록 하기 위함입니다.
3. 다음 주 개발 및 고려 사항
1. 폭탄 돌리기 게임 관련
- 전략 모드에서 지목하고 싶은 사람을 쉽게 고를 수 있도록 번호 표시 및 타겟 지목 기능 추가
- 게임 중 목숨(하트) 표시를 더 깔끔하게 다듬기
2. 라이어 게임 관련
- 투표할 때나 라운드가 끝났을 때 나오는 안내 문구를 더 이해하기 쉽게 다듬기
3. 기타 사항
- 외우기 어려운 영어 방 코드 대신 친구들에게 쉽게 알려줄 수 있는 한글 방 코드 도입 검토하기.
- 방 입장 로딩 화면 비주얼 개선 검토하기.
- 닉네임 설정 화면 다크 / 라이트 테마 연동 및 토글 버튼 배치 고려하기.
4. 기타 사항
- 위 내용을 모두 Github에 Push 했고, Render가 이를 읽어 사이트를 업데이트 해 줄 것입니다.
- GitHub : https://github.com/Soap1105/PickPlay
- 웹 서비스 : https://pickplay.onrender.com
감사합니다.