공썸 랜딩 페이지 · 조사 기록

국내 데이팅·소개 서비스 랜딩 전수 조사 → 공썸 랜딩 제작

광고 레퍼런스 보고서에 나온 국내 회사 랜딩을 하나씩 직접 열어 모바일·PC 화면, 스크롤 녹화, 카피·신뢰 요소·모션을 기록한다. 조사하면서 계속 갱신하는 문서다. 마지막 빌드 2026. 10. 5. 오후 4:27:15.

52 / 53국내 대상 조사 완료
9 / 9조사 그룹 기록 시작
19골프 특화 제외(지침)

랜딩 프리뷰 · 시연 영상

3차 첫 화면(5초, 프리뷰)
3차 장면 넘김(34초, 갤럭시 S9+ 화면 크기, 프리뷰)

프리뷰 열기 →

현재 상태 (2026-10-05)

제작 이력

3차 — 무엇을 바꿨나

이미지: 사람 대신 사물로. 브랜드 그림(스플래시·인스타·스토어 그래픽)에는 사람이 한 명도 없고 분홍 골프백·골프공·벚꽃 같은 사물로 설렘을 말한다는 점에서 출발했다. 사람 그림은 타깃(40~50대)과 연령감이 어긋나고 품질 편차가 커서 뺐다. 대신 gx1이 스플래시와 같은 렌더링으로 그린 사물 장면 — 분홍 골프백(한 사람)과 민트 골프백(다른 한 사람)이 나란히 기대 선 모습을 반복 모티프로 '두 사람의 만남'을 비유한다.

검수 지적 반영.

한 화면 장면 (사용자 제안 반영)

"각 내용이 각 화면 안에 스크롤 슉 하면 멈춰서 보여주고, 다음 스크롤 시 또 알아서 멈춰서 하나의 내용을 하나의 페이지처럼" → 첫 화면과 사물 장면 5개(공감·1:1 소개·초청 모임·차 한잔·스크린 한 게임)를 한 화면짜리 장면으로 바꿨다. 휴대폰은 사물 그림을 화면 전체 배경으로 깔고 위쪽 하늘에 짧은 글, PC는 그림 반쪽·글 반쪽(장면마다 좌우 교대). 진행 순서·안심·진단·질문은 자유 스크롤.

첫 화면 이미지 — 조사 후 결정

사용자: "첫 사진은 첫 인상이고 첫 임팩트야. 어떤 이미지를 보여주는게 베스트일지 조사 브레인스토밍 다 해서 우리 결에 맞춰 다시". Sonnet 병렬 조사 2갈래(내부 근거·외부 연구) 후 결정.

검증(프리뷰)

원칙대로 지킨 것

종합 · 공썸 랜딩 설계 방향

결론 한 줄

국내 50곳 랜딩에서 반복해서 효과가 있던 것은 불안을 먼저 말하고, 약속과 절차로 답하고, 하단 고정 버튼 하나로 이끄는 구조였다. 공썸은 여기에 "골프에서 시작한다"는 차별점과, 두 공이 그린에서 만나는 오프닝 모션을 얹는다. 지어낸 수치·후기·회원 사진은 쓰지 않는다.

섹션 구성과 근거

  1. 첫 화면 — 한 문장 헤드라인 + 체크 3줄 + 버튼을 스크롤 없이(윌유·블라인드데이트·정오의데이트). 사진 대신 직접 그린 골프장 일러스트(윌유: 외모 대상화 회피, 설화수·탬버린즈: 단색 풀블리드 한 장). 두 공이 날아와 깃발 옆에 나란히 멈추는 오프닝.
  2. 공감 → 반전 — "이런 마음 있으셨죠?" 문장이 스크롤에 따라 진해지고(윌유 텍스트 리빌, 모두의지인 공감 시퀀스), "그래서 골프에서 시작합니다"로 전환(감정적인오렌지들 "준비는 이미 충분해요", 은하수다방 "~해도 괜찮은 곳").
  3. 이런 분을 위한 곳 — 대상 선언 칩(시놀 "50세 미만 출입금지"를 "골프 좋아하는 싱글 · 실력 무관 · 만 19세 이상"으로).
  4. 두 가지 만남 — 1:1 소개 / 초청 모임(2:2·3:3)을 탭으로(썸타임 2:2·3:3 탭, 감정적인오렌지들 날짜·인원 카드, 당근 모임 태그 칩, 이음 "운영진이 성비를 맞춘 모임"). 화면은 "예시"로 표시.
  5. 어떻게 진행되나요 — 번호 단계(썸타임·골드스푼·퍼스트클래스·너랑나랑)를 한 장의 카드가 모양을 바꾸며 보여주는 모핑(무협환생기 레퍼런스 @twoclipping "one shape, never cut").
  6. 안심 장치 — "걱정되시나요?" 질문 → 한 문장 답 → 도장처럼 찍히는 확인 배지(블릿·커피팅 질문형, 윌유 검증/프라이버시 두 축, 다이아매치·정오의데이트 지인 차단 독립 강조).
  7. 나에게 맞는 시작 — 3문항 미니 진단(은하수다방 3분 테스트, 썸온 15초 퀴즈, 무협환생기 "예시를 누르면 바로 시작").
  8. 자주 묻는 질문 — 지인·사진·실력·비용·아이폰 질문을 위로(썸온·모두의지인·커피팅). 화면 문답과 FAQPage 구조화 데이터 1:1.
  9. 마지막 권유 + 운영사 정보 전부 — 웹 시작 / 안드로이드 앱 / 로그인(커피팅 마지막 풀 CTA, 탬버린즈·시놀 푸터 정보 공개).
  10. 하단 고정 버튼 1개 + 상단 진행선 — 섹션에 따라 문구가 바뀜(모두의지인). 팝업 없음(시놀·듀오·리본 반면교사).

쓰지 않는 것

근거 없는 1위·100%·퍼센트(썸·스카이피플·커피팅), 연봉·자산·외모 서열(골드스푼·슈퍼리치·미츠), 첫 화면 팝업, 이미지에 박힌 본문 글자(심쿵·클래시커넥트 — AI 검색이 읽지 못함), 경쟁사 비교·비방, 지어낸 회원 후기와 고민 인용, "결혼"·나이 비교 표현.

모션 원칙(무협환생기 대화기록 기준)

조사 대상 53곳

출처: reports 폴더의 광고·경쟁사 보고서 전체. 골프 특화 서비스는 "일반 데이팅 앱 레퍼런스만" 지침에 따라 제외했다.

✓ 위피 · 소개팅앱
✓ 연인어때 · 모임
✓ W클럽 · 소개팅앱
✓ 정오의데이트 · 소개팅앱
✓ 글램 · 소개팅앱
✓ 윌유 · 소개팅앱
✓ 퍼스트클래스 · 소개팅앱
✓ 비긴즈 · 소개팅앱
✓ 러브멘토링 · 결혼정보회사
✓ 아만다 · 소개팅앱
✓ 리본 · 결혼정보회사
✓ 감정적인오렌지들 · 모임
✓ 썸타임 · 모임
✓ 엔노블 · 결혼정보회사
✓ 비긴어게인 · 소개팅앱
✓ 돌싱공감 · 소개팅앱
✓ 돌싱즈 · 소개팅앱
✓ 썸온 · 모임
✓ 더멤버스 · 소개팅앱
✓ 은하수다방 · 소개팅앱
✓ 골드스푼 · 소개팅앱
✓ 슈퍼리치 · 소개팅앱
✓ 클래시커넥트 · 소개팅앱
✓ 다이아매치 · 소개팅앱
✓ the able · 결혼정보회사
✓ 스카이피플 · 소개팅앱
✓ 블릿 · 소개팅앱
✓ 커피팅 · 소개팅앱
✓ dibs · 소개팅앱
✓ 블라인드데이트 · 소개팅앱
✓ 파인아워 · 소개팅앱
✓ 여보야 · 소개팅앱
✓ 너랑나랑 · 소개팅앱
✓ 심쿵 · 소개팅앱
✓ 눈데이트 · 소개팅앱
✓ 이음 · 소개팅앱
✓ 플러팅 · 소개팅앱
✓ 중년천국 · 소개팅앱
✓ 시놀 · 소개팅앱
✓ 중년만남 · 소개팅앱
✓ 누나Zone · 소개팅앱
✓ 롱런 · 소개팅앱
✓ SSUM(아직도이걸몰라) · 소개팅앱
✓ 만나(Manna) · 소개팅앱
✓ 모두의지인 · 소개팅앱
✓ 미츠(mits) · 소개팅앱
✓ 듀오 · 결혼정보회사
○ 사람인 · 기타
✓ 블라인드(Teamblind) · 커뮤니티
✓ 당근마켓 · 커뮤니티
✓ 설화수 · 기타
✓ 탬버린즈 · 기타
✓ 29CM · 기타

제외(골프): 골프썸, 황제데이트, 파미골, 팰리스, 티샷, 그린라이트, 골프하나, 볼메이트, 골프피플/티마트, 골프챗, 골미골미, 골팡, 골프몬, 티업엔조이, 스마트스코어, 카카오골프예약, 골프존/골프존 광고센터, SBS골프 동호회, Par2
해외(미조사): Coffee Meets Bagel(CMB), Tinder, Bumble, Hinge, OkCupid, Badoo, Raya, 이솝(Aesop, 해외 브랜드)

그룹 1

g1 그룹 랜딩 조사 (위피, 연인어때, W클럽, 정오의데이트, 글램, 윌유)

확인일 2026-10-05. 캡처 폴더: docs\landing-research\captures\. 본 것만 기록, 모션은 스크롤 프레임/영상 확인 가능한 범위만 '확인'.

위피 Wippy (소개팅앱 / 동네친구)

