[React] 유형테스트 만들기(1) - 기획

dsc라는 동아리에 가입해서 리엑트를 간단하게 공부했다.

공부를 한 것을 토대로 팀원들과 간단한 유형테스트를 만들어 보기로 했고, 완성했다!

react-native를 이용하려다가... 일단 react 부터 사용해보자는 팀원들의 의견이 맞는 것 같아 react로 진행했다.

 

엄청나게 잘 했다거나 배포용도로 만든 것은 아니지만, 기초를 다지고 개념을 정리해보기 참 좋은 프로젝트였다고 생각된다.

만드는 도중에 정리했으면 더 좋았겠지만... 그 때는 완성하는게 급했고, 리액트 프로젝트 자체가 어색하고 처음이어서 이것저것 찾아보느라 힘들었기에 지금 정리함

 

 

영상이 안올라가서 gif를 만들었는데 왜인지 13,14페이지만 gif로안만들어져서 그냥 뺌...

 

프로젝트는 다음과 같이 진행했다 

1. 기획하기
2. 페이지 나누기
3. 레이아웃 짜기 
4. 버튼 만들기
5. 버튼 기능들 
6. 결과창 만들기 

버튼 기능들 

• Router : 페이지 이전
• Redux : 버튼 클릭 시 마다 점수 부여 
• styled-components : 특정 조건에 따라 컴포넌트를 다르게 보이게 할 수 있음!

 

기획

자세한 기획까지 쓰기는 조금 그렇고, 우리학과의 단대에 대한 정보도 조금 알겸 

주제는 (우리학교에 존재하는 단과대 중에서) "자신에게 잘 어울리는 단과대학" 유형을 보여주는 테스트로 결정했다!

 

 

자료조사

일단 주제를 정했으면, 각 유형은 무엇이 있는지 

해당 유형별로 보여줄 정보가 무엇이 있는지 등의 정보를 얻어야한다

 

유형(단대)

단과 대학 리스트  

• 인문과학대학 Liberal Arts
• 사회과학대학 Social Sciences
• 자연과학대학 Natural Sciences
• 엘택공과대학 Engineering
• 음악대학 Music
• 조형예술대학 Art & Design
• 사범대학 Education
• 경영대학 Business Administration
• 신산업융합대학 Science & Industry Convergence
• 의과대학 Medicine
• 간호대학 Nursing
• 약학대학 Pharmacy
• 스크랜튼대학 Scranton
• 호크마교양대학 HOKMA General Education

자세한 정보는 학교 홈페이지 단대 소개창에서 얻기로 했다

 

결과창에 보여줄 정보

www.ewha.ac.kr/ewha/academics/liberal-arts.do

이화여자대학교 | 대학·대학원 | 대학 | 인문과학대학 | 대학정보

 

단대별 색상

 

 

그 외에도 단대별로 부르는 별명등을 조사

 

 

 

Prototype

프로토 타입은 동시에 작업하기에 FIGMA가 아주 좋습니다!

대학생이면 학생 라이센스를 받아서 팀원들과 동시 작업이 가능하다! 

이런식으로 프로토 타입을 제작했다. 

복잡한 앱개발 등은 애니메이션도 추가하면 훨씬 좋지만 일단 간단한 프로젝트이므로 애니메이션까지는 추가하지 않았음

 

디자인이 너무어렵다.. 디자이너를 왜 구하는지 뼈저리게 느낌

초기는 이렇게 12가지 질문이었는데 최종 14개로 수정되긴 했다

 

 

 

결과창

질문과 선택에 따라 어떻게 결과를 계산할지 기획해야한다.

보통은 선택지에 따라 질문이 달라지는 경우도 있는데 

우리팀은 일단 14가지의 단대에 각각 point 변수를 부여하여,

선택시마다 적절한 포인트값을 준 후 가장 포인트가 높은 것을 최종 결과로 보여주기로 했다 

-> 적절한 포인트 분배는 유형테스트의 묘미라 일단은 비밀.. 별거 없고 재미로 설정한 것!