👏🏻 들어가며

기획하고, 디자인하고, 결과물을 개발자에게 전달하는 것.
지금까지 디자이너의 일은 보통 여기서 끝났습니다.
화면이 사용자에게 닿기까지는 개발 단계가 뒤따르는 것이 자연스러운 흐름이었죠.

하지만 최근 이메일 템플릿 작업에서, 저는 디자인을 넘어 실제 발송에 쓰일 수 있는 형태까지 만들며
제 역할의 범위를 넓혀봤습니다.

즉, "할 필요가 없던 일", 정확히는 "할 수 없던 일"까지 AI(클로드)를 통해 제 업무 범위를 넓힌 경험이었습니다.

이 글에서는 그 과정에서 어떤 상황을 마주했고, 어떻게 풀어냈으며, 무엇이 달라졌는지를 공유해보려 합니다.

🚨 문제의 발단

시작은 작지만 크리티컬한 제보 하나였습니다.

당첨 안내 메일의 레이아웃이 깨져 있다는 것이었는데, 문제는 그 한 통에 그치지 않았습니다. 대부분의 메일에서 레이아웃이 깨지거나 번역이 어긋나, 당첨·주문 내역 같은 핵심 정보를 사용자가 제대로 확인하기 어려운 상태였죠.

더 큰 문제는, 제보 전까지 누구도 이 사실을 몰랐다는 점이었습니다. 당장 고치고 싶었지만 개발 리소스를 바로 투입할 상황도 아니었고요. 하지만 리소스 문제를 걷어내고 보니, 더 본질적인 원인이 보이기 시작했습니다.

🧐 왜 이렇게 됐을까?

문제의 본질은 '레이아웃 깨짐 현상'이 아니라, 이메일 템플릿을 만들고 관리하는 방식에 있었습니다.

그동안 템플릿은 기준 없이, 담당자마다 매번 다른 방식으로 만들어지고 있었습니다.
디자인도 이미지 같은 에셋도 프로세스화되지 않은 채 흩어져 있었죠.

그 결과,

• 표준이 없어 수정·확장할 때마다 매번 처음부터 손대야 했고,
• 만드는 사람마다 방식이 달라 품질과 스타일이 제각각이었으며,
• 지금 어떤 메일이 발송되고 있는지, 앞으로 어떤 메일이 필요한지에 대한 관리도 전혀 이뤄지지 않고 있었습니다.

저는 이 문제를 '단순히 깨진 메일을 고치는 일'이 아니라 '관리 체계를 다시 세우는 일'로 정의했습니다.

🧭 해결의 방향

디자이너가 필요한 이메일을 모듈 단위로 재구성해 디자인하고, AI를 통해 직접 구현하여, 메일 템플릿 관리를 주도한다.

개발자에게 "고쳐주세요"라고 요청하는 대신, 디자이너가 디자인부터 구현, 관리까지 책임지는 구조로 바꾼 것입니다.

📝 작업하며 세운 기준

다만 "직접 만든다"는 것이 곧 "마음대로 만든다"는 뜻은 아니었습니다. 지속 가능한 시스템이 되려면 몇 가지 원칙이 필요했습니다.

• 컴포넌트 스펙의 통일: 같은 컴포넌트라면 어디에 쓰이든, AI가 만들어내는 스펙이 어긋남 없이 일관돼야 합니다.
• 디자인 시스템 기반: 모든 컴포넌트와 요소는 메이크스타 디자인 시스템을 활용해야 합니다.
• 모듈 단위 설계: 향후 확장성을 고려하면, 디자인부터 개발까지 수정과 삭제가 쉬운 모듈 형식이어야 한다고 판단했습니다.

이 세 가지를 기준으로 삼아 작업을 시작했습니다.

✅ 진행 과정

작업은 다음과 같은 순서로 진행했습니다.

1. 우선순위 정리 (P0부터)

트랜잭션 메일과 마케팅 메일 카테고리를 구분 및 우선순위를 정리하고, 영향도가 가장 큰 P0부터 작업을 진행했습니다.

2. 메일별 정보 정리

