구글 블로그 메뉴바 상단 고정 CSS 방법 및 스크롤 고정 가이드

인터넷에서 마음에 드는 글을 발견해 집중해서 읽다 보면 문득 다른 카테고리의 글도 읽고 싶어질 때가 있습니다. 그런데 본문이 너무 길어서 한참을 내려왔다면 다시 맨 위로 올라가야 하는 번거로움이 생기기 마련입니다. 스마트폰이나 마우스 휠을 연신 굴리며 화면 맨 꼭대기까지 올라가는 과정은 생각보다 독자들을 쉽게 지치게 만듭니다. 특히 구글 블로그는 기본 뼈대가 다소 투박해서 이런 편의 기능이 빠져 있는 테마가 참 많습니다. 저도 예전에 다양한 홈페이지 디자인을 만지고 작업할 때 이 사소한 메뉴판 고정 유무에 따라 방문자들의 행동 반경이 완전히 달라지는 것을 수없이 목격했습니다. 상단 바가 늘 눈앞에 대기하고 있으면 독자들은 자연스럽게 다른 메뉴도 툭툭 눌러보게 됩니다. 이번 글에서는 일할 때 복잡한 플러그인이나 프로그램 수정 없이 단 몇 줄의 문장으로 메뉴판을 자석처럼 상단에 딱 붙여놓는 구글 블로그 메뉴바 상단 고정 CSS 방법을 알기 쉽게 정리해 드리겠습니다.

스크롤을 내려도 메뉴가 따라오는 화면의 비밀은 무엇일까요?

유명 뉴스 사이트나 잘 정돈된 쇼핑몰에 들어가 보면 화면을 아무리 아래로 내려도 로고와 주요 카테고리가 적힌 띠 모양의 메뉴바가 머리 위에 늘 조용히 동행하는 모습을 볼 수 있습니다. 이것은 마치 화면 상단에 투명한 자석을 붙여놓은 것과 같은 효과를 냅니다. 예전에는 이러한 움직임을 만들기 위해서 복잡한 화면 제어 스크립트 문장을 길게 작성해야만 했습니다. 화면의 위치를 계속 계산해서 특정 지점을 지나면 낚싯줄로 낚아채듯 고정하는 고난도 작업 방식이었습니다. 하지만 최근 웹 규칙이 발전하면서 아주 직관적인 명령어 하나로 이 모든 현상을 제어할 수 있게 되었습니다. 저는 이것이 마치 튼튼한 레일 위에 메뉴판을 얹어두고 스크롤과 함께 부드럽게 미끄러지도록 설계하는 것과 같다고 생각합니다.

그 비밀의 핵심 무기가 바로 position: sticky 라는 규칙입니다. 영어 단어 뜻 그대로 포스트잇처럼 화면에 '끈적하게' 달라붙는 성질을 의미합니다. 이 속성은 평소에는 자기 자리에 평범하게 머물러 있다가 스크롤을 내려서 화면 밖으로 사라지려고 하는 그 찰나의 순간에 화면 꼭대기에 찰떡처럼 들러붙어 움직이지 않는 아주 영리한 속성입니다. 화면 전체를 덮거나 레이아웃을 무너뜨리지 않으면서 딱 필요한 타이밍에만 작동하기 때문에 웹디자인 업계에서는 가히 혁명적인 치트키로 통합니다. 구글 블로그 메뉴바 상단 고정 CSS 방법을 고민할 때 이 규칙을 제대로 적용하기만 하면 초보자도 전문가 부럽지 않은 세련된 내비게이션 바를 완성할 수 있습니다.

자석처럼 달라붙는 position: sticky 속성의 마법 같은 원리

이 규칙이 작동하는 방식을 조금 더 쉽게 비유해 보겠습니다. 마트에서 쇼핑카트를 밀고 가는 상황을 상상해 보시기 바랍니다. 카트 안에 스마트폰을 넣어두면 내가 앞으로 걸어갈 때 스마트폰도 카트와 함께 앞으로 이동합니다. 이것이 일반적인 웹 요소들의 움직임입니다. 그런데 만약 카트 손잡이에 자석 거치대를 달고 스마트폰을 붙여놓는다면 어떻게 될까요? 카트 내부 공간이 아무리 움직여도 내 손과 가장 가까운 손잡이 위라는 특정 위치는 변하지 않고 내 눈앞에 고정되어 머물게 됩니다. sticky 속성은 바로 이 거치대 역할을 해주는 고마운 존재입니다. 저는 이 원리를 접하고 나서 복잡한 연산 없이도 화면 제어가 가능하다는 점에 감탄을 금치 못했습니다.

우리가 이 속성을 사용할 때 컴퓨터에게 반드시 함께 알려주어야 하는 단짝 규칙이 있습니다. 바로 꼭대기에서 얼마나 떨어뜨린 채로 붙잡아둘 것인지를 지정하는 top 값입니다. 보통은 화면 맨 위 기둥에 빈틈없이 딱 붙여야 하므로 top: 0; 이라는 숫자를 세트로 묶어서 처방합니다. 이렇게 적어두면 시스템은 '스크롤을 내리다가 이 메뉴판이 천장에 닿는 순간 거치대에 고정해라'라고 명확하게 이해하게 됩니다. 이 규칙의 장점은 스크롤을 다시 맨 위로 올리면 원래 자기 자리로 부드럽게 돌아간다는 점입니다. 독자 입장에서는 시각적인 이질감이 전혀 느껴지지 않는 고품격 내비게이션을 경험하게 되는 셈입니다.

