🌟 디테일의 간격 시리즈! [✏️ 아코디언 UI 구성 시 참고해야 할 내용] (👀간단 요약) 📌 공지사항 등에서 쉽게 볼 수 있는 아코디언 UI는 내용을 접고 펼치는 구조로 구성되어 있습니다. 사용자가 직접 콘텐츠를 숨기거나 확인할 수 있도록 제공되는 방법인데요. 아코디언 UI를 활용하는 이유는 사용자에게 강제로 모든 정보를 노출하지 않고, 제목 등 필요한 정보만 노출해 원하는 것만 확인하기 위한 환경을 제공하기 위함입니다. 📌 공지사항을 예로 들면, 모바일 환경에서 모든 내용을 펼쳐놨을 때 전체 내용을 확인하려면 스크롤을 많이 활용해야 하며, 사용자 개개인에게 해당하지 않는 모든 내용을 확인해야 하기에 인지 부하의 가능성이 높아집니다. 때문에 공지의 제목만 리스트로 제공하고, 필요하다고 생각하는 내용을 스스로 펼치고 접어 확인할 수 있도록 유도하게 됩니다. 📌 아코디언 UI 구성은 크게 4가지로 이뤄집니다. 타이틀이나 레이블, 펼치기 및 닫기 아이콘, 그리고 상세내용입니다. 이때 중요한 건, 닫기와 펼치기 아이콘입니다. 보통은 아래 방향 화살표가 펼치기, 위 방향 화살표가 숨기기의 의미로 활용됩니다. 펼치기와 닫기를 조금 더 명확한 행동으로 연결될 수 있도록 타이틀 또는 레이블 영역까지 터치 가능하도록 지정할 수 있습니다. 화살표는 모바일 환경 등에서 상대적으로 작게 느껴지기 때문입니다. 📌 아코디언의 종류는 크게 다섯 가지로 나뉩니다. 단일, 스택, 계층, 테이블, 필터가 그 주인공인데요. 우리가 자주 볼 수 있는 종류는 스택형 아코디언으로 아코디언이 리스트로 구성된 형태를 의미합니다. 앞서 말한 공지사항 등에 자주 활용되고 있어요. 📌 아코디언을 구성할 때 유의해야할 점은 아래와 같습니다. 먼저, 각 아코디언 간 명확하게 구분이 가능하도록 구분선이 제공되어야 합니다. 굵은선 등을 제공, 다른 내용을 확인할 수 있다는 점을 안내해야 하는 것이죠. 구분선으로 구분이 어렵다면 카드 형태로 아코디언을 개별 적용하는 것도 방법입니다. 또 내용을 펼쳤을 때, 포함된 내용을 다른 배경등을 적용해 구체적으로 확인할 수 있도록 하는 것도 필요합니다. 흰색 배경에 회색 배경을 적용하는 식! 📌 그렇다면, 아코디언은 어떻게 활용할 수 있을까요? 정말 다양한 서비스에 적용되어 있지만, 대표적으로 제품 상세페이지 내 배송정보, 사이즈 등을 펼쳐보게 할 수 있습니다. 공지사항 등 일정주기에 따라 업데이트 되는 내용이 있는 화면에서도 활용할 수 있어요. 자주 하는 질문 등에도 쉽게 적용할 수 있습니다. 여러 폼이 포함된 화면에서는 각 폼의 타이틀만 보여준 뒤 사용자가 내용을 펼쳐 입력하게 하는 과정에서 아코디언을 적용할 수 있습니다. 💬 덧붙임 아코디언 UI는 모바일에서 더 자주 활용되는 것 같아요. 화면을 효율적으로 활용할 수 있는 하나의 방법이 되기 때문입니다. 다만, 기본 기능에 충실하되 아코디언이 적용된 내용간 구분이 잘 되지 않거나, 계층구조로 적용하는 과정에서 되려 피로감을 불러일으키는 경우가 있어요. 아코디언을 어떻게 적용하면 좋을 지, 자세히 정리된 글이라 함께 살펴보면 좋겠다는 생각으로 코멘트를 작성합니다.