🧡평범한 홈페이지를 인지과학 기반 재설계로 도파민 터지는 매력 홈피가 되는 before & after🧡

소개

🟧 소개

제가 만든 바이탈지수 측정을 통한 아로마 매칭 운픽 홈페이지를 기존 “정보 나열형 구조”가 아니라
뇌과학·인지심리 기반의 행동 유도형 구조로 재설계하고 싶어서 시도했습니다.

특히 사용자가 홈페이지에 들어왔을 때
왜 내 바이탈을 측정하는거지? “내 운의 상태는 어떤데?”, “왜 분석해야 하지?”라는 내적 의구심을
UI/UX 자체가 만들어야 한다는 깨달음이 들어 모각에서 스터디장님이 알려주신 인지심리학 50개 요소를GPT와 함께 전체 구조를 다시 잡아보기로 했습니다.

진행 방법

🟧 진행 방법

1) 사용한 도구

• GPT-5.1

• 기존 운픽 홈페이지(PDF)로 업로드

• 뇌과학·인지심리학 50가지 원리 목록

• 프로덕트 UX 리서치 문헌들

2) 활용 방식

먼저 기존 운픽 메인 페이지를 GPT에 보여주고,
“사용자 행동을 일으키는 인지적 요소가 무엇이 부족한지” 진단을 받았습니다.

그 다음,
50개의 뇌과학/인지심리 원리(기대감 엔진, 호기심 갭, 자이가르닉, 선택의 역설 등)를
운픽 브랜드 세계관(운·바이탈·아로마)과 연결시켜
완전히 새로운 홈페이지 구조를 설계해달라고 요청했습니다.

3) 사용한 핵심 프롬프트

(중요한 도구라 그대로 남깁니다)

운픽(WoonPick) 홈페이지를 뇌과학·인지심리 기반으로 완전히 재구성해주세요.  
기대감 엔진, 보상 예측 오류, 목표구배 효과, 선택의 역설, 호기심 갭, 자이가르닉 효과 등  
50개 심리 원리를 적용해 CTA 중심 퍼널 구조로 만드세요.  
Hero → 30초 바이탈 진단 → 결과 미리보기(부분공개) → 아로마 추천 → 후기 → 구독  
이 흐름대로 UX를 재설계해주세요.

4) 결과 캡처

(🔥 1) 배운 점

• 홈페이지는 예쁜 것이 아니라 ‘뇌가 반응하는 구조’여야 한다.

• 사용자가 클릭하는 이유는 디자인이 아니라 인지적 긴장감이었다.

• “운이 깨어나는 경험”은 텍스트가 아니라 인터랙션 자체가 만들어야 한다.

• 브랜드 페이지도 결국 “신경과학적인 사용자 행동 디자인”이라는 것을 다시 확신했다.

🔥 2) 시행착오

• 처음에는 정보를 많이 넣는 것이 친절하다고 생각했는데,
  그것이 오히려 인지 부하와 이탈을 높인다는 사실을 깨달았다.

• MBTI와 아로마 내용을 메인에 길게 나열한 것이
  브랜드의 핵심인 “바이탈 진단”을 묻어버렸다는 점도 반성.

🔥 3) 앞으로의 계획

• GPT가 설계해준 UX 구조대로 Figma Hi-Fi 디자인을 만들 계획.

• 이후 Readdy로 실제 페이지 구축 → 유저 행동 데이터 측정 → A/B 테스트 진행.

• 운픽 홈페이지 자체가 “인지심리학 기반의 웰니스 브랜드”라는 정체성을
  UI/UX에서도 완성시키게 될 것.

결과와 배운 점

✅ Before vs After — 핵심 차별점 5가지

1) ⛔ Before: 정보 나열형 구조

vs

⭕ After: 행동을 유도하는 ‘도파민 흐름 기반 구조’

Before

• MBTI, 웨비나, 샘플, 제품소개가 제각각 노출

• 사용자가 어디서 무엇을 해야 하는지 모름

• 스크롤하면 “카탈로그를 보는 느낌”

After

• Hero → 바이탈 진단 → 결과 미리보기 → 아로마 추천 → 후기 → 구독
  하나의 심리 흐름(Flow)이 정확하게 설계됨

• “지금 이 버튼을 눌러야 한다”가 명확해짐

➡ 인지 원리: 기대감 엔진 + 목표구배 효과 + 선택 최소화

2) ⛔ Before: 핵심 CTA(바이탈 진단)가 아래쪽에 묻힘

vs

⭕ After: CTA가 가장 먼저, 가장 크게 노출

Before

• “나의 바이탈 지수 체크하기”가 페이지 중단 이후에 등장

• 사용자는 그 전에 이탈할 가능성 매우 높음

After

• 헤더에서 바로 “내 바이탈 지수 무료 분석하기”

• 버튼 디자인도 금색 Glow로 강화

• 사용자가 3초 안에 클릭하도록 설계됨

➡ 인지 원리: 보상 예측 오류 + 프라이밍 + 도파민 자극

3) ⛔ Before: 결과를 바로 보여줌 → 긴장감 없음

vs

⭕ After: 결과를 ‘부분 공개’ → 심리적 갈증 극대화

Before

• 그냥 “바이탈 지수 받기” 형태

• 사용자가 기다려야 할 이유 없음

• 기대감 부족 → 전환률 떨어짐

After

• “오늘 당신의 바이탈은 Awaken 단계입니다”

• 아래는 Blur 처리 → 전체 리포트 보려면 클릭해야 함

• 사회적 비교도 추가됨 (“비슷한 바이탈 18%”)

➡ 인지 원리: 호기심 갭 + 자이가르닉 효과 + 손실 회피

4) ⛔ Before: MBTI 아로마가 너무 길어서 인지 부하 증가

vs

⭕ After: 선택의 역설 제거 → 추천 3개만 제시

Before

• MBTI 16개가 모두 노출

• 향 설명 길고 스크롤 피로도 높음

• 사용자는 오히려 아무것도 선택 안 하게 됨

After

• 오늘의 바이탈 기반 아로마 1~3개 추천만 노출

• “선택해야 할 것이 적어서” 클릭률 증가

• 전체 MBTI 아로마는 페이지 아래로 내림

➡ 인지 원리: 선택의 역설 / 인지 부하 최소화 / 폰 레스토프 강조

5) ⛔ Before: 후기 → 구독 흐름이 약함

vs

⭕ After: 후기(감정 전염) + 구독(프레이밍) 연결이 명확

Before

• 후기가 중간에 있고

• 구독 패키지는 그냥 “상품 소개”처럼 보임

After

• “97%가 4주 안에 변화를 느꼈습니다” (정량+정성)

• 이후 가장 인기 있는 Standard 플랜만 Gold 강조

• ‘Most Popular’ 태그로 행동 유도

➡ 인지 원리: 사회적 증거 + 감정 전염 + 프레이밍 효과

✨ 결론: Before는 “카탈로그”, After는 “심리적 여정”

ALT

인지심리학을 적용한 메인페이지 구성_after

ALT

홈페이지에 있었으면 하는 구성으로 기능정의서 만들어달라고 하고 제작한 before

도움 받은 글 (옵션)

• GPT가 재구성해준 “운픽 홈페이지 재설계용 마스터 프롬프트”

• 뇌과학 UI/UX 원리 50개 정리

• 기존 운픽 랜딩페이지 PDF 분석 리포트