모바일 웹에서 이미지 업로드: 제약사항과 한계
모바일 웹에서 이미지를 업로드하는 기능을 구현하려고 할 때, 생각보다 제약이 많다. 당장 앱을 만들지 않은 서비스도 늘 고도화 시 앱 개발을 목표로 두는 경우를 많이 보았다. 모바일 앱처럼 자유롭게 기획해도 반영할 수 있는 한계가 있다. 카메라와 갤러리에 접근하는 버튼을 구분해 사용하려면 사실상 불가능하다는 점이 바로 그 예시다.
1. <input type="file"> 태그의 제약
모바일 웹에서 사진을 업로드하려면 일반적으로 <input type="file"> 태그를 사용해야 한다. 이 태그는 자동으로 갤러리, 카메라, 파일 선택의 컨텍스트 메뉴를 불러오게 되는데, 이 메뉴는 커스터마이징이 불가능하다. 예를 들어, 버튼을 일반 버튼으로 디자인하고 팝업을 띄워서 각 기능에 맞는 버튼을 넣으려 했는데, 이때 카메라는 이동이 가능해도 갤러리는 불가능하다. (아무래도 이건 보안상의 이유로 보인다.)
* 참고 문서 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file#capture
2. 웹에서 테스트한 결과
이 문제는 모바일 웹에서 꽤 테스트를 해보았는데, Safari나 Chrome에서 네이버, 인스타그램 등을 시도해 봐도 다 똑같은 UI를 활용한 것을 확인할 수 있다. 자체제작 팝업을 띄우더라도 팝업 내 버튼에서 1) 사진 보관함, 2) 사진 찍기, 3) 파일 선택 하는 컨텍스트 드롭다운은 그대로 활성화된다. 결국, 이 메뉴를 직접 커스터마이징 하는 건 불가능하다고 보면 된다.
브런치스토리처럼 일부 서비스에서는 아예 이미지 업로드 관련 기능은 모바일 앱을 열어 이동하도록 웹에서는 기능을 막아두기도 한다.
3. 제약을 고려한 기획
모바일 웹에서 이미지 업로드 기능을 기획할 때, 이런 제약을 고려하지 않으면 사용자가 기대하는 기능을 제공하기 어렵다. 그래서 처음부터 이런 제한이 있다는 점을 명확히 인지하고, 이를 해결하기 위한 대안을 마련하는 것이 중요하다고 생각한다. 내부적으로도 실컷 멋지게 디자인했는데 뒤에 가서 구현 안된다고 말해서 기획 바꾸게 하거나, 프론트 개발자에게 안되는 걸 되게 하라는 대화 하지 않기 위해 필요한 디테일인 것 같다.
모바일 웹에서 이미지 업로드를 구현할 때는 적절한 선택과 기획이 필수다. 모바일 웹의 제약을 이해하고, 그 안에서 최적의 사용자 경험을 제공할 수 있도록 많은 테스트가 필요하다.
