From a3acd9320af13391057707a844ea01e2cd93cc60 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Wed, 29 Apr 2026 15:01:59 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=EA=B0=9C=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=ED=85=8C=EB=A7=88=EC=99=80=20=ED=8C=A8=EB=84=90=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EB=B3=B4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/main.css              |  97 ++++++++++++++++++++++++--
 components/site/LeftSidebar.vue  | 114 ++++++++++++++++++++++++++-----
 components/site/PostCard.vue     |  27 ++++----
 components/site/RightSidebar.vue |  78 ++++++++++++++++++---
 components/site/SiteHeader.vue   |  23 ++++---
 docs/changelog.md                |   6 ++
 docs/history.md                  |   8 +++
 docs/spec.md                     |  13 +++-
 docs/todo.md                     |   2 +-
 docs/update.md                   |  11 +++
 layouts/post.vue                 |   2 +-
 package-lock.json                |  23 +++++--
 package.json                     |   2 +-
 pages/index.vue                  |  57 ++++++++++++++--
 14 files changed, 390 insertions(+), 73 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index e9c58c2..ca4a57d 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3,29 +3,67 @@
 @tailwind utilities;
 
 @layer base {
+  :root {
+    --site-bg: #fbfbfa;
+    --site-panel: #f6f6f5;
+    --site-panel-strong: #ffffff;
+    --site-text: #111111;
+    --site-muted: #454545;
+    --site-soft: #6f7480;
+    --site-line: #e2e2e0;
+    --site-input: #f2f2f1;
+    --site-accent: #ff4f2e;
+    --site-accent-text: #ffffff;
+    --site-invert: #111111;
+    --site-invert-text: #ffffff;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --site-bg: #050505;
+      --site-panel: #080808;
+      --site-panel-strong: #0d0d0d;
+      --site-text: #f4f4f2;
+      --site-muted: #c7c7c2;
+      --site-soft: #8b8e96;
+      --site-line: #252525;
+      --site-input: #171717;
+      --site-accent: #ff4f2e;
+      --site-accent-text: #ffffff;
+      --site-invert: #f4f4f2;
+      --site-invert-text: #111111;
+    }
+  }
+
   html {
     font-family: Pretendard, ui-sans-serif, system-ui, sans-serif;
-    color: #1f2328;
-    background: #f7f7f4;
+    color: var(--site-text);
+    background: var(--site-bg);
   }
 
   body {
     min-width: 320px;
     margin: 0;
+    background: var(--site-bg);
   }
 }
 
 @layer components {
   .site-shell {
-    @apply min-h-screen bg-surface text-ink;
+    min-height: 100vh;
+    color: var(--site-text);
+    background: var(--site-bg);
   }
 
   .site-content-grid {
     @apply mx-auto grid max-w-[1294px] grid-cols-1 px-4 lg:grid-cols-[287px_minmax(0,720px)_287px] lg:px-0;
+    min-height: calc(100vh - 57px);
+    background: var(--site-bg);
   }
 
   .site-section {
-    @apply border-b border-line bg-paper;
+    border-bottom: 1px solid var(--site-line);
+    background: var(--site-bg);
   }
 
   .site-section-header {
@@ -37,6 +75,55 @@
   }
 
   .post-prose {
-    @apply max-w-none text-[17px] leading-8 text-ink;
+    @apply max-w-none text-[17px] leading-8;
+    color: var(--site-text);
+  }
+
+  .site-header {
+    height: 57px;
+    border-bottom: 1px solid var(--site-line);
+    background: var(--site-panel);
+    color: var(--site-text);
+  }
+
+  .site-main {
+    min-height: calc(100vh - 57px);
+    border-left: 1px solid var(--site-line);
+    border-right: 1px solid var(--site-line);
+    background: var(--site-bg);
+  }
+
+  .site-sidebar {
+    min-height: calc(100vh - 57px);
+    background: var(--site-panel);
+    color: var(--site-text);
+  }
+
+  .site-sidebar-section {
+    border-bottom: 1px solid var(--site-line);
+  }
+
+  .site-muted {
+    color: var(--site-muted);
+  }
+
+  .site-soft {
+    color: var(--site-soft);
+  }
+
+  .site-input {
+    border: 1px solid var(--site-line);
+    background: var(--site-input);
+    color: var(--site-text);
+  }
+
+  .site-button {
+    background: var(--site-invert);
+    color: var(--site-invert-text);
+  }
+
+  .site-accent-button {
+    background: var(--site-accent);
+    color: var(--site-accent-text);
   }
 }