각 메일에 필요한 정보들을 Claude를 활용해 1차로 정리하고, 시트 형태로 구조화했습니다. 어떤 메일에 어떤 데이터가 들어가야 하는지를 먼저 명확히 한 것이죠.

3. 대표 메일 디자인 (Figma)

Figma에서 대표가 되는 메일들을 먼저 디자인하며 구조를 설계했습니다.

핵심은 모든 메일을 일일이 디자인하지 않았다는 점입니다.

P0의 메인이 되는 이메일만 직접 디자인하면서 그 안에서 재사용할 컴포넌트를 구상했고, 그 이후부터는 디자인 작업 없이 데이터만 클로드에게 전달하면 이메일 템플릿이 자동으로 구현되는 구조를 만들었습니다.

4. 섹션 컴포넌트 설계

대표 메일에서 공통으로 활용되는 메인 컴포넌트들을 선별한 후 클로드로 정리한 모든 데이터를 담아낼 수 있는 섹션 컴포넌트로 제작했습니다.

5. 섹션 컴포넌트 개발 (클로드)

대표 메일을 기준으로 각 섹션 컴포넌트들을 클로드로 구현했습니다.

6. 컴포넌트 디자인 QA

구현된 결과물이 디자인 의도와 일치하는지 검증했습니다.

7. 나머지 템플릿 일괄 개발

검증을 마친 컴포넌트들을 나머지 템플릿에 적용해 일괄적으로 필요한 템플릿 개발을 완료했습니다.

필요에 따라선 DA분께 버튼에 삽입할 UTM 링크를 받아 연결해두는 식으로 진행했습니다.

📬 이메일 템플릿 예시

템플릿 페이지의 컨셉은 실제 발송 시 사용자에게 보이는 화면과 유사하게 맞췄으며,
글로벌 서비스인 만큼 언어를 전환하면 번역된 화면을 실시간으로 바로 확인할 수 있도록 만들었습니다.

8. 최종 QA

이메일 템플릿에서 html 코드 추출을 통해 저희가 활용할 메일 CRM 툴인 메일건에 직접 코드를 올리고 preview를 통해 최종 결과물을 확인했습니다.

9. 개발 → 피그마로 import (관리용)

개발된 결과물들을 피그마로 import하는 플러그인을 제작했습니다.

해당 플러그인을 통하면 저희 디자인 시스템에 등록된 style 값들과 오토레이아웃이 적용된 상태로 피그마 디자인으로 만들어집니다.

대표 메일과 컴포넌트가 한 번 잘 잡히고 나니, 나머지는 조립하듯 빠르게 확장할 수 있었습니다. 모듈 단위로 설계한 효과가 여기서 나타났습니다.

또한 클로드로 이메일 템플릿과 플러그인을 함께 만들다 보니, 템플릿 개발을 마치면 별도 요청 없이도 해당 메일이 플러그인 목록에 자동으로 추가된다는 점이 흥미로웠습니다.

10. 이메일 빌더 제작 (ONE STEP MORE! 👣)

지금은 한 걸음 더 나아가 매번 클로드로 템플릿을 제작하던 단계를 넘어,
누구나 직접 이메일 템플릿을 만들어 쓸 수 있는 ‘이메일 빌더’로 범위를 넓혀가는 중입니다.

필요한 섹션을 골라 콘텐츠를 채우고 원하는 내용을 입력하면 되는 방식으로,
디자이너가 아니어도 손쉽게 메일을 완성할 수 있습니다 (섹션 버튼을 hover하면 미리보기도 나옵니다)

빌더를 통해 제작된 메일은 언제든 수정이 가능하므로 부담없이 만들고 수정 및 삭제할 수 있습니다.

모든 작업은 웹과 모바일 양쪽에 최적화됩니다. 물론 이메일용 코드까지도요.

🎉 템플릿 실제로 활용하기

디자인과 개발이 끝났다고 바로 발송할 수 있는 건 아니었습니다. 실제 운영에 쓰려면 세 단계가 더 필요했습니다.

