모바일 환경에서의 반응형 디자인을 구현한 경험에 대해 설명해 주세요.

모바일 웹뷰 기반의 개발 경험에 대해 구체적으로 설명하겠습니다.

처음 웹뷰 개발을 했을 때 가장 당황스러웠던 것은 브라우저에서는 멀쩡한 화면이 앱 안에서는 레이아웃이 깨지는 것이었습니다. position: fixed로 작성한 하단 버튼이 앱에서 키보드가 올라오면 가려지는 현상이 발생했습니다. 처음에는 그 이유를 몰라서 한 시간 이상 CSS만 수정하다가 결국 해결하지 못했습니다.

팀원에게 물어보니 iOS 웹뷰에서 키보드 이벤트 처리가 브라우저와 다르다는 사실을 알게 되었습니다. visualViewport 관련 이슈였는데, 만약 이를 그냥 넘어갔더라면 사용자가 버튼을 누를 수 없는 상황이 계속되었을 것입니다. 이후로 웹뷰 작업을 할 때는 꼭 실기기에서 먼저 확인하는 습관이 생겼습니다. 에뮬레이터만 믿으면 안 된다는 것을 몸으로 배운 경험이었습니다.

그 프로젝트 이후로 웹뷰에서 자주 발생하는 패턴들을 팀 노션에 정리하기 시작했습니다. 키보드 이벤트, 스크롤 처리, 앱 브릿지 통신 방식 같은 것들이었습니다. 혼자 겪은 실패가 팀 전체의 삽질 시간을 줄이는 자료가 된 것 같아 뿌듯했습니다.