이번에는 chatGPT에게 아름다운 아코디언을 만들어달라고 질문을 해보았다. 우선 아코디언(accordion)이란 무엇인지 chatGPT에게 물어보자.
Question
아코디언이 무엇인지 설명해 줘
Answer
아코디언은 웹 페이지에서 주로 사용되는 UI(User Interface) 요소로, 사용자가 상호작용할 수 있는 접을 수 있는 패널들의 집합입니다. 아코디언은 여러 섹션의 내용을 효율적으로 표시하고, 공간을 절약하기 위해 사용됩니다. 사용자는 각각의 패널 제목을 클릭하여 해당 내용을 펼치거나 접을 수 있습니다. 이를 통해 사용자는 원하는 정보를 빠르게 찾을 수 있습니다.
웹 페이지의 FAQ 섹션, 메뉴, 내비게이션, 폼 등에서 아코디언을 자주 사용하며, 이를 통해 콘텐츠를 깔끔하게 정리할 수 있습니다. 아코디언은 웹 개발자들이 사용자에게 콘텐츠를 효과적으로 제공하기 위한 중요한 도구 중 하나입니다.
chatGPT가 말해주듯이 FAQ나 메뉴, 내비게이션에서 자주 접해볼 수 있는 것이다. 아코디언은 웹페이지의 공간 절약을 하기 위해 주로 사용되며, 사용자가 스크롤을 줄이고 원하는 정보에 빠르게 접근할 수 있게 해준다. 즉, 사용자가 필요한 정보를 쉽게 찾을 수 있도록 도우며, 사용자가 원하는 섹션만 펼쳐 볼 수 있게 해줌으로써 사용자 경험을 개선한다. 정보를 구조화하고, 필요한 정보만 집중해서 볼 수 있도록 하여 가독성도 향상시킨다. 텍스트뿐만 아니라 이미지, 동영상 등 다양한 콘텐츠를 표시하는 데 사용될 수 있다.
최근 웹 설문 툴에서도 척도 형태의 문항을 모바일에서는 아코디언 형태로 전환해 주는 반응형 레이아웃을 채택하는 걸 많이 볼 수 있었다.
웹 설문에서의 아코디언 예시
예전에는 설문 조사 앱으로 설문을 진행하다보면 저런 척도 문항을 첫 번째 형태 처럼 테이블 형태로 많이들 하는데, 요즘은 아래 형태처럼 아코디언 형태나 카드 형태로 변경하는 추세이다. 아직 테이블 형태를 고수하는 회사들이 있는데, 솔직히 별로 좋진 않은 것 같다. 엠브레인의 경우 저런 척도 평가 점수가 많은 설문을 진행할 때 보면 모바일은 아예 참여를 막아버리던가 가로모드를 강제한다. 개인적으로 별로 좋은 방법은 아니라고 생각한다. 다시 한번 말씀드리지만, 필자는 개발자는 아니다. 리서치 회사에서 응답 데이터를 수집하기 위해 설문 툴을 사용해 웹 설문 링크를 제작하는 업무를 하고 있다. 개발쪽은 취미삼아 공부하고 있는 것이지만 개인적으론 현재 업무에도 도움이 되기 때문에 하고 있는 중이다. 내가 이 업무를 하면서 항상 신경 쓰는 것은 응답자의 편의와 가독성이다. 응답하기 편해야 응답률이 높아지고 응답률이 높아지는 것은 곧 비용을 절약할 수 있기 때문이다.
웹 설문에서뿐만 아니라 사용자의 가독성을 고려해야 해서 웹 페이지를 구성하는 것은 항상 중요하다고 생각한다.
아무튼 이번에는 chatGPT에게 아름다운 아코디언을 만들어달라고 요청해보았다. 얼마나 이쁜 형태를 만들어주는지 한번 봐보자.
Question
너가 생각했을 때 JavaScript를 사용한 아름다운 아코디언을 만들어줘
Answer
JavaScript를 사용하여 아름다운 아코디언을 만드는 방법에 대해 설명해 드리겠습니다. 아코디언은 주로 웹 페이지에 가로 또는 세로로 접을 수 있는 여러 패널로 구성된 대화형 요소입니다. 그러한 패널은 주로 내용을 보여주거나 숨기는 데 사용됩니다. HTML, CSS, 그리고 JavaScript를 사용하여 아코디언을 만들 수 있습니다.
이 JavaScript 코드는 DOMContentLoaded 이벤트 리스너를 사용하여 HTML 문서가 완전히 로드된 후에 실행됩니다. 코드는 모든 .accordion-button 요소를 찾아 forEach를 사용하여 각 버튼에 클릭 이벤트 리스너를 추가합니다. 버튼을 클릭하면 해당하는 .accordion-content의 maxHeight를 조절하여 아코디언 항목을 열거나 닫습니다. 이미 열린 아코디언 항목이 있는 경우 닫히게 됩니다.
이제 위의 HTML, CSS, 그리고 JavaScript 코드를 사용하여 아름다운 아코디언을 만들 수 있습니다. 코드를 웹 페이지에 적용하면 아코디언이 동작하는 것을 확인할 수 있습니다.
개인적으로 생각했을 때 가장 기본이 되는 아코디언 디자인을 만들어줬다고 생각한다. 하지만 기본인 만큼 깔끔한 디자인이라고 생각한다. 어디에나 어울릴 것 같은 회색 계열의 색상, 다른 아코디언을 클릭 시 펼쳐져 있는 아코디언은 접히게 하는 기능, 펼쳐지거나 접힐 때 깔끔한 애니메이션 등 이대로 사용해도 큰 문제는 없을 것 같다.
특히, 다른 아코디언을 클릭했을 때 펼쳐져 있는 아코디언이 접히는 것도 잡아준 것은 잘 했다고 생각한다. 이전에 chatGPT로 무언가를 만들었을 때 사실 실망감이 더 커서 그런 것인지 기대도 안 했었고, 사실 다른 아코디언이 접히는 기능은 생각을 못 하고 있기도 해서이다. 내가 놓치고 있던 부분을 chatGPT가 생각나게 해주었다.
이번에는 내가 추가로 무언가 해줄 건 없어 보인다. 굳이 굳이 chatGPT가 만들어준 아코디언을 수정한다면... 그림자 효과 정도만 추가하지 않을까 싶다. 그 외에는 테마 컬러 정도...?
이번에는 나름 바로 사용해도 될만한 결과가 나와서 좋았던 것 같다.
그리고 이번 질문도 GPT-4에게 질문한 것인데, GPT-4의 속도가 뭔가 처음 출시했을 때와 비교했을 때 속도가 엄청 빨라진 것 같다. 저런 아코디언 같은 소스는 이미 많기 때문에 빠르게 답변한 걸 수도 있긴 하지만... 그런 걸 감안해도 속도가 빨라진 것 같다. 앞으로의 생성형 AI의 발전이 더 기대가 된다.
우선 아코디언(accordion)이란 무엇인지 chatGPT에게 물어보자.