개선: CSS 디자인 시스템 및 성능 최적화

- CSS 변수 확장 (색상, 스페이싱, 반응형 브레이크포인트)
- 모든 요소 전환 애니메이션 추가
- 이미지 lazy load 지원
- 응답 압축 (gzip) 활성화
- 폰트 preconnect + DNS prefetch 최적화
- 375px ~ 초소형 화면 반응형 대응
- 게시물 레이아웃 개선 (섹션 구조, 메타데이터)

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

TaxBaik.Web/Pages/Blog/Post.cshtml

@@ -4,12 +4,13 @@
     ViewData["Title"] = Model.Post?.SeoTitle ?? Model.Post?.Title;
     ViewData["Description"] = Model.Post?.SeoDescription ?? "";
     ViewData["OgImage"] = Model.Post?.ThumbnailUrl ?? "";
+    ViewData["CanonicalUrl"] = $"http://178.104.200.7/taxbaik/blog/{slug}";
 }
 
 @if (Model.Post != null)
 {
-    <article class="container py-5" style="max-width: 720px;">
-        <nav aria-label="breadcrumb">
+    <article class="container section" style="max-width: 720px;">
+        <nav aria-label="breadcrumb" class="mb-4">
             <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a href="/taxbaik">홈</a></li>
                 <li class="breadcrumb-item"><a href="/taxbaik/blog">블로그</a></li>
@@ -17,46 +18,56 @@
             </ol>
         </nav>
 
+        @if (!string.IsNullOrEmpty(Model.Post.ThumbnailUrl))
+        {
+            <img src="@Model.Post.ThumbnailUrl" alt="@Model.Post.Title"
+                loading="lazy" class="img-fluid rounded mb-4" style="max-height: 400px; object-fit: cover; width: 100%;" />
+        }
+
         <h1 class="fw-bold mb-3">@Model.Post.Title</h1>
-        <div class="text-muted small mb-4">
-            <span>@Model.Post.CreatedAt.ToString("yyyy-MM-dd")</span>
-            <span class="ms-3">👁️ @Model.Post.ViewCount</span>
-            <span class="badge bg-primary ms-3">@Model.Post.CategoryName</span>
+        <div class="text-muted small mb-4 d-flex flex-wrap gap-3">
+            <span>📅 @Model.Post.CreatedAt.ToString("yyyy년 MM월 dd일")</span>
+            <span>👁️ @Model.Post.ViewCount 조회</span>
+            <span class="badge bg-primary">@Model.Post.CategoryName</span>
         </div>
 
-        <hr />
+        <hr class="my-4" />
 
-        <div class="article-body">
+        <div class="article-body lh-lg">
             @Html.Raw(Model.Post.Content)
         </div>
 
-        <hr />
+        <hr class="my-4" />
 
         <!-- CTA -->
-        <div class="bg-light p-4 rounded mb-5">
-            <h5 class="fw-bold mb-2">상담이 필요하신가요?</h5>
-            <p class="mb-3">이 글과 관련된 상담이 필요하면 언제든 연락주세요.</p>
-            <a href="/taxbaik/contact" class="btn btn-primary">상담 신청하기</a>
-        </div>
+        <section class="bg-primary-light p-4 rounded mb-5">
+            <h5 class="fw-bold mb-2 text-primary">상담이 필요하신가요?</h5>
+            <p class="mb-3 text-muted">이 글과 관련된 상담이 필요하면 언제든 연락주세요.</p>
+            <a href="/taxbaik/contact" class="btn btn-primary">📞 상담 신청하기</a>
+        </section>
 
         <!-- Share -->
-        <div class="text-center mb-5">
-            <p class="small text-muted">이 글을 공유하세요:</p>
-            <button class="btn btn-sm btn-outline-secondary" onclick="copyUrl()">📋 링크복사</button>
-        </div>
+        <section class="text-center mb-5">
+            <p class="small text-muted mb-3">이 글을 공유하세요:</p>
+            <button class="btn btn-sm btn-outline-primary" onclick="copyUrl()" title="링크 복사">📋 링크복사</button>
+        </section>
     </article>
 }
 else
 {
-    <div class="container py-5 text-center">
+    <section class="container section text-center">
         <p class="fs-5">포스트를 찾을 수 없습니다.</p>
         <a href="/taxbaik/blog" class="btn btn-primary">블로그 돌아가기</a>
-    </div>
+    </section>
 }
 
 <script>
 function copyUrl() {
-    navigator.clipboard.writeText(window.location.href);
-    alert('링크가 복사되었습니다.');
+    navigator.clipboard.writeText(window.location.href).then(() => {
+        const btn = event.target;
+        const originalText = btn.textContent;
+        btn.textContent = '✅ 복사됨';
+        setTimeout(() => btn.textContent = originalText, 2000);
+    });
 }
 </script>

