Published on

모바일 브라우저별 input type=file 처리 이슈

리뷰작성 페이지 개발

카카오 알림톡 링크 전달 =>
  카카오 인앱브라우저 내에서 리뷰를 작성 =>
    리뷰를 작성하는 스탭중에는 사진 첨부 기능이 포함

파일 첨부 기능을 위해서 간단한 파일첨부 코드를 작성할 수 있습니다.

<input
  type="file"
  accept="image/*"
/>

accept 속성을 사용하면 파일첨부할때 원하는 타입의 파일만 첨부가 가능하도록 강제할 수 있습니다. 위와같은경우는 이미지를 제외한 다른 파일은 첨부가 기본적으로 불가능하게 됩니다.

🚨 `.HEIC` 은 다양한 플랫폼의 소프트웨어와 호환되지 않기때문에
별도의 처리를 하거나 업로드 대상에서 제외시키는 처리가 필요합니다.

문제

리뷰작성은 카카오 알림톡 발송 이후 모바일내 브라우저에서 진행됩니다.
알림톡에서 오픈하기 때문에 카카오인앱브라우저 내에서 작성하게 됩니다.
단순히 리뷰를 작성만 하는것이면 문제가 없었겠지만 사진 첨부 기능이 포함되어야 하다 보니 OS간의 서로 다른 동작과 카카오인앱브라우저이기 때문에 다르게 동작하는 부분에 대한 이해가 필요 했습니다.

  • IOS, Android 간의 차이
  • 일반적인 브라우저(크롬, 사파리, 삼성 등)이 아닌 카카오인앱브라우저 환경

IOS 에서는 사진첨부기능이 의도한대로 카메라와 갤러리접근이 모두 가능해서 큰 이슈는 없었습니다.

문제는 안드로이드였는데 9버전 이하에서는 카메라와 폴더가 나오는 이슈가 있었습니다.

서비스 사용자들을 확인한결과 9이상의 버전을 사용중이었기에 기기 버전 이슈는 따로 고민하지 않아도 되었습니다.

문제는 카카오브라우저에서는 버전과 관계없이 무조건 카메라와 폴더가 선택사항으로 나타났습니다. 원하는방향을 갤러리에 바로 접근 할 수 있도록 노출되는 것이었습니다.

카카오브라우저를 제외한 다른 브라우저에서는 별다른 처리가 없어도 의도한대로 카메라와 갤러리를 선택할 수 있도록 노출 되었지만 카카오브라우저에서는 여러가지 속성을 활용해서 테스트해 보았지만 아무것도 해결책이 되지 못했습니다. capture 속성 테스트

꼼수를 써보자

일단 결론은 안드로이드의 카카오브라우저내에서 원하는 파일첨부 동작을 만들어 내기란 어렵다 라는 판단이 들었고 그럼
카카오브라우저만 아니면 되지않나? 라는 생각이 들어 다른 브라우저로 열리도록 우회하는 방식을 사용해보기로 했습니다.

// Android Intent URI 스킴 활용
location.href='intent://<url>#Intent;scheme=http;package=com.android.chrome;end'

모든 브라우저에서 적용될 필요는 없었고 안드로이드 + 카카오브라우저 조합일때에만 실행시키면 되는 코드이기 때문에 해당 조건을 체크할 필요가 있었습니다.
ua-parser-js 를 사용하여 카카오브라우저인지 체크후 크롬으로 새창을 띄워서 리뷰작성을 진행할 수 있도록 유도하였습니다.

회고

처음 기능 추가 관련해서 스프린트미팅을 할때 체크하고 시작했어야 하는 부분이었는데 미리 캐치하지 못한것이 개발자로서 아직 많이 부족함을 느꼈습니다.

당연히 모바일이라면 OS의 서로 다름을 인지 했어야 했고 또한 해당 기능이 브라우저에 따라서도 다르게 동작할 수 있다는걸 미처 인지하지 못했었습니다.

이전까지는 웹이면 웹 앱이면 앱 이렇게 분리된 환경에서만 개발이 진행되었어서 모바일내의 브라우저에 대한 개발은 처음이었기에 사진첨부와 갤러리접근에 대한 고려가 부족했었던것같습니다.

크로스체크를 통해 좀더 빠르게 발견되거나 예측이 되었던 부분이었다면 기획적으로 충분히 조율이 가능한 부분이었다고 생각합니다. 데드라인은 이미 정해져있고 당장에 핫픽스처리가 필요했던 부분이라 꼼수로 처리할 수 밖에 없었던 부분이 아쉬운것같습니다.

참고자료