[React] 웹뷰로 앱 개발시 주의 해야할 점(CSS 노치 영역, 줌인 줌 아웃 등 )

진행하고 있는 프로젝트가 결과적으로 개발~배포까지 총 6개월이 걸렸다.

 

웹뷰 형태로 앱을 만들어본 경험이 드물어서 배포 전에 발생했던 문제점에 대해서 정리를 하고자 한다.

 

배포 직전에 다른 사람들 아이폰(내가 테스트한건 iphone SE)를 빌려 했더니 어찌나 많은 문제들이 발생하던지.. 

 

잊지 않기 위해 정리해 보려고 한다.

 

1. zoomIn, zoomOut

WebView를 이용하여 앱을 개발하고, 배포를 하려돈 와중에 해당 문제를 발견했다. 

화면을 줌인, 줌아웃 할 때마다 앱의 화면이 함께 늘어났다 줄어드는 것이다.
ㅎㅎ 웹 일땐 이럴 일이 없었는데..

 

 

해결법은 아래와 같다. 

 

touchAction: 줌인, 줌아웃 이벤트를 막음

userSelect: 더블클릭으로 텍스트 선택을 막음  

import { Stack } from '@mui/material';
<Stack
    flex={1}
    sx={{ overflowY: 'auto', touchAction: 'none', userSelect: 'none' }}>
 	// 컴포넌트 
	<HomeComponent/>
</Stack>

다행히도 css로 편한 해결법이 있어서 금방 수정이 가능했다. 

(추가++)

touchAction: none을 사용하면 내부 스크롤이 없어진다.

touchAction: pan-y 를 사용하면 줌인 줌아웃을 막으면서 스크롤을 사용할 수 있다. 

 

뿐만아니라, React로 개발하고 있기 때문에,  index.html(가장 상위) 파일에서도 수정을 해주었다.

<meta
name="viewport"
content="initial-scale=1.0, 
viewport-fit=cover, 
maximum-scale=1.0, 
minimum-scale=1.0, 
user-scalable=0" 
/>

content 내부 

viewport-fit: cover: 옆의 영역까지 모두 채워줄 경우 

maximum-scale: 최대 사이즈를 1.0으로 지정하여 확대를 막음 

minimum-scale: 최소 사이즈를 1.0으로 지정하여 확대를 막음 

user-scalable: 사용자 크기변화를 0으로 처리해서 크기 변화를 막음 

2. TextField에 커서 클릭시 Zoom-IN 되면서 UI 가 짤리는 현상 (IOS)

우선 발생하는 이유는 폰트 사이즈가 16px 이하면 자동으로 줌인된다고 한다.

 

해결 방법으로는

1. 위에서 설정했던 방법으로 줌인, 줌 아웃을 막을 수 있고, 

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

 

2. font-size를 강제로 지정할 수도 있다.

// 매우 주의
// iOS 에서 16px 이하의 input 에서 자동 zoom 되는 문제가 있어서 조치하였음.
// 다른 모바일을 이용하는 모든 앱에서도 항상 같은 조치가 필요하다.
input: {
    fontSize: '16px !important',
},

<select> <textarea> 태그에서도 마찬가지로 발생한다고 하니 동일하게 처리를 해주어야 한다. 

 

 

3. Safe-Area (IOS)

나를 가장 힘들게 했던 녀석이다.

아이폰에는 노치영역이라고 위-아래, 좌-우로 존재하는데 웹뷰형태로 앱을 만들게 되면 위아래 버튼이 해당 영역에 의해 가려지게 된다.

 

많은 블로거 솔루션이 알려준 env, constant 옵션을 사용했는데 이상하게 먹히지 않았다. 

paddingTop: 'env(safe-area-inset-top)',
paddingBottom: 'env(safe-area-inset-bottom)',

우회 방안으로 isIOS 함수를 만들어, 아이폰인지 아닌지를 판단하고 패딩을 hight의 %로 먹여주는 등 시도를 했었으나

그다지 나이스한 방법은 아니다. 

export const isIOS = () => {
	return /iPhone|iPad|iPod/i.test(window.navigator.userAgent);
};

 

왜? safe-area가 먹히지 않았을까?

원인은 코드 내 height: 100vh 때문 이였다. 

만약 env safe-area-inset-top 이 먹히지 않는다면, 혹시 코드 내 height: 100vh를 쓰고 있는지 잘 찾아봐라..  

height: 100vh -> height: 100%로 수정이후 safe-area가 정상적으로 동작했다. 

 

 

4. 클립보드 복사 기능 (Android)

주소 복사 기능을 넣기위해서 아래와 같이 사용했다.

웹과 IOS에선 정상적으로 동작하였으나, 안드로이드에서 정상적으로 되지 않았다. 

(마치 계속 버튼을 누르고 있는 상태로 유지되었다.)

navigator.clipboard.writeText(text).then(() => {
    alert(`주소 복사가 완료되었습니다.`);
});

 

해결법은 아래와 같다.

const element = document.createElement('textarea');
element.value = text;
element.setAttribute('readonly', '');
element.style.position = 'fixed';
element.style.opacity = '0';
document.body.appendChild(element);
element.select();
const copyValue = document.execCommand('copy');
document.body.removeChild(element);
alert(`주소 복사가 완료되었습니다.`);

임의의 textarea를 만들고, 텍스트를 넣는다.

사용자가 select 할 수 있는 상태로 만들고 클립보드에 복사한다. 

 

 

드디어 성공했다! 

---

 

그 외에도 지금
1. IOS 에서 외부 결제 API를 이용하는 페이지에 Safe-area가 먹히지 않는 현상,

 

현상이 남아있다. ㅠ

 

 

 

 

 

Reference 

https://nuli.navercorp.com/community/article/1132729

viewport 정리

https://devsoyoung.github.io/posts/ios-input-focus-zoom/

iOS <input> focus 시 자동 zoom-in 막기