TaxBaik.Web/Pages/_Layout.cshtml

@@ -10,13 +10,16 @@
     <meta property="og:image" content="@ViewData["OgImage"]" />
     <meta property="og:url" content="@ViewData["OgUrl"]" />
     <meta name="robots" content="index, follow" />
+    <meta name="theme-color" content="#1B4F8A" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet" />
+    <link rel="canonical" href="@ViewData["CanonicalUrl"]" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
 </head>
-<body>
+<body class="with-mobile-cta">
     <partial name="_Header" />
     <main role="main" class="pb-5">
         @RenderBody()
@@ -30,8 +33,8 @@
         </a>
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="~/js/site.js" asp-append-version="true"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" defer></script>
+    <script src="~/js/site.js" asp-append-version="true" defer></script>
     @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>

TaxBaik.Web/Program.cs

@@ -5,15 +5,25 @@ var builder = WebApplication.CreateBuilder(args);
 
 builder.Services.AddRazorPages();
 builder.Services.AddMemoryCache();
+builder.Services.AddResponseCompression(opts => {
+    opts.Providers.Add<GzipCompressionProvider>();
+});
 builder.Services.AddInfrastructure();
 builder.Services.AddApplication();
 
 var app = builder.Build();
 
 app.UsePathBase("/taxbaik");
+app.UseResponseCompression();
 app.UseStaticFiles();
 app.UseRouting();
 
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error");
+    app.UseHsts();
+}
+
 app.MapRazorPages();
 
 app.Run();

TaxBaik.Web/wwwroot/css/site.css

