MonoLog - 나를 듣는 시간

프로젝트 배경

MonoLog는 '나를 듣는 시간'이라는 컨셉으로, 사용자가 24개의 심리 분석 질문에 답하면서 자신의 내면 컬러를 발견하는 인터랙티브 웹 앱입니다.

바쁜 일상 속에서 잠시 멈추고, 가장 조용한 곳에서 자기 자신을 마주하는 경험을 디자인했습니다. 심리 테스트의 형식을 빌리되, 감성적이고 몰입감 있는 브랜드 경험으로 재해석하는 것이 핵심 과제였습니다.

UX 설계 철학 — 4단계 점진적 몰입

사용자 여정을 4단계로 설계하여, 첫 진입부터 결과 확인까지 자연스러운 몰입 흐름을 만들었습니다.

각 단계는 이전 단계의 감정적 상태를 이어받아 점진적으로 깊어지도록 구성했으며, 불필요한 선택지나 이탈 경로를 최소화하여 하나의 흐름에 집중할 수 있게 했습니다.

1단계: 랜딩 — 세계관 진입

올블랙 배경 위에 '나를 듣는 시간'이라는 타이핑 애니메이션으로 시작합니다. 최소한의 정보만 노출하여 호기심을 자극하고, '기록 시작하기' 단일 CTA로 진입 장벽을 낮췄습니다.

하단의 '01. INTROSPECTION / 02. ANALYSIS' 텍스트는 서비스의 전문성을 암시하며, 단순한 심리 테스트가 아닌 체계적 분석이라는 기대감을 형성합니다.

2단계: 퀴즈 — 자기 탐구

24개 질문을 '리듬·에너지', '앙상블·협업' 등 음악적 메타포로 카테고리화하여 심리 테스트의 무거움을 줄였습니다.

프로그레스 바(1/24)로 진행감을 제공하고, 한 화면에 하나의 질문만 표시하여 선택에 집중할 수 있게 했습니다. 선택 시 즉각적인 시각 피드백으로 응답의 리듬감을 유지합니다.

3단계: 로딩 — 기대감 연출

'내면의 주파수를 동기화하는 중...'이라는 한국어 메시지와 'Mapping your color spectrum...'이라는 영문 메시지를 교차 표시합니다.

단순 로딩이 아닌, 실제로 분석이 진행되고 있다는 심리적 신뢰감을 구축하는 장치입니다. 대기 시간 자체가 결과에 대한 기대감을 높이는 연출로 작용합니다.

4단계: 결과 — 정체성 리포트

내면 컬러(예: Electric Cyan #4dd0e1)를 히어로로 공개한 뒤, 스펙트럼 차트 → 성격 특성 → 강점/성장 포인트 → 소통 스타일 → 관계 궁합 → 맞춤 추천까지 풍부한 자기 이해 콘텐츠를 제공합니다.

결과 공유와 이미지 저장 기능으로 바이럴을 유도하며, 각 섹션은 독립적으로도 공유 가능한 형태로 설계되었습니다.

디자인 시스템

다크 테마의 의도

내면 탐구라는 주제에 맞게 올블랙 다크 테마를 채택했습니다. 어둠 속에서 자기 자신을 발견하는 메타포를 시각적으로 구현했으며, 노이즈 텍스처 오버레이로 깊이감을 더했습니다.

배경의 어두움은 콘텐츠 요소들을 더욱 부각시키고, 사용자의 시선을 중앙의 질문과 선택지에 자연스럽게 집중시키는 역할을 합니다.

시안 엑센트의 상징성

Electric Cyan(#4dd0e1)을 메인 엑센트로 사용하여, 어둠 속에서 빛나는 내면의 에너지를 시각화했습니다.

결과 페이지에서 사용자별 고유 컬러가 드러나면서 개인화된 경험을 제공합니다. 시안 컬러는 CTA 버튼, 프로그레스 바, 강조 텍스트 등에 일관되게 적용되어 브랜드 정체성을 형성합니다.

핵심 성과

MonoLog는 감성적 브랜드 경험과 기술적 완성도를 동시에 달성한 프로젝트입니다.

• 4단계 몰입 설계로 퀴즈 진입 대비 완료율을 극대화하고, 이탈 지점을 최소화했습니다.
• 한국어/영어 이중 표기를 통해 국내외 사용자 모두에게 접근 가능한 경험을 제공합니다.
• 결과 이미지 저장과 SNS 공유 기능을 내장하여, 사용자가 자발적으로 콘텐츠를 확산하는 바이럴 성장 엔진을 구현했습니다.
• Vanilla JS 기반의 경량 구현으로 프레임워크 없이도 빠른 로딩 속도와 부드러운 인터랙션을 확보했습니다.