[UI] 아코디언 컴포넌트 (feat: UI 요소 직접 만들기)

💡아코디언 컴포넌트란?

아코디언 컴포넌트는 클릭(또는 탭)과 같은 사용자 동작에 반응하여 관련 콘텐츠를 확장하거나 축소하는 방식으로 작동합니다. 각 아코디언 항목은 보통 두 가지 주요 요소로 구성됩니다

1. 헤더(Header): 제목이나 트리거 역할을 하며, 클릭 시 콘텐츠가 열리거나 닫힙니다.
2. 패널(Panel): 헤더에 연결된 숨겨진 콘텐츠 영역입니다.

이 컴포넌트는 직관적인 인터랙션 디자인을 제공하며, 특히 다음과 같은 상황에서 유용합니다

• FAQ(자주 묻는 질문) 섹션
• 설정 및 구성 메뉴
• 다단계 정보 표시 

 

아코디언 컴포넌트를 위해 고민할 점

하나만 열기 vs 모두 열기

사실 이 부분은 개발자 입장에서 고민하기보다는 유저 입장에서 기획자, 디자이너와 함께 고민하는 것이 더 좋다고 생각합니다.

개발적인 부분에서는 각 아코디언의 열림 닫힘 상태를 어디서 관리하냐에 따라 달라질 것입니다. 상태를 아코디언들을 관리하는 부모요소나, context에서 관리한다면 하나의 아코디언만 열고 닫을 수 있을 것이며, 각 아코디언 요소에서 담당한다면 아코디언들이 개별적으로 작동할 수 있을 것입니다. 이 여부를 결정하는 데에 개발 난이도는 그렇게 높지 않기 때문에, 이 부분은 유저입장에서 고려하여 개발하는 게 중요하다 생각합니다.

자연스럽게 열었다 펼치기

만약 아코디언이 하나만 열수 있는 경우에 아코디언이 열려있고, 다른 아코디언이 열린다면 뚝뚝 끊기는 느낌이 들 수 있습니다. 그 경우에는 transition css 를 활용하여 아코디언이 열리고 닫히는 과정을 부드럽게 만들 수 있습니다.

숨겨진 요소를 cmd + f를 통해 찾을 수 있을까?

이 부분은 이번에 강의를 들으면서 새로 고민해 볼 수 있었던 영역입니다. 기존에 이 부분에 대해서 전혀 고려하지 않았었는데, 단순히 state 값에 따라 컴포넌트를 렌더 했다 / 지웠다 하는 방식은 cmd + f로 전혀 찾을 수 없다는 점을 깨달을 수 있었습니다.

앞서 말한것 처럼 아코디언 컴포넌트는 FAQ나 설정과 같이 고객들에게 많은 정보를 제공할 때 사용되는데 cmd + f 기능이 작동되냐 안되냐로 많은 고객 경험 차이를 줄 수 있을 것 같습니다.

또한 여기서 더 나아가 아코디언안에 검색한 내용이 있다면, focus 뿐만 아니라 열릴 수만 있다면 더 좋은 경험을 줄 수 있을 것입니다.

 

📈구현해보기

beforematch event를 활용한 cmd + f 이벤트 탐색

beforematch란?

사용자 또는 브라우저 검색기능을 통해 검색된 내용이 hidden 속성에 의해 감쳐줘 있는 경우 트리거 되는 이벤트입니다. HTML의 Hidden Attribute와 관련된 실험적인 이벤트로 , 주로 검색 결과 하이라이팅과 관련된 사용자 경험을 개선하기 위해 도입되었습니다

사용방법

beforematch는 새로 도입된 HTML attribute인 hidden의 until-found 속성과 함께 사용해야 합니다.
hidden=until-found 속성은 요소가 숨겨져 있지만 , before-match와 같은 이벤트 등을 통해 검색되면 자동으로 표시됨을 의미합니다.

  const ref = useRef<HTMLDivElement | null>( null)

  useEffect(() => {
    if (ref.current) {
      ref.current?.addEventListener('beforematch', event)
    }

    return () => {
      if (ref.current) {
        ref.current?.removeEventListener('beforematch', event)
      }
    }
  }, [ref]);

  return (
    <li key={id}>
      <div className={cx('tab')} onClick={toggle}>{title}</div>
      <div ref={ref} className={cx('description')} HIDDEN={isOpen ? "undefined" : 'until-found'}>{description}</div>
    </li>
  )

위와 같이 코드를 작성한다면, 현재 열려있지 않은 아코디언의 경우 hidden= until-found가 적용되어 있으며, event를 통해 hidden 되어있는 요소가 검색되면 해당 아코디언을 열어주는 코드를 작성해 주면 될 것입니다.

문제점

해당 방법을 이용하면 생각보다 쉽게 cmd+f 시 아코디언 열기 기능을 수행할 수 있습니다. 하지만, 이 기능은 아직 실험적인 기능이기 때문에 최신 chrome, firefox 브라우저에서만 동작하며 firefox, safari에서는 아직 지원되지 않음을 알 수 있습니다. 위 예시에도 hidden태그를 대문자로 사용하였는데, 그 이유는 react DOM에서도 아직 hidden 태그를 정의하지 못하였고, 이에 따라 강제적으로 보정처리를 하기 때문입니다.

자세한 내용은 이 블로그에서 확인할 수 있습니다. https://hiddenest.dev/accessible-accordion

참고로 이 방법을 쓰더라도, typescript에서 주는 에러를 피하기 어려울 것입니다. 그렇기 때문에 저는 지금 당장 이 방법을 프로덕트에 쓰기에는 무리가 있다고 판단했습니다.

details / summary 활용한 아코디언

사용방법

 <details>를 부모요소로 사용하고, <summary> 태그에 제목, 요약을 작성하면 비교적 쉽게 구현할 수 있습니다.  또한, 브라우저가 토글기능과 애니메이션을 기본적으로 제공해 주기 때문에 기본적인 아코디언보다 구현이 훨씬 간단합니다.

<details>
  <summary>제목 또는 요약</summary>
  <p>이것은 숨겨진 상세 내용입니다.</p>
</details>

 

저는 결과적으로 아코디언을 위의 방법을 통해서 구현했습니다. 그 이뉴는 html에서 기본적으로 제공해 주는 기능이기 때문에 웹 접근성에서 이점이 있습니다. 또한, 공개된 지 10년 가까이 된 기능이기 때문에 대부분의 브라우저에서 작동이 된다는 것도 큰 장점이 있습니다.

하지만, 여러 개의 아코디언을 동시에 여는 것은 아직 구현되지 않는 문제점이 있습니다. 이 부분을 고려해서 기획자와 디자이너와 소통한다면 조금 더 프로덕트에 맞는 아코디언을 선택할 수 있을 것이라 생각합니다.

 

🎁 결과물

현재 강의로 배운 UI 컴포넌트 내용을 바탕으로 스토리북을 활용하여 개인적으로 디자인시스템을 개발하고 있습니다. 개발 결과물은 개발이 끝나는 대로 업데이트하도록 하겠습니다.

 

참고 글

https://www.inflearn.com/course/react-vanillajs-ui%EC%9A%94%EC%86%8C%EB%A7%8C%EB%93%A4%EA%B8%B0-part1/dashboard

[React / VanillaJS] UI 요소 직접 만들기 Part 1 강의 | 정재남 - 인프런

https://hiddenest.dev/accessible-accordion