웹뷰 앱에 AI 채팅을 붙일 때 확인할 3가지

앱을 웹뷰로 만들어 두면 화면 대부분을 웹 코드로 관리할 수 있어서 수정이 빨라요. 그래서 "AI 채팅도 웹 화면에 하나 더 붙이면 되겠지"라고 생각하기 쉬워요. 그런데 막상 붙여 보면 브라우저에서는 잘 되던 채팅이 앱 안에서는 답이 중간에 멈추거나, 키보드가 입력창을 가리거나, 뒤로 가기를 누르면 앱이 통째로 닫히는 일이 생겨요.

웹뷰(WebView)는 앱 안에 넣은 작은 브라우저예요. 브라우저와 거의 같지만, 앱이 화면 크기 · 키보드 · 뒤로 가기 버튼을 함께 쥐고 있다는 점이 달라요. AI 채팅 앱 개발에서 이 차이가 드러나는 세 곳을 순서대로 정리했어요.

1. 스트리밍 답변이 끊기지 않게 해요

AI 채팅은 답이 다 만들어질 때까지 기다리지 않고, 만들어지는 대로 조금씩 보여 주는 스트리밍 방식이 기본이에요. 원리와 이벤트 처리는 스트리밍 응답 글에서 다뤘으니, 여기서는 웹뷰에서만 생기는 일만 짚을게요.

앱이 뒤로 갔다 돌아올 때: 사용자가 답을 기다리다 다른 앱을 보고 오면 연결이 끊길 수 있어요. 화면으로 돌아왔을 때 마지막 메시지 상태를 서버에서 다시 받아 오도록 만들어 두면 답이 반쯤 잘린 채 남지 않아요.
재시도 버튼: 연결이 끊긴 답에는 "다시 받기" 버튼을 붙여요. 같은 질문을 처음부터 다시 보내는 것보다, 끊긴 대화 번호로 이어 받는 쪽이 비용과 시간 모두 아껴요.
API 키는 앱에 넣지 않아요: 웹뷰 안의 코드는 사용자가 꺼내 볼 수 있다고 보고, AI 호출은 항상 우리 서버를 거치게 해요.

2. 키보드 · 입력창 · 뒤로 가기를 앱처럼 맞춰요

채팅 화면은 아래쪽 입력창이 핵심이라, 키보드가 올라올 때 문제가 가장 먼저 보여요.

증상	확인할 곳
키보드가 입력창을 가림	안드로이드는 화면이 키보드만큼 줄어들게 설정했는지, 웹 쪽은 화면 높이 단위를 고정값으로 쓰지 않았는지
새 답이 와도 아래로 안 내려감	메시지가 추가될 때 마지막 줄로 스크롤하는 코드
뒤로 가기를 누르면 앱이 닫힘	웹뷰에 이전 페이지가 있는지 먼저 확인하는 코드

안드로이드 공식 문서는 웹뷰가 자체 방문 기록을 가지므로, 뒤로 가기를 눌렀을 때 canGoBack()으로 이전 페이지가 있는지 먼저 보고 있으면 goBack()으로 돌아가라고 안내해요. 채팅 화면이 웹 안의 한 페이지라면, 뒤로 가기가 앱 종료가 아니라 이전 화면으로 이어지게 해 두는 것이 사용자가 기대하는 동작이에요.

또 하나, 안드로이드 웹뷰는 자바스크립트가 기본으로 꺼져 있어요. 채팅 화면은 거의 자바스크립트로 움직이니, 설정에서 켜 두었는지 처음에 확인해요.

우리 회사 자료로 직접 확인해 보고 싶다면AI 도입 진단 · 자료를 보고 적용 후보와 순서를 정리해 드려요상담 신청

3. 웹과 네이티브의 경계를 먼저 정해요

AI 채팅은 화면 대부분을 웹에서 그리는 게 수정이 빨라요. 다만 사진 첨부, 알림, 결제처럼 기기 기능이 필요한 순간에는 웹이 앱에 "이것 좀 해 줘"라고 신호를 보내야 해요.

안드로이드: 웹의 자바스크립트가 앱 코드를 부르는 연결 통로(addJavascriptInterface)를 만들 수 있어요. 공식 문서는 우리가 직접 만든 페이지에서만 쓰라고 경고해요. 외부 링크가 웹뷰 안에서 열리면 그 페이지도 앱 기능을 부를 수 있기 때문이에요.
iOS: 웹 쪽에서 window.webkit.messageHandlers.이름.postMessage()로 메시지를 보내고, 앱은 WKScriptMessageHandler로 받아요.

저희는 인앱 결제와 웹뷰 안의 PG 결제창을 구현해 보면서, 어떤 화면을 웹이 맡고 어떤 동작을 앱이 맡는지 표로 먼저 나눠 두는 것이 가장 도움이 됐어요. AI 채팅도 같아요.

정리하면, 대화 화면과 답변 표시는 웹이, 사진 · 알림 · 결제처럼 기기에 닿는 동작은 앱이 맡도록 경계를 먼저 그어 두세요. 경계가 정해지면 웹 쪽 화면은 서버 배포만으로 고칠 수 있어서, 앱을 새로 내는 횟수가 줄어요.

붙이기 전 체크리스트

AI 호출은 우리 서버를 거치고, API 키는 앱에 없어요
끊긴 답은 다시 받을 수 있어요
키보드가 올라와도 입력창과 마지막 답이 보여요
뒤로 가기가 이전 화면으로 이어져요
웹이 앱 기능을 부르는 통로는 우리 페이지에서만 열려요

참고

Android Developers, Build web apps in WebView: https://developer.android.com/develop/ui/views/layout/webapps/webview
Apple Developer, WKScriptMessageHandler: https://developer.apple.com/documentation/webkit/wkscriptmessagehandler

#AI채팅앱개발 #웹뷰 #WebView #하이브리드앱

매주 무료 AI 업무팁, 인스타에서 먼저 받아 보세요카드뉴스 · 짧은 영상으로 정리해요 · @sol_ai_kr팔로우

비슷한 시스템을 만들고 싶다면

기존 시스템과 데이터를 보고 옮기는 순서와 범위를 먼저 정리해 드려요.

개발 상담 먼저 3분 AI 도입 자가진단으로 적용처를 찾아보세요 →