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

프로젝트 소개

GitHub URL

https://github.com/chdev-kr/mbti-data-explorer-hiding-inside-me
배포 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 유형을 추출하고 해당 결과에 맞는 데이터 관련 직업을 추천하는 구조로 제작했습니다.

결과물

최종 결과 예시

https://fantastic-hummingbird-e9c0f2.netlify.app/results.html?mbti=infp
결과 화면 캡처

%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