랜딩 페이지에서 문의 글 이메일로 전송하기

계기

1인 사업을 하시는 대표님이 자사몰을 cafe24를 통해서 만드셨는데, 잘 안되는 부분이 있어서 나에게 문의를 하였다. 대학원에서 인연이 된 분이셔서 자사몰을 만들 때 다소의 도움을 드린 부분이 있어 유지보수(?) 차원에서 도움을 드리게 된 것이다. 개발이라기 보다는 cafe24 서비스 툴을 어떻게 활용해야 하는지, provider에서 제공하지 않는 기능을 어떻게 추가할 수 있는지에 대한 문제를 해결해드리는 것이 이번 미션이었다.

 

cafe24 자사몰 이용

기본적으로 cafe24에서는 상품 분류 및 결제 시스템, 홈페이지 내 진열과 관련된 ui 기능들과, 기타 문의사항 관련된 게시판들을 기본적으로 제공한다. 아마 무료버전이라 제한적인 기능을 제공하고 있는 것으로 생각되었다. 내가 도움드린 부분은 다음의 3가지였다. 1. 상품 소개 페이지, 2. 상품 분류 및 진열, 판매 페이지 분리, 3.납품 문의 페이지

상품 분류를 하고 판매 페이지를 분리하는 것은 cafe24에서 기본적으로 제공하는 기능이라 업체에서 제공하는 매뉴얼을 따라 보면서 해보니 어렵지 않게 할 수 있었다. 다만 업체에서 제공하지 않는 페이지를 커스터마이징 하는 것이 대표님이 하시기에는 어려울 수 있다고 생각이 들었다. static html 파일을 serving 하고 있는 폴더 구조 내에서 별도로 html 파일을 추가하고, 해당 파일에 대한 file-based url을 link하여야 했다.

상품 소개 페이지는 대표님이 레이아웃과 문구를 모두 만들어 주셔서 그대로 구현만 하면 되었기에 손쉽게 할 수 있었고, 납품 문의 페이지가 다소 문제가 되었다. 어떤 납품사(회사, 번호, 이메일 정보 포함)가 어떤 내용으로 문의를 했는지 메일로 받기를 원하셨는데, 기존 cafe24 게시판을 이용하면 지속적으로 확인하여야 하는 번거로움이 생기기 때문이었다.

 

랜딩 페이지 메일 전송 기능

메일로 보내는건 emailjs 플랫폼을 활용하기로 하였다. 월 200건까지 무료이고, api를 제공하기 때문에 손쉽게 활용이 가능했다. 여러 mail service provider들을 지원하고, smtp 프로토콜을 이용할 수도 있었다. 다만 대표님은 naver 메일로 받기를 원하셨는데, 네이버로 메일을 보내기 위해선 smtp로 전송하는 방법이 있었다.

그런데 naver smtp 연결을 하려면 애플리케이션 전용 비밀번호를 별도로 설정해야 했는데, 특정 os 기기에만 연동할 수 있다는 불편함이 있었다. (내가 못한 것일 수도 있는데, naver stmp 연동은 애플리케이션 전용 비밀번호가 2단계 인증 때문에 필수적으로 요구되었고, 해당 비밀번호를 설정하는 데 특정 기기만이 연동되므로 문제가 있다고 판단했다)

그럼에도 불구하고 요구사항이 네이버 메일로 받기를 원하는 것이었으므로, 다른 해결책을 찾아나섰다. 우선 gmail로 emailjs를 통해 메일을 전송하고, gmail에서 trigger를 걸어 네이버 메일로 자동 포워딩 하는 것이다.

마치 단위 테스트를 하듯 포워딩 기능을 먼저 테스트하고, emailjs에서 gmail로 전송되는 것을 테스트 한 이후에, 실제 자사몰에서 emailjs api를 이용해 문의 form의 정보들을 세팅해 메일로 최종 전송하는 과정을 거쳤다.

 

결론

핵심은 html, js 소스를 직접 serving 할 수 있거나, 스크립트를 삽입할 수 있는 환경이 된다면 emailjs api를 이용해 해당 페이지의 정보를 자신의 이메일로 보낼 수 있다는 것이다. 소스코드는 GPT 등에 프롬프팅만 잘 하면 금방 구현이 가능하다.

이번에 진행하면서 느낀점은 '상세 구현 기능을 잘 아는가?'가 제일 중요한건 아니라는 것이다. 물론 기능적인 숙련도가 높다면 짧은 시간 안에 목표 달성이 가능하겠지만, 중요한 것은 처음 접하는 문제도 어떻게 접근하고 해결해나갈지 추론해나가는 능력이다.