diff --git a/components/site/LeftSidebar.vue b/components/site/LeftSidebar.vue
index f9b7023..daadffc 100644
--- a/components/site/LeftSidebar.vue
+++ b/components/site/LeftSidebar.vue
@@ -1,23 +1,105 @@
 <template>
-  <aside class="left-sidebar hidden w-[287px] lg:block">
-    <div class="left-sidebar__block py-3 pl-0 pr-3">
-      <p class="left-sidebar__eyebrow text-xs font-semibold uppercase text-muted">
-        Categories
-      </p>
-      <nav class="left-sidebar__nav mt-4 grid gap-2 text-sm">
-        <NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/dev">
-          DEV
+  <aside class="left-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
+    <div class="left-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
+      <div class="left-sidebar__block site-sidebar-section py-3 pl-0 pr-3">
+        <nav class="left-sidebar__nav grid gap-1 text-[15px]">
+          <NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/">
+            <span>Home pages</span>
+            <span>⌄</span>
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/tags/note">
+            Tags
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/pages/about">
+            Authors
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/posts/hello-sori-studio">
+            Style
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/posts/custom-writing-tool">
+            <span>Post types</span>
+            <span>⌄</span>
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link flex items-center justify-between py-2 pl-3" to="/pages/contact">
+            <span>Members</span>
+            <span>⌄</span>
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__nav-link py-2 pl-3" to="/pages/projects">
+            Landing pages
+          </NuxtLink>
+        </nav>
+      </div>
+
+      <div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
+        <div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
+          <span>Categories</span>
+          <span>⌃</span>
+        </div>
+        <div class="left-sidebar__category-grid mt-4 grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/books">
+            <span class="h-4 w-1 rounded-full bg-orange-500" /> Books
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/business">
+            <span class="h-4 w-1 rounded-full bg-indigo-500" /> Business
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/dev">
+            <span class="h-4 w-1 rounded-full bg-cyan-500" /> Tech
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/science">
+            <span class="h-4 w-1 rounded-full bg-teal-400" /> Science
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/design">
+            <span class="h-4 w-1 rounded-full bg-fuchsia-500" /> Design
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/music">
+            <span class="h-4 w-1 rounded-full bg-pink-500" /> Music
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/health">
+            <span class="h-4 w-1 rounded-full bg-green-500" /> Health
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/play">
+            <span class="h-4 w-1 rounded-full bg-violet-500" /> Gaming
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/travel">
+            <span class="h-4 w-1 rounded-full bg-purple-500" /> Travel
+          </NuxtLink>
+          <NuxtLink class="left-sidebar__category flex items-center gap-3" to="/tags/diy">
+            <span class="h-4 w-1 rounded-full bg-yellow-400" /> DIY
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
+        <div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
+          <span>Authors</span>
+          <span>⌃</span>
+        </div>
+        <div class="left-sidebar__authors mt-4 grid gap-4 text-sm">
+          <div class="left-sidebar__author flex items-center gap-3">
+            <span class="h-8 w-8 rounded-full bg-[#e7c49d]" />
+            <span><strong class="block">sori</strong><span class="site-soft">Editor</span></span>
+          </div>
+          <div class="left-sidebar__author flex items-center gap-3">
+            <span class="h-8 w-8 rounded-full bg-[#98b7d5]" />
+            <span><strong class="block">zenn</strong><span class="site-soft">Writer</span></span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="left-sidebar__footer flex items-center justify-between px-1 py-4 text-xs">
+      <nav class="left-sidebar__footer-nav flex gap-4">
+        <NuxtLink to="/pages/links">
+          Portal
         </NuxtLink>
