햄버거 버튼

출처 : 위키백과 (https://ko.wikipedia.org/wiki/%ED%96%84%EB%B2%84%EA%B1%B0_%EB%B2%84%ED%8A%BC)

 

 

햄버거와 비슷해서 붙여진 이름이다. 내비게이션 메뉴를 토글해서 보이거나 보이지 않게 하는 역할로 주로 사용된다.

 

 

장점

1. 공간 절약
   • 작은 화면 공간에서 내비게이션 메뉴를 효과적으로 표시 할 수 있게 해준다.
2. 익숙함
   • 많이 사용되는 디자인이다 보니 많은 사람들에게 익숙하다. 이는 별도의 설명서나 학습과정이 필요 없기 때문에 굉장한 장점이다.
3. 디자인 유연성
   • 브랜드나 컨셉에 맞게 다양하게 커스터마이징이 가능하다. 예를 들어 햄버거 버튼을 눌러서 네비게이션 메뉴가 보이게 되면 X 모양으로 변하는 애니메이션을 통해 사용자 경험을 향상 시킬 수 있다.

 

 

단점

1. 효율성 저하
   • 기본 화면에는 네비게이션 메뉴가 보이지 않고 반드시 버튼을 클릭해야만 하기 때문에 불필요한 과정이 생길 수 있다.
2. 접근성 문제
   • 접근성 측면에서 개선이 필요할 수 있다. 예를 들어 아이콘 기반이기 때문에 추가 설명을 추가하거나 열어져 있는 상태나 닫혀있는 상태를 스크린 리더를 통해 제공할 수 있어야 한다.

 

 

구현

코드를 통해 구현보자. UI / UX 시리즈는 React + TypeScript + SCSS 조합으로 구현을 해볼 생각이다.

 

 

HamburgerButton.tsx

import React from 'react';

import classNames from 'classnames/bind';

import styles from './index.module.scss';

const cn = classNames.bind(styles);

interface Props {
  isOpen: boolean;
  setIsOpen: (value: boolean) => void;
}

const HamburgerButton: React.FC<Props> = ({ isOpen, setIsOpen }) => {
  return (
    <div
      className={cn('burger')}
      onClick={() => setIsOpen(!isOpen)}
      aria-label="navigation menu"
    >
      <span className={cn({ 'line-first': isOpen })} aria-hidden="true" />
      <span className={cn({ 'line-second': isOpen })} aria-hidden="true" />
      <span className={cn({ 'line-last': isOpen })} aria-hidden="true" />
    </div>
  );
};

export default HamburgerButton;

• div안에 3개의 span이 있는 형태이다.
• 내비게이션 메뉴가 열어진 상태인지를 알 수 있는 isOpen을 Props를 통해 받는다.
• isOpen 값을 이용하여 className을 추가한다. (classnames 라이브러리 사용)
• span은 스크린 리더와 같은 보조 도구로 감지 할 수 없게 했다.
• div에는 대체 텍스트를 설정해줬다.

 

 

.module.scss

.burger {
    position: relative;
    width: 60px;
    height: 60px;
    cursor: pointer;

    & span {
        position: absolute;
        display: block;
        width: 100%;
        height: 5px;
        background: black;
        border-radius: 10px;
        transition: all .5s;
    }

    & span:nth-child(2) {
        top: 50%;
        transform: translate(0, -50%);
    }

    & span:nth-child(3) {
        bottom: 0;
    }
}

.line-first {
    top: 50%;
    transform: translate(0, -50%) rotate(45deg);
}

.line-second {
    opacity: 0;
}

.line-last {
    top: 50%;
    transform: translate(0, -50%) rotate(-45deg);
}

• SCSS는 중첩을 지원한다. 전체 div에 사용할 burger 내부에서 중첩을 통해 span 태그들에 스타일을 정해줬다.
• line- 클래스들은 isOpen이 true일 때만 적용 될 스타일이다.

 

 

결과물

클릭 전                                                                                          클릭 후

 

 

이렇게 구현해보았다. 웹 접근성 향상을 위해 aria 어트리뷰트도 사용해보았는데 사실 아직 관련 지식에 부족한 부분이 많아서 공부를 추가적으로 해서 코드를 더 수정해봐야겠다.

 

 

UI/UX 시리즈는 계속 된다!