heo.best

SITE_MENU

사이트 메뉴 및 편집 가이드

이 문서는 현재 사이트의 주요 메뉴를 정리하고, 메뉴나 메인 화면(홈) 레이아웃을 어떻게 변경할지 쉽게 전달할 수 있는 양식을 제공합니다.

현재 주요 메뉴 (components/Header.js에 구현됨)

  • 홈 -> /
  • 블로그 -> /blog
  • 프로젝트 -> /projects
  • 문서(Docs) -> /docs
  • 소개(About) -> /about
  • 연락처(Contact) -> /contact

참고: 실제 헤더 구현은 components/Header.js에 있습니다. 데스크톱에서는 위 항목이 보이고, 모바일에서는 햄버거 버튼으로 메뉴를 여는 방식입니다. (현재 데스크톱 메뉴 라벨은 한국어로 반영되어 있습니다.)

참고: 헤더 컴포넌트는 components/Header.js에 있습니다. 모바일용 햄버거 메뉴 복원이나 동작 변경을 원하면 이 문서에 적어 주세요.

현재 상태 요약: 데스크톱은 메뉴가 표시되고, 모바일에서는 햄버거 버튼으로 메뉴를 열 수 있습니다. 메뉴 라벨은 한글로 반영되어 있습니다.

메뉴/레이아웃을 전달하는 방법 (간단 양식)

아래 항목들을 복사해서 작성해 주시면 됩니다. 제가 받은 내용을 바탕으로 components/Header.js, 메인 레이아웃, 스타일을 자동으로 반영하겠습니다.

  1. 메뉴 구조 (필수)

  • 예시:

    • 홈 -> /
    • 문서 -> /docs
      • 팀 -> /docs/team
      • 기여 안내 -> /docs/CONTRIBUTING
    • 블로그 -> /blog
    • 소개 -> /about
    • 연락처 -> /contact
  1. 우선순위 및 표시 방식
  • 어떤 항목을 데스크톱 상단에 항상 표시(주요)하고, 어떤 항목을 ‘더보기’ 또는 푸터로 보낼지 알려 주세요.
  • 헤더 고정(sticky), 스크롤 시 축소(compact) 여부 등.
  1. 메인 화면 레이아웃(간단 요약)
  • 예: "큰 히어로(제목 + 서브타이틀 + CTA), 아래 3개 기능 카드, 오른쪽에 최신 블로그 목록"
  1. 참고 사이트 / 시각 레퍼런스(권장)
  • 1–3개의 예시 사이트 링크 또는 스크린샷을 붙여 주세요. 레이아웃·여백·타이포그래피를 참고해 맞춥니다.
  1. 분위기 / 색상 / 타이포
  • 예: modern-dark, clean-light, professional, playful
  • 브랜드 색상(HEX)이나 선호 색상(주색/보조색/배경/텍스트)이 있으면 적어 주세요.
  1. 반응형 동작
  • 모바일에서 햄버거 메뉴 사용 여부, 일부 메뉴를 숨길지 등.
  1. 와이어프레임 / 스케치
  • 손으로 그린 간단한 스케치(사진)도 가능합니다. 붙여 주시면 동일한 레이아웃으로 구현합니다.

빠른 예시(복사해서 수정):

메뉴 구조:
- 홈 -> /
- 블로그 -> /blog
- 문서 -> /docs
- 소개 -> /about
- 연락처 -> /contact

주요 메뉴(데스크톱): 홈, 문서, 블로그
보조 메뉴(더보기/푸터): 소개, 연락처

헤더: sticky, 스크롤 시 축소

메인 레이아웃: 큰 히어로(타이틀+서브타이틀+CTA), 아래 3개 기능 카드, 블로그 목록

분위기: modern-dark
브랜드 색상: #0ea5a4 (primary), #0f172a (background)

참고 사이트: https://example.com, https://another-example.com

작성해 주시면 제가 자동으로 적용해 드립니다. 혹시 지금 바로 "메뉴 복원 및 모바일 햄버거 추가"를 적용하길 원하시면 그렇게 진행하겠습니다.