모바일 스크롤 녹화
mobile-first
mobile-full
desktop-first

연인어때 yeoninotte (오프라인 로테이션 소개팅 / 모임)

모바일 스크롤 녹화
mobile-first
desktop-first
scroll-02
scroll-05
scroll-01

W클럽 더블유클럽 (하이엔드 만남보장 소개팅앱)

모바일 스크롤 녹화
mobile-first
scroll-03
scroll-07
scroll-12
scroll-20

윌유 willu (여성 기획자 소개팅앱 / 인연 큐레이터)

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-04
scroll-07
desktop-first

정오의데이트 NoonDate (소개팅앱 / 동네친구, 운영사 (주)모젯)

모바일 스크롤 녹화
mobile-first
scroll-01
scroll-02
mobile-first

글램 GLAM (소개팅앱, 운영사 큐피스트 Cupist Inc.)

모바일 스크롤 녹화
mobile-first
scroll-02
desktop-first

그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7

  1. 안전을 "검증"과 "프라이버시" 두 축으로 나눠 각 3개씩 짧게 제시(윌유) + 글램의 5개 라벨 리스트. 공썸의 본인인증·운영팀 승인 / 지인·학교·직장 차단·캡처 차단·사진 5분 공개에 그대로 대응. FAQ에 "지인을 만날까봐 걱정돼요", "가입 심사가 있나요?" 포함.
  2. 보장·약속을 번호 리스트로(W클럽 "5가지 약속" 01~05, 연인어때 "다릅니다 ➊➋➌"). 공썸은 "상대 의사 확인 후에만 연락처 전달"을 약속 1번으로(W클럽도 같은 방식을 신뢰 문구로 사용 중).
  3. 증빙 슬라이더·실제 후기(연인어때): 인증서·보증 이미지 + 별점·마스킹 ID·시각이 붙은 후기, 단점 후기도 노출. 공썸은 운영사 정보·사업자·승인 절차 캡처로 대체 가능. 정오의데이트·윌유처럼 수치마다 기준일 병기.
  4. 한 섹션 한 메시지 + 다크/라이트·배경색 교차 리듬(W클럽), 스크롤에 맞춰 회색→검정으로 진해지는 텍스트 리빌(윌유). 긴 페이지의 지루함을 줄임.
  5. 히어로: 한 문장 헤드라인 + 서브 + CTA를 첫 화면에 동시 노출(윌유, 정오의데이트 풀폭 버튼). 일러스트/절제된 사진으로 외모 대상화 회피(윌유) — 35~54 여성 타깃에 적합.
  6. 성공 지표를 서비스 약속과 연결(글램 "함께 탈퇴한 회원 N명", 연인어때 "참가자 명단/현장 스케치", 위피 "근처에 632명" 목업). 공썸은 "함께 라운딩한 모임 N건", 성사 모임 사례를 같은 방식으로.
  7. 희소성·진행 상태 노출(연인어때 "이번 주 신청 가능 749/800건" 고정 플로팅 + 마감 임박 뱃지). 단 팝업·플로팅 과다로 히어로를 가린 점은 반면교사 — 플로팅은 1개만.

피할 것(공통): "국내 1위/업계 최초" 근거 없는 자칭, 외모평가·계층(전문직/상위 외모) 소구, 모바일 헤드라인 1글자 줄바꿈(위피), 저해상도 목업(정오의데이트), 핵심 정보를 접힌 아코디언에만 숨기기(위피), 경쟁사 평점 직접 비교(윌유).

참고(조사 한계): 위피는 이번 조사에서 scroll 프레임 없이 mobile-full/first만 분석했고, 영상(mobile-scroll.webm)은 어떤 회사도 재생 분석하지 못함(모션은 정지 프레임과 스크립트 목록 기준). 글램·정오의데이트 앱스토어(iOS) 리스팅 미조사.

그룹 2

g2 랜딩 조사 (퍼스트클래스·비긴즈·러브멘토링·아만다·리본·감정적인오렌지들)

확인일 2026-10-05. 캡처는 captures/<slug>/ (mobile-first, scroll-NN, desktop-first/full, mobile-scroll.webm, page.json).

퍼스트클래스 (소개팅앱/소셜 멤버스 클럽)

모바일 스크롤 녹화
mobile-first
desktop-first
scroll-05

감정적인오렌지들 (모임/오프라인 로테이션 소개팅)

모바일 스크롤 녹화
desktop-first
mobile-first
scroll-02
mobile-first

아만다 (소개팅앱)

모바일 스크롤 녹화
mobile-first
desktop-first
scroll-02
scroll-03

리본 (결혼정보회사, 공식 서비스명 "Dear Re:Born / 싱글 리본")

모바일 스크롤 녹화
desktop-first
mobile-first
scroll-07

러브멘토링 (결혼정보회사, 디노블 포함)

모바일 스크롤 녹화
desktop-first
mobile-first

비긴즈 (사람인 운영 직장인 소개팅앱)

scroll-05
scroll-12
mobile-first

그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7

  1. 인증·차단 기능을 아이콘 목록으로 정리한 신뢰 섹션 — 비긴즈의 "안심 차단 4종 + 5종 인증 배지"와 감정적인오렌지들의 "본인·직장 인증 / 호스트 동행 / 직영 관리" 3카드. 공썸은 휴대폰 본인인증·운영팀 승인·지인/학교/직장 차단·여성 사진 5분 공개를 같은 형식으로 보여줄 것.
  2. 구체적인 수치 한두 개 — 퍼스트클래스 "심사통과 비율 20%", 아만다 4종 카운터(700만+/200만+/240만+/10년+). 공썸도 실제 확인 가능한 수치(승인 절차 단계, 응답 시간 등)만 사용하고 과장·불일치(아만다 600만/700만, 오렌지들 7만/7만8천)는 피할 것.
  3. 3단계 "어떻게 진행되나요?" 구조 — 퍼스트클래스의 인증 → 추천 → 약속 조율 3단계. 공썸은 가입 승인 → 매니저가 상대 의사 확인 → 연락처 전달/초청 모임으로 매핑.
  4. 반(反) 피로 포지셔닝 한 줄 — 오렌지들 "앱 소개팅의 피로감도, 결혼정보회사의 부담도 없이", 아만다 "무제한으로 흩뿌리지 않습니다". 공썸은 "스와이프 없이 매니저가 확인하는 만남"으로 응용.
  5. 위로형 히어로 헤드라인 — 오렌지들 "준비는 이미 충분해요. 만날 기회가 없었을 뿐." 35~54세 여성 타깃에 맞는 공감 톤. 마침표 한 점만 포인트 컬러로 쓰는 처리도 참고.
  6. 실제 앱 화면 목업으로 기능 설명 — 퍼스트클래스(약속 조율 카드), 비긴즈(필터·프로필 카드), 아만다(오늘의 소개). 가짜 UI 대신 실제 화면 또는 재구성 라벨 사용.
  7. 상황별 진입 칩·구체적 카드 + 가격·마감 표시 — 오렌지들의 지역/유형 칩, 날짜·가격·"남성 마감" 배지. 공썸의 2:2·3:3 골프 모임 카드(날짜·장소·인원·남은 자리)로 변환. 푸터 사업자정보·환불 규정 상시 노출도 함께(퍼스트클래스·오렌지들·아만다 공통).

피할 것(그룹 공통): 첫 화면을 가리는 팝업·쿠키 시트(리본·디노블·오렌지들), 모바일 첫 화면 CTA 부재(퍼스트클래스), 과도한 수상·방송 나열이나 경쟁사 저격 카피(디노블), 과다 입력 폼(디노블), 오타·수치 불일치(아만다).

이번 조사의 한계 요약

그룹 3

g3 랜딩 조사 (썸타임, 엔노블, 비긴어게인·돌싱공감, 돌싱즈, 썸온, 더멤버스)

확인일 2026-10-05. 캡처 도구: tools/capture.mjs. 모션 영상은 각 폴더의 mobile-scroll.webm. (회사 단위로 분석이 끝나는 대로 아래에 덧붙인다.)


썸타임 SOMETIME (모임·대학생 로테이션 소개팅 + 대학 인증 앱)

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-04
mobile-first

엔노블 N.NOBLE (결혼정보회사 · 상류층·전문직 노블레스)

모바일 스크롤 녹화
mobile-first
scroll-03
scroll-08
mobile-first

비긴어게인 Begin Again (소개팅앱 · 돌싱 전문) + 돌싱공감(동일 앱의 두 번째 광고 페이지)

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-03
scroll-07

돌싱즈 Dolsings (소개팅앱 · 돌싱/3040 1:1 매칭)

모바일 스크롤 녹화
mobile-first
scroll-04
scroll-15
scroll-09
desktop-first

썸온 SOME-ON (모임 · 부울경 결혼정보회사 + 로테이션 파티·페스타)

모바일 스크롤 녹화
모바일 스크롤 녹화
mobile-first
scroll-03
scroll-06
mobile-first

더멤버스 The Members (소개팅앱 · 3040 서류검증 프리미엄 매칭)

모바일 스크롤 녹화
모바일 스크롤 녹화
mobile-first
mobile-first
scroll-03

