www.kbgagu.shop/mbt
1. 출품자 수강 과정명 : 정보처리산업기사 자격취득을 위한 응용 SW개발자 과정
2. 출품자 성명 : 강민승
3. 작품명 : MBTI심리검사 웹 APP
4. 지도교수 성명 : (담임)이나겸 , 정민욱, 이동준, 박명회
5. 작품 제작의도 :
열두개의 간단한 질문으로 사용자의 흥미를 끌 수 있는 심리검사 포멧 제작
제작 완료된 웹사이트는 카카오 공유하기 기능을 통해 기업의 마케팅에 활용 가능
6. 작품 상세설명 :
1) 프론트 엔드
HTML, CSS
-모바일과 PC화면 모두를 대응하기 위해 meta태그를 사용하고 콘텐츠의 폭을 360px로 고정했습니다.
-배경이미지는 상업적 활용이 가능한 추상화를 다운로드하여 사용했습니다.
-배경이미지의 사이즈를 조정하여 어떤 기기에서든 화면 전체에 가득 차게 보이게 했습니다.
-상단의 학교 로고 클릭시 학교 홈페이지로 링크되게 하였습니다.
-css를 파일화 해서 두개의 페이지에 공통으로 적용해 유지보수성을 올렸습니다.
javascript
-버튼에 이벤트 리스너를 생성해 버튼 클릭시 4개의 변수(mbti4대 유형)의 값을 변경하고 다음 질문지로 슬라이드되게하여 페이지수를 줄였습니다.
-슬라이드 매서드가 동작할때 상단의 processber가 조금씩 채워집니다.
-상술한 두가지 동작을 transition 속성을 활용해 부드러운 애니매이션으로 동작하게 했습니다.
-상술한 Carousel형 콘텐츠와 processbar의 개별 width, 전체 width를 변수에 담아 향후 콘텐츠 크기, 콘텐츠 수량이 변경할때 변수의 숫자값만 바꿔도 전체 페이지가 변경되게 하였습니다.
-결과페이지에서 카카오 link api를 사용해 결과를 공유하고 검사자를 늘릴 수 있습니다.
2) 백엔드
- 사용자가 결과 보기 버튼을 클릭하면 상술한 4개의 변수를 post방식으로 httpsevletrequst에 담아 전달합니다.
- 웹 서블릿 어노테이션을 통해 컨트롤러가 해당하는 경로를 분기합니다.
- httpsevletrequst에 담겨있는 4개의 변수를 int변수에 담습니다. 이때 requset.getparameter의 반환형이 String이라서 parseint 내장 매서드를 사용합니다.
-4개의 변수는 각각 3개의 질문에서 도출되어 + 혹은 -값만 가집니다. 이를 if문으로 분기하여16개의 mbti유형을 구붓짓습니다.(16개 상태값은 4bit의 변수로 나타 낼 수 있음)
-위에서 구분된 16개의type을 DB에 저장합니다. 저장하는Table은 type, 검사시각 단 두개의 컬럼으로 간략화 했지만 향후 사용자 정보를 입력받는등 응용이 가능합니다.
-저장된 type정보와 같은 값을 가지는 row의 수와 전체 데이터 row를 DB에서 조회 해 옵니다.
-type과 위에서 조회한 2개의 DB데이터를 request에 담아 결과페이지로 보냅니다.
-결과페이지에서는 3개의 데이터를 기반으로 사용자의 type, 전체 검사자 수, 전체 검사자 중 나와 같은 type 비율을 사용자에게 표시 해 줍니다.
3) 호스팅(배포)
-물리서버는 네이버 클라우드플랫폼 mini서버를 사용했습니다.
-서버 os는 리눅스 기반의 centOS를 사용했습니다.
-도메인은 .shop도메인을 정민욱 선생님이 구매해주셨습니다. 이를 통해 www.kbgagu.shop/mbt 주소로 검사 페이지 접속이 가능합니다.
-WAS는 tomcat을 사용했습니다.
4) 콘텐츠
- 질문지와 결과지의 모든 콘텐츠는 MBTI공식 사이트를 참고했습니다.
- 각 질문은 ei,sn,tf,jp 네개 타입별로 첫번째 선택지 선택시 변수값을 ++ , 두번째는 --합니다.
- 질문이 홀수개일 경우 반드시 +,-값으로 구분이 가능합니다.
- 두 가지를 최대한 명확히 구분하는 질문지를 하루일과라는 스토리 텔링에 맞게 3개씩 배치하였습니다.
- 결과페이지의 이미지는 tyle.io를 통해 정사각 카드뉴스 형으로 직접 제작했습니다. 해당 이미지 클릭시 학교 홈페이지로 연결됩니다.