[Fix/#102] PWA에서 챗봇 입력창을 누르면 화면이 확대되는 문제 수정

[xeoxxn]

#️⃣연관된 이슈

• Closes PWA에서 챗봇 입력창을 누르면 화면이 확대되는 문제 #102

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

PWA에서 챗봇 입력창을 탭하면 화면이 자동으로 확대되고, 입력을 끝내도 원래 배율로 돌아오지 않는다. 확대된 채로 남아서 이후 모든 화면이 잘려 보인다.

iOS Safari는 focus된 입력 요소의 computed font-size가 16px 미만이면 화면을 자동 확대한다. 챗봇 입력창은 Figma body2(15px)를 그대로 옮긴 값이라 이 조건에 걸렸다.

• src/features/chat/components/ChatInput.tsx:32 — text-[0.9375rem] (15px)

일반 브라우저 탭에서는 입력을 마치면 다시 축소되지만, standalone PWA에는 주소창이 없어 배율을 되돌릴 방법 자체가 없다. 그래서 같은 코드인데도 PWA에서만 치명적으로 보인다.

❓ 왜 해결해야 하나요?

챗봇은 입력이 주된 동작인 화면이다. 질문을 한 번 보낼 때마다 화면이 확대되고 복구가 안 되니, 사실상 챗봇을 한 번 쓰면 앱을 다시 켜야 한다.

⭐ 어떻게 해결했나요?

입력창 글자 크기만 16px로 올렸다.

- text-[0.9375rem]
+ text-base

line-height는 22px 그대로라 입력창 높이(52px)와 전체 레이아웃은 변하지 않는다 — 실측으로 확인했다.

왜 16px밖에 방법이 없는가

iOS가 확대를 거는 조건은 "focus된 입력 요소의 computed font-size < 16px" 하나뿐이다. 16px로 올리면 조건 자체가 사라져서 확대가 애초에 일어나지 않는다. 나머지 방법은 전부 확대가 일어난 뒤를 수습하려는 접근이라 부작용이 따라온다.

대안	왜 안 되는가
user-scalable=no / maximum-scale=1	iOS 10부터 Safari가 접근성을 이유로 무시한다. 동작이 보장되지 않고, 설령 먹더라도 저시력 사용자의 핀치 줌까지 막는다
transform: scale(0.9375)	15px처럼 보이게는 되지만 커서 위치·텍스트 선택 영역이 실제 글자와 어긋난다
터치 기기 전용 미디어쿼리	동작은 하지만 실기기에서 보이는 크기는 결국 16px이라 "디자인을 지켰다"가 성립하지 않는다. 분기만 늘어난다

16px은 iOS가 요구하는 하한선이라, 이건 디자인을 어기는 게 아니라 플랫폼 제약에 맞추는 쪽에 가깝다. 15 → 16px 차이는 거의 보이지 않는 반면 확대는 바로 눈에 띄고 복구도 안 된다.

왜 이 값이 Figma와 다른지는 코드 주석에 남겼다.

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

• 챗봇 입력창 텍스트가 Figma body2(15px)보다 1px 크다. /figma-check에서 불일치로 잡힐 자리라 주석으로 이유를 박아뒀다.
• 이 PR은 챗봇만 고친다. 아래 "리뷰 포인트"에 적은 행사 신청 화면은 담당이 달라 건드리지 않았다.
• 이 저장소엔 아직 manifest도 apple-mobile-web-app-capable도 없다(public/엔 favicon.svg 하나뿐, vite-plugin-pwa 미사용). PWA 설정 자체는 별개 작업으로 남아 있다.

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

• 챗봇 입력창 글자 크기만 바뀐다. line-height가 그대로라 입력창 높이(52px)·너비(335px)·전송 버튼 위치 모두 그대로다.
• 다른 화면은 건드리지 않았다.

🔀 Edge Case & 실패 시나리오

앱 전체 입력 요소의 computed font-size를 브라우저에서 전부 실측했다.

화면	요소	크기
챗봇	input[text]	15px → 16px	✅ 이 PR에서 수정
행사 신청	input[text] "기타 내용을 입력해 주세요."	14px	⚠️ 남아 있음
전화번호 변경	input[tel] (WDS TextField)	16px	✅
의견 작성	textarea	16px	✅
행사 신청	textarea	16px	✅

WDS TextField와 textarea는 이미 16px이라 문제가 없다. 직접 만든 <input> 두 개만 해당한다.

📋 검토한 대안과 선택 이유

위 "왜 16px밖에 방법이 없는가" 표에 정리했다.

두 입력창을 한 PR에서 같이 고치는 것도 검토했지만, 행사 신청 화면은 담당자가 따로 있어 판단을 넘기는 쪽이 맞다고 봤다.

💬 리뷰 포인트

• [r] @sangrae2325 행사 신청 화면에 같은 문제가 하나 더 있습니다. EventsQuestionField.tsx:148의 "기타" 직접 입력칸이 14px이라 똑같이 iOS에서 확대됩니다. "기타" 체크박스를 켜야 나타나는 입력칸이라 평소엔 안 보이는데, 체크한 뒤 실측해서 확인했습니다. 담당 범위라 건드리지 않았으니 확인 부탁드립니다 — 고치는 방법은 이 PR과 같습니다(text-[14px] → text-base, line-height는 유지).
• [c] 챗봇 입력창이 Figma body2(15px)에서 16px로 1px 커집니다. 디자인상 받아들일 수 있는지 확인 부탁드립니다. 위에 적은 이유로 이것 말고는 확대를 막을 방법이 없습니다.

[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: f8e8a28c-baf3-493b-9fc9-2e44ea3b40e8

• 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.}