자주 묻는 질문을 누르면 답이 부드럽게 스르륵 펼쳐지는 사이트가 있고, 툭 하고 한 번에 튀어나오는 사이트가 있습니다. 그 차이 하나를 만들자고 개발자들은 20년째 같은 일을 반복해 왔습니다. 자바스크립트로 내용물의 높이를 픽셀 단위로 잰 다음, 그 숫자를 CSS에 박아 넣고 애니메이션을 돌리는 일입니다. 내용이 한 줄 늘면 높이가 달라지니 창 크기가 바뀔 때마다 다시 재야 했습니다.
왜 height: auto로는 애니메이션이 안 됐을까
브라우저는 숫자에서 숫자로만 중간 단계를 계산할 수 있습니다. 0픽셀에서 300픽셀로 가는 길은 그릴 수 있지만, 0픽셀에서 auto(내용만큼 알아서)로 가는 길은 그릴 수 없었습니다. auto는 숫자가 아니기 때문입니다. 그래서 '내용 높이만큼 부드럽게 펼치기'는 CSS만으로는 불가능한 대표적인 일로 남아 있었습니다.
interpolate-size: 한 줄이 바꾸는 것
이제 스타일 시트 맨 위에 interpolate-size: allow-keywords 한 줄을 선언하면, 브라우저가 auto 같은 키워드 값으로도 중간 단계를 스스로 계산해 줍니다. 접혀 있던 답변이 내용 길이와 상관없이 정확히 제 높이까지 부드럽게 열립니다. 높이를 재던 자바스크립트, 창 크기 변화를 감시하던 코드가 통째로 사라집니다.
calc-size(): auto를 계산식 안으로
한 발 더 나아가 calc-size() 함수를 쓰면 auto를 수식 안에서 다룰 수 있습니다. '내용 높이보다 20픽셀 더', '내용 높이의 절반까지만' 같은 표현이 CSS만으로 가능해집니다. 지금까지는 이 역시 전부 자바스크립트 계산의 몫이었습니다.
못 쓰는 브라우저에서는 어떻게 되나
이 기능의 좋은 점은 실패해도 망가지지 않는다는 것입니다. 아직 지원하지 않는 브라우저에서는 애니메이션 없이 예전처럼 한 번에 펼쳐질 뿐, 내용이 안 보이거나 화면이 깨지는 일은 없습니다. 그래서 오늘 바로 적용해도 손해 볼 것이 없는, 전형적인 점진적 개선 기능입니다. 새로 만드는 사이트라면 처음부터 넣어 두는 쪽이 자연스럽습니다.
작은 회사 사이트일수록 이득이 크다
아코디언 하나 때문에 애니메이션 라이브러리를 통째로 싣던 사이트라면, 이제 그 무게를 덜어낼 수 있습니다. 코드가 줄면 사이트는 가벼워지고, 가벼운 사이트는 손님을 덜 기다리게 합니다. CYAN은 이런 새 표준이 나올 때마다 라이브러리를 하나씩 덜어내는 방식으로 사이트를 관리합니다. 유행하는 도구를 더하는 것보다, 브라우저가 스스로 하게 두는 것이 오래 가는 사이트를 만든다고 믿기 때문입니다.
