작은 회사 웹사이트에는 '접는 화면'이 의외로 많이 필요합니다. 자주 묻는 질문(FAQ), '자세히 보기', 긴 안내문 접어두기처럼 평소엔 감춰뒀다가 손님이 누르면 펼쳐지는 영역이 그렇습니다. 그런데 이 단순한 동작 하나를 위해 그동안 우리는 너무 많은 코드를 매달아 왔습니다.
접는 화면 하나에 코드가 너무 많이 붙는다
클릭을 감지하는 이벤트를 달고, 펼쳐질 영역의 높이를 계산하고, 화살표 아이콘을 뒤집고, 키보드로도 열리게 하고, 화면 읽어주는 프로그램(스크린리더)에도 '지금 열림/닫힘'을 알려줘야 합니다. 자바스크립트로 직접 짜면 줄 수가 금세 수십 줄로 불어나고, 그 코드가 깨지면 손님은 눌러도 펼쳐지지 않는 먹통 버튼만 마주합니다. 접었다 펴는 것은 화면의 가장 기본적인 동작인데, 그 기본을 매번 손으로 다시 만들어 온 셈입니다.
태그 두 개면 펼침이 끝난다
지금의 브라우저는 이 기능을 HTML이 기본으로 품고 있습니다. details(접이식 영역) 안에 summary(항상 보이는 제목 줄)를 넣으면, 그 아래 내용은 평소 접혀 있다가 제목을 누를 때 펼쳐집니다. 자바스크립트는 한 줄도 필요 없습니다.
- summary에 적은 글이 '눌러서 펼치는 제목'이 되고, 그 아래 내용은 자동으로 접힙니다.
- 처음부터 펼쳐 보이고 싶으면 'open' 표시 하나만 더해주면 됩니다.
- 삼각형 표시와 열림·닫힘 동작이 브라우저 기본으로 따라옵니다.
FAQ 열 개를 만들든 스무 개를 만들든, 구조는 똑같이 단순하게 반복됩니다.
검색에도 강하고, 누구에게나 열린다
브라우저 기본 기능이라 얻는 이점이 큽니다. 키보드 탭과 엔터로 여닫을 수 있어 마우스를 쓰기 어려운 손님도 막힘이 없고, 스크린리더가 '접힘/펼침' 상태를 또박또박 읽어줍니다. 접근성을 따로 챙기지 않아도 기본으로 갖춰진다는 뜻입니다.
검색에서도 유리합니다. 최신 브라우저는 접혀 있는 내용까지 페이지 내 찾기(Ctrl+F)로 발견하면 해당 항목을 스스로 펼쳐 보여줍니다. 자바스크립트로 숨긴 영역은 검색에서 통째로 빠지기 쉬운데, details 안의 글은 본문으로 온전히 살아 있습니다.
한 번에 하나만 열리는 아코디언
'하나를 열면 다른 건 닫히는' 아코디언은 예전엔 자바스크립트의 단골 일거리였습니다. 이제는 여러 details에 같은 이름(name)을 묶어주기만 하면, 그중 하나가 열릴 때 나머지는 알아서 닫힙니다. 라디오 버튼처럼 한 번에 하나만 펼쳐지는 깔끔한 FAQ가 코드 없이 완성됩니다.
부드럽게 여닫는 마무리
예전엔 펼침이 툭 끊기듯 나타나 거칠어 보였지만, 요즘은 CSS만으로 스르륵 열리고 닫히는 효과까지 입힐 수 있습니다. 펼쳐질 높이를 미리 계산하지 않아도 브라우저가 자연스러운 움직임을 만들어 주는 방향으로 표준이 발전하는 중입니다. 가벼운 코드로도 손끝에 착 감기는 화면을 만들 수 있게 된 것입니다.
중요한 건 도구를 줄이는 게 아니라, 손님이 마주하는 화면이 더 단단해진다는 점입니다. 깨질 코드가 줄면 먹통 버튼도 줄고, 그만큼 손님은 찾던 답을 빠르게 펼쳐 봅니다.
덜어낼수록 단단해지는 화면
좋은 웹사이트는 화려한 기술을 더 많이 얹은 쪽이 아니라, 브라우저가 잘하는 일은 브라우저에 맡기고 꼭 필요한 곳에만 손을 대는 쪽입니다. CYAN은 작은 회사의 웹사이트를 만들 때 이렇게 기본기에 충실한 방식을 우선합니다. 가볍게 동작하고 오래 버티며, 손님 누구에게나 똑같이 열리는 화면. 그 단단함이 결국 문의 한 통의 차이를 만든다고 믿습니다.