본문 바로가기

HTML5_JS_CSS

모바일 웹에서 iOS 6 아이폰으로 사진 올리기

iOS 6에서는 모바일 사파리에서도 드디어 사진을 찍어 올릴 수 있게 됐다. 이제까지는 모바일 웹에서 사진이나 카메라를 활용할 수 없어 사진이나 카메라를 사용해야 하는 경우 네이티브 앱으로 제작해야 했지만 이제는 모바일 웹에서도 사진을 올릴 수 있게 됐다. (참고로 안드로이드는 2.x부터 지원하고 있음)


<input type="file"> 태그를 사용하면 기본적으로 다음과 같은 화면이 출력된다.



이 상황에서 파일 선택을 클릭하면 아래와 같이 메뉴가 뜬다. "사진 또는 비디오 찍기"를 선택하면 카메라 화면으로 변경되며 "기존 항목 선택"을 선택하면 사진첩이 뜬다.



카메라를 이용하여 사진을 찍거나 사진첩에서 사진을 선택하면 다음과 같이 작은 썸네일이 표시되며 사진을 선택했음을 사용자에게 알려준다.



비디오를 찍거나 선택하면 사진과 동일하게 작은 썸네일을 표시하고 하나의 비디오를 선택했다는 사실을 알려준다.



이렇게 사진이나 비디오를 선택한 후에는 PC에서 일반적인 파일을 올리는 것과 동일한 방식으로 "전송"을 눌러 서버로 사진이나 비디오를 전송하면 된다. 서버에서는 PC에서의 업로드와 동일한 방식으로 처리하면 된다.


이 과정에서 주의할 점이 두 가지가 있다. 첫 번째는 파일을 업로드 하면 사진은 image.jpg라는 파일명으로, 비디오는 capturedvideo.MOV 라는 파일명으로만 서버에 업로드된다. 따라서 여러 개의 파일을 올릴 때 파일이 덮어써지는 상황을 피하려면 서버에서 파일을 저장하는 과정에서 파일진의 이름을 적절히 변경해줘야 할 것이다. 두 번째는 "사진 또는 비디오 찍기"를 사용하여 사진이나 비디오를 촬영할 경우 촬영한 사진이나 비디오는 사진첩에 저장되지 않는다. 사진첩에 저장할 수 있는 옵션이 있는지는 아직 찾아보지 못한 상황이나 기본 태그만 사용할 때는 사진이 사진첩에 저장되지 않으므로 주의해야 할 것이다. 개인적으로는 사진첩에 저장되는 것을 좋아하기에 정식 버전에서는 저장되기를 기대해본다.


반응형