이메일, 자바스크립트 없이 API 호출? CSS의 반란!

이메일은 HTML/CSS 기반이지만, 자바스크립트(JavaScript) 실행 불가로 상호작용에 제약이 존재함

AMP Email을 활용하여 API를 호출하는 방법과, CSS를 활용한 API 호출이라는 독창적인 기술 소개

AMP Email의 제한적인 HTML/CSS 지원과 승인 절차의 번거로움에 대한 비판

CSS를 활용한 API 호출은 70%의 이메일 클라이언트 지원을 제공하며, CSS의 튜링 완전성(Turing completeness)을 활용

AMP Email의 한계와 대안

게시물에서는 AMP Email을 사용하여 이메일 내에서 API를 호출하는 방법을 제시하지만, AMP Email의 여러 단점을 지적한다. 특히, AMP Email은 제한적인 HTML/CSS 지원으로 인해 최신 웹 기술을 활용하기 어렵고, 승인 절차가 복잡하다는 점을 강조한다. 또한, AMP Email은 Google의 AMP 프로젝트(AMP Project)의 일부로, 현재 업데이트가 거의 이루어지지 않아 향후 지원 중단 가능성도 제기된다.

CSS를 활용한 API 호출 기술

저자는 CSS의 튜링 완전성(Turing completeness)을 활용하여 이메일 내에서 API를 호출하는 혁신적인 방법을 제시한다. 핵심은 CSS의 `background-image` 속성을 활용하여 API 엔드포인트(API Endpoint)를 호출하는 것이다. 사용자가 특정 버튼을 클릭하면, CSS가 해당 이미지 URL을 로드하여 API 요청을 트리거한다. 이 기술은 자바스크립트(JavaScript) 없이 이메일 내에서 상호작용을 가능하게 하며, 70%의 이메일 클라이언트에서 지원된다.

CSS 기반 API 호출의 기술적 제약

CSS를 활용한 API 호출 기술은 몇 가지 제약 사항을 가진다. 첫째, 버튼 클릭 횟수를 한 번만 감지할 수 있다. 둘째, CSS의 `background-image` 속성의 동작이 표준화되지 않아 향후 이메일 클라이언트의 변경으로 인해 동작이 중단될 수 있다. 저자는 이러한 문제에 대비하기 위해 'Interactive Email Doomsday' 모니터링 시스템을 구축하여 잠재적인 문제를 감지하고 대응할 계획이라고 밝힌다.

실제 구현 시 고려 사항

게시물에서는 실제 프로덕션 환경에서 이 기술을 적용할 때 고려해야 할 사항들을 언급한다. 특히, 사용자가 이메일을 닫았다가 다시 열었을 때 상태를 복원(State Restoration)하는 방법과, 자바스크립트(JavaScript) 없이 클라이언트 측 계산(Client-side Math)을 수행하는 방법을 제시한다. 이러한 문제들을 해결하기 위한 추가적인 기술적 노력이 필요하며, 저자는 관련 문제 해결에 대한 독자들의 참여를 유도한다.