그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7 (g3)

  1. 신청·가입 절차를 번호 타임라인으로 먼저 공개 (썸타임 /rotation '신청은 이렇게 진행돼요', 더멤버스 '간편 인증 조회 → 공공기관 데이터 확인 → 인증 뱃지 부여', 비긴어게인 심사 설명) — 공썸의 휴대폰 본인인증 → 운영팀 승인 → 매니저 확인 → 연락처 전달 흐름을 3~4단계 카드로 맨 위쪽에.
  2. '약속/운영 규칙' 리스트 + 수치 카드 + 각주 출처 (돌싱즈 '5가지 약속, 마케팅 문구가 아니라 운영 규칙', 월계관 6칸 수치 카드, 집계 기준 각주) — 공썸 안전장치(지인·학교·직장 차단, 여성 사진 5분 공개·캡처 차단 등)를 같은 포맷으로, 과장 표현(국내 1위 등)은 근거 없이 쓰지 않기.
  3. 하단 고정 CTA (썸타임 풀폭 보라 '신청하기', 비긴어게인 '앱 설치하고 혜택 받기' 바, 썸온 '전화 상담 + 30초 무료 상담 신청하기' + 닫기, 돌싱즈 검정 알약) — 스크롤 내내 하나의 행동만 유지하고, 40~50대용으로 '전화/문의' 보조 버튼과 닫기 옵션 추가.
  4. 저압박·불안 선제 해소 카피와 FAQ (돌싱즈 '아직 설치하지 마세요, 읽어보고 판단하셔도 늦지 않습니다', 썸온 '듣기만 하셔도 됩니다 / 전화가 계속 오지 않나요? / 아는 사람이 알게 될까 봐', 썸타임 'FAQ: 얼굴 사진은 다른 참가자가 보나요?') — 공썸 FAQ 첫 줄을 사진 공개·지인 차단·연락처 전달 시점 질문으로.
  5. 고객 고민 문장을 1인칭 말풍선으로 먼저 보여주기 + 대비 선언 (비긴어게인 '채팅앱은 가볍고 결정사는 부담스럽다면?' + 고민 4문장, 돌싱즈 '세 가지 길' 비교) — 공썸 타깃 여성 35~54의 '소개팅앱은 불안하고 결정사는 부담' 문장으로.
  6. 캐릭터/퀴즈형 가벼운 진입 장치 (더멤버스 사주 랜딩 '캐릭터 대화 → 입력 → 결과 + 정보 비저장 문구', 썸온 15초 연애 유형 퀴즈, 엔노블 러브 테스트 7종) — AI 검색 유입 방문자용 보조 랜딩으로 '골프 성향/모임 케미 테스트'를 만들고, 결과 하단에 '친구에게 공유' + '모임 신청' 두 CTA.
  7. 실제 사람·현장 근거 (썸온 직영 라운지 사진 모자이크 + 후기 카드에 담당 매니저 이름, 썸타임 실제 행사 사진 + '제휴 대학 표시가 아닙니다' 같은 정직 문구, 돌싱즈 후기에 성별·나이·직업 라벨 + 카테고리 탭 필터, 더멤버스 채팅 UI 후기) — 공썸은 실제 2:2·3:3 모임 현장 사진, 매니저 소개, 후기 카드 포맷을 같은 방식으로.

참고(모션): 이 그룹은 전반적으로 모션이 약함. 확인된 강한 모션은 엔노블(GSAP·ScrollTrigger·ScrollSmoother·Swiper·AOS, 글자 순차 등장 영상 히어로)과 썸온(Swiper 11 카드 슬라이더, 토글 UI·3D 마스코트, 퀴즈), 더멤버스 사주(탭 진행형 배경 전환)뿐. 나머지는 정적 섹션 + 고정 CTA 중심.

그룹 4

g4 그룹 랜딩 조사 (은하수다방 / 골드스푼 / 슈퍼리치 / 클래시커넥트 / 다이아매치 / the able)

확인일 2026-10-05. 캡처 도구: tools/capture.mjs. 본 것만 기록.

골드스푼 GOLDSPOON (소개팅앱 — 검증기반 하이엔드)

모바일 스크롤 녹화
mobile-first
scroll-01
scroll-03
scroll-08

클래시커넥트 Classy Connect (소개팅 — 매니저 매칭 보장형 하이엔드, 아임웹 제작)

모바일 스크롤 녹화
mobile-first
scroll-01
scroll-03
scroll-07

다이아매치 DiaMatch (소개팅앱 — 학교·직장 인증형)

모바일 스크롤 녹화
mobile-first
scroll-03
scroll-06
desktop-first

the able / 디에이블 (결혼중개·프라이빗 매칭 앱, 에이블모멘트(주))

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-04
desktop-first

은하수다방 (소개팅앱 — 돌싱·늦은 미혼 대상, 주식회사 에이프릴세븐)

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-05
scroll-07

슈퍼리치 SUPERRICH (소개팅앱 — 경제력·외모 인증, 주식회사 리밋)

모바일 스크롤 녹화
mobile-first
scroll-02
desktop-first

그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7

  1. 감정 공감형 H1 + "~해도 괜찮은 곳" 서브카피(은하수다방) — "지나온 시간을 설명하지 않아도 괜찮은 곳"처럼 35~54 여성의 망설임을 먼저 인정. 공썸은 "골프 못 쳐도, 혼자여도 괜찮은" 방향.
  2. 불안 선제 호명 + 약속 3가지(클래시커넥트 "회원 고민 BEST 3", 은하수다방 "지키는 세 가지", 다이아매치 "약속합니다") — 알바·사진 사기·신원·번거로움 불안을 먼저 말하고 운영 원칙 3개로 답한다. 공썸: 본인인증·운영팀 승인·매니저 확인.
  3. 가입 단계 Step형 설명 + 심사 포장(골드스푼 Step1~5 "안전하니까 조금 까다롭습니다") — 가입→승인→매니저 연락처 전달을 단계로 제시.
  4. 지인/직장 차단을 독립 섹션으로(다이아매치 "아는 사람은 절대 만나지 않기", 슈퍼리치 "지인 피하기") — 공썸 지인·학교·직장 차단 강조.
  5. 가입 전 체험·가벼운 진입물(은하수다방 "먼저 둘러보기"+3분 심리테스트 4종) — 공썸은 '나의 골프 라운딩 성향 테스트' 등.
  6. 하단 고정 CTA(the able 전폭 그라데이션 "지금 다운로드", 슈퍼리치 스토어 버튼 바, 클래시커넥트 우하단 "상담" 플로팅) — 모바일 전 구간 전환 장치.
  7. 신뢰 정보 실체 공개 + 후기 포맷(the able 결혼중개업 신고필증 번호, 클래시커넥트 사업자·통신판매업 번호, 은하수다방 후기 "42세, 서울 강남구"+★5, 골드스푼 별점 카드) — 운영사 정보·FAQ(슈퍼리치식 질문 그대로 답변)·마스킹 후기를 갖춰 AI 검색 신뢰도(E-E-A-T) 확보.

피할 것 요약: 연봉·자산·외모 서열화(골드스푼·슈퍼리치), 영문 헤드라인(the able), 이미지 속 텍스트로 본문 구성(클래시커넥트·SEO 불리), 근거 없는 수상/보증 금액 흉내.

그룹 5

g5 랜딩 조사 (스카이피플, 블릿, 커피팅, dibs, 블라인드데이트, 파인아워)

확인일 2026-10-05. 캡처 위치 docs/landing-research/captures/<slug>/. 이미지 해상도는 모바일 390px x DPR3(가로 1170px).


dibs / 딥스 (소개팅앱 — 약속 보증·리워드)

모바일 스크롤 녹화
mobile-first
scroll-01
scroll-03
desktop-first

스카이피플 / SKY PEOPLE (소개팅앱 — 학교·직장 인증)

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-05
desktop-first

블라인드데이트 / 블데 (소개팅앱 — 학교·직장 인증, 착한 데이팅)

모바일 스크롤 녹화
mobile-first
scroll-03
scroll-06
desktop-first

커피팅 / Coffeeting (소개팅 — 매니저 1:1 맞춤, 50분 커피 데이트)

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-05
desktop-first

블릿 / Bullit(공식 표기 bleet) (소개팅앱 — 블라인드 자회사, 인증·지인차단)

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-05
desktop-first

파인아워 / FineHour (소개팅앱 — 스케줄 기반 1시간 소개팅, 럽센트는 별칭)


그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7

  1. 고정 하단 "앱 다운로드" 버튼 + 마지막 풀 CTA(커피팅): 모바일 전환 동선 최단. 공썸은 "가입 신청" 고정 버튼으로.
  2. FAQPage/Service JSON-LD + 질문형 h2 헤딩(커피팅 확인, 스카이피플·블릿은 시맨틱 헤딩만 있고 JSON-LD는 없음, 딥스·블데는 헤딩 자체가 없어 반면교사): AI 검색 대응의 직접 참고안.
  3. 안심 요소를 "걱정되시나요?" 질문 → 해결 한 문장 → 실제 앱 화면/카드 UI 목업으로 반복(블릿 지인 차단, 커피팅 본인인증 카드, 블데 불량 회원 게시판): 공썸의 본인인증·운영팀 승인·지인/학교/직장 차단·사진 5분 공개와 캡처 차단을 같은 문법으로.
  4. "왜 믿을 수 있나" 근거 카드 분해(스카이피플 인증 방식/기간·건수/24시간 모니터링 카드, 딥스 "Why 딥스?~이니까!"): 근거는 구체적 절차로, 수치는 공썸이 실제로 증명 가능한 것만.
  5. 운영 주체·책임 선언과 규제 정보 공개(블데 "알바 신고 시 법적 책임", 커피팅 결혼중개업 신고번호·손해배상 절차 푸터, 스카이피플 수상·언론): 공썸도 사업자·고객센터·개인정보 정책·가능한 신고 정보를 푸터에 명시.
  6. 히어로 구조: 큰 한 문장 헤드라인 + 체크 3줄 서브카피 + 헤드라인 바로 아래 CTA(블데·블릿 데스크톱·스카이피플): 첫 화면에서 차별점 3개와 행동이 모두 보이게. 공썸은 "골프 좋아하는 싱글" 한 줄 + 3개 차별점.
  7. 한 섹션 한 메시지, 단일 브랜드 컬러 + 짧은 컬러 구분선/형광펜 하이라이트(블릿 옐로, 딥스 민트 하이라이트, 커피팅 와인/크림): 40~50대 가독성에 유리. 반면 피할 것: 근거 없는 "1위/95%" 수치(스카이피플 Play 기준 1위, 커피팅 95%/90% 불일치), 금전 보상·스펙 소구, 이미지 안에 박힌 텍스트(AI 검색 비친화), 헤딩 없는 아임웹 구조.

