#02 [아트머그] 페이지 메뉴바 제작하기

안녕하세요, Studio OCI입니다.

아트머그 상세페이지는 보통 스크롤이 긴 포트폴리오 형태로 구성되는 경우가 많습니다. 작업 과정, 샘플 이미지, 가격 안내, 작업 방식 등 다양한 정보를 한 페이지에 담다 보니 자연스럽게 페이지 길이가 길어지게 됩니다.

하지만 페이지가 길어질수록 의뢰자는 원하는 정보를 찾기 위해 여러 번 스크롤을 해야 하는 불편함을 느낄 수 있습니다.특히 가격이나 작업 안내처럼 중요한 정보를 빠르게 확인하고 싶은 경우, 원하는 위치를 찾기 어려워 이탈로 이어질 가능성도 있습니다.

이럴 때 유용하게 사용할 수 있는 방법이 바로 사이드 메뉴바(메뉴 네비게이션)입니다.

이번 글에서는 아트머그 상세페이지에 사이드 메뉴바를 만들어 긴 페이지를 보다 편하게 탐색할 수 있도록 하는 방법을 정리해보겠습니다.

<aside>

이동하고 싶은 <img> 태그 앞에 <a> 를 뒤에 </a>를 추가합니다.

Frame 1.png

</aside>

<aside>

1번에서 작성한 <a>태그 안에 이동을 위한 코드를 입력해줍니다.

이름은 영어 또는 숫자 사용을 권장합니다.
<a name=”지정할 이름”>

Frame 2.png

</aside>

<aside>

아트머그 커스텀 메뉴의 첫 번째 페이지에 아래 코드를 복사하여 붙여넣습니다.

<style>
    @font-face {
        font-family: 'Cafe24Surround';
        src: url('<https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Ssurround.woff>') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    .custom-button-container {
        position: fixed;
        right: 20px; /* 화면 기준 오른쪽 부분에서 얼마나 떨어져 있는가*/
        top: 300px;  /* 화면 기준 위쪽 부분에서 얼마나 떨어져 있는가*/
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 8px; /* 버튼들 사이 간격 */
        width: 180px;
    }

    .custom-button-container button {
        font-family: 'Cafe24Surround', sans-serif;
        padding: 8px 5px;
        cursor: pointer;
        border: 2px solid #ddd; /* 원하는 버튼 테두리 색 및 크기 */
        background-color: #fff; /* 원하는 버튼 내부 색상 */
        border-radius: 5px;
        transition: background 0.3s;
        font-size: 18px; /* 폰트 크기 */
        box-sizing: border-box;
    }

    .custom-button-container button:hover {
        background-color: #f0f0f0; /*버튼 위로 마우스가 올라 갔을 때 색상*/
    }
</style>

<div class="custom-button-container" style="display: flex; flex-direction: column; gap: 8px; width: 150px;">
    <button onclick="window.parent.location.href='#위치이름';">안내사항</button>
</div>

</aside>

<aside>

3번에 사용된 코드에서 위치이름 부분을 1번에서 설정한 이름으로 변경합니다.

( 제일 아래쪽에 있습니다)

<button onclick="window.parent.location.href='#위치이름';">안내사항</button>
# 기호는 절대 삭제하면 안됩니다. </aside>

<aside>

버튼 이름을 수정합니다.

<button onclick="window.parent.location.href='#위치이름';">안내사항</button>

안내사항 부분을 원하는 메뉴 이름으로 변경합니다.

</aside>

<aside>

+) 추가 버튼이 필요한 경우

추가 메뉴가 필요하다면 <button onclick="window.parent.location.href='#위치이름';">안내사항</button> 태그를 복사 후 붙여넣기 하여 #위치이름과 버튼이름만 수정하면 됩니다. </aside>

<aside>

+) 폰트를 바꾸고 싶어요!

눈누 싸이트에 접속합니다. (https://noonnu.cc/index)
우측 하단에 ‘웹폰트로 사용’ 을 복사합니다

ㅇㅇ.png

3번에서 복사한 코드 중 아래 내용을 눈누에서 복사한 웹폰트 내용으로 완전히 변경합니다.

<style>
    @font-face {
        font-family: 'Cafe24Surround';
        src: url('<https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/Cafe24Ssurround.woff>') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

3번에서 복사한 코드 중 아래 내용 중 font-family 부분만 웹폰트 내용으로 바꿔줍니다.

(파란글씨 참고)

.custom-button-container button {
        font-family: 'Cafe24Surround', sans-serif;
        padding: 8px 5px;
        cursor: pointer;
        border: 2px solid #ddd; /* 원하는 버튼 테두리 색 및 크기 */
        background-color: #fff; /* 원하는 버튼 내부 색상 */
        border-radius: 5px;
        transition: background 0.3s;
        font-size: 18px; /* 폰트 크기 */
        box-sizing: border-box;
    }

</aside>

본 가이드는 아트머그 상세페이지 내 HTML 편집 기능을 기준으로 작성되었습니다. 플랫폼 정책 변경에 따라 일부 UI 또는 기능이 달라질 수 있습니다.

페이지 흐름 정리부터 간단한 HTML 구조 수정까지, 디테일을 더하고 싶으시다면 Studio OCI가 함께합니다. 가장 완벽한 형태의 오시(OCI)를 만나보세요.

E-mail : [email protected] X(Twitter) : https://x.com/StudioOCI