docs: add demo link, screenshots, and motivation; add favicon and OG meta tags

Author: zooo-code

README.ko.md

@@ -2,8 +2,16 @@
 
 # 마크다운 → HTML 변환기
 
+**[브라우저에서 바로 사용하기](https://zooo-code.github.io/md2paste/)** — 설치나 가입 없이 동작하며, 글이 브라우저 밖으로 나가지 않습니다.
+
 마크다운으로 글을 쓰면, **어디에 붙여넣어도 동일하게 보이도록** 모든 스타일을 인라인(`style="..."`)으로 박아 넣은 HTML로 변환해 주는 도구입니다.
 
+![md2paste — 왼쪽은 에디터, 오른쪽은 붙여넣을 모습 그대로의 미리보기](docs/screenshot.ko.png)
+
+## 왜 만들었나
+
+AI가 발달하면서 점점 더 많은 글이 마크다운으로 작성되고 있습니다. AI가 읽고 쓰는 형식이 마크다운이기 때문입니다. 하지만 마크다운은 구조를 표현하는 형식이라 디자인 요소가 부족하고, 원본 `.md` 파일 그대로는 사람이 읽기에 아쉽습니다. 이 도구는 마크다운을 사람이 보기 좋은 HTML로 변환해서, 그대로 발행할 수 있게 합니다.
+
 많은 블로그·CMS는 외부 CSS나 클래스를 무시해서, 일반 HTML을 붙여넣으면 줄간격·제목·코드블록이 깨지기 쉽습니다. 그래서 이 도구는 문단·제목·코드블록·표 등 모든 요소에 스타일을 직접 입혀, 글쓰기 화면에 붙여넣기만 하면 깨지지 않고 그대로 보이게 합니다.
 
 > **이런 곳에서 쓸 수 있어요** — 티스토리, 네이버 블로그, 워드프레스, 노션, HTML 메일 등 **HTML 입력(붙여넣기)을 지원하는 곳이면 어디든** 동작합니다.

README.md

@@ -2,8 +2,16 @@ English | [한국어](README.ko.md)
 
 # Markdown → HTML Converter
 
+**[Try it in your browser](https://zooo-code.github.io/md2paste/)** — no install or signup; everything runs locally in your browser.
+
 Write in markdown and get HTML where **every style is baked inline** (`style="..."`), so it looks the same **wherever you paste it**.
 
+![md2paste — editor on the left, paste-ready preview on the right](docs/screenshot.png)
+
+## Why this exists
+
+With the rise of AI, more and more writing is done in markdown — it is the format AI tools read and write. But markdown describes structure, not presentation, so a raw `.md` file is plain and not very pleasant for a human to read. This tool converts markdown into HTML that looks good to a reader and is ready to publish as-is.
+
 Many blogs and CMSs ignore external CSS and classes, so plain HTML often breaks on paste — line spacing, headings, and code blocks fall apart. This tool writes styles directly onto every element (paragraphs, headings, code blocks, tables, and more), so it stays intact the moment you paste it into an editor.
 
 > **Where you can use it** — Tistory, Naver Blog, WordPress, Notion, HTML email, and anywhere else that **accepts HTML input (paste)**.

docs/screenshot.ko.png

@@ -5,6 +5,17 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>마크다운 → HTML 변환기</title>
 
+<meta name="description" content="마크다운을 어디에 붙여넣어도 깨지지 않는 인라인 스타일 HTML로 변환합니다. Convert markdown to inline-styled HTML that survives pasting anywhere — Tistory, Naver Blog, WordPress, Notion, email.">
+<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📝</text></svg>">
+
+<!-- Social sharing card (Open Graph + Twitter) -->
+<meta property="og:type" content="website">
+<meta property="og:title" content="md2paste — 마크다운 → HTML 변환기">
+<meta property="og:description" content="마크다운을 어디에 붙여넣어도 깨지지 않는 인라인 스타일 HTML로 변환합니다. 티스토리·네이버 블로그·워드프레스·노션·이메일 어디든.">
+<meta property="og:url" content="https://zooo-code.github.io/md2paste/">
+<meta property="og:image" content="https://zooo-code.github.io/md2paste/docs/screenshot.png">
+<meta name="twitter:card" content="summary_large_image">
+
 <!-- Markdown parser & code highlighter & diagrams (CDN) -->
 <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>