● 디자인 입히기 · Verified Stage 디자인 시스템 적용

MNNBOX 화면 목업 갤러리

블루프린트의 와이어프레임을 실제 디자인으로 렌더한 8개 핵심 화면입니다. 경쟁사 6곳 티어다운에서 얻은 전환 장치(유동성 통계·카드 스캔 위계·마스킹 프리미엄·리빌 게이팅)를 실제 화면에 적용했습니다. 각 화면은 살아있는 HTML — 새 창에서 직접 조작해볼 수 있습니다.

핵심 화면 8개데스크톱 + 모바일 반응형네이비 #0A2472 + 앰버 #FFBA08정보제공 포지셔닝(매칭 카피 배제)
01

홈 / 랜딩 (양면 진입 + 유동성 증명)

전환 역할퍼널 최상단. 정직한 유동성 지표(과장 0)로 신뢰 첫인상 확보 → 역할 분기 카드로 배우는 '3만원 평생', 디렉터는 '무료+인증'의 서로 다른 가치로 동시 설득. 카드 리스트를 비로그인에 미리 보여줘 '풍부함'을 먼저 증명하고 마지막에 가입 CTA.

새 창에서 열기 ↗
mnncompany.co.kr/

📱 모바일통계바는 2×2 그리드로 접기. 히어로 검색바는 풀폭 sticky. 배우/디렉터 분기 카드는 세로 2스택(배우 먼저). 미리보기 카드는 가로 스크롤 스트립(2.3장 노출). 하단 sticky CTA바 '무료로 둘러보기'. GNB는 햄버거.

03

배우 프로필 상세 (디렉터 시점 · 마스킹 게이팅)

전환 역할전환의 결정적 순간 직전. '이 배우에게 제안하고 싶다'는 욕구를 최대화한 상태에서 잠긴 필드(연락처/실명/인스타)를 자물쇠로 노출 → '제안하기' CTA를 유일한 열쇠로 제시. 마스킹=프리미엄 서사를 강화해 디렉터 인증/배우 결제 양쪽 동기 부여.

새 창에서 열기 ↗
mnncompany.co.kr/profile

📱 모바일갤러리는 상단 풀폭 스와이프(사진↔영상). '오디션 제안하기'는 하단 sticky CTA바로 고정(스크롤해도 항상 노출). 잠금 필드 블록은 자물쇠 아이콘 강조 + 탭 시 '제안 수락 후 공개' 툴팁. 스펙은 아이콘 칩 가로 배열. 신고는 하단 텍스트 링크(오조작 방지 위치).

04

가입 · 역할 분기

전환 역할마찰 최소화 게이트. 소셜 1순위 버튼으로 '3초 시작'을 실현하고, 역할 분기로 배우는 온보딩 마법사, 디렉터는 인증 통과 의식으로 보내 각 여정의 완주 그림을 먼저 보여준다. 결제는 이 단계에서 요구하지 않음(이탈 방지).

새 창에서 열기 ↗
mnncompany.co.kr/signup

📱 모바일소셜 버튼 풀폭 세로 스택(카카오 최상단, 노란 대형). 역할 분기는 세로 2카드. 약관은 전체동의 체크 + 개별 접기. 키보드 올라올 때 CTA 가림 방지(스크롤 여백). 소셜 가입 시 역할 선택 화면으로 바로 이동(단계 최소화).

05

배우 온보딩 · 프로필 작성 마법사

전환 역할결제 전환의 심리적 문턱을 낮추는 핵심. 완성도 %가 오르는 마이크로 보상으로 진지도를 높이고, '거의 다 완성됐어요(85%)' 상태에서 결제 페이지로 자연스럽게 승계 → '여기까지 만들었는데' 심리로 결제 완주율 상승. GIGO 방지로 검색 품질(디렉터 만족)도 보장.

새 창에서 열기 ↗
mnncompany.co.kr/onboarding

📱 모바일스텝바는 상단 도트+라벨 축약(①②③④⑤). 사진 슬롯은 2열 그리드, 대표 슬롯 강조. 완성도 진행바는 상단 sticky(스크롤해도 %가 따라옴 = 지속 동기). 한 스텝 = 한 화면(1화면 1결정). 하단 sticky '다음' 버튼. 자동채움 실패 시 수동 입력 폴백.

06

결제 · 멤버십 (3만원 평생)

전환 역할매출 전환 지점. 온보딩 85% 완성 직후 진입해 '여기까지 만든 프로필을 노출하려면 한 번만' 심리로 결제. 반복과금 없음을 반복 강조해 중장년·저관여층의 '매달 빠져나가는 공포'를 제거하고, 무통장까지 지원해 결제수단 장벽을 낮춘다.

새 창에서 열기 ↗
mnncompany.co.kr/payment

📱 모바일헤드라인 카드 풀폭. BEFORE/AFTER는 2열 유지(좁으면 라벨 축약). 결제수단 라디오는 세로 스택, 선택 시 해당 안내만 펼침(아코디언). 최종 결제 버튼 하단 sticky. 무통장 계좌번호는 '복사' 버튼 제공. 자동갱신 문구 절대 노출 금지(1회 결제 강조).

07

마이페이지 (배우) · 받은 제안 + 연락처 리빌

전환 역할리텐션 + 가치 실감 지점. 열람수·제안수 카운터로 결제 후회를 없애고 재방문을 유도. 제안 응답 기한(48h) 카운트다운으로 방치·이탈을 막고, 수락=연락처 동시 리빌로 '연결'을 업무적 보상으로 완결(로맨스 카피 배제). 이 성공 이벤트가 홈 통계바로 환류.

새 창에서 열기 ↗
mnncompany.co.kr/mypage

📱 모바일요약 카운터는 3칸 가로 유지(숫자 강조). 제안 카드는 세로 스택, 카운트다운은 카드 우상단 배지. 수락/거절 버튼은 카드 하단 풀폭 2분할(수락=주색). 리빌 모먼트는 풀스크린 모달 + 연락처 '복사' 버튼. 새 제안은 푸시/뱃지 🔴로 재방문 유도.

08

캐스팅 제안 폼 (디렉터 시점)

전환 역할양면 연결의 디렉터측 관문이자 디렉터 인증 가치의 실현 지점. 인증된 디렉터만 폼 활성 → 인증 완료 동기 부여. 구조화 필드로 제안 품질을 높여 배우 수락률↑ = 플랫폼 유동성↑ = 홈 통계바 환류. 스팸 억제로 배우 신뢰(=결제 유지) 보호.

새 창에서 열기 ↗
mnncompany.co.kr/proposal

📱 모바일대상 배우 요약은 상단 고정 카드. 폼은 섹션별 세로 스택(배역→촬영→메시지→기한). 라디오/드롭다운은 터치 타깃 크게(중장년 고려, 명시형 라벨). 응답기한은 세그먼트 버튼. 미인증 디렉터는 폼 전체 비활성(흐림) + '디렉터 인증하기' CTA 오버레이. 발송 버튼 하단 sticky.