이 질문 뒤에 면접관이 확인하려는 것은 따로 있습니다.
인턴 때 맡은 화면이 네이티브 앱 안에 웹뷰로 삽입된 결제 확인 페이지였습니다. 안드로이드에서는 잘 되었지만 iOS에서 스크롤이 두 번 되는 버그가 있었습니다. 네이티브 팀 개발자에게 물어봤더니 웹뷰의 스크롤 이벤트가 네이티브 컨테이너로 전파되는 문제라고 알려주었습니다.
overscroll-behavior: contain CSS 속성을 적용했더니 안드로이드는 해결되었지만 iOS는 여전했습니다. -webkit-overflow-scrolling: touch도 시도했지만 오히려 악화되었습니다. 결국 자바스크립트로 touchmove 이벤트를 조건부로 막는 방식을 사용하여 해결하였습니다. 사흘이 걸린 이 경험에서 플랫폼별로 웹 표준이 다르게 구현된다는 것을 직접 배웠습니다.
사이드 프로젝트에서 리액트 네이티브 앱에 웹뷰를 넣고 postMessage로 데이터를 주고받는 기능을 구현했어요. 처음엔 메시지 포맷을 JSON으로 정하지 않고 문자열로 보내다가, 웹뷰 쪽에서 파싱을 잘못하는 버그가 반복됐어요. JSON.stringify/parse를 양쪽에서 명확히 쓰도록 규칙을 만들었어요. 웹뷰가 완전히 로드되기 전에 네이티브에서 메시지를 보내서 메시지가 유실되는 문제도 있었어요. 웹뷰가 준비됐다는 신호를 먼저 네이티브에 보내는 handshake 방식으로 해결했어요.
통신 설계를 처음부터 명확히 하지 않으면 양쪽 모두 고쳐야 하는 상황이 생긴다는 걸 배웠어요.
동아리 프로젝트에서 웹뷰 화면을 만들었는데 iOS와 안드로이드에서 폰트 크기와 줄간격이 다르게 보였어요. 같은 CSS를 쓰는데 iOS는 기본 폰트 크기를 시스템 설정에 맞춰 확대하는 게 원인이었어요. -webkit-text-size-adjust: 100% 속성을 써서 고정했더니 iOS도 동일하게 표시됐어요. 또 안드로이드 구형 웹뷰에서 Flexbox 지원이 불완전해서 레이아웃이 깨지는 경우가 있었는데, 그리드보다 Flexbox가 더 구형 브라우저 친화적이라고 알고 있었지만 직접 겪어보니 달랐어요. 결국 해당 화면엔 position 기반으로 바꿨어요.
웹뷰 개발은 실기기에서 직접 확인하는 게 유일한 방법이라는 걸 느꼈어요.
답변에서 흔히 빠지는 것들 — 빠져 있으면 꼬리질문이 깊어집니다.
이 질문에 이어 토스 프론트엔드 면접관이 던질 가능성이 높은 후속 질문.
이 페이지의 질문·답변·꼬리질문은 유사 직군 채용 시장의 공개된 면접 후기·커뮤니티 게시물을 분석해 구성한 학습 자료입니다. 특정 회사가 실제로 이 질문을 출제했다는 것을 보장하지 않으며, 모든 예시는 우문현답이 직접 작성한 창작물입니다. 해당 회사의 공식 입장과는 무관합니다. 회사 측의 정정 요청이 있을 경우 24시간 이내에 응답·수정합니다.