랜딩 페이지 모바일/좁은 화면 플로팅 UI가 콘텐츠를 가림

[Hyeonjun0527]

요약

테스트 랜딩 페이지에서 하단 고정 얼리버드 CTA, TALK 버튼, TOP 버튼이 좁은 화면/태블릿에서 콘텐츠 흐름을 침범합니다. 같은 fixed 계층 문제가 히어로 카드, 다음 섹션 제목, 본문 섹션, 푸터까지 반복되어 가독성과 클릭 안정성이 떨어집니다.

증거

• URL: https://test.zeroone.it.kr/
• 검증일: 2026-05-26
• 확인 viewport: 390px, 430px, 768px, 1024px, 1440px
• Playwright 측정:
  • 390px viewport: horizontal overflow 189px
  • 430px viewport: horizontal overflow 149px
  • 768px 이상: horizontal overflow 0px
• 이미지 표시 기준: 빨간 박스 번호와 아래 체크리스트 번호가 1:1로 대응합니다.
• Annotated screenshot asset branch: issue-assets/landing-floating-ui-20260526

첨부 이미지

390px 모바일 히어로 영역

430px 모바일 다음 섹션 제목 영역

768px 태블릿 히어로 카드 영역

390px 모바일 본문 섹션 영역

390px 모바일 푸터 영역

사용자가 직접 캡처한 좁은 화면 제목 겹침 영역

빨간 박스 번호별 체크리스트

1. 하단 fixed 얼리버드 CTA가 콘텐츠 흐름을 무시하고 본문을 덮음

• 모바일 390px/430px에서 CTA가 히어로 카드와 다음 섹션 영역을 덮습니다.
• 태블릿 768px에서도 CTA가 히어로 카드 중앙을 크게 가립니다.
• 본문 중간 섹션과 푸터에서도 CTA가 계속 떠 있어 콘텐츠 읽기를 방해합니다.

2. TALK 버튼과 바로 시작하기 버튼의 floating 우선순위/배치가 충돌함

• TALK 말풍선이 바로 시작하기 버튼 위쪽을 침범합니다.
• CTA, 상담, 시작 버튼의 시각적 계층과 클릭 영역이 좁은 화면에서 불명확합니다.

3. TOP 버튼이 CTA/본문 영역과 충돌함

• TOP 버튼이 하단 CTA 바로 아래 붙어서 별도 action으로 분리되어 보이지 않습니다.
• 모바일/좁은 화면에서 다음 섹션 제목 또는 본문 영역을 침범합니다.

4. 다음 섹션 제목이 플로팅 UI에 가려짐

• 두 개의 여정이 만나는 곳 제목이 하단 CTA/TOP 버튼과 겹칩니다.
• 좁은 화면에서는 Check 배지와 제목 일부가 화면 하단에서 잘려 보입니다.

5. 모바일 푸터 레이아웃이 읽기 어렵게 깨짐

• 푸터 정보가 너무 좁은 컬럼으로 쪼개져 읽기 어렵습니다.
• 개인정보처리방침/사업자 정보 등이 한 글자씩 세로로 떨어져 보입니다.
• 하단 fixed CTA와 TOP 버튼이 copyright 영역까지 가립니다.

제안 해결 방향

A. 모바일/태블릿 floating action을 하나의 stack 또는 하단 action bar로 통합

• 현재처럼 CTA, TALK, TOP을 각각 독립 fixed 요소로 두기보다 FloatingActionBar 또는 FloatingActionStack 같은 단일 배치 컨테이너에서 관리하는 것을 제안합니다.
• 모바일에서는 얼리버드 CTA를 축약형 하단 bar로 만들고, TALK는 CTA 내부 아이콘 또는 별도 작은 버튼으로 통합하는 방식을 검토합니다.

B. breakpoint별 노출 정책 정의

• <= 767px: TALK 또는 TOP 중 하나를 숨기거나, TOP을 CTA 위로 충분히 띄운 stack으로 배치합니다.
• 768px ~ 1023px: CTA 폭/높이를 줄이고 카드 중앙을 가리지 않도록 초기 위치를 조정합니다.
• >= 1024px: 현재 디자인을 유지하더라도 히어로 카드 및 다음 섹션 제목과 겹치지 않도록 bottom/side offset을 재검토합니다.

C. fixed CTA 높이만큼 safe area 확보

• CTA를 계속 fixed로 유지한다면 주요 섹션과 footer 하단에 CTA 높이 + 여백만큼 padding을 확보합니다.
• iOS safe-area까지 고려해 다음과 같은 구조를 검토합니다.

padding-bottom: calc(var(--floating-cta-height) + env(safe-area-inset-bottom));

D. 모바일 horizontal overflow 원인 제거

• 390px/430px에서 document.documentElement.scrollWidth > window.innerWidth 상태입니다.
• overflow 원인 요소를 추적해 max-width: 100%, flex-wrap, 모바일 column layout 등을 적용합니다.
• 단순 overflow-x: hidden은 원인 해결이 아니라 임시 방어로만 사용하는 것이 좋습니다.

E. 모바일 footer 구조 재정리

• footer는 모바일에서 1열 또는 명확한 2열 구조로 재배치합니다.
• 긴 라벨/값 조합은 좁은 grid column에 넣기보다 block 구조로 전환합니다.

완료 기준

• 390px, 430px, 768px, 1024px에서 CTA/TALK/TOP이 본문 콘텐츠를 가리지 않습니다.
• 두 개의 여정이 만나는 곳 제목이 플로팅 UI에 가려지지 않습니다.
• 모바일 푸터 정보가 한 글자씩 쪼개지지 않고 읽을 수 있습니다.
• 390px/430px에서 가로 스크롤이 발생하지 않습니다.
• Playwright 또는 브라우저 콘솔 기준으로 아래 조건이 통과합니다.

document.documentElement.scrollWidth <= window.innerWidth