내 이상형을 돌려도! 제작기 - 80문항 이상형 룰렛 다시 설계하기
내 이상형을 돌려도! 제작기 - 80문항 이상형 룰렛 다시 설계하기
이번에는 내 이상형을 돌려도! 라는 이상형 테스트 웹앱을 크게 손봤다.
앱 자체는 질문에 답하면 사용자의 이상형 성향을 추론하고, 그 결과에 맞는 사진 타입과 설명을 보여주는 구조다.
처음 버전도 동작은 했지만, 여러 번 돌려보니 아쉬운 점이 분명했다.
1
2
3
4
질문은 많지만 결과 설명이 짧다.
외모 취향이 사진 결과에 충분히 반영되지 않는다.
다정함이 항상 100%처럼 보여서 결과가 단조롭다.
비슷한 질문이 반복되는 느낌이 있다.
그래서 이번 목표는 단순히 질문 몇 개를 바꾸는 것이 아니라, 질문 구조, 점수 계산, 사진 타입 선택, 결과 설명을 한 번에 다시 설계하는 것이었다.
1. 문제 정의
처음 앱은 질문 수가 많았다. 하지만 질문이 많다고 결과가 무조건 좋아지는 것은 아니었다.
오히려 사용자가 100개 가까이 답했는데 결과 설명이 짧으면 허무하게 느껴진다.
그래서 이번 수정의 핵심 요구사항을 이렇게 잡았다.
| 항목 | 목표 |
|---|---|
| 전체 질문 수 | 100개 계열에서 80개로 축소 |
| 외모 문항 비율 | 전체의 50% |
| 선택 방식 | 대부분 2개 중 택 1 |
| 예외 선택지 | 얼굴상처럼 필요한 경우 4지선다 허용 |
| 사진 타입 | 외모 문항 영향 50%, 관계 성향 영향 50% |
| 결과 설명 | 더 길고 사용자별로 달라지게 개선 |
| 점수 표시 | 최고점 대비가 아니라 전체 점수 중 비율 |
| 검증 | 중복 질문, 단순한 질문, 허무한 결과 방지 |
특히 가장 신경 쓴 부분은 다정함 100% 문제였다.
이전 방식에서는 성향 막대가 “전체 중 몇 퍼센트인가”가 아니라 “가장 높은 점수를 100으로 두고 상대적으로 표시”되는 구조였다. 그래서 다정함이 1위이면 실제 비중이 30% 정도여도 100처럼 보일 수 있었다.
사용자 입장에서는 이렇게 느껴진다.
1
나는 이것저것 골랐는데 왜 맨날 다정함 100%지?
이건 결과 신뢰도를 떨어뜨리는 문제였다.
2. 질문을 80개로 줄인 이유
처음에는 질문을 더 많이 넣는 쪽이 정밀하다고 생각하기 쉽다.
하지만 이상형 테스트에서는 질문 수보다 중요한 것이 있다.
1
2
3
각 질문이 서로 다른 축을 묻는가?
선택지가 너무 뻔하지 않은가?
답변 후 결과가 충분히 보상감을 주는가?
그래서 질문 수를 80개로 줄였다.
구성은 정확히 반반으로 나눴다.
| 구분 | 문항 수 |
|---|---|
| 외모 취향 | 40개 |
| 첫만남/대화/데이트/일상/연락/갈등/가치관/미래 | 40개 |
| 합계 | 80개 |
외모 취향을 40개로 늘린 이유는 분명하다.
이 앱의 결과에는 사진이 나온다. 그런데 사진이 나온다면 사용자가 고른 얼굴상, 분위기, 스타일, 실루엣, 표정 같은 선택이 결과 사진에 꽤 강하게 반영되어야 한다.
그래서 외모 문항을 앞부분에 조금 넣는 정도가 아니라, 전체 구조에서 50%를 차지하도록 바꿨다.
3. 외모 질문은 더 구체적으로 만들었다
외모 문항은 너무 노골적이면 재미가 떨어지고, 너무 추상적이면 결과 사진과 연결되기 어렵다.
그래서 아래 같은 축으로 나누었다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
얼굴상
눈매
눈빛
웃는 얼굴
얼굴선과 윤곽
헤어스타일
옷차림
색감
실루엣
자세와 제스처
프로필 사진 분위기
정면/옆모습
그루밍
향과 청결감
계절감
카메라 시선
예를 들면 얼굴상 질문은 4지선다로 만들었다.
1
2
3
4
여우상처럼 눈매가 길고 영리한 분위기
늑대상처럼 선이 또렷하고 강단 있는 분위기
공룡상처럼 큼직하고 장난기 있는 분위기
강아지상처럼 웃는 인상이 편하고 선한 분위기
대부분 문항은 2지선다로 만들었다.
왜냐하면 80문항 전체를 답해야 하는데 매번 4개씩 고민하게 만들면 피로도가 너무 높아지기 때문이다.
대신 얼굴상이나 옷차림처럼 선택지가 넓어야 재미있는 문항만 4지선다로 뒀다.
최종 구조는 이렇다.
| 선택지 구조 | 문항 수 |
|---|---|
| 2지선다 | 77개 |
| 4지선다 | 3개 |
즉, 사용자는 대부분 빠르게 고르지만, 중요한 취향 지점에서는 조금 더 넓게 선택한다.
4. 사진 타입 선택 로직을 50:50으로 바꿨다
이상형 결과 사진은 단순히 “전체 점수 1위 성향”만 보고 고르면 안 된다고 생각했다.
예를 들어 사용자가 외모 문항에서는 세련된 고양이상/여우상 스타일을 골랐는데, 관계 문항에서 다정함을 많이 골랐다는 이유만으로 사진이 전부 포근한 강아지상처럼 나오면 아쉽다.
그래서 사진 타입은 별도로 계산하게 했다.
1
const portraitAppearanceWeight = 0.5;
개념은 간단하다.
1
2
3
사진 타입 점수
= 외모 문항에서 나온 성향 비율 50%
+ 비외모 문항에서 나온 관계 성향 비율 50%
이렇게 하면 결과 사진이 외모 취향을 충분히 따라가면서도, 연애에서 중요하게 보는 태도까지 같이 반영된다.
예를 들어 이런 식이다.
| 사용자가 고른 것 | 결과 반영 |
|---|---|
| 날렵한 눈매, 세련된 옷차림 | 사진의 감각/자기색 축에 반영 |
| 차분한 대화, 책임감 있는 태도 | 안정감/지성 축에 반영 |
| 자연스러운 웃음, 따뜻한 표현 | 다정함/로맨스 축에 반영 |
사진은 결국 “보이는 결과”이기 때문에, 사용자가 고른 외모 문항의 체감 반영률이 중요했다.
5. 점수 표시는 전체 비율로 바꿨다
이번 수정에서 가장 중요한 변경 중 하나다.
기존에는 가장 높은 성향을 100으로 두고 나머지를 상대값으로 보여주는 방식이었다.
이 방식은 시각적으로는 보기 좋지만, 해석이 왜곡될 수 있다.
예를 들어 실제 점수가 이렇다고 해보자.
1
2
3
4
다정함 30
로맨스 25
지성 20
기타 25
기존 방식이면 다정함이 100처럼 보일 수 있다.
하지만 사용자가 기대하는 것은 이런 설명이다.
1
다정함은 전체 성향 중 30% 정도입니다.
그래서 getNormalizedTraits를 전체 점수 합 기준으로 바꿨다.
1
2
3
4
5
6
7
8
9
10
function getNormalizedTraits(scores) {
const total = getScoreTotal(scores);
return Object.entries(scores)
.map(([key, value]) => ({
key,
value,
percent: total > 0 ? Math.round((value / total) * 100) : 0,
}))
.sort((a, b) => b.value - a.value);
}
이제 결과 화면의 퍼센트는 “최고점 대비”가 아니라 전체 선택 점수 중 해당 성향이 차지하는 비중이다.
그래서 특정 성향이 1위여도 무조건 100%가 되지 않는다.
6. 결과 설명을 길고 다르게 만들었다
이전 결과 설명은 짧았다.
질문을 많이 답했는데 결과가 한두 문장으로 끝나면 사용자는 이렇게 느낄 수 있다.
1
내가 방금 80개를 답했는데 이게 끝이야?
그래서 결과 설명을 4문단으로 늘렸다.
설명에는 다음 요소가 들어간다.
1
2
3
4
5
6
7
1. 전체 점수 중 상위 3개 성향과 비율
2. 1위/2위/3위 성향의 조합 해석
3. 외모 문항에서 나온 상위 성향
4. 관계 문항에서 나온 상위 성향
5. 사진 선택에 사용된 성향 축
6. 낮게 나온 성향의 의미
7. 전체적인 이상형 해석
예를 들어 설명 문장 안에는 이런 정보가 들어간다.
1
2
3
전체 답변 점수 기준으로는 로맨스 18%, 진정성 16%, 지성 14%가 가장 높게 나왔어요.
이 비율은 최고점을 100으로 둔 상대 점수가 아니라,
전체 선택 점수 중 각 성향이 차지한 몫이에요.
또 사진 로직도 결과 설명 안에서 알려준다.
1
사진 타입은 외모 취향 50%와 관계 성향 50%를 섞어 고르도록 설계했기 때문에...
이렇게 하면 사용자는 결과를 더 납득할 수 있다.
7. 질문 뱅크를 검증했다
질문을 많이 바꾸면 가장 무서운 것은 중복이다.
겉으로는 다르게 보여도 사실상 같은 질문이면 사용자는 금방 피로해진다.
그래서 테스트를 추가했다.
검증한 내용은 다음과 같다.
| 검증 항목 | 결과 |
|---|---|
| 전체 질문 수 | 80개 |
| 외모 질문 수 | 40개 |
| 비외모 질문 수 | 40개 |
| 선택지 총 개수 | 166개 |
| 질문 중복 | 0개 |
| 선택지 라벨 중복 | 0개 |
| 20문항 모드 외모 비율 | 10/20 |
| 50문항 모드 외모 비율 | 25/50 |
| 80문항 모드 외모 비율 | 40/80 |
| 사진 외모 가중치 | 0.5 |
그리고 1000회 랜덤 샘플도 돌려서 확인했다.
확인한 것은 이것이다.
1
2
3
4
다정함이 항상 1위인가? -> 아니었다.
다정함이 항상 100%인가? -> 아니었다.
결과 설명에 전체 비율 문구가 항상 들어가는가? -> 들어간다.
결과 설명에 외모 50% 사진 가중치 설명이 들어가는가? -> 들어간다.
이 검증 덕분에 “이번엔 진짜로 다정함 100% 문제가 해결됐는지”를 코드 수준에서 확인할 수 있었다.
8. 테스트도 새 요구사항에 맞게 바꿨다
기존 테스트는 예전 구조를 검증하고 있었다.
예를 들면 “질문이 110개인지”, “모든 문항이 3지선다인지” 같은 테스트였다.
하지만 지금 요구사항은 완전히 다르다.
그래서 테스트도 새 구조에 맞게 바꿨다.
1
2
3
4
5
6
7
80문항인지
외모 문항이 40개인지
대부분 2지선다인지
얼굴상 문항이 구체적인지
사진 점수가 외모/비외모 50:50인지
결과 퍼센트가 전체 점수 기준인지
80문항 모드가 UI에 노출되는지
최종 검증은 다음처럼 통과했다.
1
2
npm run check
npm test
결과는 16개 테스트 전부 통과였다.
9. 만들면서 느낀 점
이번 작업은 “질문을 많이 쓰는 일”보다 “질문이 결과와 연결되게 만드는 일”이 더 중요했다.
이상형 테스트는 결국 콘텐츠 앱이다.
콘텐츠 앱에서 중요한 것은 단순히 기능이 돌아가는 것이 아니다.
1
2
3
사용자가 답하는 동안 지루하지 않아야 하고,
답변이 결과에 반영된다는 느낌이 있어야 하고,
결과가 충분히 자세해야 한다.
특히 결과 설명은 보상이다.
사용자가 80개 문항에 답했다면, 결과도 그만큼 정성스럽게 돌아와야 한다.
그래서 이번에는 결과 설명을 단순 요약이 아니라, 사용자의 선택을 다시 해석해주는 방식으로 바꿨다.
이번 수정 요약
이번 리디자인의 핵심은 다음과 같다.
- 질문 수를 80개로 줄였다.
- 외모 취향 문항을 40개로 늘려 전체의 50%를 차지하게 했다.
- 관계/가치관 문항도 40개로 재구성했다.
- 대부분 2지선다로 만들어 답변 피로도를 줄였다.
- 얼굴상 등 필요한 문항은 4지선다로 뒀다.
- 사진 타입 선택은 외모 50%, 관계 성향 50%로 계산한다.
- 결과 퍼센트는 최고점 대비가 아니라 전체 점수 중 비율로 바꿨다.
- 결과 설명을 더 길고 사용자별로 다르게 나오게 했다.
- 중복 질문과 선택지 중복을 테스트로 확인했다.
다정함 100%문제를 해결했다.
이번 작업을 하고 나니, 앱이 단순한 랜덤 이상형 생성기보다는 조금 더 “내 취향을 반영해주는 테스트”에 가까워진 느낌이 들었다.
다음에 더 손본다면 결과 사진 자체의 스타일 종류를 더 세분화하거나, 결과 화면에 “외모 취향 TOP / 관계 성향 TOP”을 별도 카드로 보여주는 것도 좋을 것 같다.