모바일 웹(Mobile web)이란?
모바일 웹이란 PC용 웹사이트와 별개로 모바일 브라우저에서 이용들이 편하게 이용할 수 있도록 PC용 웹사이트를 모바일 스크린 크기에 맞춰 구현한 것을 말합니다. 따라서 이것은 스마트폰으로 접속할때와 PC로 접속할 때 url이 달라지게 되는데 같은 사이트에서 pc용 웹사이트와 모바일용 웹사이트 두 가지 웹사이트가 존재하기 때문입니다. 네이버가 데스크탑용 URL <www.naver.com>과 <m.naver.com> 두 가지를 갖고 있는 것이 그 예로 볼 수 있습니다.
프론트엔드 개발자가 모바일 웹 구현 시 고려
APPJAM을 진행하면서 프론트엔드 개발자로 참여하여 처음으로 모바일 뷰기반 서비스를 구현해보았다. 데스크탑 뷰에 비해 모바일 뷰는 고려해야할 사항이 많았는데 그 중 대표적으로 모바일 디바이스별 특성에 따라 뷰를 고려하는 부분이 가장 어려웠다.
지원 모바일 디바이스에 따라 컨텐츠를 제공하는 방식에 따라 해상도, 상업적 폰트적용, 브라우저 별 지원 여부 등을 고려해야했다. 해상도는 웹 뷰에서 svg로 item을 띄워도 좋았지만, 모바일 뷰에서는 해상도가 현저히 떨어져 결국 png x4배로 저장하여 이미지 아이템을 올려야했다. svg는 웹 친화적인 벡터 파일 포멧으로 원래 화질이 깨지지 않는데 모바일 뷰에서는 처참히 깨졌다. 리액트에서는 svg파일이 png 파일 보다 이미지가 선명했는데 next.js를 쓴 환경에서는 그렇지 않았다. 그 이유에 대해서는 더 깊이 고민해보아야겠지만, QA 중 발견되었던 또 다른 이슈 상황이었던 결과 페이지에서 많은 사용자가 한 번에 많은 이미지를 불러와야했을 때와 비교해서 이유를 추측해보았다. 우리는 빠른 로드를 위해서 클라이언트에서 이미지 데이터를 바로 띄웠는데 next.js는<ImageDiv>를 사용해서<ImageDiv src={questions} alt="주최자 이모티콘" className="emoticon" fill={true} />이미지를 불러와야했는데 새로 고침시 이미지가 이상하게 불러와졌다. 아예 로드가 안되고
alt내용이 보였는데 해결하기 위해 SSR로 바꾸고 여러 방법을 시도 해보았지만 결국 정답을<ImageDiv>가 아닌 html의<img>태그를 사용해서 찾았다. 이로 보아 next.js가 아직 모바일 웹 환경에서 이미지 최적화를 못한게 아닌가 오류에 이유를 조심스럽게 추측해보았다.
그리고 폰트도 웹 뷰에서는 폰트를 한 번 다운로드 하면 적용이 되었지만 모바일에서는 하나하나 weight 값, bold를 다 따로 다운받아서 넣어야했다.
type Font = { font: | '*******' | '*******-BOLD' | '*******-SEMIBOLD' | '*******-REGULAR' | '*******-EXTRABOLD' | '******* Gothic OTF' | '******* Gothic Bold'; size: number; weight: 'R' | 'M' | 'SB' | 'B' | 'EB'; height: number; };이 외에도 자잘하게 여러가지 margin 값이나 padding 값 등 다양하게 고려해야할 사항이 많다. 요즘은 데스크답 뷰보다 모바일 뷰를 더 많이 사용하는 만큼 프론트 개발자로 성장하기 위해서 위 고려사항과 더불어 많은 지식을 얻어야겠다는 생각이 프로젝트를 참여하는동안 느낄 수 있었다.
