[Fix/#104] iOS에서 입력칸을 누르면 화면이 확대되는 문제 수정

[sangrae2325]

#️⃣연관된 이슈

• Closes iOS에서 입력칸을 누르면 화면이 확대되는 문제 #104
• [Fix/#102] PWA에서 챗봇 입력창을 누르면 화면이 확대되는 문제 수정 #103(챗봇 입력창 16px)을 대신하는 방식입니다. 이 PR이 머지되면 #103은 필요 없습니다.

🎯 해결하려는 문제가 무엇인가요?

iOS에서 입력칸을 누르면 화면이 자동으로 확대되고, PWA에서는 배율이 원래대로 돌아오지 않아 이후 화면이 잘려 보인다. iOS는 focus된 입력 요소의 글자가 16px 미만이면 확대하는데, 우리 입력칸은 Figma 크기라 조건에 걸린다.

입력칸	Figma 글자
행사 신청 기타 입력칸	Label 1/Reading 14px
챗봇 입력창	Body 2 15px
검색 입력칸	Body 1 16px (조건 밖)

디자이너 요청으로 글자를 16px로 키우지 않고 Figma 크기를 지켜야 한다.

❓ 왜 해결해야 하나요?

입력이 주된 동작인 화면(챗봇·행사 신청)에서 한 번 누르면 화면이 커진 채로 남아, 앱을 다시 켜야 할 정도로 쓰기 어렵다.

⭐ 어떻게 해결했나요?

1. iOS에서만 viewport에 maximum-scale=1 (index.html)

<script>
  if (/iPad|iPhone|iPod/.test(navigator.userAgent) ||
      (navigator.userAgent.includes("Macintosh") && navigator.maxTouchPoints > 1)) {
    viewport.content += ", maximum-scale=1";
  }
</script>

• maximum-scale=1이 있으면 iOS는 입력칸 포커스 시 자동 확대를 하지 않는다. 글자 크기와 관계없이 확대 자체가 일어나지 않는다
• iOS 10부터 Safari는 이 값으로 사용자 두 손가락 확대는 막지 않는다(접근성). 그래서 iOS 사용자의 핀치 줌은 그대로다
• Android Chrome은 이 값으로 핀치 줌이 막혀 접근성이 나빠지므로 붙이지 않는다
• iPadOS는 UA가 Mac이라 "Mac + 터치 지점 2개 이상"으로 함께 판별한다

2. 입력칸 글자를 Typography as="input"으로 통일 (챗봇·검색·행사 기타)

• 세 입력칸이 "<input>은 Typography로 감쌀 수 없다"며 text-[14px]·leading-[…]·tracking-[…]를 직접 박고 있었다. WDS Typography는 as로 태그를 바꿀 수 있어서 입력칸 자체가 WDS 글자 스타일을 받게 했다
• 행사 기타 입력칸은 Figma가 Label 1/Reading(줄 높이 22px)이라 label1-reading으로 맞췄다

입력칸	variant	main 대비 (글자·줄 높이·높이·위치)
챗봇	body2	동일
검색	body1	동일
행사 기타	label1-reading	동일 (자간만 Figma 값 0.203px가 들어감)

3. 문서

• component-convention.md: 입력칸도 Typography as="input"으로 그리고 px 값을 박지 않는다, iOS 확대는 viewport 설정으로 막는다
• wds-component-usage.md: "<input>은 Typography로 못 감싼다"는 행사·검색 설명 수정

🧩 이 PR의 한계 & 트레이드오프

• WebKit 동작에 기댄다. maximum-scale=1로 포커스 확대가 막히는 건 오래 유지된 iOS 동작이지만 공식 사양은 아니라, iOS 업데이트로 바뀔 수 있다
• 앱 WebView(WKWebView)는 이 값을 지켜서 페이지 전체 핀치 줌도 막힌다. 앱에서는 자연스러운 동작이고, 사물함 칸 배치 확대는 자체 핀치라 영향 없다
• PWA 설정(manifest 등)은 아직 저장소에 없다. 별개 작업이다

⛓️ 기존 기능에 미치는 영향

• 입력칸 3곳의 생김새·크기·위치는 main과 같다(실측). 입력·포커스·자동 포커스(ref) 동작도 그대로다
• Android·데스크톱의 viewport는 그대로다

🔀 Edge Case & 실패 시나리오

• iPhone: maximum-scale=1이 붙는다 / Android·데스크톱: 안 붙는다(기기 흉내로 메타 값 확인)
• iPad: 실제 기기는 터치 지점이 5개라 붙는다(브라우저 흉내 환경은 1개로 나와 확인 불가)

📋 검토한 대안과 선택 이유

• 글자를 16px로 키우기([Fix/#102] PWA에서 챗봇 입력창을 누르면 화면이 확대되는 문제 수정 #103 방식) — 확실하지만 디자이너가 Figma 크기 유지를 원했다. 입력칸이 생길 때마다 같은 처리가 필요하다
• 모든 기기에 maximum-scale=1 — 가장 간단하지만 Android 핀치 줌을 막고 접근성 검사에 걸린다
• transform: scale·터치 기기 미디어쿼리 — 커서·선택 영역이 어긋나거나 실기기 크기가 결국 16px이 된다

💬 리뷰 포인트

• [c] index.html의 iOS 판별 스크립트
• [a] 아이폰 실기기 확인: 아이폰 Safari에서 행사 기타·챗봇·검색 입력칸을 눌러도 확대되지 않고, 두 손가락 확대는 되는 것을 확인했다. 앱 WebView에서도 한 번 확인 부탁

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: be8827c5-de2c-477b-b77a-0bc0b98344bd

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}