• 변수 처리: 가안으로 채워둔 데이터 필드 값들을 변수로 치환했습니다.
• 변수명 협의: 변수명과 처리 방식은 백엔드 개발자분께 도움을 받아 진행했습니다. 결국 데이터를 채워주는 쪽과의 약속이 맞아야 하니까요.
• 이메일 특화 HTML 변환 최종 검증: 메일건(메일 CRM 툴)에 import할 수 있는, 이메일에 최적화된 HTML 코드로 변환했습니다.
  웹용 HTML이 이메일의 테이블 기반 구조로 옮겨지는 과정에서 종종 레이아웃이 깨지는 경험을 했던 터라, 이 단계는 특히 집중해서 웹과 모바일을 검증했습니다.

👩🏻‍💻 발송 테스트와 검증

마지막은 실제 발송 검증이었습니다.

각 템플릿의 HTML을 메일건 템플릿으로 저장하고, 변수가 의도대로 채워지는지 확인했습니다.
그리고 개발자분께 요청하여 테스트 발송을 돌려보며 최종 검증을 마쳤습니다.

🛍️ 마케팅으로의 확장

이 방식의 진가는 트랜잭션 메일을 넘어 마케팅 영역에서도 드러났습니다.

마케팅 메일은 프로모션 형태에 따라 자유롭고 다채로운 컨셉이 필요합니다.

이런 메일들 역시 디자인부터 구현까지 직접 진행했고, 마케팅용 메일 발송은 메일건이 아닌, 팀 내 별도 어드민을 활용했습니다.
이로써 정형화된 템플릿과 자유로운 캠페인, 양쪽 모두를 한 사람의 흐름 안에서 다룰 수 있게 되었습니다.

마케팅용 디자인 역시 컨셉이 충분히 축적되면, 트랜잭션 메일처럼 템플릿을 골라 바로 활용할 수 있는 형태로 발전시킬 예정입니다.

🥳 무엇이 달라졌나요?

디자이너가 템플릿을 직접 만들고 구현하면서 얻은 변화는 분명했습니다.

1. 디자인과 구현 사이의 QA가 사라졌습니다

: 디자인한 사람이 곧 구현한 사람이니, 의도와 결과 사이의 간극 자체가 사라졌습니다.

2. 하루 걸리던 일이, 이젠 1시간만에

: 요청하고 기다리는 시간이 사라졌습니다(상황에 따라 차이는 있습니다)

• AS IS: 디자인 완료 후 개발 및 디자인 QA 까지 대략 1일 이상
• TO BE: 디자인 + 구현 + QA 를 한 번에 대략 1시간

3. 마케팅 메일 실험을 주도적으로 컨트롤할 수 있습니다.

: 가설을 세우고 바로 테스트하는 사이클이 빨라졌습니다.

4. 지속적인 모니터링이 가능해졌습니다.

: 제작된 템플릿의 종류와 현재 디자인 상태를 상시 파악할 수 있게 됐습니다.

👍 개인 회고

이번 작업은 단순히 이메일 버그 하나를 고친 경험이 아니었습니다.

디자이너의 결과물이 사용자에게 닿기까지의 전 과정을 직접 책임져본 경험이었고, 그 과정에서 제가 다룰 수 있는 범위가 한 단계 넓어졌습니다.

사실 처음에는 부담이 컸습니다. 제가 디자인하고 구현한 결과물이 곧바로 사용자에게 전달된다는 것 자체가 무서웠고, 그중에서도 가장 두려웠던 건 뭔가 잘못돼도 그 사실조차 모르고 지나가는 상황이었죠. 개발은 제게 낯선 영역이니까요.

하지만 이 지점마저 클로드와 함께 작업하고 검증하는 과정을 거치며 하나씩 해소해나갈 수 있었습니다.
혼자였다면 놓쳤을 부분을 함께 짚어가며 만들고 확인하니, 두려움은 통제할 수 있는 대상이 됐습니다.

"여기까지가 내 일"이라고 그었던 선을 한 번 넘어보니, 그 너머에도 디자이너가 충분히 잘 해낼 수 있는 일들이 있었습니다.

앞으로도 업무의 범위를 스스로 한정 짓지 않고, 지금 하고 있는 일 안에서 더 효율적인 방법을 계속 찾아가려 합니다.