(조사 한계: 파인아워는 웹 랜딩·스토어 리스팅 모두 확인 불가. 커피팅 인스타그램은 확인하지 않고 공식 웹으로 대체. 모션 라이브러리는 대부분 스크립트명으로만 확인했고 page.json libs의 gsap/lottie/three 등은 오탐 가능성이 커서 '확인'으로 쓰지 않음.)

그룹 6

g6 랜딩 조사 (여보야 · 너랑나랑 · 심쿵 · 눈데이트 · 이음 · 플러팅)

확인일 2026-10-05. 담당: g6. (회사별 분석을 끝낼 때마다 이 파일에 덧붙임)

여보야 (소개팅앱 — 결혼·재혼 중매, 중장년 비중 높음)

모바일 스크롤 녹화
desktop-first
desktop-full
mobile-first

너랑나랑 (소개팅앱 — 매일 16명 이상형 월드컵)

mobile-first
mobile-full

심쿵 (소개팅앱 — 동네친구형, 운영 (주)콜론디)

모바일 스크롤 녹화
mobile-first
scroll-01
desktop-first

눈데이트 = Noondate / 정오의데이트 (소개팅앱 — 매일 두 장 카드, 운영 (주)모젯)

모바일 스크롤 녹화
mobile-first
scroll-02
scroll-04
desktop-first

이음 (소개팅앱 — 목록상 "직장인 전용 재직 인증"이나, 확인된 실제 리스팅은 4050 중년 만남·모임)

모바일 스크롤 녹화
mobile-first
scroll-02
mobile-full

플러팅 (보고서 표기 "플러팅(자산명 pulling)" — 중장년 커플 이미지 광고 1건 집행)

모바일 스크롤 녹화
mobile-first
scroll-01
mobile-full

그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7

  1. (정오의데이트) 수치 3종(평점·일 매칭·누적 가입) 한 줄 + "기준일" 병기 — 과장 의심을 줄이는 사회적 증거. 공썸은 실제 회원 수·승인 건수에 기준일을 붙여 사용.
  2. (정오의데이트) 지인차단을 첫 기능 섹션에 "혹시 아는 사람이 나를 볼까 봐 걱정되시나요?" 질문형으로 배치 — 공썸의 지인·학교·직장 차단 소구에 그대로 적용.
  3. (정오의데이트) 모바일 헤더 우상단 고정 "앱 다운로드" 필 버튼 + 히어로 풀폭 CTA 이중 구조.
  4. (여보야) 히어로 바로 아래 "최근 가입자 N명 + 지역별 수" 카운터 띠와 "N번째 후기"식 누적 번호 — 지금 움직이는 서비스임을 증명(공썸은 실제 수치만 사용).
  5. (여보야) 모바일 가입 화면의 카카오/네이버 큼직한 "~로 시작하기" 풀폭 버튼 — 중장년 가입 마찰 최소화 + NEW 프로필 카드 미리보기.
  6. (이음) "운영진이 인원과 성비를 맞춘 오프라인 모임" 문구와 "오늘의 소개 / 발견 / 이벤트 / 안전한 시작"의 4단어 소제목 구조 — 공썸 혼성 모임과 운영팀 승인 소구에 맞음.
  7. (너랑나랑) "어떻게 진행되나요?" 번호 단계 설명 + "~할 수 있습니다/~하는 설렘이 있습니다" 짧은 장점 불릿, "유령회원 NO" 같은 약점 선제 언급 — 공썸의 가입→승인→매니저 연결 흐름 설명에 적용.
  8. 반면교사: 심쿵 웹은 텍스트가 전부 이미지라 검색·AI가 읽을 내용이 0 → 공썸 랜딩은 반드시 실제 텍스트(h1~h3, FAQ, JSON-LD)로 구성. 너랑나랑·이음 등은 웹 랜딩 자체가 없거나 폐쇄되어 스토어 리스팅이 유일한 자산이라는 점도 주의.
  9. 그룹 한계: 6곳 중 웹 랜딩이 실제로 있는 곳은 여보야·심쿵·정오의데이트뿐. 너랑나랑·이음·플러팅은 스토어 리스팅으로 대체했고, 이음·플러팅은 목록 설명과의 동일성이 미확정.

그룹 7

g7 조사 — 중장년 대상 서비스 (중년천국, 시놀, 중년만남, 누나Zone, 롱런, SSUM)

확인일 2026-10-05. 캡처는 captures/<slug>/ 아래(모바일 390px, PC 1440px, 스크롤 프레임, mobile-scroll.webm). 공통 사실: 6개 모두 목록에 URL이 없어 App Store lookup / Google Play 상세 / 웹검색으로 공식 URL을 확정했다.


중년천국 (소개팅/랜덤채팅 앱, 안드로이드 전용)

모바일 스크롤 녹화
mobile-first
desktop-first
mobile-first
scroll-02

시놀 (중장년 5060 소셜·데이팅 플랫폼, 운영 시놀(주)) — 이 그룹에서 가장 완성도 높은 랜딩

모바일 스크롤 녹화
mobile-first
scroll-01
scroll-02
scroll-12
desktop-first

중년만남 (소개팅/채팅 앱, 운영 (주)레인톡 Reigntalk — 웹 브랜드는 '데이트글로우 GLOW')

모바일 스크롤 녹화
mobile-first
desktop-first
scroll-02
scroll-04

누나Zone / 누나존 (연상연하 데이팅 앱 — 실체는 해외 앱 'Cougarly'의 한국어 리스팅)

모바일 스크롤 녹화
mobile-first
desktop-first
scroll-01

롱런 LONGRUN (카운슬러 1:1 소개팅 앱, 안드로이드)

모바일 스크롤 녹화
mobile-first
scroll-03
mobile-first

SSUM 썸 (사람이 직접 해주는 1:1 매니저 소개팅 앱) — 목록의 'SSUM(아직도이걸몰라)'

모바일 스크롤 녹화
mobile-first
desktop-first
scroll-02
scroll-04

조사 한계 메모

그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7

  1. 연령·자격을 입구에서 선언하는 한 줄 (시놀 "⛔ 50세 미만 출입금지⛔") — 공썸은 "만 19세 이상 · 골프를 좋아하는 싱글만 · 운영팀 승인 후 입장" 식으로 변환. 선별성이 곧 안심 신호가 됨.
  2. 회원 고민 한 줄 인용 카드 (시놀 "시놀이 시작된 이유": '63세/귀농/경기도 — 은퇴 후 새로운 친구를 사귈 기회가 부족해요') — 공썸은 "혼자 치는 라운드가 아쉬웠어요(45세/경기)" 식으로 40~50대 공감 문장 3~4개.
  3. 후기 카드 표준 구조 (시놀: 실사 얼굴·마스킹 이름·나이·관심 태그·별 5개 / 썸: 지역·연령대·담당 매니저 언급) — 공썸은 사진 노출을 피하되 마스킹 이름·연령대·지역·골프 구력 태그로 대체. 가짜 후기 금지.
  4. 푸터에 사업자·통신판매업·(결혼중개업) 번호를 전부 노출하고 "언론속의 OO"를 매체명+날짜 한 줄 목록으로 (시놀) — 공썸은 근거가 생기기 전엔 사업자정보와 FAQ·개인정보 처리 안내를 먼저 강화.
  5. 번호형 약속 리스트 + 환불 조건 명시 (썸 "썸의 5가지 약속", 롱런 후기에서 환불 불만이 크게 노출된 반면교사) — 공썸의 약속: 본인인증·승인제 / 상대 의사 확인 후 연락처 전달 / 지인·학교·직장 차단 / 여성 사진 5분 공개·캡처 차단 / 환불·문의 방법. 숫자가 근거 없는 "100%"로 가면 안 됨.
  6. 경쟁 앱의 불만을 NO 스탬프 체크리스트로 대비 (썸 "무분별 얼굴노출 / 알바생 / 무응답 / 단발성 매칭 NO") + "이런 분을 위한 곳입니다" 번호 3개로 타깃 자기선택 — 공썸은 "무분별 연락 / 얼굴 노출 / 지인 마주침"을 NO로 처리.
  7. 큰 글씨·짧은 문장·파스텔 배경·고정 하단 CTA (시놀·썸 공통, 중년천국 안내 페이지의 아이보리+코랄 3색) — 헤드라인 28px 이상, 본문 16~18px, 문장 한 줄 20자 내외, 모바일 하단 고정 CTA 1개. 반면 시놀의 첫 화면 팝업·고정 5분할 네비처럼 화면을 가리는 요소는 제외.

피할 것 요약: 첫 화면 팝업 과다(시놀), 근거 없는 "100%" 표기(썸·시놀), 타사 비방성 인용(썸), 성적 뉘앙스·랜덤채팅 키워드(누나Zone·중년천국), 환불·응대 불만이 노출되는 스토어 리스팅(롱런), 앱 이름과 랜딩 브랜드 불일치(중년만남↔GLOW, 누나Zone↔Cougarly).

그룹 8

g8 조사 — 만나(Manna), 모두의지인, 미츠(mits), 듀오, 블라인드, 당근마켓 모임

(확인일 2026-10-05. 캡처 폴더는 모두 docs\landing-research\captures\<slug>\)

듀오 (결혼정보회사)

모바일 스크롤 녹화
mobile-first
desktop-first
scroll-13

