Accordion(아코디언) — 필요한 내용만 펼쳐 보는 UI
화면에 설명과 항목이 너무 많으면 사용자는 정작 필요한 정보를 찾기 어렵습니다. 그렇다고 내용을 모두 빼버릴 수도 없습니다. 이럴 때 유용한 UI가 Accordion(아코디언)입니다.
아코디언은 제목이나 항목을 클릭하면 그 아래의 상세 내용이 펼쳐지고, 다시 클릭하면 접히는 인터페이스입니다. 평소에는 핵심 제목만 보여주고, 사용자가 원하는 부분만 열어 볼 수 있습니다.
1. 아코디언을 쉽게 이해하기
아코디언은 서류철의 목차나 접이식 안내판과 비슷합니다. 제목을 보고 궁금한 항목만 열어 세부 내용을 확인하는 방식입니다.
병원 EMR의 검사 결과 화면을 예로 들어보겠습니다.
혈액검사 — 검사일, 주요 수치, 참고 범위, 판독 요약
영상검사 — 촬영일, 검사 부위, 판독 결과
심전도 — 검사일, 측정 결과, 소견
기타 검사 — 검사별 세부 내역
처음 화면에서는 검사 종류와 검사일 같은 핵심 정보만 간결하게 보여줍니다. 의료진이 ‘혈액검사’를 누르면 해당 검사 결과가 펼쳐지고, 다시 누르면 접힙니다.
아코디언의 목적은 정보를 감추는 것이 아니라 정보의 우선순위를 정해 화면을 덜 복잡하게 만드는 것입니다.
2. 시각적 예시 방향
본문 이미지나 프로토타입은 병원 EMR의 ‘검사 결과 상세’ 화면을 기준으로 구성하면 좋습니다.
화면 제목 아래에 혈액검사, 영상검사, 심전도, 기타 검사 항목을 세로로 배치합니다.
각 항목의 제목 오른쪽에는 펼침·접힘 상태를 나타내는 화살표 아이콘을 둡니다.
닫힌 상태에서는 검사명, 검사일, 결과 요약만 보여줍니다.
열린 상태에서는 검사 수치, 참고 범위, 판독 요약 등 세부 정보를 표시합니다.
열려 있는 항목은 배경색이나 테두리로 구분해 현재 상태를 쉽게 알아볼 수 있게 합니다.
한 번에 하나만 열리는 방식과 여러 항목을 동시에 열 수 있는 방식의 차이도 함께 보여주면 이해가 쉽습니다.
3. 아코디언의 두 가지 동작 방식
① 단일 열기 방식
한 항목을 열면 기존에 열려 있던 항목은 자동으로 닫힙니다. 항목이 많고 화면 공간을 아껴야 할 때 유용합니다. 예를 들어 병원 업무 매뉴얼의 부서별 업무 절차를 확인할 때 적합합니다.
② 다중 열기 방식
여러 항목을 동시에 펼쳐 놓을 수 있습니다. 서로 다른 내용을 비교하거나 한 번에 여러 세부 정보를 확인해야 할 때 유용합니다. 검사 결과처럼 항목 간 비교가 필요한 화면에 적합할 수 있습니다.
어떤 방식을 선택할지는 화면의 목적에 따라 달라집니다. 사용자가 여러 내용을 비교해야 하는지, 한 번에 하나의 설명에 집중해야 하는지 먼저 판단하세요.
4. 탭·아코디언·드로어는 어떻게 다를까?
탭(Tabs): 같은 수준의 콘텐츠 영역을 빠르게 전환합니다. 예를 들어 환자 상세 화면의 기본 정보와 진료 기록을 오갈 때 적합합니다.
아코디언(Accordion): 한 화면 안에서 세부 항목을 접고 펼칩니다. 검사 항목별 상세 결과나 업무 절차를 보여줄 때 적합합니다.
드로어(Drawer): 화면의 한쪽에서 패널이 밀려 나오듯 열립니다. 현재 화면을 유지하면서 상세 정보나 보조 메뉴를 확인할 때 사용할 수 있습니다.
핵심은 탭은 ‘영역 전환’, 아코디언은 ‘세부 내용 펼치기’에 초점이 있다는 점입니다.
5. AI에게 바로 요청하는 실전 프롬프트
아래 프롬프트를 복사해 바이브코딩 도구에 입력해 보세요.
병원 EMR의 환자 상세 화면에 검사 결과 아코디언 UI를 구현해줘.
화면 상단에는 환자번호, 환자명, 병동·병실, 조회 기준일을 요약해서 표시해줘. 실제 환자 정보는 사용하지 말고 가상의 예시 데이터만 사용해줘.
검사 결과 영역에는 다음 네 가지 아코디언 항목을 만들어줘.
혈액검사
영상검사
심전도
기타 검사
각 항목이 닫혀 있을 때는 검사명, 검사일, 결과 요약을 보여줘. 항목을 클릭하면 상세 내용이 아래로 펼쳐지도록 해줘. 펼침·접힘 상태는 화살표 아이콘과 시각적 강조로 명확하게 구분해줘.
혈액검사에는 검사 항목, 결과값, 단위, 참고 범위를 표로 표시하고, 영상검사에는 검사 부위와 판독 요약을 보여줘. 심전도와 기타 검사도 해당 유형에 맞는 예시 정보를 제공해줘.
여러 항목을 동시에 열 수 있도록 구현해줘. 다만 나중에 단일 열기 방식으로 변경하기 쉽도록 상태 관리 로직을 분리해줘.
키보드로도 열고 닫을 수 있게 하고, 열림 상태를 보조기술이 인식할 수 있도록 접근성 속성을 적용해줘. 작은 화면에서도 제목과 상태 아이콘이 잘리지 않도록 반응형으로 구성해줘.
데이터가 없거나 조회 중인 경우에는 빈 상태와 로딩 상태를 구분해 표시해줘. 의료진이 빠르게 내용을 파악할 수 있는 단정하고 읽기 쉬운 업무용 디자인으로 만들어줘.
6. 결과를 더 좋게 만드는 개선 팁
제목만 읽어도 내용을 알 수 있게: ‘항목 1’처럼 모호한 제목 대신 ‘혈액검사 결과’, ‘영상검사 판독’처럼 구체적으로 작성합니다.
닫힌 상태에서도 핵심 요약 제공: 검사일이나 결과 요약을 함께 보여주면 사용자가 모든 항목을 열지 않아도 필요한 내용을 찾을 수 있습니다.
열림 상태를 명확하게 표시: 화살표 방향, 배경색, 테두리 등을 일관되게 사용합니다.
열고 닫는 동작을 예측 가능하게: 제목 영역 전체를 클릭할 수 있게 하고, 버튼처럼 동작한다는 점을 시각적으로 알려줍니다.
긴 콘텐츠는 별도 구조로 정리: 펼친 영역 안에 표, 목록, 링크 등을 사용하되 정보가 지나치게 길어지지 않도록 구성합니다.
접근성 고려: 키보드 조작을 지원하고, 버튼의 펼침 상태가 보조기술에 전달되도록 구현합니다.
중요한 정보를 접어 숨기지 않기: 환자 안전과 직접 관련된 경고나 긴급 정보는 기본 화면에서도 확인할 수 있도록 별도로 표시합니다.
특히 의료 시스템에서는 아코디언을 접었다 펼치는 UI 상태와 실제 데이터의 조회·저장 상태를 혼동하지 않아야 합니다. 화면에서 접었다고 해서 데이터가 삭제되거나 저장되는 것은 아닙니다. 또한 중요한 임상 경고를 아코디언 안에만 넣어 사용자가 놓치게 만들지 않도록 설계해야 합니다.
7. 오늘의 핵심 정리
아코디언은 많은 정보를 한꺼번에 펼쳐 놓는 대신, 사용자가 필요한 세부 항목만 선택해 확인하도록 돕는 UI입니다.
바이브코딩을 할 때는 “아코디언을 만들어줘”라고만 요청하지 말고, 어떤 항목을 접을지, 닫힌 상태에서 무엇을 보여줄지, 한 번에 몇 개까지 열 수 있을지까지 지정해야 합니다.
다음 편 예고
다음 12편에서는 Modal / Dialog(모달·다이얼로그)를 살펴봅니다. 화면 위에 확인창이나 입력창을 띄워 사용자의 주의를 모으는 방법을 병원 EMR의 처방 확인과 환자 정보 수정 사례로 알아보겠습니다.