내 블로그 메뉴판의 숨겨진 이름표 찾아내기

원리를 이해했다면 이제 내 구글 블로그의 어떤 녀석에게 이 마법을 부릴지 대상을 정확하게 지목해야 합니다. 집 주소를 알아야 택배를 보낼 수 있듯이 내 블로그 테마에서 메뉴바를 담당하는 영역의 진짜 '이름표'를 찾아내는 작업이 선행되어야 합니다. 구글 블로그 테마들은 제작자마다 메뉴판을 부르는 명칭이 제각각이기 때문입니다. 어떤 테마는 nav라고 부르고 또 어떤 테마는 menu-wrapper라고 부르기도 합니다. 이 이름표를 찾는 가장 정밀한 도구는 우리가 매일 쓰는 인터넷 브라우저에 이미 탑재되어 있습니다. 관찰자 시점에서 타인의 블로그 구조를 분석할 때도 매우 유용하게 쓰입니다.

본인의 구글 블로그를 켠 상태에서 키보드 맨 위쪽의 F12 단추를 가볍게 눌러보시기 바랍니다. 화면 우측이나 아래쪽에 복잡한 영문 기계어들이 가득한 '개발자 도구' 창이 열릴 것입니다. 너무 복잡해 보인다고 겁먹으실 필요 전혀 없습니다. 창 왼쪽 맨 꼭대기에 있는 작은 화살표 모양 아이콘을 마우스로 툭 클릭한 뒤 내 블로그의 메뉴바 영역 위로 마우스를 살포시 가져가 대보십시오. 그러면 해당 영역이 파랗게 강조되면서 오른쪽 소스 코드 창에 단어들이 잡힙니다. 이때 id="nav-menu" 혹은 class="top-bar" 처럼 적힌 글자를 발견하셨다면 그것이 바로 우리가 그토록 찾던 메뉴바의 진짜 이름표입니다.

구글 블로그 스킨 편집 창에 고정 코드 삽입하기

이름표까지 온전하게 확보했다면 이제 구글 블로그의 심장부인 HTML 편집 창에 코드를 심어줄 차례입니다. 구글 블로그 관리자 화면으로 들어가서 왼쪽 메뉴에 있는 테마 탭을 마우스로 선택합니다. 주황색 '맞춤설정' 단추 옆에 있는 작은 역삼각형 단추를 누르면 메뉴가 펼쳐지는데 여기서 HTML 편집을 선택하시면 됩니다. 화면 가득 빽빽한 코드들이 나타나면 당황하지 마시고 창 아무 곳이나 클릭한 뒤 키보드의 컨트롤 단추를 누른 채 F 단추를 눌러 검색창을 띄우십시오. 검색창에 단어 설정을 입력하고 엔터를 치면 스타일 규칙이 끝나는 지점으로 단숨에 이동하게 됩니다. 돋보기로 책 속의 특정 단어를 찾아내는 과정과 일맥상통합니다.

바로 그 스타일 지정 문장 바로 윗줄에 공간을 만들고 아래 예시 상자에 적어둔 마법의 치트키 문장을 붙여넣으시면 됩니다. 아래 코드 예시에서는 가장 흔하게 쓰이는 메뉴 이름표인 .nav-menu를 기준으로 작성했습니다. 본인이 앞 단계에서 찾은 이름표가 만약 #header-bar였다면 첫 줄의 단어만 본인의 이름표로 쏙 바꿔치기해 주시면 됩니다. 작성을 마치고 우측 상단의 저장 아이콘을 누르면 작업은 허무할 정도로 간단하게 마무리가 됩니다.

코드를 넣었는데도 고정이 안 될 때 필수 체크리스트

분명히 코드를 똑같이 복사해서 넣고 저장까지 끝마쳤는데도 막상 블로그에 가보면 메뉴바가 고정되지 않고 무심하게 위로 휙 사라져 버리는 현상을 마주할 때가 있습니다. 저도 초보 시절에 이런 일이 생기면 코드가 잘못된 줄 알고 애꿎은 숫자만 계속 바꾸며 밤을 새우곤 했습니다. 하지만 sticky 속성이 먹통이 되는 이유는 대부분 엉뚱한 곳에 숨어 있습니다. 가장 대표적인 범인은 바로 메뉴바를 감싸고 있는 상위 부모 상자들에게 과도한 제약이 걸려 있는 경우입니다. 이것은 마치 발목에 무거운 모래주머니를 차고 있어서 아무리 높이 뛰려고 해도 제자리걸음만 하게 되는 상황과 흡사합니다.

내비게이션 바를 품고 있는 더 큰 외곽 상자의 규칙 중에 overflow: hidden 이라는 문장이 숨어 있으면 sticky 자석은 완전히 힘을 잃고 마비되어 버립니다. 이 문장은 테두리 밖으로 나가는 요소를 숨겨버리는 성질이 있어서 화면을 따라 움직여야 하는 자석 기능을 원천 차단하기 때문입니다. 개발자 도구를 다시 켜고 메뉴바의 위쪽 상자들을 차례로 눌러보며 해당 속성이 켜져 있는지 확인하고 이를 지워주거나 조율해야 정상적으로 자석이 살아납니다. 또한 메뉴바의 배경색이 투명하게 설정되어 있으면 고정은 되는데 본문 글씨와 메뉴 글씨가 지저분하게 겹쳐 보일 수 있으니 배경색 규칙을 넣어 하얗거나 어두운 배경색을 꼭 채워주는 센스가 필요합니다.