작년에 개발한 노션 클론 프로젝트를 올해 3월 모바일 브라우저에 맞게 개선하고 7,8월 동안 프로젝트를 업데이트 및 수정하면서 겪은 웹 브라우저와 다른 모바일 브라우저만의 특징에 대해 정리해보려한다.
- Notion 클론 프로젝트가 궁금하다면 ?
📝Notion 클론 프로젝트 바로가기
1. Selection 이벤트
selection 이벤트는 onSelection 를 통해 이벤트를 감지하고 이벤트의 값을 알 수 있지만, 문제는 모바일 브라우저에서는 select 이벤트가 touch start 이벤트와 동시에 발생해서 Selection 객체의 anchorOffeset과 focueOffeset이 모두 처음 터치한 부분의 값으로 나와서 실제로 사용자가 선택한 글자의 범위를 알 수 없다.
따라서 모바일 브라우저에서는 document.onselectionchange를 이용해 selection의 변화를 감지해야 한다.
2. 가상 키보드
모바일 브라우저에서 텍스트 작성이 가능한 곳에서 텍스트를 터치하면 가상키보드가 나타날 수 있고 선택한 텍스트가 가상키보드로 가려지는 위치에 존재하면, 스크롤을 움직여주어야한다.
가상키보드가 등장 시 브라우저의 사이즈가 재조정되는 특징을 이용해 가상키보드가 화면에 나타나는 지 여부와 가려지는 화면의 크기를 알 수 있다.
const App =()=>{
const initialHeight- window.initialHeight;
const el = document.getElementId("app");
const handleTouch =()=>{
// 가상 키보드 등장으로 인해 재조정된 브라우저 높이
const innerHeight - window.initialHeight;
// 가상 키보드의 높이이자, 가상 키보드로 가려지는 화면의 크기
const heightGap = initialInnerHeight - innerHeight;
const top = 이동시킬높이;
el.scrollTo(0, top);
}
};위의 코드처럼 가상 키보드가 나타나면서 재조정된 브라우저의 높이를 이용해, 가상 키보드로 가려지는 화면의 크기를 구한 후 가려지는 부분을 가상 키보드 위로 스크롤 하기 위한 높이를 구해서 스크롤을 이동해주면 된다.
3. vh 재설정
모바일 브라우저에서는 가상 키보드가 등장한다는지 모바일 브라우저마다 다른 상단바 또는 하단바로 인해 브라우저의 사이즈가 재조정되는 상황이 발생한다.
따라서 vh를 사용할 경우 그대로 사용하지 말고 재설정해주어야한다.
react에서 vh 재설정하기
const setVh = () => {
document.documentElement.style.setProperty(
"--vh",
`${window.innerHeight}px`
);
};
useEffect(() => {
window.addEventListener("resize", setVh);
setVh();
return () => window.removeEventListener("resize", setVh);
}, []);4. 스크롤과 overflow:hidden 오류
위와 같이 모바일에서 아래에서 위로, 우에서 좌로 나타나는 메뉴를 구상하하기 위해 translate로 위치를 조정하고 화면 밖을 넘어가는 영역은 overflow:hidden으로 가렸는데 문제는 모바일에서 계속 터치로 스크롤을 작동하면 overflow:hidden으로 가려진 부분까지 스크롤이 적용되는 오류가 발생했다.
이를 해결하기 위해 overflow:hidden이 아니라 다음과 같이 setTimeOut과 display:block, none와 상황별 클래스를 변경하는 방식으로 해당 기능을 구현했다.
예시: 아래에서 위로 이동 기준
| 추가 클래스 | 상황 | display |
|---|---|---|
| hide | 메뉴가 필요 없음, 기본 설정 | none |
| - | 메뉴가 필요해졌고 아직 메뉴가 화면에 등장하지 않음 | block |
| on | 메뉴가 화면에 등장 | - |
- css : 클래스별 스타일 설정
.app{
display:block;
transition: transform 500ms ease;
}
.app.hide{
display:none;
translateY:100vh;
}
.app.on{
translateY:50vh;
}- js : 메뉴가 화면에 등장하는 모션을 위해 시간차로 클래스 변경
if(메뉴_화면_등장_조건){
el.classList.remove("hide");
setTimeOut(()=>{
el.classList.add("on")},500)
}5. drag and drop
HTML에는 드래그를 가능하게 하는 draggable 속성과 drag event가 있지만 모바일에서는 동작하기 않아서 touch event로 드래그앤 드롭을 구현해야했다. 이에 대해 자세한 내용은 다른 벨로그 포스트인 Drag and Drop 구현하기 에서 확인할 수 있다.
