매일 아침 AI 뉴스를 받아보는 사람에게 필요한 것은 더 많은 정보가 아니라, 더 빨리 판단할 수 있는 구조입니다. 뉴스레터를 다시 설계하며 가장 먼저 던진 질문도 이것이었습니다. "이 메일은 30초 안에 읽을지 말지를 결정하게 해주는가?"
이번 작업은 단순한 이메일 템플릿 교체가 아니었습니다. 틸노트 에이전트가 여러 소스를 읽고, 소화하고, 자체 문장으로 뉴스 저널을 만든 뒤 이를 구독자가 읽기 쉬운 카드 UI로 전달하는 유즈케이스였습니다. AS-IS가 텍스트 중심의 발송물이었다면, TO-BE는 AI Agent가 만든 콘텐츠를 제품처럼 소비하게 만드는 인터페이스에 가깝습니다.
AS-IS: 정보는 있었지만 읽는 리듬이 약했습니다
기존 뉴스레터의 문제는 콘텐츠 부족이 아니었습니다. 오히려 핵심 뉴스, 링크, 요약은 존재했습니다. 다만 사용자가 메일을 열었을 때 "어디부터 봐야 하는지"를 스스로 판단해야 했습니다.
텍스트 기반 뉴스레터는 제작 속도가 빠릅니다. 하지만 매일 반복되는 정보 제품에서는 약점이 드러납니다. 제목, 출처, 요약, 행동 버튼이 같은 무게로 보이면 사용자는 훑어보기보다 해석부터 해야 합니다. AI 뉴스처럼 낯선 고유명사와 빠른 변화가 많은 분야에서는 이 비용이 더 커집니다.
그래서 이번 개편의 방향은 "더 예쁜 메일"이 아니라 "판단 순서를 설계한 메일"이었습니다.
TO-BE: 코드 기반 카드 UI로 뉴스의 위계를 만들었습니다
TO-BE에서는 각 뉴스를 하나의 카드로 분리했습니다. 이미지는 관심을 끌고, 출처는 신뢰의 기준을 만들고, 제목은 이슈의 문을 엽니다. 요약은 시간을 줄이고, 핵심 bullet은 훑어보기를 돕습니다. 마지막에는 [틸노트로 읽기] 버튼을 두었습니다.
이 순서가 중요합니다. 버튼을 먼저 누르게 만드는 구조가 아니라, 충분히 이해한 뒤 더 읽을 사람에게 다음 행동을 제안하는 구조이기 때문입니다.
구성은 크게 네 부분으로 고정했습니다.
Header: 틸노트에서 온 메일이라는 신호입니다
News Card: 이미지, 출처, 제목, 요약, 핵심 정리, 링크입니다
Footer: 구독 정보와 신뢰 요소입니다
Layout: 폭, 여백, 폰트, 다크모드 대응입니다
이렇게 구조를 고정하면 매일 다른 뉴스가 들어와도 사용자는 매번 새로 학습하지 않아도 됩니다. 디자인 시스템이 브랜드 색상보다 먼저 해야 하는 일은 바로 이 읽기 리듬을 유지하는 것입니다.
왜 React Email과 TypeScript였을까요
이메일은 웹페이지가 아닙니다. 특히 Outlook Windows는 전통적으로 브라우저 엔진이 아니라 Microsoft Word 기반 렌더링 엔진을 사용해 HTML 이메일을 표시해 왔고, 이 때문에 flexbox, grid, border-radius 같은 웹의 당연한 표현이 깨질 수 있습니다1.
그래서 카드 UI를 만들더라도 웹 컴포넌트를 그대로 옮기는 방식은 위험합니다. React Email을 선택한 이유는 여기에 있습니다. React Email은 Html, Container, Section, Button, Img 같은 이메일용 컴포넌트를 제공하고, 이를 이메일 클라이언트가 읽을 수 있는 HTML로 변환하는 흐름을 지원합니다2.
TypeScript는 단순한 개발 편의가 아니었습니다. 뉴스 카드에는 제목, 출처, 요약, 핵심 포인트, 이미지, 원문 링크, 틸노트 링크가 필요합니다. 이 중 하나가 빠지면 카드의 의미가 무너집니다. 타입은 발송 전 체크리스트처럼 작동합니다. "보낸 뒤 발견하는 실수"를 줄이는 UX 장치인 셈입니다.
AI Agent가 만드는 뉴스레터의 진짜 차이
이번 작업에서 중요한 점은 카드 UI만이 아닙니다. 콘텐츠 생산 방식 자체가 바뀌었습니다.
틸노트 에이전트는 원문 하나를 그대로 요약해 붙이는 방식이 아니라, 비슷한 소스 여러 개를 읽고 맥락을 소화한 뒤 자체 문장으로 뉴스 글을 만듭니다. 법적으로 모든 위험이 자동으로 사라진다고 단정할 수는 없지만, 원문 복제 중심의 뉴스레터보다 저작권 부담을 낮추는 방향인 것은 분명합니다.
여기서 [틸노트로 읽기]는 단순 링크가 아닙니다. 메일은 30초짜리 판단 화면이고, 틸노트 본문은 더 깊게 읽는 공간입니다. 즉 뉴스레터는 AI Agent가 만든 지식 콘텐츠로 들어가는 진입 UI가 됩니다.
이 관점에서 보면 뉴스레터는 마케팅 발송물이 아니라 AI Agent의 결과물을 경험하게 만드는 제품 표면입니다.
한계와 트레이드오프: 화려함보다 안정성입니다
이메일 UI는 웹 UI보다 보수적으로 설계해야 합니다. Gmail, Apple Mail, Outlook은 CSS와 다크모드를 서로 다르게 처리합니다. 일부 클라이언트는 스타일을 제거하거나 제한하고, Outlook 계열은 여전히 특수한 제약을 갖습니다3.
그래서 이번 디자인의 기준은 "브랜드 블루가 모든 환경에서 정확히 같은가"가 아니었습니다. 더 중요한 기준은 다음이었습니다.
버튼이 어두운 화면에서도 구분되는가입니다
본문 대비가 충분한가입니다
이미지가 로딩되지 않아도 의미가 전달되는가입니다
카드 간 간격이 무너지지 않는가입니다
Gmail과 Outlook에서 핵심 구조가 유지되는가입니다
이메일에서는 완벽한 시각 통제보다 읽기 안정성이 더 중요합니다. 좋은 뉴스레터는 눈에 띄는 것보다 먼저 망가지지 않아야 합니다.
뉴스레터는 발송물이 아니라 반복되는 인터페이스입니다
이번 개편의 결론은 명확합니다. AI 뉴스레터의 품질은 "얼마나 많은 뉴스를 넣었는가"보다 "사용자가 얼마나 적은 피로로 판단할 수 있는가"에 달려 있습니다.
AS-IS는 정보를 전달했습니다. TO-BE는 정보를 읽는 순서를 설계했습니다. 그리고 틸노트 에이전트는 그 안에 들어갈 콘텐츠를 여러 소스 기반으로 소화해 자체 문장으로 만듭니다.
AI Agent를 활용해 뉴스, 리서치, 저널을 꾸준히 보내려는 팀이라면 템플릿의 화려함보다 먼저 봐야 할 것이 있습니다. 콘텐츠가 매일 바뀌어도 신뢰, 위계, 읽기 리듬이 유지되는가. 그 질문에 답할 수 있을 때 뉴스레터는 단순 메일이 아니라 하나의 읽기 제품이 됩니다.
참고
1Email Client Compatibility: What Works Where
3The Complete Guide to Email Client Rendering Differences in 2026
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.