🧊

우피 모바일 메뉴바에 네온 & 유리효과 입히기

Keywords: 우피 메뉴바, 노션 모바일 UI, 네온 유리효과, UX 디자인

노코더들도 쉽게 이해할 수 있는 가이드

✅ 목표

🧩 구성 요약

✨ Step-by-Step 설명

✅ Step 1: HTML 코드 (우피 바디에 붙이기)

✅ Step 2: CSS 코드 (우피 헤드에 붙이기)

🎨 Step 3: 네온 색상 바꾸는 방법

🔠 Step 4: 폰트 크기 조절 방법

⚠️ Step 5: 주의할 점

✅ 요약 문장 (노코더용)

노코더들도 쉽게 이해할 수 있는 가이드

목표

검색 메뉴 바로 밑으로 3개의 제목이 적힌 메뉴바가 생겼습니다. 불투명한 유리 효과에 푸른 네온 빛이 흐르는 메뉴바입니다.

이 블로그를 모바일로 보았을 때

“네온 글래스 효과의 상단 메뉴가 모바일에서도 고정되며,

글자가 선명하게 보이고,

색상·폰트·링크가 잘 작동하게 만들기”

구성 요약

메뉴 구조 (<nav>)

스타일 지정 (<style> - 네온 효과, 폰트 크기 등)

모바일 대응 (미디어 쿼리)

주의할 점 (글자가 안 보이는 문제, 링크 깨짐 등)

색상 바꾸는 법, 폰트 조절하는 법

Step-by-Step 설명

Step 1: HTML 코드 (우피 바디에 붙이기)

<nav class="main-menu">
  <a href="/home">Home</a>
  <a href="/blog">Blog</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
</nav>
HTML
복사

설명:

•

<nav>는 메뉴 전체를 감싸는 박스입니다.

•

<a>는 각 메뉴 항목입니다. Oopy 도메인을 가진 자신의 페이지에 들어가서 각 메뉴를 눌렀을 때 검색 창에 뜨는 페이지 주소를 씁니다. (노션 주소를 쓰면 안 됨)

•

우피 바디란? 우피 대시보드로 가면 HTML편집란에 Body가 있습니다. 

Step 2: CSS 코드 (우피 헤드에 붙이기)

<style>
  .main-menu {
    position: fixed;         /* 항상 화면 상단에 고정 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;            /* 다른 요소보다 위에 있음 */
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    gap: 24px;
    padding: 14px 0;
    background-color: #ffffffcc; /* 투명한 흰 배경 */
    backdrop-filter: blur(10px); /* 유리처럼 흐려지는 효과 */
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); /* 은은한 그림자 */
    font-weight: 600;
    font-size: 14px; /* 폰트 크기 (변경 가능) */
  }

  .main-menu a {
    color: #222;
    text-decoration: none;
    padding: 6px 10px;
    position: relative;
  }

  .main-menu a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: #00f2ff; /* 네온 효과 색상 */
    transition: width 0.3s ease;
  }

  .main-menu a:hover::after {
    width: 100%;
  }

  .main-menu a:hover {
    color: #00f2ff;
  }

  /* ✅ 모바일에서도 잘 보이도록 처리 */
  @media (max-width: 768px) {
    .main-menu {
      flex-direction: column;
      gap: 10px;
    }
  }

  /* ✅ 메뉴가 고정되었기 때문에 콘텐츠가 그 아래에 가리지 않도록 여백 추가 */
  .notion-page-content {
    padding-top: 80px !important;
  }
</style>
HTML
복사

바디에 홈페이지에서 제공한 코드를 붙여 넣었지만 맨 위의 홈 섹션은 보이지 않는다. 어바웃 섹션은 링크가 없이 적어 놓아서 메뉴바에는 글자가 보이지만, 클릭해도 아무 일도 일어나지 않는다.

문제가 보이시나요? 글래스 효과 나는 메뉴바

Step 3: 네온 색상 바꾸는 방법

아래 2곳의 색상을 같은 코드로 바꿔주면 됩니다:

background-color: #00f2ff;  /* 밑줄 애니메이션 색 */
color: #00f2ff;             /* 글자 색상 */
CSS
복사

이름	코드	느낌
네온 블루	#00f2ff	기본값 (청록빛)
네온 핑크	#ff00cc	핑크빛 사이버
네온 퍼플	#b100f2	보라빛 장미빛
네온 그린	#39ff14	형광 연두
네온 오렌지	#ff6f00	따뜻한 네온

Step 4: 폰트 크기 조절 방법

아래 줄을 수정하세요:

font-size: 14px;
CSS
복사

•

13px: 더 미니멀하게

•

16px: 일반 데스크톱 기준

•

12px: 아주 작게 (모바일 위주일 때)

Step 5: 주의할 점

항목	설명
nav에 있는 <a>는 반드시 각각 닫혀 있어야 합니다.	무조건 3개 링크 정도는 채워 넣으세요. 맨 위에 넣은 메뉴 제목은 보이지 않습니다. (이유 모름. 알려줘도 모름.)
Notion에 코드 붙일 때, 줄 바꿈 안 하면 한 줄로 깨집니다.
색상 대비가 낮으면 메뉴 글씨가 보이지 않습니다.
모든 페이지(Oopy 기준)에 같은 HTML/CSS가 들어가야 합니다.
잘못된 따옴표(“ ”) 대신 " " 를 써야 코드가 작동합니다.	코드가 적힌 곳에 복사 아이콘이 보이시죠? 설마 저걸 다 손으로… .

요약 문장 (노코더용)

“Oopy 대시보드의 HTML 편집에서

헤드에는 스타일 코드(CSS),

바디에는 메뉴 HTML 코드를 붙여 넣으면,

모바일에서도 고정되는 유리 같은 네온 메뉴가 완성됩니다.

메뉴 색상이나 글자 크기는 코드에서 숫자와 색 코드만 바꾸면 됩니다.”