구글 애드센스 설정 추가

realcoding2003 · realcoding2003 · commit 5b31e24edcc0 · 2025-06-08T22:12:05.000+09:00
- _config.yml 파일에 구글 애드센스 클라이언트 정보 및 자동 광고 설정 추가
- default.html 레이아웃에 구글 애드센스 포함 태그 추가
- post.html 레이아웃에 포스트 상단 및 하단 광고 포함
- main.css 파일에 애드센스 스타일 추가
diff --git a/_config.yml b/_config.yml
@@ -13,6 +13,12 @@ default_lang: "ko"
 # Google Analytics
 google_analytics: G-E2F9P3J8TQ  # 실제 GA4 측정 ID로 교체 필요
 
+# Google AdSense
+adsense:
+  client: ca-pub-4992764083187170
+  auto_ads: true
+  show_ads: true
+
 # Build settings
 markdown: kramdown
 highlighter: rouge
diff --git a/_includes/adsense-banner.html b/_includes/adsense-banner.html
@@ -0,0 +1,14 @@
+{% if site.adsense.client and site.adsense.show_ads and jekyll.environment == 'production' %}
+<!-- AdSense 배너 광고 -->
+<div class="ad-container">
+  <ins class="adsbygoogle"
+       style="display:block"
+       data-ad-client="{{ site.adsense.client }}"
+       data-ad-slot="{{ include.slot | default: 'auto' }}"
+       data-ad-format="auto"
+       data-full-width-responsive="true"></ins>
+  <script>
+       (adsbygoogle = window.adsbygoogle || []).push({});
+  </script>
+</div>
+{% endif %} 
diff --git a/_includes/adsense.html b/_includes/adsense.html
@@ -0,0 +1,13 @@
+{% if site.adsense.client and site.adsense.show_ads and jekyll.environment == 'production' %}
+<!-- Google AdSense Auto Ads -->
+<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ site.adsense.client }}"
+     crossorigin="anonymous"></script>
+{% if site.adsense.auto_ads %}
+<script>
+  (adsbygoogle = window.adsbygoogle || []).push({
+    google_ad_client: "{{ site.adsense.client }}",
+    enable_page_level_ads: true
+  });
+</script>
+{% endif %}
+{% endif %} 
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -59,6 +59,9 @@
     
     <!-- Google Analytics -->
     {% include analytics.html %}
+    
+    <!-- Google AdSense -->
+    {% include adsense.html %}
 </head>
 
 <body>
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -48,12 +48,18 @@ <h1 class="post-title">{{ page.title }}</h1>
         </div>
     </header>
 
+    <!-- 포스트 상단 광고 -->
+    {% include adsense-banner.html %}
+
     <div class="post-content">
         <div class="container">
             {{ content }}
         </div>
     </div>
 
+    <!-- 포스트 하단 광고 -->
+    {% include adsense-banner.html %}
+
     <footer class="post-footer">
         <div class="container">
             <!-- 네비게이션 -->
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -1679,6 +1679,33 @@ a:hover {
     }
 }
 
+/* AdSense Styles */
+.ad-container {
+    margin: 2rem 0;
+    text-align: center;
+    border-top: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    padding: 1rem 0;
+    background-color: var(--background-secondary);
+}
+
+.ad-container::before {
+    content: "Advertisement";
+    display: block;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+@media (max-width: 768px) {
+    .ad-container {
+        margin: 1.5rem 0;
+        padding: 0.75rem 0;
+    }
+}
+
 @media (max-width: 480px) {
     .main-content {
         margin-top: 90px !important; /* 작은 모바일에서는 약간 줄임 */
