diff --git a/README.ko.md b/README.ko.md
index 497308b..1b9e30d 100644
--- a/README.ko.md
+++ b/README.ko.md
@@ -13,6 +13,8 @@
 
 Froala·TinyMCE·CKEditor 5·Quill 등 범용 WYSIWYG 에디터에는 줄자가 없고, Syncfusion·DevExpress·ONLYOFFICE 같은 무거운 문서형 컴포넌트에만 있습니다. `editor-ruler`는 **에디터 불문 코어** + 얇은 **에디터별 어댑터** 구조로 이 공백을 채웁니다.
 
+📄 **왜 만들었나:** [Every web rich-text editor is missing a ruler](https://medium.com/@sinny78/every-web-rich-text-editor-is-missing-a-ruler-bb749d9ee0d3) — 이 공백이 왜 생겼는지, 페이지 모델이 없는 HTML에서 줄자란 무엇일 수 있는지, 만들면서 밟은 함정들 (영문).
+
 ## 패키지
 
 | 패키지 | 설명 |
diff --git a/README.md b/README.md
index efc4af1..5c143ea 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,8 @@ A **Word-like horizontal ruler** for web rich-text editors — left/right margin
 
 Every classic WYSIWYG editor (Froala, TinyMCE, CKEditor 5, Quill, …) ships without a ruler; only heavyweight document-model components (Syncfusion, DevExpress, ONLYOFFICE) have one. `editor-ruler` fills that gap with an **editor-agnostic core** plus thin **per-editor adapters**.
 
+📄 **Background reading:** [Every web rich-text editor is missing a ruler](https://medium.com/@sinny78/every-web-rich-text-editor-is-missing-a-ruler-bb749d9ee0d3) — why the gap exists, what a ruler can mean when there is no page model, and the gotchas found while building this.
+
 ## Packages
 
 | Package | Description |
diff --git a/site/index.html b/site/index.html
index 75c917a..ea18929 100644
--- a/site/index.html
+++ b/site/index.html
@@ -110,6 +110,7 @@
         border-radius: 999px; padding: 3px 12px; font-size: 12.5px; color: var(--muted);
       }
       .hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
+      .hero-story { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
       .btn {
         display: inline-block; padding: 8px 18px; border-radius: 8px;
         font-size: 14px; font-weight: 600; border: 1px solid var(--line);
@@ -247,6 +248,11 @@ <h1 data-i18n="hero.h1">웹 에디터에는 줄자가 없었습니다.<br />이
         <a class="btn primary" href="#demo" data-i18n="cta.demo">라이브 데모 보기</a>
         <a class="btn" href="#start" data-i18n="cta.start">시작하기</a>
       </div>
+      <p class="hero-story" data-i18n="hero.story">
+        📄 왜 만들었나 —
+        <a href="https://medium.com/@sinny78/every-web-rich-text-editor-is-missing-a-ruler-bb749d9ee0d3" target="_blank" rel="noopener">Every web rich-text editor is missing a ruler</a>
+        (영문)
+      </p>
     </div>
 
     <div class="wrap">
@@ -476,6 +482,8 @@ <h2 data-i18n="h2.faq">자주 묻는 것</h2>
         'badge.vruler': 'Vertical ruler',
         'cta.demo': 'See the live demo',
         'cta.start': 'Get started',
+        'hero.story':
+          '📄 Why this exists — <a href="https://medium.com/@sinny78/every-web-rich-text-editor-is-missing-a-ruler-bb749d9ee0d3" target="_blank" rel="noopener">Every web rich-text editor is missing a ruler</a>',
         'h2.demo': 'Live demo — by editor',
         'tab.core': 'Core (contenteditable)',
         'chip.paragraphs': 'Paragraphs',