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

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

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-06-26 15:17:28 +09:00
parent 35323f2b2c
commit b1228ddb4b
4 changed files with 415 additions and 50 deletions
+6 -3
View File
@@ -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>