사이트 탐색
대부분의 모바일 웹사이트에는 사이트 탐색 메뉴가 포함되어 있습니다. 탐색 메뉴는 형식이 매우 다양합니다. 이 가이드에서는 아래 예시를 통해 AMP 페이지에 탐색 메뉴를 추가해 보겠습니다.
- 가장 단순한 옵션인 홈페이지로 돌아가기 링크
amp-sidebar
구성요소를 사용한 측면 탐색 메뉴
홈으로 돌아가기 링크
사용자를 홈페이지로 돌아가게 하면 쉽게 웹사이트의 탐색 메뉴를 이용할 수 있습니다.
<header>
태그를 링크가 포함된 아래 버전으로 변경해 보세요.
<header class="headerbar"> <a href="homepage.html"> <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img> </a> <div class="site-name">뉴스 사이트</div> </header>
그런 다음 인라인 CSS에 다음 스타일 규칙을 추가합니다.
.home-button { margin-top: 8px; } .headerbar { height: 50px; position: fixed; z-index: 999; top: 0; width: 100%; display: flex; align-items: center; } .site-name { margin: auto; } article { margin-top: 50px; }
이제 페이지를 새로고침해 보세요. 페이지 왼쪽 상단에 homepage.html
로 연결되는 링크가 표시됩니다. 홈 아이콘을 클릭하면 어느 곳으로도 연결되지 않는 것을 바로 확인할 수 있습니다. homepage.html
파일이 없기 때문입니다.

이 링크를 웹사이트의 홈페이지 URL로 변경하여 사용자가 웹사이트의 기존 탐색 메뉴를 통해 사이트의 다른 부분으로 이동하게 할 수 있습니다.
지금까지 설명한 방법은 웹사이트의 기존 탐색 메뉴를 활용하는 가장 단순한 접근방식입니다. 이제 사이트 탐색에 보다 자주 이용되는 옵션을 살펴보겠습니다.
사이드바로 탐색
페이지 측면에 메뉴 아이콘을 추가하여 이 아이콘을 클릭하면 일련의 탐색 링크가 표시되도록 하는 탐색 기술이 많이 쓰이고 있습니다. AMP에서는 amp-sidebar
구성요소를 사용하여 이러한 탐색 메뉴를 만들 수 있습니다.
먼저 다음과 같이 amp-sidebar
구성요소의 자바스크립트를 <head>
태그에 추가해야 합니다.
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
다음으로 메뉴 아이콘이 표시되게 해 보겠습니다. 아이콘을 탭하면 사이드바가 열립니다. <header>
를 다음 코드로 변경하면 홈 아이콘 대신 '햄버거' 아이콘이 표시됩니다.
<header class="headerbar"> <div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div> <div class="site-name">뉴스 사이트</div> </header>
위의 코드에서는 amp-sidebar
요소의 on
액션 속성으로 사이드바를 전환
합니다. 이 요소는 sidebar1
ID로 표시되어 있습니다. 사이드바를 추가해 보겠습니다.
</header>
바로 뒤에 다음 HTML을 추가하세요.
<amp-sidebar id="sidebar1" layout="nodisplay" side="left"> <div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div> <ul class="sidebar"> <li><a href="#">Example 1</a></li> <li><a href="#">Example 2</a></li> <li><a href="#">Example 3</a></li> </ul> </amp-sidebar>
사이드바는 숨겨져 있지만 사용자가 햄버거 아이콘을 탭하면 화면 왼쪽에서 메뉴가 표시됩니다. X 아이콘을 탭하면 메뉴가 닫힙니다.
마지막으로 인라인 CSS에 다음 스타일 규칙을 추가하세요.
.hamburger { padding-left: 10px; } .sidebar { padding: 10px; margin: 0; } .sidebar > li { list-style: none; margin-bottom:10px; } .sidebar a { text-decoration: none; } .close-sidebar { font-size: 1.5em; padding-left: 5px; }
사이드바를 확인해 보겠습니다. 새로고침하여 AMP 페이지를 다시 로드하세요. 그러면 다음과 같이 표시될 것입니다.
멋진 페이지가 완성되었습니다. 이제 맞춤 글꼴을 추가하여 마무리하겠습니다.