상단 고정 공지로 뉴스레터·유튜브 구독 유도하는 실전 코드 5가지
"CSS 알림 바"를 블로그 상단에 고정시키면 별도의 팝업 없이도 뉴스레터 구독, 유튜브 채널, 이벤트 공지를 모든 페이지에서 일관되게 노출할 수 있다. 잘 만든 알림 바 하나가 팝업보다 구독 전환율이 높은 경우가 많다. 팝업은 닫힌 이후 기억에서 사라지지만, 상단 고정 공지는 스크롤과 무관하게 항상 눈에 들어오기 때문이다.
블로그를 어느 정도 운영하다 보면 "구독 좀 늘었으면..." 하는 생각이 든다. 본문 끝에 "구독 부탁드립니다"를 쓰는 건 이미 글을 다 읽은 독자에게만 닿는다. "CSS 알림 바"는 블로그에 들어오는 순간부터 공지를 보여준다. 이 글에서는 순수 CSS만으로 상단 고정 알림 바를 만드는 실전 코드 5가지를 정리했다.
알림 바의 구조와 기본 원리
"CSS 알림 바"는 `position: fixed`와 `top: 0`으로 화면 상단에 고정된 얇은 띠 형태의 UI 요소다. 스크롤을 내려도 항상 화면 최상단에 남아있기 때문에 독자가 어느 섹션을 보고 있든 공지가 시야에 들어온다. 구조는 매우 단순하다 — 배경색이 있는 전폭 div 안에 텍스트와 버튼이 들어가는 형태다.
UX 관점에서 알림 바가 효과적인 이유는 방해가 적기 때문이다. 팝업은 콘텐츠를 가리고 강제로 주의를 끌어서 독자가 거부감을 느낀다. 반면 알림 바는 콘텐츠 상단에 조용히 위치해서 관심 있는 사람만 클릭한다. 전환율은 낮지만 이탈률도 낮아서 장기적으로 더 효과적이다.
기본 상단 고정 알림 바 코드
가장 기본적인 형태의 알림 바 HTML+CSS다.
/* CSS */
.notice-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background-color: #1a73e8;
color: #ffffff;
text-align: center;
padding: 10px 16px;
font-size: 14px;
box-sizing: border-box;
}
.notice-btn {
display: inline-block;
padding: 4px 12px;
background: #fff;
color: #1a73e8;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
margin-left: 8px;
}
이 코드로 블로그 상단에 파란 알림 바가 고정된다. `z-index: 9999`는 다른 요소 위에 겹쳐 표시되도록 보장한다.
닫기 버튼 추가하기 (CSS+JS 최소 사용)
알림 바에 닫기 버튼이 없으면 독자가 불편해할 수 있다. 최소한의 JS로 닫기 기능을 추가하는 방법이다.
.notice-close {
background: none;
border: none;
color: #fff;
font-size: 16px;
cursor: pointer;
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
padding: 4px 8px;
}
알림 바 색상과 CTA 버튼 디자인
"CSS 알림 바"의 색상 선택이 클릭률에 큰 영향을 미친다. 경험적으로 효과적인 색상 조합이 있다.
- 뉴스레터 구독: 진한 남색 계열(#1a237e) + 흰색 텍스트. 신뢰감을 준다.
- 유튜브 구독: 유튜브 레드(#FF0000) + 흰색. 브랜드 일관성.
- 이벤트/할인 공지: 주황(#FF6D00) 또는 노란색 계열. 긴박감을 준다.
- 일반 공지: 회색(#424242) + 흰색. 무난하고 어디서나 잘 맞음.
CTA 버튼은 알림 바 배경색과 대비되는 색이어야 한다. 배경이 진하면 버튼을 흰색으로, 배경이 밝으면 버튼을 진한 색으로. 버튼에 `border-radius: 20px`처럼 둥글게 처리하면 클릭 유도 효과가 높아진다.
모바일 최적화 알림 바 설정
모바일에서는 알림 바 텍스트가 너무 길면 줄바꿈이 발생해 높이가 예상 이상으로 커진다. 미디어 쿼리로 모바일 버전을 따로 잡아야 한다.
@media (max-width: 768px) {
.notice-bar {
font-size: 12px;
padding: 8px 40px 8px 12px; /* 닫기 버튼 공간 확보 */
}
.notice-bar span.long-text {
display: none; /* 모바일에서 긴 텍스트 숨기기 */
}
}
HTML에서 긴 설명 텍스트를 ``로 감싸두면 모바일에서 `display: none`으로 숨길 수 있다. 핵심 메시지와 버튼만 남겨서 깔끔하게 처리한다.
알림 바가 본문을 가리지 않게 처리하는 법
`position: fixed`는 일반 문서 흐름에서 벗어나기 때문에 알림 바 높이만큼 본문 상단이 가려지는 문제가 생긴다. 해결 방법은 body에 padding-top을 추가하는 것이다.
/* 알림 바 높이에 맞게 body 상단 여백 추가 */
body {
padding-top: 42px; /* 알림 바 높이와 동일하게 */
}
@media (max-width: 768px) {
body {
padding-top: 38px;
}
}
알림 바를 닫을 때 JavaScript로 `body.style.paddingTop = '0'`을 함께 적용하면 닫힌 후 생기는 빈 공간도 없어진다. 티스토리 블로그에서는 skin.html의 `` 태그 바로 다음에 알림 바 HTML을 추가하고, style.css에 위 CSS를 넣으면 된다.
참고 출처
- MDN Web Docs – position fixed
- MDN Web Docs – z-index
- Google UX Playbook for News
- 티스토리 스킨 편집 가이드
- Nielsen Norman Group – Notification Design