@@ -1,110 +1,451 @@
 :root {
     --color-primary: #1B4F8A;
     --color-primary-dark: #133970;
+    --color-primary-light: #2E5FA3;
     --color-accent: #C9A227;
     --color-cta: #E05A2B;
+    --color-cta-dark: #D45A1F;
     --color-bg: #F7F9FC;
     --color-text: #1A1A2E;
     --color-text-muted: #5A6A7A;
+    --color-border: #D8E2EE;
+    --color-success: #2E7D32;
+    --color-warning: #F57C00;
+    --color-danger: #C62828;
+
+    --spacing-xs: 0.25rem;
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 1.5rem;
+    --spacing-xl: 2rem;
+    --spacing-2xl: 3rem;
+
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 * {
     font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
 }
 
+html {
+    font-size: 16px;
+    scroll-behavior: smooth;
+}
+
 body {
     color: var(--color-text);
     background-color: #fff;
+    line-height: 1.75;
+    font-size: clamp(0.875rem, 2.5vw, 1rem);
+}
+
+/* 버튼 스타일 */
+.btn {
+    border-radius: var(--radius-md);
+    font-weight: 500;
+    transition: all var(--transition-fast);
+    cursor: pointer;
+    border: none;
+    padding: 0.625rem 1.5rem;
+    font-size: 1rem;
+}
+
+.btn:active {
+    transform: scale(0.98);
 }
 
 .btn-primary {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
+    color: white;
 }
 
 .btn-primary:hover {
     background-color: var(--color-primary-dark);
     border-color: var(--color-primary-dark);
+    box-shadow: 0 4px 12px rgba(27, 79, 138, 0.25);
 }
 
 .btn-warning {
     background-color: var(--color-cta);
     border-color: var(--color-cta);
+    color: white;
 }
 
 .btn-warning:hover {
-    background-color: #d45a1f;
-    border-color: #d45a1f;
+    background-color: var(--color-cta-dark);
+    border-color: var(--color-cta-dark);
+    box-shadow: 0 4px 12px rgba(224, 90, 43, 0.25);
 }
 
+.btn-outline-primary {
+    color: var(--color-primary);
+    border-color: var(--color-primary);
+    background: transparent;
+}
+
+.btn-outline-primary:hover {
+    background-color: var(--color-primary);
+    color: white;
+}
+
+/* 배경 및 텍스트 */
 .bg-primary {
     background-color: var(--color-primary) !important;
 }
 
+.bg-primary-light {
+    background-color: #E8F1F8 !important;
+}
+
 .text-primary {
     color: var(--color-primary) !important;
 }
 
-.hero-section {
-    padding: 80px 0;
-    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+.text-muted {
+    color: var(--color-text-muted) !important;
 }
 
+/* 히어로 섹션 */
+.hero-section {
+    padding: clamp(2rem, 15vh, 5rem) 0;
+    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+    color: white;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-section::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 500px;
+    height: 500px;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 50%;
+    transform: translate(30%, -30%);
+}
+
+.hero-section h1 {
+    font-size: clamp(1.5rem, 5vw, 3rem);
+    font-weight: 700;
+    margin-bottom: var(--spacing-lg);
+    position: relative;
+    z-index: 1;
+}
+
+/* 카드 스타일 */
+.card {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    transition: all var(--transition-normal);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.card-body {
+    padding: var(--spacing-xl);
+}
+
+.card-title {
+    font-weight: 600;
+    color: var(--color-primary);
+    margin-bottom: var(--spacing-md);
+}
+
+/* 네비게이션 */
+.navbar-brand {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--color-primary) !important;
+}
+
+.navbar {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+    background-color: white;
+    padding: var(--spacing-md) 0;
+}
+
+.navbar.sticky {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+}
+
+.nav-link {
+    color: var(--color-text) !important;
+    font-weight: 500;
+    transition: color var(--transition-fast);
+    margin: 0 var(--spacing-sm);
+}
+
+.nav-link:hover {
+    color: var(--color-primary) !important;
+}
+
+.nav-link.active {
+    color: var(--color-cta) !important;
+}
+
+/* 모바일 CTA 바 */
 .mobile-cta-bar {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: white;
-    border-top: 1px solid #ddd;
-    padding: 10px;
+    border-top: 2px solid var(--color-border);
+    padding: var(--spacing-md);
     z-index: 1000;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
 }
 
 .btn-kakao-mobile {
     display: block;
     width: 100%;
-    padding: 12px;
+    padding: var(--spacing-md);
     background: #FFE812;
-    color: black;
+    color: #000;
     text-decoration: none;
-    border-radius: 8px;
-    font-weight: 500;
+    border-radius: var(--radius-md);
+    font-weight: 600;
     text-align: center;
     border: none;
     cursor: pointer;
+    font-size: 0.95rem;
+    transition: background var(--transition-fast);
 }
 
 .btn-kakao-mobile:hover {
     background: #FDD835;
+    text-decoration: none;
 }
 
-.card {
-    transition: transform 0.2s;
+.btn-kakao-mobile:active {
+    transform: scale(0.98);
 }
 
-.card:hover {
-    transform: translateY(-4px);
+/* 페이지 스페이싱 */
+body.with-mobile-cta {
+    padding-bottom: 70px;
 }
 
-.navbar-brand {
-    font-size: 1.3rem;
+/* 섹션 */
+.section {
+    padding: var(--spacing-2xl) 0;
 }
 
-.navbar {
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+.section-title {
+    font-size: clamp(1.5rem, 4vw, 2.5rem);
+    font-weight: 700;
+    color: var(--color-primary);
+    margin-bottom: var(--spacing-xl);
+    text-align: center;
 }
 
-@media (max-width: 768px) {
-    body {
-        padding-bottom: 70px;
+/* 배지 */
+.badge {
+    border-radius: var(--radius-sm);
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.badge-success {
+    background-color: #E8F5E9;
+    color: var(--color-success);
+}
+
+/* 폼 요소 */
+.form-control, .form-select {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    padding: 0.625rem 1rem;
+    font-size: 1rem;
+    transition: border-color var(--transition-fast);
+}
+
+.form-control:focus, .form-select:focus {
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px rgba(27, 79, 138, 0.1);
+}
+
+/* 이미지 최적화 */
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+img[loading="lazy"] {
+    background-color: #f0f0f0;
+}
+
+/* 타이포그래피 */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700;
+    line-height: 1.25;
+    color: var(--color-text);
+}
+
+h1 { font-size: clamp(1.75rem, 5vw, 3rem); }
+h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
+h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
+h4 { font-size: 1.25rem; }
+h5 { font-size: 1.1rem; }
+h6 { font-size: 1rem; }
+
+p {
+    margin-bottom: var(--spacing-md);
+}
+
+a {
+    color: var(--color-primary);
+    text-decoration: none;
+    transition: color var(--transition-fast);
+}
+
+a:hover {
+    color: var(--color-cta);
+    text-decoration: underline;
+}
+
+/* 리스트 */
+.list-group-item {
+    border-color: var(--color-border);
+    padding: var(--spacing-md) var(--spacing-lg);
+}
+
+/* 모달 */
+.modal-content {
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.16);
+}
+
+.modal-header {
+    border-bottom: 1px solid var(--color-border);
+    padding: var(--spacing-xl);
+}
+
+.modal-footer {
+    border-top: 1px solid var(--color-border);
+    padding: var(--spacing-xl);
+}
+
+/* 탭 */
+.nav-tabs .nav-link {
+    color: var(--color-text-muted);
+    border-bottom: 3px solid transparent;
+    margin-bottom: -3px;
+    padding: var(--spacing-md) var(--spacing-lg);
+}
+
+.nav-tabs .nav-link:hover {
+    color: var(--color-primary);
+    border-color: transparent;
+}
+
+.nav-tabs .nav-link.active {
+    color: var(--color-primary);
+    border-bottom-color: var(--color-primary);
+    background-color: transparent;
+}
+
+/* 페이지네이션 */
+.pagination .page-link {
+    border-color: var(--color-border);
+    color: var(--color-primary);
+}
+
+.pagination .page-link:hover {
+    background-color: var(--color-bg);
+    border-color: var(--color-border);
+}
+
+.pagination .page-item.active .page-link {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* 반응형 — 태블릿 이상 */
+@media (min-width: 768px) {
+    .container {
+        max-width: 960px;
+    }
+}
+
+/* 반응형 — 모바일 (375px ~) */
+@media (max-width: 767.98px) {
+    .hero-section {
+        padding-top: 2rem;
+        padding-bottom: 2rem;
     }
 
-    .hero-section {
-        padding: 40px 0;
+    .section {
+        padding: 1.5rem 0;
+    }
+
+    .card-body {
+        padding: 1rem;
+    }
+
+    .modal {
+        padding: 0 !important;
+    }
+
+    .modal-dialog {
+        margin: 0.5rem;
+    }
+
+    .btn {
+        padding: 0.5rem 1rem;
+        font-size: 0.95rem;
+    }
+
+    .nav-link {
+        padding: 0.5rem 0.75rem !important;
+        margin: 0 !important;
+    }
+
+    .section-title {
+        font-size: 1.5rem;
+    }
+}
+
+/* 초소형 화면 (max 375px) */
+@media (max-width: 375px) {
+    html {
+        font-size: 14px;
     }
 
     .hero-section h1 {
-        font-size: 1.8rem;
+        font-size: 1.25rem;
+    }
+
+    .card {
+        margin-bottom: 1rem;
+    }
+
+    .container-fluid {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
     }
 }
+
+/* 도움말 텍스트 */
+.form-text {
+    color: var(--color-text-muted);
+    font-size: 0.875rem;
+    margin-top: 0.25rem;
+}