이메일 도구의 과거, 현재, 미래: 웨비나 녹화 + Q&A

이메일 캠페인을 설계, 구축 및 테스트하는 데 사용하는 도구는 수년에 걸쳐 크게 변경되었습니다. Dreamweaver와 Builder에서 Photoshop과 Figma에 이르기까지 우리의 작업을 보다 역동적이고 협업적이며 즐겁게 만들기 위해 도구가 발전했습니다. 이러한 고전적인 도구는 여전히 어디에서나 이메일 괴짜의 마음 속에 특별한 위치를 차지하고 있습니다. 더 중요한 것은, 그것들은 우리가 현재 도구에 대해 기대하는 것과 미래에 보고자 하는 것에 영향을 미친다는 것입니다.

이 웨비나에서는 Target의 Shani Nestingen과 Camiah의 Camille Palu가 Litmus 팀에 합류하여 이메일 제작의 역사와 우리가 사용한 도구에 대해 알아보았습니다.

웨비나를 생중계로 볼 기회가 없으셨나요? 걱정하지 마세요. 언제든지 전체 녹음에 액세스할 수 있으며 아래 Q&A를 읽을 수 있습니다.

Q&A

웨비나 중에 질문을 해주신 모든 분들께 진심으로 감사드립니다! 다음은 가장 인기 있는 질문에 대한 답변과 라이브 웨비나에서 얻지 못한 질문에 대한 요약입니다. 추가 질문이 있습니까? 댓글에 남겨주세요.

다크 모드에 이메일을 적용하기 위한 팁이 있습니까?

Lily Worth : Litmus의 수석 이메일 엔지니어인 Alice Li는 도움이 될 만한 다크 모드에 대한 훌륭한 가이드를 작성했습니다. 포함된 CSS에 추가할 다크 모드 미디어 쿼리를 안내하므로 다크 모드 경험을 맞춤 설정할 수 있습니다.

DW HTML 지식만 있는 사람을 위해 오픈 소스를 정의할 수 있습니까?

Camille Palu : 정의: 원본 소스 코드를 자유롭게 사용할 수 있고 재배포 및 수정할 수 있는 소프트웨어입니다. 이것은 코드가 비밀이 아님을 의미합니다. 이것은 회사에 종속되어 소유되는 것이 아니라 업데이트하고 반복하여 개선하고 개선할 수 있기 때문에 훌륭합니다. 잠겨 있고 회사 소유인 경우 업데이트가 적시에 이루어지거나 아예 업데이트될 가능성이 적습니다.

Dreamweaver가 유일한 포인트 앤 클릭 편집 앱입니까?

Camille Palu : Dreamweaver는 제가 아는 유일한 제품입니다. 또한 Litmus Builder에는 기능이 있습니다.

Atom은 Sublime과 어떻게 비교됩니까?

카미유 팔루 : 둘 다 좋아요! 하루 종일 하는 작업을 위한 도구의 실제 필요와 이유를 반드시 살펴봐야 합니다. Atom이 지원하는 패키지의 사용자 지정을 선호합니다. 귀하와 귀하의 팀에 어떤 것이 효과가 있는지 알아보기 위해 둘 다 테스트해 볼 가치가 있습니다.

Adobe Animate를 어떻게 배웠습니까? 스스로 가르치거나 유용한 튜토리얼을 찾았습니까?

Lily Worth : 처음에는 Flash로 애니메이션을 만드는 방법을 배웠습니다. Adobe Animate가 되었을 때 Flash 애니메이션 기능의 대부분을 유지했습니다. 그 당시의 기억으로, 나는 프로그램과 함께 제공되는 가이드와 튜토리얼을 사용했습니다. 이 소프트웨어에서 사용할 수 있는 모든 기술을 유지하기 위해 애쓰고 있으므로 지식을 새로 고침하기 위해 YouTube를 자주 이용합니다. 재미있는 애니메이션 학습을 위해 Tiptut을 추천합니다.

After Effects에서 작업하려는 디자이너에게 추천하는 리소스가 있습니까?

Lily Worth : 비록 After Effects에서 성공적으로 애니메이션을 적용하지는 않았지만 배우려고 할 때 제공되는 훌륭한 리소스 중 일부에 빠져 들었습니다. Creative Bloq은 이 게시물에서 기본부터 더 복잡한 기술에 이르기까지 50개 이상의 편리한 자습서를 제공합니다. Tiptut에는 재미있는 YouTube 동영상도 있습니다.

