42SEOUL | PingPong gaming SPA (with socket chatting) _ 1. 화면기획

현자(박성현)·2022년 5월 8일
3

Project

목록 보기
1/1


[혹시... 탁구 좋아하십니까?] 🏓

누구나 해봤을 법 하다고 단정짓기는 좀 그렇지만, 탁구는 상당히 인기있는 스포츠이죠. 제가 동료들과 개발생활을 하고 있는 42seoul에서도, 요즈음 탁구의 인기가 뜨거워요. 개발자에게 좋은 운동이라서 그런가 싶지만, 사실 탁구는 탁구 그 자체로 "직관"적인 재미를 주는 종목이지요.

[룰] ✏️

- 공을 쳐서 상대편 테이블에 보내고, 상대가 못 받으면 너는 승리란다

... 이 얼마나 직관적이고 간단한가요!
탁구를 모티브로 한 수많은 게임 어플리케이션들이 나온 것도, 이러한 직관성에서 기인했다고 생각한답니다.
그래서인지 이번에 졸업 과제 겸, 탁구 게임을 모티브로 한 SPA 서비스를 만들 기회가 생겨서 매우 흥미로워요. 🕺



[팀원들과 함께하는 기획]

이번 프로젝트는 저번과 다르게 사이즈가 엄청 커서, BE 와 FE 파트 양쪽 다 지원군이 필요했지요. 이번 프로젝트는 라즈베리 파이를 사용하여 상시 서비스할 수 있도록 올릴 예정인데다가, Docker Compose를 통하여 CI / CD 를 진행할 수 있도록 준비할 계획이거든요! (혹시 해당 용어들이 더 궁금하시다면, 쪼금만 더 기다려 주세요! 포스팅 예정! 🐒) 그러다 보니, 이 길을 함께 걸어갈 좋은 동료들이 필요했지요.

아주 운 좋게도, 제 주변에는 실력있는 개발자인 동료와 친구들이 많이 있답니다. 임베디드 업계에 종사하던 친구부터 해서, BE, FE 뿐만 아니라 보안 전문가까지 팀원으로 영입하게 되었어요!
(모으고 보니, 내가 제일 개발 못하는 사람 같긴 하지만...)

시작부터 아주 순조롭다! ⛴

일단은 언제나 그랬듯이, 어떤 서비스를 만들지 구상하는 것이 중요했어요.
다만 이번에는 고객 스토리나 시나리오 등을 작성하는 단계를 건너뛰고, 대략적인 화면설계와 ERD를 구성하는 것부터 시작해보아요.

( 서비스에 대한 상세명세는 사전에 구성된 요구명세서로 이미 주어져 있기 때문에, 이번 서비스에 한해서 유저 스토리 & 시나리오를 건너뛰었답니다 🤸)

최대한 디자인 요소를 배제하고, 경험과 기능을 토대로 화면설계를 해보았습니다.


....음... 이건 좀 심하게 디자인을 너무 신경 안쓴..
멋진 로그인 페이지! 🤟 이 로그인페이지를 시작으로 42Oauth 처리를 통해, 2Factor 인증을 거치는 서비스를 구상했어요.

와우! 화면이 많기도 하네! FE 파트 담당자로서, React 실력이 늘 것을 생각하니 벌써부터 두근두근 하는군요 🐶

하나하나 세부적으로 보여드리고 싶다!! 는 욕심이 생기지만, FIGMA의 전체 FLOW를 보여드리는 이미지로는 이것이 제일 적절할 것 같답니다.

flow 상으로 game(Play) 외에 chat과 watch 등이 보이실 텐데, 그건 다음과 같은 기능을 구현하기로 했기 때문이죠.

  • 만들어진 웹 서비스는 서로 다른 유저끼리의 게임 플레이를 진행하고, 관전할 수 있어요.
  • admin view, 방장이 있는 채팅, 실시간 멀티플레이어 온라인 게임, 비밀 채팅, 친구 추가, 관전 및 랭킹 등의 부가기능이 있고, 이를 위해 socket을 적극적으로 활용할 거에요 👐

뭔가 구현할 것이 너무 많아! 🏔
그치만 짜릿하군!! (최고야...짜릿해...)

대략적인 구상이 마무리 되고 난 이후의 포스팅 작업이라,
화면 설계 시의 고민의 과정들을 이번 포스트에 다 담지 못할 것 같아요!
그치만 그건 매우매우 자랑할 만한 고민들과 경험들이였으니,
그에 대해서는 다음 포스트에서 하나하나 썰을 풀어보려 합니다! 🏃🏻

잠시만 안녕! 🤚

profile
사람을 좋아하는 심리학자의 개발생활

0개의 댓글