모두의지인 — 국내 공식 사이트 (소개팅앱 광고 / 프리미엄 결혼정보회사, 운영사 (주)테키)

모바일 스크롤 녹화
mobile-first
desktop-first
scroll-03

모두의지인재팬 (한일 국제결혼 소개 — 목록 URL japan.jiin.love)

모바일 스크롤 녹화
mobile-first
scroll-04
desktop-first

블라인드 (직장인 익명 커뮤니티 — 광고 채널, 랜딩 신뢰 표현 참고용)

모바일 스크롤 녹화
mobile-first
scroll-05

미츠(mits) (소개팅앱 — 웹 랜딩 확인 못함, 앱스토어 리스팅으로 대체)

당근마켓 모임 (지역 커뮤니티/모임 — 4050 모임 채널)

모바일 스크롤 녹화
모바일 스크롤 녹화
mobile-first
desktop-first
mobile-first

만나(Manna) (소개팅 — 광주/전라 1:1 이상형 소개팅, 공식 랜딩 확인 못함)

그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7

mobile-first
scroll-03
scroll-04
desktop-first
mobile-first
desktop-first
  1. 라이브 소셜프루프 말풍선(모두의지인) — 히어로 하단에 "32세 한의사 남성 — 내 인연을 찾으러 프로필을 남겼어요 / 프로필 한 장이 성혼으로 이어졌어요"가 순환. 공썸은 직업 대신 "○○대 여성 — 오늘 소개를 받았어요" 식으로 개인정보 없는 수준에서 적용(캡처: captures/jiin-kr/mobile-first.png).
  2. 하단 고정 알약 CTA의 문구가 섹션 맥락에 따라 교체(모두의지인: "내게 맞는 인연 알아보기" → "내 만남의 방향 알아보기" → "나만의 매칭 시작하기") + 상단 얇은 진행바 — 엄지 영역 전환 장치의 모범(captures/jiin-kr/scroll-03.png, scroll-07.png).
  3. 공감 → 반전 서사 시퀀스(모두의지인) — 어두운 풀스크린에서 "만날 곳이 없어요 / 소개팅 앱은 지쳤어요"를 한 줄씩 보여준 뒤 "그래도 결혼은 하고 싶어요"로 전환. 공썸은 "혼자 치는 라운드, 이젠 같이" 식 40~50대 공감 문장으로 변주, 단 어두운 구간은 짧게(captures/jiin-kr/scroll-03.png, captures/jiin-japan/scroll-04.png 블러→선명 등장 참고).
  4. 숫자 + 기준일 + 산정 방식 각주(듀오) — "회원수 35,363명 / 성혼수 54,912명 (2026.10.1 기준)"과 "청첩장·웨딩사진 1차, 통화 2차 확인" 각주. 공썸은 수치가 쌓이기 전이므로 수치 대신 운영 절차(본인인증→운영팀 승인→매니저가 상대 의사 확인 후 연락처 전달)를 같은 방식으로 날짜·기준과 함께 명시(captures/duo/desktop-first.png).
  5. "과거 불만 → 해결완료" 구조와 FAQ 불안 해소(모두의지인 국내·재팬) — "연락이 늦어요 → 해결완료", "일본어를 못해도 괜찮나요?". 공썸은 "지인에게 노출되면 어떡하죠?(지인·학교·직장 차단)", "사진이 유출되면?(5분 공개·캡처 차단)"을 FAQ 상단 질문으로(captures/jiin-kr/ 텍스트, captures/jiin-japan/ FAQ).
  6. 푸터 신뢰 정보 완전 노출 + 구조화 데이터(모두의지인·당근·듀오) — 사업자·통신판매·결혼중개업 신고번호, 운영사, 주소, 전화, 그리고 Organization/LocalBusiness JSON-LD, 목록형은 ItemList JSON-LD(당근). AI 검색(GEO/AEO) 인용 근거로 직결.
  7. 태그 칩 + 활동 메타 줄(당근 모임) — "동네친구 / 72~82년생 / 지역"과 "멤버 N · 게시글 N · 2개월 전 활동"처럼 대상·성격·활기를 한 줄로 보여주고 소개글에 "어색해도 괜찮아요"와 규칙을 병기. 공썸은 "2:2·3:3 혼성 / 골프 구력 무관 / 만 19세 이상" 칩과 모임 일정 카드에 응용(captures/daangn-group-detail/mobile-first.png, captures/daangn-group/desktop-first.png).

보조 메모: 피해야 할 것 — 팝업이 화면을 덮는 프로모 우선 첫 화면(듀오), 서열·"상위 1%" 표현(미츠), 근거 불분명한 수치 병기(모두의지인 27.3%/85%), 이모지 남발 후기, 마스킹 후기 문구의 획일성. 이번 그룹에서 못 확인한 것: 만나(Manna) 전부, 미츠 웹 랜딩, 블라인드 PC 정상 화면.

그룹 9

g9 랜딩 조사 — 설화수 · 탬버린즈 · 29CM (확인일 2026-10-05)

선정 배경 (여성 타깃 취향 보고서 2026-09-27-female-target-taste-report.html §1에서 확인)

설화수 (뷰티, 아모레퍼시픽)

모바일 스크롤 녹화
mobile-first
scroll-02
desktop-first

탬버린즈 (향수·핸드크림 뷰티)

모바일 스크롤 녹화
mobile-first
desktop-first
mobile-full

29CM (패션·라이프스타일 셀렉트샵)

모바일 스크롤 녹화
mobile-first
scroll-08
desktop-first

그룹 종합: 공썸 랜딩에 가져올 장점 TOP 7

  1. 히어로는 '단색(또는 질감) 풀블리드 배경 + 인물/사진 1장 + 한두 줄 카피' (설화수 주황 히어로, 탬버린즈 풀블리드). 효과를 겹치지 않는다.
  2. CTA는 그라데이션·광택 알약 버튼 대신 얇은 윤곽 각진 버튼 또는 밑줄 텍스트 링크(설화수 "자세히 보기", 탬버린즈 "제품 보기"). 단 소개 랜딩은 눌림 확률이 중요하므로 대비를 충분히 줄 것(보고서의 A/B 권고와 같은 방향).
  3. 워드마크는 작게 단색으로(탬버린즈 흰 대문자, 설화수 흰 스크립트, 29CM 얇은 자간 넓은 검정) — 브랜드명을 헤드라인보다 크게 두지 않는다.
  4. 위계: 굵은 한글 제목 + 가는 회색 부제(설화수), 큰 서브제목으로 40~50대 가독성 확보(29CM).
  5. 사진 톤 통일: 따뜻한 중간톤·베이지·뮤트 컬러, 인물은 자연스러운 피부 광택(설화수·29CM).
  6. 실체 신뢰: 오프라인 실체 사진(설화수 한옥 플래그십 → 공썸은 운영팀/매니저 상담 장면), 푸터에 사업자정보·통신판매업·보증을 빠짐없이 표기(탬버린즈).
  7. 구어체 한 줄 카피 + peek 가로 카로셀 + 반투명 하단 고정 CTA 바(29CM), 자동 슬라이드엔 진행선+정지버튼(설화수·탬버린즈).
  8. 공통 한계: 이 셋은 정보 설명이 거의 없는 쇼핑몰/브랜드 홈이라 서비스 이해(AI 검색 유입)를 돕는 섹션 구조(문제→방식→안전→후기→FAQ)는 데이팅 경쟁사 쪽 조사 결과에서 가져와야 한다.

웹 모션 레퍼런스 — 무협환생기 대화기록 기준

공썸 랜딩 웹 모션 레퍼런스 정리 (무협환생기 세션 verbatim 기반)

작성일 2026-10-05. 읽기 전용 조사 결과다. 무협(먹·붓) 소재 자체가 아니라 기법 · 품질 기준 · 성능 원칙만 옮기는 것이 목적이다.

근거 출처(모두 로컬 확인):


A. 사용자 원문(verbatim) 품질 기준 · 지시

모두 무협환생기 세션 사용자 발화 원문이다(시각은 추출본 그대로).