Camille Palu : YouTube는 확실합니다!

Shani Nestingen : YouTube는 확실합니다. 또한 Smashing Magazine에는 Lynda 및 Pluralsight에 대한 훌륭한 소개 자습서뿐만 아니라 이에 대한 몇 가지 훌륭한 기사가 있습니다.

Figma에서 이메일 디자인을 위한 슬라이싱 요소를 어떻게 처리합니까? 우리 팀은 방금 Figma로 전환했고 나는 그것을 이해하기 위해 고군분투하고 있습니다.

Camille Palu : 저는 Figma에서 2배 크기로 저장하고 저장된 요소를 Photoshop으로 가져와 완벽하게 만듭니다. 나는 이미지가 얼마나 완벽해야 하는지에 대해 정말 까다롭습니다. 많은 경우 요소가 정말 멋지게 저장되지만 저는 Photoshop에서 확인하고 웹용으로 저장하는 것을 좋아합니다.

Lily Worth : Cam과 비슷한 프로세스를 사용합니다! 저는 Figma에서 십진법 픽셀로 많은 어려움을 겪습니다. 그래서 저는 종종 Photoshop에서 제 이미지를 확인하고 완성한 다음 이메일 작성을 위해 Alice에게 넘기곤 합니다.

코딩과 이메일 디자인을 시작하려는 디자이너에게 해줄 조언이 있습니까?

Lily Worth : 처음 시작할 때 오르기에는 다소 산처럼 느껴지지만 시작하는 데 도움이 되는 많은 리소스가 있습니다. 다음은 유용한 읽기 자료입니다.

• 이메일 코딩이 처음이신가요? 여기에서 시작해야 합니다. (정말 좋은 이메일)
• 나만의 HTML 이메일을 만드는 단계별 가이드(Uplers)
• 이메일 디자인 참조(Mailchimp)
• 이메일 코드 101(리트머스)

또한 Twitter에서 #emailgeeks를 통해 이메일 커뮤니티와 연결하십시오! 이메일 커뮤니티는 훌륭하고 항상 도움을 주기를 열망합니다. Litmus 커뮤니티에 질문을 게시하여 지원을 위해 이메일 디자이너 및 개발자에게 연락하거나 Email Geeks Slack 커뮤니티에 가입할 수도 있습니다.

Shani Nestingen : Lily가 공유하는 링크는 내가 시작하는 것입니다. 그러나 확실히 소셜 미디어, Twitter 및 Email Geeks slack 그룹을 통해 연결됩니다. 거기에는 연결할 수 있는 훌륭한 리소스와 사람들이 너무 많습니다.

한 도구에서 다른 도구로 가장 잘 마이그레이션하는 방법에 대한 권장 사항이 있습니까? 우리는 디자인 스택을 Figma로 옮기려고 합니다.

Lily Worth : Figma를 사용하면 Sketch에서 디자인을 쉽게 가져올 수 있습니다. Photoshop에서 마이그레이션하는 경우 PSD 파일을 Sketch 파일로 변환한 다음 Figma로 가져오는 방법이 있습니다.

Figma의 가장 큰 장점은 얼마나 빨리 레이아웃을 생성하고 모듈과 요소를 라이브러리에 저장할 수 있다는 것입니다. 따라서 가져오기가 제대로 작동하지 않으면 Figma 내에서 기존 파일 중 일부를 다시 만드는 것이 그리 고통스럽지 않을 수 있습니다(손가락 교차).

당시 Adobe Fireworks를 사용하신 분 계신가요? 후퇴에 대해 이야기하십시오!

Shani Nestingen : Fireworks는 여전히 Macromedia에서 소유하고 있을 때만 사용했지만 몇 단계만 거치면 웹 버전을 저장할 수 있다는 점이 마음에 들었습니다!

이메일 생성 프로세스의 모든 단계에서 어떤 도구를 추천하시겠습니까?

Jason Rodriguez : 다음은 웨비나에서 논의한 몇 가지 도구와 동료 참석자가 추천한 도구입니다.

• diffchecker.com
• 직사각형 앱.com
• emailcomb.com
• 하우투타겟.이메일
• 더 나은 플레이스홀더.com
• 이미지최적화닷컴
• ezgif.com
• 아주 작은