HTML input의 accept 속성 이해하기

파일 업로드 기능을 구현하다가 accept 속성을 다시 들여다볼 일이 있어 정리해 둔다.

“Accept” 속성

accept는 <input type="file">에 붙이는 속성이다. 받을 파일 유형을 적어 두면 브라우저가 파일 선택 창에서 그 유형만 먼저 보여준다. 사용자가 엉뚱한 파일을 고르는 일을 줄여주는 정도의 역할이다.

작동 방식

값은 쉼표로 여러 개를 이어서 쓸 수 있고, MIME 타입(image/png), 와일드카드(image/*), 확장자(.pdf)를 섞어 써도 된다.

예시

• 이미지만 허용: accept="image/*"
• 비디오만 허용: accept="video/*"
• JPEG와 PNG만 허용: accept=".jpg, .jpeg, .png"

중요한 이유

이득은 주로 사용자 쪽에 있다. 파일 선택 창이 처음부터 걸러진 상태로 열리니 고르기 편하고, 모바일에서는 image/*를 주면 카메라 촬영이나 사진 보관함을 선택지로 보여주기도 한다. 업로드한 뒤에야 “지원하지 않는 형식”이라는 에러를 보는 일도 줄어든다.

다만 서버 입장에서 달라지는 건 없다. 브라우저에 따라서는 파일 선택 창에서 필터를 풀고 다른 파일을 고를 수 있고, 요청을 직접 만들어 보내면 accept는 아예 거치지도 않는다. 그래서 이 속성은 검증이나 보안 수단이 될 수 없다.

유의할 점

• 서버 검증은 따로 한다: 파일 유형은 서버에서 다시 확인해야 한다. 확장자만 보지 말고 파일 내용(시그니처)까지 보는 편이 안전하다.
• 허용 형식을 화면에도 적는다: accept로 거른다고 사용자가 이유를 알게 되지는 않는다. 어떤 파일을 올릴 수 있는지 UI에 적어 두면 헷갈릴 일이 줄어든다.
• 브라우저마다 확인한다: 필터를 보여주는 방식이 브라우저와 OS마다 조금씩 달라서, 주요 환경에서 한 번씩 열어보는 게 좋다.