날짜원문읽는 법
2026-09-17 01:07"끝내주는 디자인의 웹사이트들, 또는 끝내주는 웹사이트들을 모아놓은 최신 웹사이트들로부터 끝내주는 웹사이트들을 섭에이전트 소넷 병렬 조사 후 보고서 써 섬네일, 링크, 어떤 부분이 디자인이 좋더라 이런 언급도 살짝 적고"레퍼런스는 섬네일 + 링크 + "어디가 좋은가" 한 줄로 정리
2026-09-17 08:09"우리쪽이라 비슷하거나 동양풍이거나 멋지고 아름답고 훌륭한 웹서비스 츄가 조사"자기 서비스와 닮은 도메인 레퍼런스를 별도로
2026-09-17 11:29"더 동적이고 인터랙티브하고 시작적인 요소들 위주로 조사해서 반영해봐"조사에서 끝내지 말고 반영까지
2026-09-26 09:17"정말 세상에서 가장 끝내주는 웹사이트를 만들어. 네가 세상에서 최고의 모델이라며 너의 최선을 다 해서 최고의 결과를 내봐. 지금의gui 신경 안써도 돼 싹 다 갈아엎어도 되니까 결과를 너의 모든 성능을 다 끌어내서 최고의 결과를 보여줘."최상 품질 기준 선언. 기존 틀을 버려도 됨
2026-09-26 11:53"네가 말한 거 발변 못하겠어 애니메이션 적용된 보고서로 써"모션은 글 설명이 아니라 움직이는 증거로
2026-09-27 02:32"네가 말한 애니메이션이 보고서 안에서 gif나 mp4 자동재생으로 보이게 해"보고서에 mp4 자동재생
2026-09-27 04:00"아직도 안쪽에 링 고리 빛이 없는 부분 있어. 세상 최고의 웹사이트, 현존 최고모델의 실력을 최대한 보여달라고 했잖아"사소한 결함(빛 끊김)도 기준 미달로 본다
2026-09-27 04:25"호패도 싹 다 갈아엎고 / 링도 아직 안맞고 / 알아서 모든 내용이 9/10 달성해. 그 과정에서 새 기느응ㄹ 추가해도 좋고 추가조사도 좋고 수단방법 가리지마"9/10 목표, 수단 불문
2026-09-27 04:58(Threads 링크 https://www.threads.com/@choi.openai/post/Dds-wTojzBk) "내가 아까는 사례를 너무 조금만 줬는데 이렇게 새로운 사례들이 쏟아지고 있어. 모션그래픽스 관련도 많아. 이걸 웹에서 구현하는 건 우리와 다를게 없어. 그러니 우리에 맞게 끝내주게 몰입감 넘치게 내가 이세션의 모델을 opus 5.5로 새로운 모델로 방금 바꿨으니까 네가 보여줄 수 있는 성능을 최대한 발휘해서 싹 다 갈아엎어봐"Three.js · 모션그래픽스 · 코드만으로 만든 결과물을 기준 사례로 제시
2026-09-27 05:46"계속 9점 될 때까지 다 해"자기 채점 반복
2026-09-27 06:42"멈추지 말고 끝까지 다 해 그리고 이거 구려 이것도 9까지 다 해"중간 보고로 멈추지 말 것
2026-09-27 07:41 / 11:50"컴에 갤럭시 s9+ 연결해놨으니까 거기서 테스트 해" / "삼성 브라우저 테스트 해"실기기 검증이 기준
2026-09-27 13:17"처음 스크롤 내리면 가만있다 스크롤 중간 이후부터 배경 모션 시작돼"스크롤 시작 직후부터 반응해야 함
2026-09-27 13:36"컨텐츠 개선에 맞춘 시각화 모션도 다 해"모션은 콘텐츠 의미에 맞춰야 함
2026-09-30 19:14"아얘 전체 페이지를 수묵이나 붓 느낌 더 살려. 직업이나 소속 모양이나 애니메이션도 마찬가지 다 포함, 효과나 모션들도"일부 화면이 아니라 전체 톤 통일
2026-10-03 02:57"해당 모션 화면 재생 안되는 거 모바일 제약 때문?"모바일에서 안 도는 것을 즉시 문제로 제기
2026-10-03 03:09"다 해, 잔잔말고 다 만든의도 다 드러나게"동작 줄이기 무시, 잔잔한 대체판 금지(C절 참조)
2026-10-03 04:02(Instagram https://www.instagram.com/p/Ddcnvz6EhX2/?img_index=2&stkn=MTFuYjYycTNtZWIxMA==) "여기 참고해서 더 본받을 점 하나씩 봐서 적용해"레퍼런스마다 본받을 점 1개씩 뽑아 즉시 적용
2026-10-03 04:24"모션 영상으로 녹화해서 보고서에 추가해. 같은 내용에 예전 영상 있는 기존 보고서 갱신하고 없으면 새로. 보고서 내용 순서는 사용자가 경험하는 순서대로"보고서는 사용자 경험 순서
2026-10-03 06:02"내가 말한 붓그림 연출은 훨씬 화려하게 해달라는 요청이야. 카메라 연출 포함해서. 최대한 화려한 거 네가 직접도 만들고 조사도 하고 브레인스토밍도 하고 반영도 하고 해서 해"카메라 연출 포함
2026-10-03 06:23"너무 평면적이야"평면 페이드/CSS 전이는 불합격. 깊이 있는 연출로
2026-10-03 08:24"지금 붓그림 수준으로 전체 모션 다 새로 만들어"가장 잘 만든 한 장면의 수준을 전체 기준으로
2026-10-03 12:31"우리 각 모션에 맞는 효과음, 음악, 연출, 사운드 추가하고 그것도 보고서에 갱신해"모션마다 소리
2026-10-03 17:45 / 18:52"직업 보여줄 때 엄청 화려하게 아이콘 그리잖아. 그거 완성 후 아이콘 누르면 더시 모션 보여줘." / "모션 중 눌러서 다시 볼 수 있는 건 다 적용해"눌러서 다시 보기
2026-10-04 05:01"계속 아래 팝업 떠 심지어 이 페이지를 나간 후에도"모션/소리가 페이지를 벗어나서 남으면 결함
2026-10-04 16:11(Instagram https://www.instagram.com/p/DeEPgsQkdR3/?img_index=8&stkn=Zms4emk4ZG1rMHN5) "여기 내용 깃헙 들어가서 보고 참고 할 거 하고 적용해"게시물이 소개한 GitHub 저장소의 프롬프트 기법을 가져옴

세션 요약문에 남은 기준 문구(사용자 발화를 요약문이 인용한 것): "세상에서 가장 끝내주는 웹사이트", "시각적 임팩트, 애니메이션, 모션그래픽스 … 9/10 달성할 때까지 계속 개선해", 사용자가 지목한 사례 속성 "Three.js 3D from code, synthesized music/SFX, kinetic typography, self-scoring until ≥8".

별도 지시(멀티모달 검수, 2026-10-03, 메모리에 원문 인용): "네가 멀티모달 검수해 … 영상과 소리가 함께 나왔을 때 멋지고 아름다운지, 우리 세계관에 잘 맞는지 보고 아니면 메타이터레이션으로 9.5/10 될 때까지 고쳐".

공썸 적용 시 주의: 위 "9/10", "끝내주는" 기준은 무협환생기에 준 것이다. 공썸 랜딩에 같은 점수 기준을 쓸지는 사용자 확인 사항(미확인).


B. 레퍼런스 사이트 · 게시물 목록

B-1. 사용자가 직접 준 링크 3건 (세션이 읽고 정리한 내용)

1) Threads @choi.openai 「Opus 5.5 놀라운 사례 25가지」 — https://www.threads.com/@choi.openai/post/Dds-wTojzBk (jsonl 12688~12691에서 페이지 텍스트 확인)

게시물 본문에서 모션/웹과 직접 관련된 항목(원문 요약):

세션이 얻은 교훈(jsonl 12665): "스레드 글의 지적이 정확합니다. 제가 한 건 기존 화면에 CSS 전이를 덧댄 폴리시였지, 구성한 모션이 아니었습니다." CSS 전이를 덧대는 것과 "장면을 연출하는 것"을 구분한 것이 가장 큰 전환점이다.

2) Instagram 게시물 Ddcnvz6EhX2 — https://www.instagram.com/p/Ddcnvz6EhX2/ (jsonl 23146~23707)

캡션: "댓글에 아무글이나 써주시면 웹사이트 링크 정리해서 DM으로 바로 쏴드릴게요! #웹디자인 #바이브코딩". 사이트 7곳은 두 번째 장의 20초 영상 안에 있어, 세션이 영상을 받아 1초 간격으로 장면을 읽었다. 세션이 정리한 "본받은 점"(jsonl 23707 최종 보고 표):

사이트본받은 점(세션 정리)무협환생기에서의 적용
60fps.design (https://60fps.design, 접속 200 확인됨)항목마다 번호를 매겨 모으는 재미「121가지 생업 가운데 제91호」
SEE + SAW이름 밑의 한 줄 설명직업 띠에서 가리키면 한 줄 설명
recent.design위쪽 알약(필터 칩)으로 걸러 보기직업 띠 위 알약 필터
큰 글자 포스터 갤러리포스터 한 장으로 끌어들이기견본 링크를 큰 글자 포스터로
Refero예시를 누르면 바로 시작「이런 생일이면?」 예시 3개, 누르면 즉시 실행
UX Pattern Archive해시태그 꼬리표결과 이름 아래 #태그
Siteinspire「20시간 전」 같은 시간 표시「3일 전 만남」

세션이 7곳을 직접 열어 봤다고 했으나 최종 보고에 URL 전체가 적혀 있지 않다. 60fps.design 외 6곳 링크는 미확인(영상 속 이름만 확인).

3) Instagram 게시물 DeEPgsQkdR3 에서 GitHub 저장소로 — https://www.instagram.com/p/DeEPgsQkdR3/ (jsonl 30315~30749)

캡션에 링크가 없어 세션이 GitHub에서 찾았다: zhuyansen/awesome-opus-5.5-video (원조 프롬프트 영상 @stephanlivera, @shneural 등을 모은 곳, 1,299건, 프롬프트 첨부 335건). 그중 실제 쓸 만한 것은 @twoclipping 「Code-based UI motion design showreel」 프롬프트(jasonzhu.ai 프롬프트 라이브러리에 전문 있음, 조회 96.1만 · 저장 1.96만). 세션이 가져온 기법(jsonl 30749):

B-2. 세션이 조사한 「끝내주는 웹사이트」 보고서 (2026-09-17, 81곳 중 모션과 관련된 것)

출처: design-showcase-2026-09-17/index.html. Awwwards · CSS Design Awards · FWA 수상작, Siteinspire · Minimal Gallery · Dark Mode Design · httpster · One Page Love 큐레이션, Typewolf · Fonts In Use, 한국(디비컷)·일본(MUUUUU)에서 골랐다. 첫 화면은 헤드리스 크롬 1440x900으로 직접 캡처했고 섬네일은 thumbs\ 폴더에 있다. 개별 링크 URL은 보고서 HTML의 각 카드에 있다(본 정리에는 이름·등록 정보만 인용).

모션·인터랙션 관점에서 뽑을 만한 것(보고서의 "어디가 좋은가" 인용):

사이트등록보고서의 좋은 점기법
L.I.S.A.Awwwards SOTD 2026-09-16흑백 두 색만으로 대비 극대화, 3D 모델과 대화형 UI 결합WebGL · Blender · GSAP
White DesertAwwwards SOTD 2026-09-11두 색으로 광활함·고요함, 풀스크린 사진·영상을 스크롤에 맞춰 부드럽게 전환Next.js · GSAP
CerebriumAwwwards SOTD 2026-09-10WebGL 3D 지구본 + 스크롤 연동 포스필드로 딱딱한 제품을 드라마틱하게WebGL · GSAP · Lottie
Trevor NoahAwwwards SOTD 2026-09-03강한 색 대비, 표현력 있는 타이포, 스크롤 스토리텔링으로 투어·팟캐스트를 엮음Webflow · WebGL
Léo ParpeixAwwwards SOTD 2026-09-14실험적 화면 전환과 마이크로인터랙션, 스크롤할 때마다 다음 화면 기대WebGL
Farm MineralsCSSDA WOTD 2026-09-16손그림 일러스트 + 스크롤 트리거 애니메이션으로 소재를 비주얼 스토리로스크롤 트리거
Khanh NguyenCSSDA WOTD 2026-09-15타이포가 주인공, 절제된 인터랙션 하나하나에 의도인터랙션 중심
Heron AICSSDA WOTD 2026-09-12복잡한 워크플로를 스크롤 모션으로 단계별 시각화스크롤 트리거
Colonia ZacamilCSSDA WOTD 2026-09-08손그림 + WebGL로 따뜻하고 참여적인 성격WebGL · 일러스트
BUNQ LABSCSSDA WOTD 2026-09-07영상·사운드·WebGL을 층층이 겹침WebGL · 영상·사운드
A24 Disc ArtFWA FOTD 2026-09-17필모그래피를 레코드판 넘기듯 3D 디스크로, 클릭이 숨은 이야기를 연다3D 인터랙션
See What Eye SeeFWA FOTD 2026-09-15슬라이더 하나로 시각 장애를 체험, 감정 건드리는 카피 + 디스토션실시간 디스토션
Spyker CarsFWA FOTD 2026-09-11스크롤이 하루의 시간(아침, 오후, 밤)을 움직이는 내러티브스크롤 시간 전환
Jack & JillSiteinspire 2026-09-15좌우 대칭 2단으로 두 축 기능을 한눈에 구분다크 마케팅
PearSiteinspire 2026-09-12한 문장을 화면 곳곳에 반복해 카피 자체를 그래픽으로타이포
OnœraMinimal Gallery 2026-09-17'Return to yourself' 한 줄 + 내비 4개로 명상적 여백타이포·여백
Studio ElektrokidDark Mode DesignCH 01~07 챕터 구조로 스크롤을 트랙리스트처럼챕터형 스크롤
Pablo MiguezDark Mode Design설명 대신 드래그로 만져 보게 함GSAP · 드래그
WeekSyncOne Page Love 2026-09-16오버사이즈 타이포 · 점선 테두리 · 모노스페이스 악센트스크롤 애니메이션
Locker LandOne Page Love 2026-09-14만화체 일러스트 · 기울어진 카드로 서비스를 놀이공원처럼 경쾌하게롱스크롤 · 일러스트
Weekend Max Mara Tuscan Journeydbcut · Awwwards SOTD 2026-09-13스크롤 자체가 짧은 영화WebGL
유한양행 100주년 역사관dbcut 2026-09-14열 개 챕터 타임라인 스크롤, 제품 카드와 서사 교차챕터형 스크롤 · 영상
World Cup 2026 Team OsmoWebflow Showcase4시간 만에 만든 GSAP + Spline 3DWebflow · GSAP · Spline

운세·캐릭터·결과카드 계열(공썸의 "사람 소개 카드"와 구조가 닮은 것):

사이트보고서의 좋은 점 / 세션의 "가져올 점"
Co-Star결과가 밈처럼 캡처하고 싶은 한 줄 카피 카드. 입력은 3단계로 극단적으로 단순. 가져올 점: 결과의 글 밀도를 낮추고 한 줄 카피 중심
CHANI리소그래프 질감의 손그림 도형, 차분하지만 확신 있는 무드. 첫 화면 신뢰감
Nebula짧은 퀴즈, 상담사 카드, 채팅으로 이어지는 퍼널형 온보딩
16Personalities별명 + 큰 캐릭터 일러스트 + 같은 유형의 유명인. 퍼센트 바로 스펙트럼 시각화
푸망 / 스모어결과를 정사각 공유 카드로 압축, OG 이미지 자동 생성(공유 썸네일이 곧 결과 카드)
Picrew파츠를 클릭 조합해 즉시 캐릭터 완성
罗小黑战记2 (일본 공식)인물을 한 명씩 순차 공개하는 티저, 서스펜스
원신 / 스타레일 / 젠레스소속별 필터 그리드, 소속 색으로 카드 배경 구분, 클릭 시 대형 일러스트 + 속성 아이콘 + 대사 한 줄
观夏 To Summer상징 하나(팔각창)를 전체에 반복
국립고궁박물관 온라인뮤지움어보(인장)를 고해상도 카드로 확대 감상

보고서의 종합 결론("세 갈래에서 반복된 것"): 어워드 수상작은 두세 가지 색의 극단적 팔레트 + 큰 타이포 + WebGL·GSAP 스크롤 모션이 기본값이고, 인터랙션 자체가 서사 장치다(스크롤이 하루의 시간을 움직이고, 슬라이더가 시각을 바꾸고, 클릭이 숨은 이야기를 연다). 큐레이션 갤러리는 반대로 극단적 여백 미니멀과 다크 챕터형 스크롤 두 축. 한·일 갤러리는 정보 구조 정돈과 브랜드 스토리텔링에 무게가 있고 비주얼은 신뢰감 있는 톤이다. 세션이 우리 쪽으로 꼽은 것은 "챕터형 스크롤로 긴 서사를 지루하지 않게"와 "한 문장 카피를 그래픽으로 반복".

한계(보고서 자체 기재): Godly · Land-book · Refero · Mobbin 등은 JS 렌더링/403으로 목록을 못 읽었다. 일부 캡처는 WebGL·봇 차단으로 실패.

B-3. 세션이 별도로 조사시킨 모션 기법 (2026-09-17, 소넷 3갈래, jsonl 4672/4685/4698)

서브에이전트가 검색 스니펫 위주로 확인한 링크가 많다(각 보고에 명시).

B-4. 세션이 만든 연출 원칙 문서 (구현 쪽 레퍼런스)

docs\motion-direction-2026-10.md가 정리한 "붓그림 수준의 조건" 8항(공썸에도 번역 가능):

  1. 실제 공간(평면 페이드가 아닌 깊이)
  2. 목적 있는 카메라(다가가기·쫓기·물러나기 각각 이유)
  3. 서사의 박자(준비, 고조, 정적, 일격, 공개, 착지)
  4. 소재의 물성
  5. 세계관 개념 하나가 뼈대
  6. 소리
  7. 실기기 60fps, 동작 줄이기 무관
  8. 실패해도 결과는 나온다(WebGL 없으면 2D로 물러섬)

이 외 모션 조사 3건(Black Myth 오공 컷신 문법, 실시간 3D 수묵 NPR 셰이더, 모티프별 붓 연출)은 jsonl 12000~13000대 서브에이전트 보고에 있으나 무협 소재 전용이라 본 정리에서는 읽은 범위(발췌)만 참고했다. 카메라 문법·정적(0.5초 멈춤) 아이디어만 D절에 반영.


C. 무협환생기가 실측으로 얻은 모바일 성능 원칙

실측 환경: 갤럭시 S9+(Android), Chrome 및 삼성 인터넷, adb + CDP 원격 제어. PC 녹화는 --use-angle=d3d11 --enable-gpu일 때 61fps, 스위프트셰이더는 6fps라 녹화 환경 차이가 컸다. 출처: 세션 요약(jsonl 20551, 25402, 30392), ink3d-kit.mjs·motion-direction 주석.

#원칙근거(실측/코드)
1휴대폰 2D 캔버스는 willReadFrequently:true로 CPU 메모리에 둔다. GPU 캔버스를 되읽으면 삼성 인터넷이 프레임당 50~100msink3d-kit.mjs 머리 주석(canvas2d)
2노이즈·종이 결은 런타임 계산 금지, 텍스처로 한 번 굽는다(256x256 다옥타브 값 노이즈를 한 번)noiseTexture()
3pixelRatio는 모바일 1.1 이하(세션 중 1.1~1.35 사용), 안티에일리어싱 끔, 데스크톱도 1.5 상한makeRenderer(), 세션 요약
4셰이더·텍스처는 쓰기 전에 미리 데운다(renderer.compile)세션 요약 "Pre-warm"
5붓글씨 글리프는 미리 한 번 그려두고, 강제 레이아웃을 일으키지 않는다(Web Animations)motion-direction
6부팅 중 모션은 컴포지터 애니메이션(WAAPI의 transform/opacity)으로. 메인 스레드가 바빠도 안 끊긴다. 소리는 애니메이션의 실제 startTime에 맞춤세션 "Kaian janky during boot"
7큰 2D SVG 무대는 느렸다(갤럭시에서 33ms, 0.4초 끊김). 캔버스 렌더링으로 옮겨 16.7ms세션 요약 25402
8삼성 인터넷은 중앙값 16.7ms여도 p95 100ms · p99 117ms 끊김이 남을 수 있다. 평균이 아니라 p95로 판단. 대응안: 먹 텍스처 512, 산 셰이더 옥타브·링 수 축소, 안개 평면 축소, pixelRatio 1.2gxth4.py 측정(25402)
9덮는 화면 아래에서는 페이지를 숨기고, 결과 교체·첫 페인트는 "정적(hush)" 구간에서 한다. 정적 동안은 CSS 호흡 애니메이션이 메인 스레드와 무관하게 돈다. lazy content-visibility는 전환 구간에서만세션 "Rebirth stalls"
10화면 밖이면 그리지 않는다(IntersectionObserver). 배경은 해상도 절반 · 초당 30장만. 도는 빛이 멈추면 굳어 보이므로 장식 루프는 계속 돌린다ring-gl.mjs, backdrop.mjs 주석
11IntersectionObserver는 잘린 카드에서 안 터질 수 있다. threshold 0 + rootMargin세션 "IO never fired on clipped cards"
12WebGL 층은 점진적 향상: 기존 2D가 먼저 즉시 뜨고 3D는 뒤에서 불러와 덮는다. WebGL이 없거나 실패하면 아무 일도 안 일어난다. 3D는 값을 읽는 일을 맡지 않고 장식만(접근성 라벨은 기존 DOM이)gangho3d.mjs, ring-gl.mjs
13three.js는 필요한 클래스만 esbuild로 번들해 고정 버전(0.186.1)으로 vendor: 528KB(gzip 132KB)jsonl 12740~12750
14마우스 전용 모션은 (hover:hover) and (pointer:fine)에서만. 터치에선 스크롤 중 pointermove로 흔들림motion.mjs, 조사 B-3
15소리는 웹오디오 합성만, 녹음 파일 0개. 브라우저가 첫 누름 전에는 막으므로 첫 탭/키에서 시작, 숨겨진 탭에서는 suspend. 마스터 체인은 하이패스 32Hz + 리미터(-5dB, 20:1)sound.mjs
16폰트가 다른 글자를 먹는 사고: 한자 폰트가 한글을 덮음. 폰트를 유니코드 범위로 제한. 폰 메모리가 부족하면(여유 326MB, 스왑 1.6/2GB) 다른 앱이 원인일 수 있어 사이트 쪽은 숨김 탭 오디오 suspend로 대응세션 요약 30392
17검수 방법: 실기기 + 두 브라우저. 영상은 CDP 스크린캐스트로 실제 타임스탬프를 받아 60fps mp4로. 소리는 __sndLog로 실제 난 소리를 기록해 같은 합성기로 오프라인 렌더해 입힘. 검수판은 사건 시각 프레임, 스펙트로그램, LUFS, 클리핑, 청감 대역multimodal-av-review.md

"동작 줄이기 무시" 결정과 공썸 적용 시 주의


D. 공썸 랜딩에 옮길 모션 기법 후보 (16개)

전제: 공썸 = 골프 좋아하는 싱글 소개·매칭. 톤은 밝음 · 설렘 · 신뢰. 주 사용자 30~50대, 휴대폰. 아래 섹션 구성(히어로, 서비스 소개, 소개 흐름, 신뢰/안전, 후기, 가입 CTA)은 내가 가정한 일반 랜딩 구조이며 실제 공썸 랜딩 구성안은 미확인이다. 근거 레퍼런스는 A~C절에서 확인한 것만 적었다. "모바일 비용"은 무협 실측 원칙(C절)과 일반 웹 지식을 근거로 한 추정이며 실기기 검증 전 단정할 수 없다.

#기법섹션근거 레퍼런스구현모바일 비용
1붓 한 획 대신 "공 궤적 한 획" 히어로 오프닝: 첫 화면에서 골프공 비행 궤적(포물선)이 SVG stroke로 한 번에 그려지고 끝에 홀컵/깃발이 떠오름. 카피는 궤적 뒤 한 줄씩 등장히어로무협 「개안」(kaian: 한 획이 어둠을 가르며 첫 화면 시작), B-3 stroke-dashoffsetSVG stroke-dasharray + WAAPI매우 낮음(경로 1~3개)
2레이어 깊이 패럴랙스(잔디 언덕 3겹 + 구름): 스크롤 첫 픽셀부터 반응(사용자 지적 "처음 스크롤 내리면 가만있다 중간 이후 시작" 방지)히어로무협 gangho3d 층별 속도(대기 원근), 사용자 2026-09-27 13:17 지적animation-timeline:scroll() + IO 폴백, transform만낮음(transform 3~4레이어, 화면 밖 정지)
3설렘 입자: 잔디 위로 떠오르는 꽃잎·반짝임(밝은 톤)히어로 배경무협 backdrop.mjs(꽃잎, 절반 해상도, 30fps)Canvas 2D, 30~50개 상한, willReadFrequently, IO로 화면 밖 정지중간. 해상도 1/2 + 30fps로 제한
4한 줄 카피 순차 등장(한 줄씩 clip-reveal, 마지막 단어 강조 색)히어로 · 섹션 제목Co-Star 한 줄 카피, Pear 반복 카피, 무협 제목 붓질 큐WAAPI clip-path/opacity, 여러 개는 줄세워 한 번에 하나씩낮음
5스크롤 챕터 리듬: 섹션마다 번호(01~05) + 진행 세그먼트, 현재 위치 하이라이트전체 내비Studio Elektrokid CH 01~07, 유한양행 챕터 타임라인, 60fps.design 번호 모으기IO 기반 active + scaleX 진행 바낮음
6"소개 흐름" 한 형태 모핑: 한 개의 카드(프로필, 매칭 요청, 수락, 대화)가 끊김 없이 모양과 내용을 바꾸며 단계를 보여줌. 커서 대신 손가락 터치 아이콘이 누르는 장면소개 흐름@twoclipping 프롬프트 "one shape, never cut", 스프링 오버슈트 최소WAAPI + 닫힌 식 스프링(또는 linear() easing). 카메라가 스케일하는 요소엔 will-change 금지낮음~중간(요소 1개)
7인물 카드 순차 공개(서스펜스): 소개 후보 3명이 한 장씩 뒤집히며 등장, 블러에서 선명으로서비스 소개罗小黑战记2 순차 공개, 무협 두루마리 카드CSS rotateY + backface-visibility, IO 트리거낮음(3장)
8눌러서 다시 보기(Replay): 오프닝 궤적이나 카드 공개를 눌러 다시 재생히어로 · 소개사용자 2026-10-03 17:45 / 18:52, replay.mjs이벤트 위임 + WAAPI 재실행, 버튼·링크 눌림은 건드리지 않음낮음
9"신뢰 확인 배지" 찍힘: 본인 인증 · 사진 확인 · 운영자 검수 배지가 오버슈트 후 착지 + 짧은 번쩍임신뢰/안전무협 인장 찍기, B-3 stamp revealCSS keyframes(scale 1.3에서 1, rotate), 착지 프레임 box-shadow매우 낮음
10숫자 카운트업 + 번호 매겨 모으기: "함께한 라운딩 N건", 항목마다 번호신뢰60fps.design 번호 모으기(세션 적용 사례 「제91호」)IO + rAF 카운트, tabular-nums매우 낮음. 실제 수치만 사용(수치 근거는 공썸 측 확인 사항)
11후기 카드 한 줄 카피 + 해시태그 꼬리표: 후기 카드 하단 #주말라운딩 같은 칩후기UX Pattern Archive 해시태그(세션 적용 사례), Co-Star 한 줄정적 + hover 시 칩 강조없음
12필터 알약(전체 · 지역 · 실력)으로 걸러 보기 + 한 줄 설명서비스 소개/후기recent.design 알약, SEE+SAW 한 줄 설명(세션 적용 사례)칩 토글 + FLIP 재배치(transform)낮음
13예시를 누르면 바로 시작: "이런 분이면?" 예시 칩 3개를 누르면 즉시 결과 미리보기 시작가입 직전Refero 즉시 실행(세션 적용 사례 「이런 생일이면?」)정적 + 이벤트, 진행 상태 WAAPI없음
14마그네틱 CTA + 눌림 scale(.95): 데스크톱만 자석 끌림, 모바일은 눌림 피드백만가입 CTAB-3 마이크로인터랙션, motion.mjs(hover:hover 가드)JS pointermove + rAF 배치, 터치는 :active낮음(포인터 환경만)
15공유용 정사각 소개 카드 + OG 이미지 동기화: 결과/초대 카드를 정사각 이미지로, 카카오 미리보기 썸네일과 동일하게공유/가입푸망·스모어 OG 자동 생성, 세션의 "호패 = OG 썸네일" 적용정적 이미지 + 빌드타임 OG 생성없음(모션은 아니지만 바이럴 요소)
16가벼운 효과음(옵션): 배지 착지 "톡", 카드 공개 "스윽" 정도의 합성음전체무협 sound.mjs(웹오디오 합성, 첫 탭 후 시작, 숨은 탭 suspend), 사용자 2026-10-03 12:31WebAudio 합성(파일 0개), 마스터 리미터낮음. 기본값은 사용자 결정(무협은 켜짐으로 결정, 공썸 일반 사용자엔 미확인)

보류/주의 후보(추천 안 함 또는 조건부):

가져올 "품질 기준" 정리(모션 구현 전에 합의할 것)

  1. 평면 페이드/CSS 전이 덧대기는 "모션"으로 치지 않는다. 장면(서사 박자: 준비, 고조, 정적, 공개, 착지)으로 설계한다.
  2. 모션은 콘텐츠 의미와 연결한다(공 궤적 = 인연의 시작, 배지 착지 = 신뢰 확인).
  3. 모션을 만든 뒤 실기기(갤럭시 Chrome + 삼성 인터넷, 아이폰 Safari)에서 p95 프레임 시간으로 검증한다. 평균 FPS만 보지 않는다.
  4. 모든 장식 층은 점진적 향상: 실패하면 정적 완성 화면이 나와야 한다.
  5. 페이지 이탈 시 타이머·오디오·캔버스 루프를 전부 정리한다.
  6. 모션 영상 보고서는 사용자 경험 순서로, 자동재생 mp4로 첨부한다(사용자 지시 2026-10-03 04:24, 2026-09-27 02:32).

미확인 · 한계 목록