한국어 텍스트가 포함된 Excel 시트의 스크린샷
<Before>
뉴스레터를 매주 보내는데 디자인은 늘 스티비 기본 에디터로만 했어요. 블록을 끌어다 놓고 색 몇 개 바꾸는 정도였죠. 자유도가 거의 없으니 결과물도 늘 비슷했고 디자이너에게 맡길 수도 없는 상황이었습니다.디자이너 없이도 감도 높은 뉴스레터 템플릿을 만들고싶었습니다. 그리고 템플릿을 v2,v3로 만들더라도 일관된 디자인을 유지하고싶었어요. 그래서 리뉴얼된 결과물 ....
턱시도를 입고 쟁반을 들고 있는 웨이터
ㅉㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ잔
GPTERERS AI
<After>
처음엔 그냥 HTML로 디자인을 직접 짰어요
뉴스레터는 이메일로 가니까 일반 웹페이지처럼 만들면 안 돼요. 메일 앱마다 깨지거든요. 그래서 AI에게 만들 때부터 조건을 분명히 줬어요.
이메일 뉴스레터 HTML 만들어줘. 뼈대는 무조건 테이블 태그로 짜고,
디자인은 따로 빼지 말고 인라인 스타일로 작성해줘. 강조색은 주황 하나로 통일.
이렇게 부탁하니까 지메일이든 아웃룩이든 깨지지 않는 발송용 HTML이 나왔어요.
640px 흰 카드 안에 히어로 이미지부터 뉴스·활용 사례·소식·설문·푸터까지 들어가는, 한 호짜리 완성본이었죠.
마음에 안드는 부분을 계속 자연어로 이거 고쳐줘 저거 고쳐줘 하다보니 통일성이 떨어지는 부분들이 생기기 시작했어요. 뱃지의 규격이 달라진다거나 강조를 하기위해 억지로 넣는 요소가 생긴다거나..
그래서 이를 Design.md로 정리해야겠다고 생각했습니다!
Claude Design으로 디자인을 다듬었어요
웹사이트 홈페이지 스크린샷
디자인 자체의 완성도를 한 번 더 올리고 싶었어요. 그래서 디자인 전용 AI인 Claude Design에 넘겼어요.
1단계 — 여백과 위계 정돈. 섹션 사이 간격을 일정하게 맞추고, 제목과 본문의 크기 차이를 키워서 어디가 중요한지 한눈에 보이게 했어요. 읽는 리듬이 확 안정됐어요.
2단계 — 카드와 블록 디자인 개선. 뉴스 썸네일 카드, 소식 카드, 단계별 번호 같은 요소를 더 깔끔하게 다듬었어요. 구간마다 배경색(흰색·회색·베이지)으로 나눠서 긴 뉴스레터인데도 답답하지 않게요.
광고가 있는 한국 웹사이트
클로드 디자인을 제대로 써본적은 없는데 신세계였어요! 직관적이라 모두들 쓰시기 편할 것 같았습니다.
claude cli로 html 수정하는 것보다 확실히 디자인 개선에는 도움이 되었어요!
Mark up 기능으로 특정 부분만 지시해서 AI와의 소통이 더 편했고 조작(?)이 쉬웠고요.
주황색 배경의 웹사이트 스크린샷
굳이 html 켜가면서 볼 필요없이 탭으로 알잘딱깔센 나눠서 확읺는 것도 편했어요!
gptters ai - 스크린샷 1
특히 !!!!!!!!!! Tweaks 기능 너무 좋았어요 수정해가면서 비교해보고싶은 분들에게는 최고의 기능 ..
배경 색도 바꿔보고 디테일도 하나하나 잡아보면서 개 선할 수 있어서 좋았습니다.
마음에 안드는 부분을 계속 자연어로 이거 고쳐줘 저거 고쳐줘 하다보니 통일성이 떨어지는 부분들이 생기기 시작했어요. 뱃지의 규격이 달라진다거나 강조를 하기위해 억지로 넣는 요소가 생긴다거나..
그래서 이를 Design.md로 정리해야겠다고 생각했습니다!
Design.md 생성하고 고도화하기
완성본 HTML에서 실제로 쓰인 값만 뽑아서 규칙 문서로 만들었어요. AI에게 이렇게 부탁했어요.
이 뉴스레터 HTML에서 실제로 쓰인 색, 글자 크기, 여백, 둥근 모서리 값을
전부 뽑아서 Design.md로 정리해줘. 추측하지 말고 파일에 진짜 있는 값만 부탁해그랬더니 색 13종, 글 자 스타일 13종, 컴포넌트(뉴스 카드·단계 번호·버튼 등) 7종이 표로 정리됐어요. 핵심은 "앞으로는 이 값 안에서만 조합한다"는 거예요. 강조색은 주황 하나, 글자 굵기는 4단계만, 구간 구분은 배경색으로. 이렇게 정해두니 즉흥적으로 손댈 여지가 사라졌어요.
근데 아무리 생각해도 뚝딱 나오는 Design.md가 못미더워서 star 85K인 레포를 찾아
단순한 Design.md를 9개의 기준으로 고도화했습니다 !
https://github.com/VoltAgent/awesome-design-md 이 레포 참고햇어요 ㅎㅎ
한국어 색상 팔레트 - 한국어 색상 팔레트 - 한국어 색상 팔레트 - kore
놓치고있던 섹션도 꼼꼼하게 챙겨주고 스와치까지 쫙 뽑아줘서 디자인 베이스 없는 사람이 디자인 시스템 구축하기에 좋았던 레포였습니다 추천 !
마지막으로 "데이터만 넣으면 완성"되게 템플릿화했어요
다듬은 디자인을 빈 칸 채우기 형태로 바꿨어요. 제목 들어갈 자리, 뉴스 들어갈 자리, 사례 들어갈 자리처럼 바뀌는 부분만 표시 자리로 만들고(총 33개), 나머지 디자인은 통째로 고정했어요.
이 디자인에서 호마다 바뀌는 부분만 빈 칸 표시로 바꿔줘.
디자인은 절대 건드리지 말고, 내용 들어갈 자리만 표시해줘.
그리고 그 빈 칸에 데이터를 넣으면 완성본이 나오게 조립하는 것도 만들어줘.
이제는 매주 콘텐츠 데이터(뉴스·기본기·사례·배너)만 교체하면 발송용 HTML이 자동으로 나와요. 여기서 기획 뉴스레터로 변형하더라도 디자인 시스템 내에서 굴러가기때문에 일관성있는 디자인으로 출력됩니다 !
새로워진 지피터스의 뉴스레터를 만나보세요!
매주 꼭 필요한 AI 지식만 정리해서 보내드립니다 🐰
https://page.stibee.com/subscriptions/396603
