【제26회】 사이드바를 분단시키지 않기! 광고 영역을 메인 콘텐츠 최상단에 배치하고 2컬럼 UI의 황금비

‘전체 폭으로 배치된 광고 배너가 소중한 내비게이션 사이드바를 상하로 완전히 두 동강내고 있었다’

레와(令和) 시대에 직접 만든 2채널 스타일 게시판 ‘츠우바이채널(つゔぁいちゃんねる, 2ch.biz)’ 개발 비화의 제26탄입니다. 이번에는 제25회에서 설치했던 디스플레이 광고 영역을 화면 전체 구조를 재검토하여 ‘헤더 직하의 전폭대’에서 ‘메인 콘텐츠 영역 최상부’로 대이동시키고, 2컬럼 레이아웃의 아름다움과 시선 유도(CTR)를 최대화시킨 레이아웃 개선 기록을 해설합니다.

제25회에서는 728x90의 표준 리더보드 광고 영역을 구현했으며, Core Web Vitals의 CLS 대책도 완벽하게 적용했습니다.

하지만 실제로 게시판을 일상적으로 사용하다 보니, 강렬한 디자인상의 위화감에 눈치챘습니다.

당초에는 HTML 헤더(id="site-header") 바로 아래에 화면 가로폭 전체를 덮는 형태로 광고 영역을 배치했습니다.

+-------------------------------------------------------+
| 헤더 |
+-------------------------------------------------------+
... 

이것의 어떤 점이 문제였을까요?

• 왼쪽 사이드바가 헤더에서 분리되어 버린다
  2채널이나 포털사이트의 매력은 왼쪽에 정연하게 늘어선 ‘게시판 목록 사이드바’입니다. 하지만 전폭 광고대가 끼어들면서, 헤더의 로고나 검색창과 왼쪽 사이드바 사이에 거대한 단절이 생겨 2컬럼 레이아웃으로서의 일체감이 완전히 무너져 버렸습니다. -
• 스크롤 시 시선이 길을 잃는다
  사용자는 ‘왼쪽 목록을 보면서, 오른쪽 스레드를 읽는다’라는 시선의 반복 운동을 합니다. 광고가 화면 전체를 두 동강내고 있으면, 시선의 부드러운 이동이 방해받게 됩니다.

‘광고 영역은 헤더 직하가 아니라, 오른쪽 메인 콘텐츠 영역(<main id="main-content">)의 최상부에 배치해야 한다!’

이 배치를 변경하기로 결정했습니다.

광고 영역을 메인 콘텐츠 내부로 옮겼습니다.

+-------------------------------------------------------+
| 헤더 |
+---------------------------+---------------------------+
... 

• 내비게이션의 매끄러움: 왼쪽 사이드바가 헤더와 직접 접하면서, 게시판 브라우징이 훨씬 직관적이고 아름다워졌습니다. -
• 어떤 화면을 열어도 일관된 배치: 메인 화면, 목록 화면, 스레드 보기 화면, 검색 화면 어디로 이동하더라도, 항상 오른쪽 영역의 맨 앞에 광고가 균등하게 중앙 정렬됩니다.

헤더 직하에서 <main id="main-content"> 내부로 광고 래퍼를 이전했습니다.

<div id="layout-container" class="layout-container">
<!-- 왼쪽 사이드바 -->
<aside id="board-sidebar" class="sidebar">
...

메인 콘텐츠의 가로폭(가변) 안에서, 항상 중앙에 보기 좋게 수 있도록 스타일링을 조정했습니다.

/* 스타일 정의 */
.content-ad-wrapper {
display: flex;
...

이 배치 변경은 단순히 외관만 예뻐진 것이 아닙니다. 웹 마케팅에서의 **‘시선 유도 법칙’**에서도 매우 큰 효과를 가져왔습니다.

웹사이트를 방문한 사용자의 시선은 보통 **‘F의 법칙’**을 따라 움직입니다.

• 먼저 왼쪽 상단의 로고를 본다
• 왼쪽 사이드바에 시선을 내려 흥미로운 게시판(예: 뉴스 속보)을 찾는다
• 게시판을 클릭하는 순간,
  시선은 오른쪽 메인 콘텐츠의 맨 앞(＝광고 바로 위)으로 점프한다

이전의 전폭 배치는, 시선이 사이드바로 향하기 전에 광고를 지나쳐 버려서, 광고가 ‘그냥 방해되는 벽’으로 뇌 속에서 무시(배너 블라인드니스)되고 있었습니다.

하지만, **‘게시판을 고른 직후, 목적의 콘텐츠를 보려는 시선의 착지점’**에 광고를 배치함으로써, 사용자의 시야에 자연스럽게 배너가 들어오고, 광고의 가시성(Viewability)과 클릭률(CTR)이 대폭 향상된 것입니다.

제26회에 걸쳐, UI의 일체감과 수익성을 고차원적으로 양립시키는 **'광고 영역을 메인 콘텐츠 최상단에 배치하는 방법'**에 대해 설명했습니다.

내비게이션 연속성 유지: 전폭의 배너 요소를 함부로 삽입하면 2컬럼 레이아웃의 미학과 사용성이 망가진다. -
콘텐츠 영역 내 중앙 정렬: 사용자가 가장 주목하는 작업 영역의 시작 부분에 배치하는 것이 가장 자연스럽다. -
시선 동선(F 패턴) 활용: '사이드바에서 선택 → 오른쪽을 본다'는 시선의 이동 경로 위에 배치함으로써, 거슬리지 않게 가시성을 최대화한다.

상단 광고 영역은 완벽하게 정착했습니다.

하지만 게시판에는 또 하나의 **'사용자가 가장 깊이 읽고 행동하기 쉬운 기적의 타이밍'**이 존재합니다.

바로 스레드의 1000번째 댓글, 또는 최신 댓글까지 다 읽은 **'스레드 최하단/푸터 직상부'**입니다.

다음 편에서는 【제27회】 스레드 독파 직후가 가장 클릭률이 높다! 푸터 직상 광고 배너 영역 추가와 가시성 최적화로 이어집니다!

본 서비스: https://2ch.biz/