나만의 작은 스프린트(롤 MBTI,퀴즈)

1 . 시작에 앞서

리액트 드림코딩 강의를 완강했지만 강의만 듣는다고 내것이 되지 않는다는 생각에 개인 프로젝트를 하면서 실력을 쌓아가기로 했다.

2 . 프로젝트 진행 방식

프로젝트는 스프린트 방식으로 피그마에서 혼자 진행했다. 우선 어떤 주제로 프로젝트를 해야할까가 첫번쨰로 해결해야할 문제이므로 이것먼저 했고, 진행 방식은 테오의 스프린트 과정을 많이 참조했습니다.

2 - 1 아이디어 선정

https://velog.io/@teo/google-sprint-1

기술과 어떻게 만들어야할지는 고려 안하고 만들고 싶었던것 위주로 아이디어를 먼저 냈다.

여러 아이디어가 나왔는데 간단하게, 원랜디 미션 도우미, 상비약 추천웹, 리그오브레전드 MBTI, 익명질문 ask, 날씨 옷 도우미, 플래시게임으로 총 6개의 아이디어가 나왔다. 아이디어를 다 낸후 이 프로젝트로 하게되면 어떤 장단점이 있을까에 대한 생각을 글로 남겼을때 유독 아이디어가 많이 떠오르고 끌렸던게 롤MBTI였고 조금의 고민 이후에 이걸로 선정했다.

2 - 2 서비스의 목적, 사용자

처음엔 MBTI만 하려 했으나 사용자를 추정하고 목적을 고려해보며 구체화하다 보니 롤 상식퀴즈도 MBTI와 유사하면서 재밌게 이용할 수 있을것 같다는 생각이 들었고 프로젝트에 추가하기로 결정했다.

2 - 3 어떻게 하면 ~ 할수있을까요 질문찾기

위에서의 목적과 사용자를 특정해서 이를 적절히 묶어주면 웹을 어떻게 구상해야될지 감이 오기때문에 이를 피그마에 기록하면서 정리 해봤다.

요런 질문들이 나왔고 비슷한건 묶어서 어떻게 하면 ~ 할수있을까요의 질문으로 만들었고 그에 대한 답변들도 작성했다.

2 - 4 레퍼런스 찾기

MBTI가 요새 트렌드기도 하고 롤이란 게임이 대중화가 잘되있었기에 레퍼런스를 찾기란 어렵지 않았다.
영감을 많이 받았던 두개의 사이트가 있는데 첫번쨰는 이미 사용자들도 꽤 있고 플로우가 깔끔해서 도움이 많이됐다.
https://lol-mbti.vercel.app/mbti/ISFP

두번째는 디자인적으로 많이 영감을 받은 블로그고 필자는 디자인에 대해 일자무식하기 때문에 이 웹을 참고하며 실제 리그오브레전드 홈페이지와 게임창에서의 다자인과 비슷하게 해보자는 결심을 했다.
https://yumyumcoding.tistory.com/33

2 - 5 마지막으로

이런 과정들을 통해 페이지를 어떻게 구상해야하고 페이지 플로우는 어떤식으로 해야할지 감이 와서 빨리 만들어보고 싶다는 생각에 프로젝트를 바로 시작했다.

3 . 프로젝트 시작

우선 내 웹의 주요기능은 2개가 있고 첫번째는 롤 MBTI를 통해 MBTI를 알려주는것이고 두번쨰는 롤 Quiz를 통해 뇌지컬을 검사하고 그에 따른 티어를 실제 게임처럼 보여주는것이다.
첫번째 프로젝트이기에 프로젝트는 CRA(Create-React_App)으로 시작했고 필요한 툴들은 만들어보면서 필요한건 그때그떄 추가해서 사용해보자 마음먹었다.
내가 평소에 제일 중요하게 생각하는 3가지 괜찮은UI, 사용자가 재밌게, 누구나 이용에 의거하여 잘 만들어보려고 한다.