모바일 사진 첨부 버튼 만들기, accept와 capture로 카메라·앨범 여는 법
견적 문의나 A/S 접수 폼에 사진 첨부를 넣었는데, 폰에서 누르면 PDF·문서까지 다 뜨는 파일 선택 창이 열리지 않나요?
모바일 사진 첨부는 accept와 capture 속성만 제대로 써도 앨범이나 카메라가 바로 열립니다. 두 속성의 차이와 실무에서 자주 놓치는 부분을 정리했습니다.
💡 첨부 단계에서 왜 문의가 줄어들까요?
현장 사진을 받아야 하는 업종일수록 손님은 폰으로 찍어서 바로 보내고 싶어 합니다. 그런데 파일 탐색기가 열리고 폴더를 뒤져야 하면 그 자리에서 창을 닫는 분이 꽤 됩니다. 버튼 하나 눌렀을 때 바로 사진을 고를 수 있게 하는 것만으로 접수 과정이 훨씬 짧아집니다.
1. accept로 사진만 고르게 하기
accept="image/*"를 넣으면 모바일에서는 사진 앨범과 카메라 위주의 선택 창이 열립니다. 특정 형식만 받고 싶다면 MIME 타입이나 확장자를 쉼표로 이어 쓰면 되고, 여러 장을 한 번에 받으려면 multiple을 추가합니다.
<!-- 앨범·카메라 중 선택, 여러 장 가능 -->
<label for="photo">현장 사진 첨부</label>
<input type="file" id="photo" name="photo[]"
accept="image/*" multiple>2. capture로 카메라 바로 열기
사진을 그 자리에서 찍어야 하는 경우, 예를 들어 파손 부위나 영수증 촬영이라면 capture를 씁니다. environment는 후면 카메라, user는 전면 카메라를 요청하는 값입니다. 다만 브라우저가 이 값을 반드시 따르는 것은 아니고, PC에서는 속성 자체가 무시되고 일반 파일 선택 창이 뜹니다.
<!-- 후면 카메라로 바로 촬영 -->
<input type="file" name="receipt"
accept="image/*" capture="environment">주의할 점은 capture를 넣으면 앨범에서 고르는 길이 막힐 수 있다는 것입니다. 이미 찍어 둔 사진을 보내려는 손님이 더 많은 문의 폼이라면 capture는 빼는 편이 낫습니다. 실제로 리뉴얼 때 "사진을 골라서 올릴 수가 없다"는 문의가 들어와서 확인해 보면 이 속성 때문인 경우가 있었습니다.
3. 상황별로 고르는 기준
| 상황 | 추천 설정 |
|---|---|
| 견적 문의, 이미 찍은 사진 | accept="image/*" multiple |
| 현장 촬영이 꼭 필요할 때 | accept + capture="environment" |
| 사진과 PDF 견적서 모두 | accept="image/*,.pdf" |
4. 서버 검사는 따로 해야 합니다
accept는 선택 창을 걸러 주는 편의 기능일 뿐, 보안 장치가 아닙니다. 사용자가 다른 파일을 고를 수도 있으니 확장자와 용량 검사는 서버에서 다시 해야 합니다. 요즘 폰 사진은 한 장에 몇 MB씩 되는 경우가 흔하므로 업로드 용량 제한도 여유 있게 잡아 두고, 아이폰 사진 형식인 HEIC가 들어올 가능성도 염두에 두세요.
"손님이 한 번 덜 누르게 만드는 것도 설계입니다."
나눔웹은 문의 폼을 만들 때 실제 폰으로 첨부부터 접수 완료까지 직접 눌러 보고 마무리합니다.