mailto 링크를 사용하면 방문자가 웹사이트에서 별도의 과정 없이 자신의 기본 이메일 클라이언트를 열어 바로 메일을 보낼 수 있습니다. 그렇다면 HTML에서 mailto 링크는 어떻게 만들 수 있을까요?
이 글에서는 실제 예제 코드와 함께 HTML로 mailto 링크를 만드는 방법을 단계별로 살펴보겠습니다.
기본 mailto 링크 문법
가장 기본적인 mailto 링크 문법은 아래와 같습니다.
<a href="mailto:johndoe@fakeemail.com">Example mailto link</a>
브라우저에서 사용자가 이 링크를 클릭하면 기본 이메일 앱이 실행되며, 받는 사람(to) 필드에 지정된 이메일 주소가 미리 채워집니다.
예를 들어 링크를 클릭하면 Mail 앱이 열리고 받는 사람 칸에 해당 주소가 입력된 상태로 시작됩니다. 덕분에 짧게 메일을 보내고 다시 웹사이트로 돌아오기 매우 편리합니다.
mailto 링크에 여러 개의 이메일 주소 추가하기
수신자를 여러 명으로 지정하고 싶다면 아래처럼 이메일 주소를 나열할 수 있습니다.
<a href="mailto:johndoe@fakeemail.com, janedoe@fakeemail.com">
Multiple email addresses
</a>
여러 개의 이메일 주소는 반드시 콤마(,)로 구분해야 합니다.
브라우저에서 이 링크를 클릭하면 Mail 앱이 열리고, 받는 사람 필드에 두 개의 이메일 주소가 모두 채워지는 것을 확인할 수 있습니다.
mailto 링크에 메일 제목(subject) 추가하기
링크 클릭 시 제목란까지 미리 채워 넣으려면 subject 파라미터를 활용하면 됩니다.
<a href="mailto:johndoe@fakeemail.com, janedoe@fakeemail.com?subject=this is how to use the mailto link">
Using the subject parameter
</a>이메일 주소 뒤에는 이메일 주소와 subject 파라미터를 구분하는 물음표(?)를 반드시 붙여야 합니다. 이 ?를 빠뜨리면 제목이 정상적으로 전달되지 않습니다.
mailto 링크에 CC와 BCC 추가하기
참조(CC, Carbon Copy)와 숨은 참조(BCC, Blind Carbon Copy) 수신자를 함께 지정할 수도 있습니다.
<a
href="mailto:johndoe@fakeemail.com, janedoe@fakeemail.com?cc=jackdoe@fakeemail.com &bcc=jennydoe@fakeemail.com &subject=this is how to use the mailto link">
Using the CC and BCC parameters
</a>첫 번째 추가 파라미터인 CC 앞에는 이메일 주소와 구분하는 물음표(?)를 붙이고, 그 이후의 BCC와 subject 파라미터 앞에는 앰퍼샌드(&)를 붙여야 합니다.
mailto 링크에 본문(body) 내용 추가하기
body 파라미터를 사용하면 메일 본문에 미리 작성해 둔 텍스트를 삽입할 수도 있습니다.
<a
href="mailto:johndoe@fakeemail.com, janedoe@fakeemail.com?cc=jackdoe@fakeemail.com &bcc=jennydoe@fakeemail.com &subject=this is how to use the mailto link &body=this is an article on how to use the mailto link">
Using the body parameter
</a>body 파라미터 앞에도 마찬가지로 앰퍼샌드(&)를 붙여야 합니다.
mailto 링크 사용 시 주의할 점
mailto 링크의 단점 중 하나는 일부 사용자에게 스팸처럼 인식될 수 있다는 것입니다. 실제로 많은 스패머들이 이 방식을 이용해 사용자에게 메일을 발송하기 때문에, 서비스에 적용하기 전에 이 점을 충분히 고려해야 합니다.
mailto 링크의 장점
반면, 잘 알고 있는 소규모 그룹에게 메일을 보내는 경우라면 mailto 링크는 좋은 선택이 될 수 있습니다. 특히 해당 그룹의 모든 구성원이 기본 이메일 클라이언트를 사용하고 있다면, 연락 폼(contact form)보다 mailto 링크가 더 간편하고 효율적인 대안이 됩니다.