#11
주식 데일리 뉴스레터 (baeksang №092 에디토리얼)
| 출처 | baeksang.dev №092 (2026-07-22자) — HC 직접 지정 + 토큰 7종 제공 |
| 날짜 | 2026-07-22 |
| 카테고리 | web |
| 태그 | newsletter, editorial, email, mono-label, hairline, red-accent, pretendard |
🗣️ 이렇게 말하세요
"11번(주식 데일리 뉴스레터 (baeksang №092 에디토리얼)) 스타일로 만들어줘"
에이전트용 정본: ~/design-team/references/web/stock-daily-baeksang-20260722.md
📦 실제 적용 사례
- 주식 데일리 2026-07-22판 (첫 적용)07-23 08:00부터 구독자 실발송 전환 완료 (com.hc.stock-daily), 정본 템플릿 = ~/stock-daily/template.html
~/stock-daily/newsletter-2026-07-22.html
| 색상 | 토큰 | HEX |
|---|---|---|
| background | #FFFFFF | |
| heading | #18181B | |
| body | #393632 | |
| label | #8B8B73 | |
| accent | #D2462F | |
| hairline | #C9C6BA |
| 역할 | 폰트 | 비고 |
|---|---|---|
| heading | Pretendard (800, 자간 -0.01em) | |
| body | Pretendard (시스템 폴백 스택) | |
| label | SF Mono → Menlo → Consolas (모노스페이스) |
관찰 체크리스트 (레퍼런스 충실 프로토콜 1단계)
| # | 항목 | 레퍼런스는? (관찰) |
|---|---|---|
| 1 | 레이아웃 형태 | 흰 배경 640px 단일 칼럼(좌우 패딩 28px), 섹션을 1px 헤어라인 + 상하 32px 여백으로만 구분 — 카드·박스 없음 |
| 2 | 네비게이션 | 이메일이라 해당 없음 — 상단 모노 마스트헤드(STOCK DAILY ↔︎ 발행 정보 좌우 배치)가 헤더 역할 |
| 3 | 진도 표시 | 해당 없음 — 제로패딩 넘버링(01 02 03, mono 700 레드)이 항목 순서 인지를 대신함 |
| 4 | 인터랙션 | 정적 이메일 — 관련 기사(레드 13px, 밑줄 없음)와 수신거부(레드 밑줄) 텍스트 링크만 |
| 5 | 색·타이포그래피 | Pretendard 본문 + SF Mono 대문자 라벨(자간 0.15~0.2em)의 2원 체계, 검정·웜그레이 바탕에 레드 #d2462f 단일 액센트(하락만 블루 #2f5f8a) |
| 6 | 도식·표 | 시장 지표를 표 괘선 없이 이름(mono 라벨)-값(우정렬)-등락(레드/블루) 3열 행 리스트로, 행 사이 헤어라인만 |
| 7 | 콜아웃 | 박스형 요소는 참고 링크 밴드(#f5f5f2 풀블리드) 단 1개 — 나머지 강조는 전부 룰선(4px 블랙 바·2px 강조 룰·1px 헤어라인) |
| 8 | 반응형 | max-width 640px 중앙 정렬로 모바일 메일 클라이언트에서 그대로 축소되는 이메일 규격 |
| 9 | 표지(헤드) | 4px 블랙 바 → 모노 마스트헤드 → 레드 오버라인 '데일리 시황 브리핑' → 20px/800 타이틀 → 2px 블랙 룰. ★원안 확정(시안 B~H 반려, 재논의 금지 — 2026-07-22 HC) |
📐 상세 디자인 가이드 (재현용)
경위: HC가 baeksang.dev №092를 레퍼런스로 지정하고 컬러 토큰 7종(
#18181b#393632#8b8b73#d2462f#000000#ececec#e5e5e0)을 직접 제공 → 디자인 에이전트가 레퍼런스 원본 CSS를 fetch해 10항목 체크리스트로 분해 → 이메일 제약(인라인 CSS)에 맞춰 8개 반영. 조사 중 발견: 레퍼런스의#fee500은 카카오톡 공유 버튼 전용색(본문 강조 아님), 실제 본문 액센트는 골드#a8791f— 전부 HC 지정 레드#d2462f로 통일했다.
컬러 토큰 (전량)
| token | hex | 용도 |
|---|---|---|
| surface.base | #FFFFFF |
페이지 배경 (전체 흰색, 배경색 대역 없음) |
| accent.bar | #000000 |
최상단 4px 액센트 바 (페이지 시작 1회) |
| text.heading | #18181B |
H1·H2·H3 제목, 2px 강조 룰선 |
| text.body | #393632 |
본문 문단 |
| text.tertiary | #8B8B73 |
모노 라벨·마스트헤드·출처·메타 |
| accent.red | #D2462F |
오버라인·제로패딩 넘버링·상승 등락·기사 링크·수신거부 |
| accent.blue | #2F5F8A |
하락 등락 (레드와 짝, 이 용도 외 사용 없음) |
| line.hairline | #C9C6BA |
1px 구분선 (섹션 경계·항목 사이) |
| surface.muted | #F5F5F2 |
참고 링크 밴드 — 유일한 박스형 요소 |
제외 색: #FEE500(카카오 버튼 전용 — 본문 강조 금지),
#A8791F(레퍼런스 골드 → 레드로 대체). HC 원 지정의
#ececec/#e5e5e0는 구현 과정에서
#C9C6BA/#F5F5F2로 정착했다.
타이포그래피 스케일 (실측)
| 요소 | 폰트 | 크기 | weight | 자간 | 색 |
|---|---|---|---|---|---|
| 마스트헤드·푸터 라벨 | mono | 10px | 400 | 0.15~0.18em, uppercase | #8B8B73 |
| 섹션 오버라인 | mono | 11px | 400 | 0.2em, uppercase | 타이틀=레드 / 본문 섹션=#8B8B73 |
| H1 (날짜 타이틀) | Pretendard | 20px | 800 | -0.01em | #18181B |
| H2 (국내/미국 증시) | Pretendard | 19px | 800 | -0.01em | #18181B |
| 기사 H3 | Pretendard | 16px | 800 | -0.01em, lh 1.3 | #18181B |
| 오늘의 3줄 문장 | Pretendard | 15px | 400 | lh 1.6 | #393632 |
| 기사 본문 | Pretendard | 14.5px | 400 | lh 1.75 | #393632 |
| 기사 링크·출처 | Pretendard | 13px | 400 | — | 링크=레드(밑줄 없음) / 출처=#8B8B73 |
| 지표 라벨 | mono | 11px | 600 | 0.05em, uppercase | #8B8B73 |
| 지표 값 | Pretendard | 14px | 600 | 우정렬 | #18181B |
| 지표 등락 | mono | 14px | 700 | 우정렬 | 상승=레드 / 하락=블루 |
| 넘버링 (01 02…) | mono | 13px | 700 | 우측 여백 12px | #D2462F |
폰트 스택(웹폰트 로드 없음, 폴백만): 본문
'Pretendard Variable', Pretendard, -apple-system, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif
/ 모노 'SF Mono', Menlo, Consolas, monospace
룰선 3단 체계 (이 디자인의 뼈대)
- 4px
#000액센트 바 — 페이지 최상단 1회 - 2px
#18181B강조 룰 — H1 아래 + 푸터 위 (수미상관, 본문을 두 룰이 감싼다) - 1px
#C9C6BA헤어라인 — 섹션 경계(위 여백 32px+아래 32px), 항목 사이(첫 항목은 생략하고 2번째부터), 마스트헤드 하단
컴포넌트 스펙
- 마스트헤드: 좌
STOCK DAILY↔︎ 우평일 오전 8시 발행, 둘 다 mono 10px 라벨, 하단 헤어라인 - 타이틀 블록: 레드
오버라인(
데일리 시황 브리핑) → 12px 간격 → H1 → 16px 간격 → 2px 룰 - 제로패딩 넘버링:
010203… mono 700 13px 레드 — baeksang의 시그니처 장치 - 지표 행: 3열(이름-값-등락), 셀 패딩 12px 4px, 행 사이 헤어라인
- 기사 블록: H3 → 본문 2~3문단(배경→내용→시사점) →
관련 기사레드 링크 목록(상단 헤어라인 margin-top 14px로 본문과 분리). 국내 기사 앵커는 수집 JSON의 원 제목 그대로(렌더러 강제 치환) - 참고 링크 밴드:
#F5F5F2풀블리드(패딩 24px 28px), 영어 원문 링크에 한글 번역 제목 병기 - 푸터: 2px 룰 → mono 라벨 2줄(발행 정보·면책) → 수신거부 링크(레드 밑줄)
금칙 (레퍼런스보다 우선하는 전역 규칙)
- 알약형 칩·배지 금지,
border-left강조바 금지, 이모지 금지 #FEE500본문 사용 금지 (카카오 브랜드 전용색)- 헤드는 원안 확정 — 블랙 밴드(B)·지표 티커(C)·토스풍 풀목업(E~H) 전부 제작해 비교했으나 HC가 원안으로 최종 회귀 (2026-07-22). 재논의 제안 금지. 렌더러에 티커·№호수 코드는 OPTIONAL_TOKENS로 잔존(템플릿에 토큰 넣으면 재활성화)
이메일 재현 규칙
- 모든 스타일 인라인 (
<style>·외부 CSS 불가 전제), 레이아웃은table role="presentation"또는 div - max-width 640px 중앙 정렬, 본문 좌우 패딩 28px
- 룰선을 div로 만들 때
font-size:0; line-height:0; 처리 (메일 클라이언트 여백 버그 방지) - 레퍼런스의 대형 디스플레이 타이포(32~138px)는 이메일 규격상 미재현 — 20px H1 + 2px 룰로 기능 대체
- 정본 템플릿:
~/stock-daily/template.html(placeholder 7종), 렌더러~/.cokacdir/workspace/hh4feekt/scripts/render-newsletter.py