Carrd에 모바일 반응형 네비게이션 바 추가하는 방법

Last updated on 9/19/2024
Rounded avatarMr Bird@mrbirddev
Carrd에 모바일 반응형 네비게이션 바 추가하는 방법

Carrd는 간단한 원페이지 웹사이트를 빠르고 효율적으로 구축할 수 있는 인기 있는 도구입니다. 그러나 모바일 반응형 네비게이션 바를 구현할 때는 복잡성과 기능성이 다를 수 있습니다. 여기 Carrd를 사용하여 모바일 반응형 네비게이션 바를 만드는 세 가지 방법을 비교하고, 각각의 장단점을 강조합니다.

모바일 반응형 네비게이션 바란 무엇인가?

모바일 반응형 네비게이션 바는 다양한 화면 크기에 원활하게 조정되어 데스크탑과 모바일 장치 모두에서 최적의 사용자 경험을 제공하는 네비게이션 메뉴입니다. 이를 통해 사용 중인 장치에 관계없이 웹사이트를 쉽게 탐색할 수 있습니다.

햄버거 메뉴란 무엇인가?

햄버거 메뉴는 모바일 및 반응형 웹 디자인에서 일반적으로 사용되는 네비게이션 메뉴 유형입니다. 세 개의 수평선으로 구성된 아이콘이 햄버거를 닮아 이름이 붙여졌습니다. 사용자가 아이콘을 클릭하거나 탭하면 전체 네비게이션 메뉴가 확장되거나 슬라이드 아웃되어 사이트의 다양한 페이지나 섹션에 접근할 수 있습니다. 이 디자인은 화면 공간을 절약하고 특히 작은 장치에서 인터페이스를 깔끔하고 정돈된 상태로 유지하는 데 도움이 됩니다.

모바일 반응형 네비게이션 바 추가 방법

튜토리얼 #1: Carrd 기본 요소 사용

링크: https://starrt.co/blog/mobile-responsive-nav-menu

장점:

  • 무료: 이 튜토리얼을 따르는 데 비용이 들지 않습니다.

단점:

  • 번거로움: 설정 과정이 7개의 주요 단계와 15개의 세부 단계로 구성되어 있어 시간이 많이 소요됩니다.
  • 고정되지 않음: 사용자가 스크롤할 때 네비게이션 바가 화면 상단에 고정되지 않아 사용성에 영향을 미칠 수 있습니다.

튜토리얼 #2: Carrd 사용자 정의 코드 사용

링크: https://www.bitdoze.com/carrd-mobile-navbar/

장점:

  • 반응형: 네비게이션 바가 다양한 화면 크기에 잘 맞게 조정됩니다.

단점:

  • 유료: 사용자 정의 코드 기능을 사용하려면 구독이 필요합니다.
  • 복잡함: 사용자 정의 코드를 구현하려면 HTML/CSS를 배워야 합니다.
  • Carrd 편집기에서 미리보기 불가: 변경 사항을 Carrd 편집기에서 직접 미리볼 수 없어 과정이 번거롭습니다.

튜토리얼 #3: slidde.co 사용

링크: https://sticky.slidde.co/

장점:

  • 무료: 이 솔루션을 사용하는 데 비용이 들지 않습니다.
  • 고정/떠다니는: 사용자가 스크롤할 때 네비게이션 바가 화면 상단에 고정되어 사용성을 높입니다.
  • 쉬움: 설정 과정이 단 2단계로 매우 사용자 친화적입니다.
  • 커스터마이징 가능: 쉬운 설정에도 불구하고 아이콘과 버튼 스타일을 쉽게 커스터마이징할 수 있습니다.

단점:

  • 새로운 제품: 비교적 새로워서 더 정교한 기능이 부족할 수 있습니다.

결론

Carrd에서 모바일 반응형 네비게이션 바를 만드는 올바른 방법을 선택하는 것은 특정 요구 사항과 기술적 전문성에 따라 다릅니다. 튜토리얼 #1과 #2는 Carrd를 사용하여 이 기능을 구현하는 다양한 방법을 제공하며, 복잡성과 커스터마이징 수준이 다릅니다. 반면에 튜토리얼 #3은 더 간단한 설정 과정으로 동일한 기능을 달성하기 위해 새로운 도구를 사용합니다. 우선순위에 따라 이러한 옵션을 평가하여 웹사이트의 네비게이션을 효과적으로 향상시키세요.