-        <NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/note">
-          NOTE
+        <NuxtLink to="/pages/about">
+          Docs
         </NuxtLink>
-        <NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/review">
-          REVIEW
-        </NuxtLink>
-        <NuxtLink class="left-sidebar__nav-link hover:text-muted" to="/tags/play">
-          PLAY
+        <NuxtLink to="/pages/projects">
+          Projects
         </NuxtLink>
       </nav>
-    </div>
+      <span class="left-sidebar__theme-dot">☾</span>
+    </footer>
   </aside>
 </template>
diff --git a/components/site/PostCard.vue b/components/site/PostCard.vue
index 5e5ea5d..b2bea43 100644
--- a/components/site/PostCard.vue
+++ b/components/site/PostCard.vue
@@ -9,18 +9,21 @@ defineProps({
 
 <template>
   <article class="post-card site-section">
-    <div class="post-card__body site-section-body">
-      <p class="post-card__meta text-xs font-semibold uppercase text-muted">
-        {{ post.tag }} · {{ post.publishedAt }}
-      </p>
-      <h2 class="post-card__title mt-3 text-2xl font-semibold leading-tight">
-        <NuxtLink class="post-card__title-link hover:text-muted" :to="post.to">
-          {{ post.title }}
-        </NuxtLink>
-      </h2>
-      <p class="post-card__excerpt mt-3 text-sm leading-6 text-muted">
-        {{ post.excerpt }}
-      </p>
+    <div class="post-card__body site-section-body flex gap-4">
+      <div class="post-card__thumb h-20 w-36 shrink-0 rounded-lg bg-[linear-gradient(135deg,#06333a,#f4a261)]" />
+      <div class="post-card__content min-w-0">
+        <h2 class="post-card__title text-base font-semibold leading-tight">
+          <NuxtLink class="post-card__title-link hover:opacity-70" :to="post.to">
+            {{ post.title }}
+          </NuxtLink>
+        </h2>
+        <p class="post-card__excerpt mt-2 text-sm leading-6 site-muted">
+          {{ post.excerpt }}
+        </p>
+        <p class="post-card__meta mt-2 text-xs site-muted">
+          {{ post.publishedAt }} / {{ post.tag }}
+        </p>
+      </div>
     </div>
   </article>
 </template>
diff --git a/components/site/RightSidebar.vue b/components/site/RightSidebar.vue
index 3fa7218..41a4e0c 100644
--- a/components/site/RightSidebar.vue
+++ b/components/site/RightSidebar.vue
@@ -1,17 +1,73 @@
 <template>
-  <aside class="right-sidebar hidden w-[287px] lg:block">
-    <div class="right-sidebar__block py-5 pl-5 pr-0">
-      <p class="right-sidebar__eyebrow text-xs font-semibold uppercase text-muted">
-        Portal
-      </p>
-      <div class="right-sidebar__links mt-4 grid gap-3 text-sm">
-        <NuxtLink class="right-sidebar__link hover:text-muted" to="/pages/projects">
-          Projects
-        </NuxtLink>
-        <NuxtLink class="right-sidebar__link hover:text-muted" to="/pages/contact">
-          Contact
+  <aside class="right-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
+    <div class="right-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
+      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+        <div class="right-sidebar__profile flex items-center gap-3">
+          <div class="right-sidebar__logo grid h-12 w-12 place-items-center rounded-2xl bg-[var(--site-invert)] text-2xl font-bold text-[var(--site-invert-text)]">
+            井
+          </div>
+          <div>
+            <p class="right-sidebar__title font-semibold">
+              sori.studio
+            </p>
+            <p class="right-sidebar__description text-sm site-muted">
+              Thoughts, stories and ideas.
+            </p>
+          </div>
+        </div>
+        <form class="right-sidebar__subscribe mt-4 flex gap-2">
+          <input class="right-sidebar__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
+          <button class="right-sidebar__button rounded-lg px-4 py-2 text-sm font-semibold site-button" type="button">
+            Subscribe
+          </button>
+        </form>
+      </div>
+
+      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+        <div class="right-sidebar__row flex items-center justify-between">
+          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
+            Follow
+          </p>
+          <div class="right-sidebar__social flex gap-3 text-sm">
+            <span>f</span>
+            <span>𝕏</span>
+            <span>rss</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+        <div class="right-sidebar__row flex items-center justify-between">
+          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
+            Recommended
+          </p>
+          <span>↗</span>
+        </div>
+        <div class="right-sidebar__links mt-4 grid gap-3 text-sm">
+          <NuxtLink class="right-sidebar__link font-semibold" to="/posts/hello-sori-studio">
+            sori.studio 첫 글과 방향
+          </NuxtLink>
+          <NuxtLink class="right-sidebar__link font-semibold" to="/pages/projects">
+            Projects and services
+          </NuxtLink>
+          <NuxtLink class="right-sidebar__link font-semibold" to="/pages/links">
+            Links and portal
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
+        <p class="right-sidebar__about text-sm leading-6 site-muted">
+          sori.studio는 글과 프로젝트 링크를 한 곳에 쌓아두는 개인 블로그/CMS입니다.
+        </p>
+        <NuxtLink class="right-sidebar__about-button mt-4 inline-flex rounded-lg px-4 py-2 text-sm font-semibold site-accent-button" to="/pages/about">
+          About sori.studio
         </NuxtLink>
       </div>
     </div>
+
+    <footer class="right-sidebar__footer py-4 pl-5 pr-0 text-xs site-muted">
+      ©2026 sori.studio
+    </footer>
   </aside>
 </template>
diff --git a/components/site/SiteHeader.vue b/components/site/SiteHeader.vue
index 84d5c54..b30bc95 100644
--- a/components/site/SiteHeader.vue
+++ b/components/site/SiteHeader.vue
@@ -1,18 +1,21 @@
 <template>
-  <header class="site-header sticky top-0 z-20 h-[57px] border-b border-line bg-paper/95 backdrop-blur">
+  <header class="site-header sticky top-0 z-20 backdrop-blur">
     <div class="site-header__inner mx-auto flex h-full max-w-[1294px] items-center justify-between px-4 lg:px-0">
-      <NuxtLink class="site-header__brand text-[19px] font-semibold tracking-normal" to="/">
+      <NuxtLink class="site-header__brand flex items-center gap-2 text-[18px] font-semibold tracking-normal" to="/">
+        <span class="site-header__brand-mark inline-block h-5 w-4 rounded-sm bg-[var(--site-text)]" />
         sori.studio
       </NuxtLink>
-      <nav class="site-header__nav flex items-center gap-5 text-sm text-muted">
+      <div class="site-header__search hidden h-9 w-[470px] items-center rounded-lg px-3 text-sm md:flex site-input">
+        <span class="site-header__search-icon mr-2 text-lg leading-none">⌕</span>
+        <span class="site-header__search-text site-soft">Search</span>
+        <span class="site-header__search-key ml-auto rounded-md px-2 text-xs site-soft site-input">/</span>
+      </div>
+      <nav class="site-header__nav flex items-center gap-3 text-sm">
+        <NuxtLink class="site-header__buy site-accent-button rounded-lg px-4 py-2 font-semibold" to="/pages/about">
+          Subscribe
+        </NuxtLink>
         <NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/about">
-          About
-        </NuxtLink>
-        <NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/links">
-          Links
-        </NuxtLink>
-        <NuxtLink class="site-header__nav-link hover:text-ink" to="/admin">
-          Admin
+          Account
         </NuxtLink>
       </nav>
     </div>
diff --git a/docs/changelog.md b/docs/changelog.md
index c2c8c12..8f09b0b 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,11 @@
 # 업데이트 요약
 
+## v0.0.3
+
+- 공개 화면의 라이트/다크 색상 토큰을 추가.
+- 좌우 사이드바가 헤더 아래 전체 높이를 차지하도록 레이아웃 보정.
+- Thred 참고 화면에 가깝게 헤더, 히어로, 사이드바 임시 콘텐츠를 보강.
+
 ## v0.0.2
 
 - Nuxt 3 기반 프로젝트 실행 구조를 추가.
diff --git a/docs/history.md b/docs/history.md
index 7ecf5c5..2f41dba 100644
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,13 @@
 # 의사결정 이력
 
+## 2026-04-29 v0.0.3
+
+### 공개 화면 테마와 패널 구조 보정
+
+참고 화면 기준으로 공개 화면은 단순한 흰색 페이지가 아니라 헤더 아래 좌측 사이드바, 중앙 본문, 우측 사이드바가 각각 전체 화면 높이를 차지하는 패널 구조로 정했다. 사이드바 콘텐츠가 적어도 패널 자체는 `calc(100vh - 57px)` 높이를 유지한다.
+
+색상은 초반부터 라이트/다크 모드 기준을 잡기 위해 CSS 변수로 관리한다. 기본 배경, 패널, 라인, 텍스트, 보조 텍스트, 입력, 강조 버튼 색상을 분리해 이후 디자인 조정 시 Tailwind 클래스 전체를 갈아엎지 않도록 했다.
+
 ## 2026-04-29 v0.0.2
 
 ### Nuxt 통합 백엔드 구조 결정
diff --git a/docs/spec.md b/docs/spec.md
index 131d1c6..979250f 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -18,9 +18,16 @@
 | 요소 | 크기/속성 |
 |------|-----------|
 | Header | 높이 57px |
-| Left Aside | 너비 287px, 패딩 12px 12px 12px 0 |
+| Left Aside | 너비 287px, 최소 높이 calc(100vh - 57px), 패딩 12px 12px 12px 0 |
 | Main | 너비 720px, 패딩 32px 24px (헤더), 16px 24px (섹션) |
-| Right Aside | 너비 287px, 패딩 20px 0 20px 20px |
+| Right Aside | 너비 287px, 최소 높이 calc(100vh - 57px), 패딩 20px 0 20px 20px |
+
+### 공개 화면 색상
+
+- 라이트/다크 모드는 CSS 변수로 관리
+- 기본 배경, 패널, 라인, 텍스트, 보조 텍스트, 입력, 강조 버튼 색상을 분리
+- 시스템 다크 모드는 `prefers-color-scheme: dark` 기준으로 우선 대응
+- Thred 참고 화면처럼 사이드바와 본문은 같은 화면 안에서 구분되는 패널과 라인으로 표현
 
 ### Post 페이지
 
@@ -228,6 +235,6 @@ APP_PORT=43118
 
 ## 버전 관리
 
-- 현재 버전: v0.0.2
+- 현재 버전: v0.0.3
 - 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
 - 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정
diff --git a/docs/todo.md b/docs/todo.md
index b3776c8..0f0255d 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -26,7 +26,7 @@
 
 ## 프론트엔드 개발
 
-- [ ] 공개 화면 반응형 세부 스타일 조정
+- [ ] 공개 화면 모바일 사이드바/네비게이션 방식 결정
 - [ ] Thred 참고 화면 기준 시각 QA
 - [ ] 게시물 카드 실제 데이터 연동
 - [ ] 태그 페이지 실제 데이터 연동
diff --git a/docs/update.md b/docs/update.md
index 0fc691a..7630881 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,16 @@
 # 업데이트 이력
 
+## v0.0.3
+
+- Thred 참고 화면 기준 공개 레이아웃 색상 토큰 정리.
+- 라이트/다크 모드 CSS 변수 기반 테마 추가.
+- 헤더 아래 3단 컬럼 최소 높이를 화면 전체 높이로 수정.
+- 좌우 사이드바를 본문과 별개로 전체 높이 패널처럼 표시하도록 수정.
+- 홈 화면 히어로, 추천 영역, 최신 글 영역 구조 보강.
+- 사이트 헤더 검색 영역과 구독/계정 액션 구조 추가.
+- 좌우 사이드바 임시 콘텐츠 구조 보강.
+- 로컬 개발/프리뷰 포트 43117 유지.
+
 ## v0.0.2
 
 - Nuxt 3 프로젝트 기본 실행 구조 추가.
diff --git a/layouts/post.vue b/layouts/post.vue
index c9a45cc..49ee5a7 100644
--- a/layouts/post.vue
+++ b/layouts/post.vue
@@ -3,7 +3,7 @@
     <SiteHeader />
     <div class="site-content-grid post-layout__grid">
       <LeftSidebar />
-      <main class="post-main w-full bg-paper px-5 py-8 lg:w-[720px]">
+      <main class="site-main post-main w-full px-5 py-8 lg:w-[720px]">
         <slot />
       </main>
       <RightSidebar />
diff --git a/package-lock.json b/package-lock.json
index 8ad2a81..2b40388 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "sori.studio",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "sori.studio",
-      "version": "0.0.2",
+      "version": "0.0.3",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/tailwindcss": "^6.14.0",
@@ -4857,12 +4857,14 @@
       "license": "MIT"
     },
     "node_modules/commander": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
-      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-13.1.0.tgz",
+      "integrity": "sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==",
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
       }
     },
     "node_modules/commondir": {
@@ -9996,6 +9998,15 @@
         "url": "https://opencollective.com/svgo"
       }
     },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/tagged-tag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
