안녕하세요!
요즘 모임에서 빠지지 않는 주제가 바로 MBTI죠? 단순한 성격 유형 검사를 넘어 이제는 하나의 문화로 자리 잡은 느낌입니다. 개발을 공부하는 우리에게 이런 유행은 아주 좋은 실습 소재가 됩니다. 특히 자바스크립트 MBTI 테스트 제작은 사용자의 선택을 받고, 점수를 계산하고, 그 결과를 보여주는 과정이 포함되어 있어 웹 개발의 핵심인 ‘데이터 처리’와 ‘상태 관리’를 배우기에 최적이기 때문이죠.
오늘은 단순히 결과만 보여주고 끝나는 일회성 페이지가 아니라, 자바스크립트 MBTI 테스트를 직접 만들면서 웹 브라우저의 저장 공간인 LocalStorage를 활용해 사용자의 과거 기록까지 보관하는 똑똑한 테스트 페이지를 구현해 보겠습니다.
1. 데이터 설계: 질문과 유형의 연결고리
가장 먼저 해야 할 일은 질문 데이터를 구조화하는 것입니다. 자바스크립트 MBTI 테스트의 핵심은 사용자가 선택한 답변이 어떤 성향(E/I, S/N, T/F, J/P)에 가중치를 줄지 결정하는 것입니다.
보통 초보자분들이 if 문을 수십 개 써서 점수를 계산하려다 포기하시곤 하는데요, 우리는 객체(Object)를 활용해 훨씬 세련되게 관리해 볼 겁니다.
const questions = [
{
id: 1,
q: "주말에 집에서 쉬는 게 좋은가요, 친구를 만나는 게 좋은가요?",
options: [
{ text: "혼자만의 시간이 필요해요", type: "I", score: 1 },
{ text: "사람들을 만나 에너지를 얻어요", type: "E", score: 1 }
]
},
// 이런 식으로 12개~20개의 질문을 객체 배열로 구성합니다.
];이렇게 데이터를 구성하면 나중에 질문이 추가되거나 수정되어도 자바스크립트 로직을 건드릴 필요 없이 데이터만 바꾸면 되기 때문에 유지보수가 매우 편리합니다.
Note: 이처럼 객체를 활용해 조건을 관리하는 방식은 제가 이전에 작성한 [객체 매핑 설계로 코드 줄이기] 포스팅에서도 다룬 적이 있는데요, 복잡한 if문을 줄이는 데 매우 효과적인 기술이니 꼭 참고해 보세요.
2. 핵심 로직: 점수 계산과 유형 판별
사용자가 버튼을 클릭할 때마다 현재 질문의 type과 score를 추적해야 합니다. 저는 이번 프로젝트에서 전역 객체인 mbtiScores를 만들어 점수를 관리했습니다.
구현 중 겪은 시행착오:
처음에는 단순히 변수 네 개(E, I, S, N…)를 따로 선언했더니 코드가 너무 길어지더라고요. 그래서 { E: 0, I: 0, S: 0, N: 0 … } 형태의 하나의 객체로 합쳤습니다. 질문이 끝날 때마다 이 객체 안의 값을 업데이트하고, 마지막에 각 쌍(E vs I) 중 더 높은 점수를 가진 알파벳을 합쳐 4글자의 MBTI를 생성하는 로직을 짰습니다.
이 과정에서 Object.entries()와 reduce() 같은 고차 함수를 활용해 보면 자바스크립트 실력이 한 단계 더 성장하는 것을 느끼실 수 있을 거예요. 특히 reduce 함수는 데이터를 응축하고 가공하는 데 탁월합니다. 제가 만든 [자산 관리 자바스크립트 가계부]에서도 이 메서드가 어떻게 복잡한 금액 계산을 처리하는지 확인하실 수 있습니다.
3. LocalStorage API: “내 지난 결과 기억하기”
이번 포스팅의 가장 큰 차별점은 바로 LocalStorage(로컬 스토리지) 활용입니다. 보통 웹페이지를 새로고침하면 모든 데이터가 날아가지만, 이 API를 사용하면 브라우저에 데이터를 반영구적으로 저장할 수 있습니다.
자바스크립트 MBTI 테스트에 이 기능을 넣으면 다음과 같은 UX(사용자 경험)를 제공할 수 있습니다:
- “지난번 테스트에서는 INFP가 나왔는데, 이번엔 ENFP가 나왔네요!”
- “최근 3번의 테스트 기록 보기”
데이터를 저장할 때는 주의할 점이 있습니다. 로컬 스토리지는 문자열(String)만 저장할 수 있기 때문에, 우리가 만든 점수 객체나 결과 배열을 저장할 때는 반드시 JSON.stringify()를 거쳐야 합니다. 반대로 가져올 때는 JSON.parse()를 사용하죠. 이 ‘직렬화’ 과정을 이해하는 것이 이번 실습의 핵심 중 하나입니다. LocalStorage API는 이번 테스트뿐만 아니라, 가장 기초적인 프로젝트인 [자바스크립트 할 일 목록(Todo List) 만들기]에서도 핵심적으로 사용됩니다. 데이터가 휘발되지 않는 웹앱을 만들고 싶다면 반드시 익혀두어야 할 개념이죠.
4. MBTI 테스트 사용해보기
아래에 테스트 시작하기 버튼을 누르고, 테스트를 진행해보세요!
나의 자바스크립트 성향 테스트
LocalStorage를 활용한 기록 저장형 테스트
특히 질문이 바뀔 때 눈이 피로하지 않도록 부드러운 전환 효과(Transition)를 주는 데 신경을 썼습니다. 자바스크립트의 classList를 활용해 특정 시점에 애니메이션 클래스를 넣고 빼는 방식을 선택했는데, 덕분에 훨씬 더 생동감 있는 자바스크립트 MBTI 테스트 페이지가 완성되었습니다. 사용자는 이런 작은 디테일에서 ‘제대로 만들어진 서비스’라는 느낌을 받게 되니까요.
5. 성능과 가독성을 위한 리팩토링
16가지나 되는 성격 유형을 결과로 보여주려면 코드가 엄청나게 길어질 것 같아 처음엔 걱정이 앞섰습니다. 하지만 데이터를 다루는 효율적인 방법을 고민하다 보니, 복잡한 조건문 대신 결과 데이터를 하나의 지도(Map)처럼 구성하는 방식이 떠오르더라고요.
예를 들어 results[“ENFP”]처럼 사용자의 결과 키값을 입력하면, 그에 맞는 설명과 이미지가 즉시 연결되도록 구조를 짰습니다. 이렇게 로직을 단순화하니 코드 가독성이 몰라보게 좋아졌을 뿐만 아니라, 브라우저가 데이터를 찾아가는 과정도 훨씬 간결해졌습니다. 깔끔한 코드는 결국 사용자가 느끼는 페이지 반응 속도와도 직결되는 문제라, 이번 자바스크립트 MBTI 테스트를 구현하며 가장 만족스러웠던 설계 포인트이기도 합니다.
6. 이 프로젝트를 더 성장시킨다면?
우리가 만든 자바스크립트 MBTI 테스트는 현재 훌륭한 기초를 갖추고 있지만, 실제 서비스 단계로 나아가기 위해 고민해 볼 만한 기술적 지점들이 몇 가지 더 있습니다.
가장 먼저 떠오르는 것은 '데이터의 확장성'입니다. 지금은 로컬 스토리지에 데이터를 저장해 기기 귀속적인 한계가 있지만, 이를 외부 API나 Firebase 같은 서버리스 환경과 연동한다면 어떨까요? 사용자가 어떤 환경에서 접속하든 자신의 기록을 불러오고, 수만 명의 결과 데이터를 취합해 "가장 많이 나온 MBTI 순위" 같은 통계 페이지를 실시간으로 보여주는 시스템을 구상해 볼 수 있습니다. 이 과정에서 fetch API를 이용한 비동기 통신과 JSON 데이터 가공 실력을 비약적으로 높일 수 있을 것입니다.
또한, '사용자 경험(UX)의 완성도' 측면에서 공유 기능을 빼놓을 수 없습니다. 테스트 결과를 이미지 파일로 렌더링하거나 카카오톡 SDK를 활용해 친구에게 바로 전송하는 기능을 덧붙인다면, 우리가 만든 로직은 단순한 코드를 넘어 '바이럴'이 가능한 하나의 완성된 웹앱으로 거듭나게 됩니다.
마지막으로 시각적인 재미를 위해 Chart.js 같은 라이브러리를 도입해 내 성향을 방사형 그래프로 보여주는 시도를 해보는 것도 좋습니다. 단순히 텍스트로 결과를 보여주는 것보다 훨씬 더 전문적인 느낌을 주죠. 이런 고민들은 결국 "어떻게 하면 사용자가 내 서비스를 더 흥미롭게 즐길 수 있을까?"라는 서비스 마인드로 이어지며, 우리를 더 나은 개발자로 만들어주는 원동력이 될 것입니다.
오늘은 자바스크립트 MBTI 테스트 제작을 통해 데이터 구조 설계부터 영구 저장소 활용까지 폭넓게 살펴보았습니다. 단순히 재미로 만드는 간단한 프로젝트 같지만, 그 안에는 현대 웹 개발에서 가장 중요하게 다루는 ‘데이터의 흐름’이 고스란히 담겨 있습니다.
처음 코드를 짤 때는 “과연 로컬 스토리지가 필요할까?”라는 의문이 들 수도 있습니다. 하지만 내가 만든 서비스에 사용자의 흔적이 남고, 그 기록이 다시 사용자에게 가치 있는 정보로 돌아가는 과정을 구현해 보니 데이터 관리의 중요성을 다시금 체감하게 되네요. 화려한 프레임워크도 좋지만, 이렇게 순수 자바스크립트만으로 논리적인 흐름을 설계하고 브라우저 API를 적재적소에 배치해 보는 경험이야말로 우리 같은 개발자들에게 가장 든든한 기초 체력이 되지 않을까 싶습니다.
궁금한 점이나 구현 과정에서 겪은 또 다른 시행착오가 있다면 언제든 댓글로 들려주세요. 함께 나누는 고민은 늘 성장의 밑거름이 됩니다.