사용자 이름 개인화 기능으로 UX 개선하기

💭 왜 이 기능을 추가했나

MBTI 테스트와 번아웃 테스트를 만들고 나서, 뭔가 허전한 느낌이 들었습니다. 검사를 진행하고 결과를 받는데, 마치 공장에서 찍어낸 것 같은 느낌? 모든 사용자에게 똑같은 경험을 제공하는 게 아쉬웠습니다.

그래서 생각한 게 **이름 개인화**였습니다. 사용자의 이름이나 닉네임을 입력받아서, 검사 과정과 결과 페이지에서 계속 호칭하는 거죠. 작은 변화지만 사용자 경험에 큰 차이를 만들 수 있을 것 같았습니다.

💡 개인화가 중요한 이유

• 사용자에게 특별한 경험 제공
• 감정적 연결 강화
• 결과에 대한 몰입도 증가
• 공유 시 바이럴 효과 상승

🎯 설계 아이디어

처음에는 어디에 이름 입력 창을 넣을지 고민했습니다. 몇 가지 옵션이 있었죠:

❌ 옵션 1: 검사 중간에

검사 흐름이 끊김. 사용자가 이탈할 수 있음

❌ 옵션 2: 결과 페이지에서

이미 검사가 끝난 후라 개인화 효과 반감

✅ 선택: 검사 시작 전

별도 페이지로 분리. 자연스러운 흐름. 첫인상부터 개인화

❌ 옵션 4: 선택사항으로

많은 사용자가 건너뛰기 가능성

결국 검사 시작 전에 별도 페이지를 만들기로 했습니다. 사용자가 "검사 시작하기" 버튼을 누르면, 먼저 이름 입력 페이지가 나오고, 입력 후 실제 검사 페이지로 이동하는 방식이죠.

💻 구현 과정

1단계: 이름 입력 페이지 만들기

각 테스트마다 `name-input.html` 파일을 만들었습니다. 깔끔한 UI에 input 박스 하나만 집중되도록 디자인했습니다.

<input 
    type="text" 
    id="userName" 
    placeholder="예: 김철수, 혜리, 민지 등"
    maxlength="20"
    class="w-full px-6 py-4 text-lg text-center"
>

💡 디자인 포인트

• 큰 텍스트 크기 (text-lg)로 가독성 확보
• 중앙 정렬로 시각적 집중
• 최대 20자 제한으로 공간 문제 방지
• 플레이스홀더에 예시를 넣어 이해도 향상

2단계: LocalStorage에 저장

입력받은 이름은 LocalStorage에 저장했습니다. 서버 없이도 페이지 간 데이터를 유지할 수 있거든요.

function startTest() {
    const userName = userNameInput.value.trim();
    
    // 유효성 검사
    if (!userName) {
        alert('이름을 입력해주세요!');
        return;
    }
    
    if (userName.length < 2) {
        alert('이름은 최소 2글자 이상 입력해주세요!');
        return;
    }
    
    // LocalStorage에 저장
    localStorage.setItem('mbti_userName', userName);
    
    // 테스트 페이지로 이동
    window.location.href = './index.html';
}

🔒 개인정보 처리

LocalStorage는 사용자의 브라우저에만 저장되므로 서버로 전송되지 않습니다. 개인정보 보호 측면에서도 안전합니다.

3단계: 모든 페이지에서 사용

이제 저장된 이름을 각 페이지에서 불러와 표시했습니다.

// 검사 페이지
const userName = localStorage.getItem('mbti_userName');
document.getElementById('user-name-display').textContent = userName;
// 출력: "홍길동님 반가워요!"

// 결과 페이지
const userName = localStorage.getItem('mbti_userName');
document.getElementById('userNameDisplay').textContent = userName;
// 출력: "홍길동님의 검사 결과"

4단계: 예외 처리

사용자가 이름 입력을 건너뛰거나, 직접 URL로 검사 페이지에 접근하는 경우를 대비했습니다.

// 검사 페이지 진입 시 체크
const userName = localStorage.getItem('mbti_userName');
if (!userName) {
    alert('잘못된 접근입니다. 처음부터 다시 시작해주세요.');
    window.location.href = './name-input.html';
}

📈 체감 효과

개인화 전 vs 후

Before (개인화 전)

"INTJ 유형입니다. 용의주도한 전략가 성향을 보입니다."

→ 딱딱하고 기계적인 느낌

After (개인화 후)

"홍길동님은 INTJ 유형입니다. 용의주도한 전략가 성향을 보입니다."

→ 친근하고 맞춤형 느낌

작은 차이지만 체감 효과는 생각보다 컸습니다. 마치 나를 위한 특별한 결과처럼 느껴지더군요. 특히 결과를 공유할 때 "홍길동님의 MBTI는..."이라고 표시되니까 더 특별해 보였습니다.

🤔 개선하고 싶은 점

현재 구현에서 아쉬운 부분도 있습니다:

📝 이름 수정 기능

검사 도중 이름을 잘못 입력했을 때 수정할 방법이 없습니다. 처음부터 다시 시작해야 하죠.

→ 헤더에 작은 수정 버튼을 추가할 예정입니다

🎨 더 다양한 호칭

현재는 "○○님" 형식만 사용하는데, 상황에 따라 다양하게 변화를 주면 좋을 것 같습니다.

→ "○○님이", "○○님은", "○○님께" 등 문맥에 맞게 변화

💾 이전 결과 기억

같은 사용자가 다시 방문했을 때 이전 이름을 기억해서 자동으로 채워주면 편할 것 같습니다.

→ 쿠키나 LocalStorage 활용

🎓 배운 점

작은 기능, 큰 차이

1️⃣ 사용자 입장에서 생각하기: 개발자 입장에서는 당연한 것들이 사용자에게는 특별할 수 있습니다
2️⃣ 구현은 단순하게: 복잡한 로직 없이도 LocalStorage만으로 충분했습니다
3️⃣ 일관성 유지: 모든 페이지에서 같은 호칭을 사용해야 자연스럽습니다
4️⃣ 예외 처리는 필수: 사용자는 예상치 못한 경로로 접근할 수 있습니다

💡 마치며

개인화 기능을 추가하면서 "사용자 경험"이란 게 뭔지 조금 더 이해하게 되었습니다. 거창한 기능이 아니어도, 사용자를 생각하는 작은 배려가 모여 좋은 서비스를 만드는 거더군요.

다음 단계로는 히스토리 기능을 추가해서, 같은 사용자가 여러 번 검사했을 때 이전 결과와 비교할 수 있게 만들고 싶습니다. 그러면 "홍길동님, 지난번보다 외향성이 10% 증가했네요!" 같은 피드백도 줄 수 있을 것 같아요.

🚀

다음 글 예고

HTML2Canvas로 검사 결과를 이미지로 만들어 공유하기