diff --git a/package.json b/package.json
index 389c6a7..9681fb8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sori.studio",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/pages/index.vue b/pages/index.vue
index a97cb8b..6fd9a8a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -20,16 +20,59 @@ const posts = [
 <template>
   <MainColumn>
     <section class="home-hero site-section">
-      <div class="home-hero__inner site-section-header">
-        <p class="home-hero__eyebrow text-xs font-semibold uppercase text-muted">
-          Personal Blog / CMS
-        </p>
-        <h1 class="home-hero__title mt-3 text-5xl font-semibold leading-tight tracking-normal">
-          sori.studio
+      <div class="home-hero__inner site-section-header text-center">
+        <h1 class="home-hero__title mx-auto max-w-[620px] text-3xl font-semibold leading-tight tracking-normal md:text-[28px]">
+          Ideas <em>published</em> for meaningful conversation, discussed and shaped by the community
         </h1>
-        <p class="home-hero__description mt-4 max-w-xl text-base leading-7 text-muted">
+        <p class="home-hero__description mx-auto mt-3 max-w-[500px] text-base leading-7 site-muted">
           글을 쌓고, 프로젝트와 링크를 연결하고, 오래 쓰기 좋은 개인 블로그를 직접 구축합니다.
         </p>
+        <form class="home-hero__subscribe mx-auto mt-5 flex max-w-[345px] gap-2">
+          <input class="home-hero__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
+          <button class="home-hero__button rounded-lg px-5 py-2 text-sm font-semibold site-button" type="button">
+            Subscribe
+          </button>
+        </form>
+      </div>
+    </section>
+
+    <section class="home-featured site-section">
+      <div class="home-featured__header site-section-body flex items-center justify-between">
+        <h2 class="home-featured__title text-sm font-semibold uppercase site-muted">
+          Featured
+        </h2>
+        <div class="home-featured__controls flex gap-4">
+          <span>‹</span>
+          <span>›</span>
+        </div>
+      </div>
+      <div class="home-featured__items grid grid-cols-1 gap-4 px-6 pb-6 md:grid-cols-3">
+        <article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#071b22,#0f827c)] p-4 text-white">
+          <h3 class="mt-20 text-sm font-semibold leading-tight">
+            Essential tools and techniques for getting started
+          </h3>
+        </article>
+        <article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#182434,#d4b06b)] p-4 text-white">
+          <h3 class="mt-20 text-sm font-semibold leading-tight">
+            Setting up your first home server from scratch
+          </h3>
+        </article>
+        <article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#141414,#8a5a44)] p-4 text-white">
+          <h3 class="mt-20 text-sm font-semibold leading-tight">
+            Writing notes that stay useful over time
+          </h3>
+        </article>
+      </div>
+    </section>
+
+    <section class="home-latest site-section">
+      <div class="home-latest__header site-section-body flex items-center justify-between">
+        <h2 class="home-latest__title text-sm font-semibold uppercase site-muted">
+          Latest
+        </h2>
+        <button class="home-latest__view rounded-lg px-3 py-2 text-sm site-input" type="button">
+          목록
+        </button>
       </div>
     </section>