우하단 플로팅 위젯으로 제휴 문의 접근성 개선

사이트 전역에서 광고·제휴 문의를 받을 수 있는 플로팅 위젯을 추가했다. 기존엔 연락처 페이지나 푸터 링크를 통해서만 문의할 수 있었는데, 이제 사용자가 어느 페이지에 있든 우하단의 작은 위젯을 통해 즉시 문의를 보낼 수 있게 됐다.

왜 플로팅 위젯을 선택했나

서비스를 운영하다 보면 "수익화 채널"을 확보하는 일이 꽤 중요하다. 특히 제휴나 광고 문의 같은 B2B 성격의 문의는 의사결정자(의도 있는 사용자)가 보통 찾아 들어온다. 문제는 그런 문의 채널이 시야에서 벗어나면 그냥 기회 손실이 된다는 것이다.

• 접근성 향상: 페이지 스크롤, 이동과 관계없이 항상 노출되므로 문의 진입 장벽 대폭 감소
• 시각적 신호: 플로팅 요소 자체가 "뭔가 있다"는 신호 전달
• 높은 확률: 사용자 여정 중 어느 지점에서든 제휴 기회를 발견할 가능성
• UX 비침투성: 고정 버튼/위젯이지만 너무 방해되지 않도록 디자인 필요

대안은 있었다. 헤더에 메뉴 추가, 사이드바 배치, 주기적 모달 팝업 등인데, 모두 각각의 trade-off가 있었다. 우하단 플로팅은 "항상 있지만 스킵 가능"하다는 점에서 낮은 거부감으로 높은 노출을 확보할 수 있다.

구현 구조

Astro 기반 사이트라 컴포넌트와 API를 깔끔하게 분리했다. 변경 파일을 보면:

핵심 흐름:
1. 사용자가 우하단 위젯 버튼 클릭
2. 폼 노출 → 문의 입력 (회사명, 연락처, 제안 등)
3. 제출 시 /api/ad-inquiry 호출
4. 서버에서 메일 발송 (담당자에게 알림)
5. 사용자에게 완료 메시지

회고: 플로팅 UI의 미묘한 부분들

한 가지 놓치기 쉬운 점이 있었다. Base 레이아웃에 위젯을 포함시킬 때 렌더링 타이밍이다.

처음에는 단순히 컴포넌트를 넣었는데, 문제는 일부 페이지에서 스타일 충돌이나 z-index 경쟁이 발생할 수 있다는 것이다. 특히:

• 모달, 드롭다운, 사이드바 같은 fixed/absolute 요소들과의 z-index 계층 관리
• 폰트 크기, 색상이 부모 페이지 스타일에 영향받지 않도록 격리
• 모바일 뷰에서 화면 공간 침범 (우하단이 액션 버튼과 겹칠 수 있음)

결과적으로 API 엔드포인트도 단순한 메일 발송을 넘어, 중복 제출 방지, 타임아웃 처리, 에러 로깅 등을 고려해야 했다.

일반적으로 이런 "전역 플로팅 위젯" 패턴은:
- 스타일 캡슐화: 웹 컴포넌트나 iframe 사용으로 외부 스타일 영향 차단
- 조건부 렌더링: 특정 페이지(로그인, 결제 중 등)에선 숨기기
- 접근성(a11y): 스크린 리더 사용자도 폼에 접근 가능하도록 ARIA 속성 추가
- 레이트 제한: 같은 사용자가 1분에 여러 번 제출하는 것 방지

매번 새 기능을 추가할 때마다 느끼는 거지만, 사소해 보이는 UI 요소도 생각할 게 많다. 특히 "전역"에 영향을 주는 것이라면 더더욱.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.