[JS] [emailJS] 자바스크립트로 이메일 보내기

github page로 이력서 사이트를 만드는 중에 contact로 내 이메일 주소는 공개하지 않으면서 이력서 사이트 접속자로부터 메일을 받을 수 있는 기능을 추가하고 싶었다. 그렇지만 github page는 정적 페이지만 지원하기 때문에 java나 php 등을 활용하여 back단에서 메일을 보내는 방법은 사용할 수 없었다. ㅠㅠ 그래서 '자바스크립트로 바로 메일을 보낼 수 있는 방법이 없을까' 찾아보다가 'emailJS'를 찾게 되었다!

 

 

http://www.emailjs.com/

Send email from Javascript - no server code required | EmailJS

 

emailJS는 javascript API로 웹에서 바로 메일을 보낼 수 있도록 지원한다. 월 200건까지는 무료로 사용이 가능하다. 만약 파일 첨부와 같은 기능을 사용하려면 돈을 지불해야 한다. 나는 무료버전만으로도 충분하므로 emailJS를 내 github page에 적용했다.

 

먼저, emailJS를 이용하려면 회원가입을 해야한다.

 

간단한 회원가입 절차를 마치고 나면 아래와 같은 화면이 뜬다. 

 

회사메일 또는 개인 이메일을 등록하는 부분인데 나는 Gmail을 선택했다. Gmail을 선택하면 아래와 같이 화면이 뜨는데 따로 텍스트를 수정하지는 않아도 되고, 저기 'Connect account'를 누른 후 메일 연동을 한 후 'Add Service'를 누르면 메일 연동이 완료된다!

 

메일 연동을 하면 연동한 메일에 이런 메일이 온다. 이 메일이 왔으면 메일이 제대로 연동이 된 것이고, 메일함에서 따로 액션을 취할 것은 없다.

 

그럼 다시 emailJS로 돌아와서 'Installation'메뉴를 선택한다.

 

해당 코드를 메일 보내기 기능을 추가할 곳에 붙여넣기 한다.

 

 

그 다음 메일을 보낼 양식을 설정하면 된다. 나는 아래와 같은 양식을 채우고 '메일 보내기'를 누르면 내 메일로

해당 내용이 담긴 메일이 보내지게 설정했다.

 

그러기 위해서 보낸 사람, 연락처, 메일주소, 내용을 emailJS가 제공하는 템플릿에 저장해야 한다. emailJS에서 Email Templates에 들어가면 기본으로 생성된 템플릿이 하나 있는데 해당 템플릿을 눌러서 다음과 같이 수정하였다.

 

{{name}}, {{phone}}, {{email}}, {{{message}}}에 각각에 맞는 값들이 들어오게 된다. 각 값들이 잘 맞추어 들어가게 하기 위한 자바스크립트 코드를 아래와 같이 작성하였다.

 

먼저 html 파일에서 name명을 아래와 같이 설정했다.

<input type="text" name="name" placeholder="성함을 입력해주세요">
<input type="text" name="email" placeholder="메일 주소를 입력해주세요">
<input type="text" name="phone" placeholder="연락처를 입력해주세요 (생략 가능)">
<textarea name="message" rows="5" placeholder="내용을 입력해주세요 "></textarea>
<input type="button" name="submit" class="btn white" value="메일보내기"/>

 

자바스크립트를 아래와 같이 짰다.

   <script type="text/javascript">
	
	$(document).ready(function() {
		emailjs.init("user_xxxxxxxx");		
        //"user_xxxxx"이 부분은 사용자마다 다르니 반드시 emailJS의 installation 화면을 확인
        $('input[name=submit]').click(function(){       	 
          
          var templateParams = {	
          //각 요소는 emailJS에서 설정한 템플릿과 동일한 명으로 작성!
                name: $('input[name=name]').val(),
                phone: $('input[name=phone]').val(), 
                email : $('input[name=email]').val(),
                message : $('textarea[name=message]').val()
           				};
                    
                	
         emailjs.send('gmail', 'template_GH8tn3us', templateParams)
         //emailjs.send('service ID', 'template ID', 보낼 내용이 담긴 객체)
         	    .then(function(response) {
         	       console.log('SUCCESS!', response.status, response.text);
         	    }, function(error) {
         	       console.log('FAILED...', error);
         	    });
         	       


        });
        
	  });
    

	</script>

 

emailjs.send의 첫 번째 파라미터에는 Email Services에서 설정한 service ID를 적으면 되고, 두 번째 파라미터에는 Email Templates에서 자신이 사용할 템플릿의 ID를 적으면 된다. 마지막 파라미터는 보낼 내용이 담긴 객체를 쓰면 된다.

 

 

emailJS는 emailjs.send, emailjs.sendForm 의 두 가지 메소드를 지원하는데, 나는 sendForm 메소드를 사용하려다 자꾸 오류가 나서 위와 같이 send 메소드를 사용했다.

 

또한, 나는 내게 메일을 보낸 사람의 메일로도 감사 인사 겸 내용 확인을 할 수 있는 메일을 보내고 싶었다. 따라서 Auto-reply기능을 활용했다.

 

실제로 테스트해보면 보낸 사람에게도 이런 식으로 자동응답 메일이 보내진다.

 

auto-reply는 한번에 메일을 두 번 보내므로, 한번 메일보내기를 시도할 때마다 2건씩 가능횟수가 깎인다. 이 점을 주의하자!