[NHN FORWARD 2021] Storybook으로 10분 만에 안내 메일 만들고 퇴근하는 법

NHN Cloud·nhn-forward-2021 ·2021년·

#i18n#developer-tools#html-email#storybook#component-design#frontend

AI 요약

흩어진 HTML 안내 메일을 찾아 복사하고 네 언어로 고치던 반복 작업을, Storybook 기반 템플릿 빌더로 바꾼 과정을 소개한다. 이메일 클라이언트 호환을 지키면서 기획자가 개발자 없이 다국어 메일을 만들도록, 컴포넌트·Story·Addon을 어떻게 조합했는지 보여준다.

핵심 포인트

이메일 클라이언트마다 rendering engine이 달라 Content-Type meta·inline style·table layout을 쓰고 외부 stylesheet·div 배치를 피하며, 페이지를 Logo·Title·Body·Footer 컴포넌트로 분해해 변하는 값만 props로 받는다
HTML을 모르는 기획자는 간단한 Markdown으로 본문을 쓰고(문법 범위가 작아 정규식 parser로 처리), 완성한 메일 하나를 Story 하나로 저장해 목록·변경 history 관리와 실시간 preview
국제화 함수 parameter를 scan해 translation key JSON을 만들고 Addon 선택값으로 언어를 즉시 교체하며, Download Addon이 Storybook iframe root 아래 Page 컴포넌트의 innerHTML을 formatting해 발송 가능한 HTML로 저장

왜 읽나반복되는 다국어 HTML 메일 제작을 비개발자에게 넘기고 싶은 팀에게, Storybook을 사내 도구로 확장하는 실전 아이디어.

챕터별 상세

010:10 – 4:24

HTML 안내 mail의 반복 작업

법적 고지와 서비스 안내 mail은 image·link·button을 포함한 HTML이고 여러 client와 네 언어에서 정확히 보여야 한다. 기존에는 협업 tool과 messenger에서 비슷한 file을 찾고 개발자가 markup을 수정한 뒤 언어별로 복사해 전달했다. 작은 문구 변경도 HTML 지식과 반복 검증이 필요해 10분 작업이 장시간으로 늘어나는 문제에서 builder 개발을 시작한다.

기존 mail은 한곳에서 history를 찾기 어렵고 공통 logo·style 변경을 과거 file에 적용할 수 없으며, 기획자가 개발자 없이 편집하기도 어렵다. 중앙 관리·component 재사용·비개발자 작성·client 호환·다국어 전환·HTML download를 필수 조건으로 정한다. Storybook의 Story, 동적 Control, 사용자 Addon을 결합하면 각 mail을 component usage로 저장하고 기능을 확장할 수 있다고 판단한다.

Email client마다 rendering engine이 달라 Content-Type meta, inline style, table layout을 사용하고 외부 stylesheet와 div 중심 배치를 피한다. Page를 Logo·Title·Body·Footer component로 분해해 공통 영역은 재사용하고 변하는 값만 props로 받는다. HTML과 CSS를 모르는 사용자는 간단한 Markdown으로 content를 쓰며, 필요한 문법 범위가 작아 정규식 parser로 style과 component를 생성한다.

완성한 mail 하나를 Story 하나로 저장해 목록과 변경 history를 관리하고 Control과 Canvas에서 실시간 preview한다. 국제화 함수의 parameter를 scan해 translation key JSON을 만들고 언어별 문구를 채운 뒤 Addon 선택값으로 즉시 교체한다. Download Addon은 Storybook iframe의 root 아래 Page component를 찾아 innerHTML을 formatting해 실제 발송 가능한 HTML file로 저장한다.

기존 Story를 수정하거나 Control에 Markdown을 입력해 새 mail을 만들고, 이미 여러 client에서 검증한 component로 호환성 재검사를 줄인다. Translation Addon으로 언어를 바꾸고 각 HTML을 바로 내려받거나 builder link를 기획자에게 전달한다. 공통 design은 component 한 곳만 바꾸면 과거 mail까지 적용되고, 단순 작성·번역·download에서 개발자 공수가 사라지는 효과를 확인한다.