{chDEV}
JavaScriptHTMLCSS

[JS] MBTI Data Explorer: 내 안에 숨어있는 직업캐 찾기

Chae-hyeon Kim
2023년 1월 26일
목차

프로젝트 소개

  1. GitHub URL

    https://github.com/chdev-kr/mbti-data-explorer-hiding-inside-me

  2. 배포 URL

    https://fantastic-hummingbird-e9c0f2.netlify.app

%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.57.04.gif

프로젝트명

내 안에 숨어있는 직업캐 찾기

  • 반응형 디자인: 모바일 친화적 UI 구현
  • SEO 최적화: Open Graph, Twitter Cards 메타태그 적용
  • 소셜 공유 기능: 카카오톡, 페이스북, 트위터 공유 최적화
  • 파비콘: 커스텀 아이콘 제작 및 적용
  • 다중 페이지 구성: index.html, questions.html, results.html

사용 기술

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • 배포: Netlify
  • SEO: Open Graph, Twitter Cards

주요 특징

  • MBTI 기반 직업 추천 테스트
  • 반응형 디자인
  • 소셜 미디어 공유 최적화
  • 다중 페이지 구조
  • 경량 스택으로 빠른 로딩 및 유지보수 용이

개발 배경

교육 홍보용 이벤트 페이지가 필요하여 당시 유행하던 MBTI 테스트 형식을 활용하였습니다.

사용자가 10가지 문항에 답하면, JavaScript로 MBTI 유형을 추출하고 해당 결과에 맞는 데이터 관련 직업을 추천하는 구조로 제작했습니다.

결과물

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.48.31.png

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.48.34.png

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.48.37.png

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.48.41.png

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.48.42.png

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.48.45.png

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.48.48.png

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.48.50.png

%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2025-09-20_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_6.49.06.png