학생작품전

2020년 학생작품전

로케이션
» Home > 학생작품전 > 2020년 학생작품전
사용자 등록이미지사용자 등록이미지

송암전'20 상세보기

송암전'20 상세보기
응용SW개발자 과정/강민승/나의 하루로 알아보는 MBTI유형(web App)
작성자 강민승 조회수 308
등록일 2020.12.21 추천수

0

파일 mbt.PNG


사용자 등록이미지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를 통해 정사각 카드뉴스 형으로 직접 제작했습니다. 해당 이미지 클릭시 학교 홈페이지로 연결됩니다.

  • 페이스북으로 글 보내기
  • 트위터로 글 보내기
  • 목록
  • 인쇄
  • 삭제

송암전'20 목록

비밀번호를 입력하세요.
비밀번호
확인
취소
비밀번호를 입력하세요.
비밀번호
확인
취소
게시판을 선택하세요.
게시판선택
확인
취소
신고사유를 선택하세요.
확인
취소
    • 퀵배너
    • 카톡
    • step_바로가기
    • 입학절차
    • 수강신청
    • 수요조사