홈페이지에서 손님이 '문의하기' 버튼을 누르면 입력 창이 뜹니다. 그런데 그 창이 스르륵 떠오르는 대신 화면 한가운데에 툭 하고 튀어나온다면, 손님은 방금 무엇이 열렸는지 순간적으로 놓칩니다. 닫을 때도 마찬가지입니다. 부드럽게 사라지지 않고 한 번에 없어지면, 화면이 깜빡인 것처럼 느껴져 신뢰가 조금씩 깎입니다. 작은 차이 같지만, 이 매끄러움이 '잘 만든 사이트'와 '어딘가 엉성한 사이트'를 가릅니다.
왜 나타나고 사라지는 애니메이션은 그렇게 까다로웠나
화면에 무언가를 완전히 감출 때 우리는 보통 display: none을 씁니다. 자리까지 차지하지 않게 완전히 지워 버리는 속성입니다. 문제는 이 속성이 애니메이션이 되지 않는다는 점입니다. 있음과 없음, 딱 두 상태만 존재해서 중간 과정을 만들 수가 없습니다. 그래서 요소가 나타날 때도, 사라질 때도 '툭' 하고 전환돼 버립니다.
지금까지 개발자들은 이 벽을 자바스크립트로 우회했습니다. 요소를 먼저 화면에 올려 두고, 아주 짧은 시간을 기다렸다가 클래스를 붙여 애니메이션을 시작하고, 닫을 때는 애니메이션이 끝나는 시점을 초 단위로 계산해 그제야 요소를 제거하는 식이었습니다.
작은 기능 하나에 붙는 긴 코드
결과적으로 팝업 하나, 드롭다운 하나를 부드럽게 만들려고 이벤트를 걸고, 타이머를 돌리고, 애니메이션 종료를 감시하는 코드가 줄줄이 따라붙었습니다. 그 코드가 늘어날수록 버그가 생길 자리도 늘어납니다. 닫기 애니메이션 도중에 손님이 버튼을 한 번 더 누르면 화면이 어긋나는, 그런 문제들이 여기서 생겼습니다.
@starting-style — '나타나기 직전'의 모습을 정해 두다
이제는 CSS가 이 일을 넘겨받습니다. 핵심은 @starting-style이라는 규칙입니다. 이름 그대로 '시작하는 순간의 스타일', 즉 요소가 화면에 처음 등장하기 직전의 모습을 미리 정해 두는 장치입니다.
비유하자면 이렇습니다. 무대에 배우가 등장할 때, '커튼 뒤 어디쯤에서 어떤 자세로 서 있다가 걸어 나올지'를 미리 적어 두는 것과 같습니다. 브라우저는 그 시작 지점에서 실제 모습으로 자연스럽게 이어 줍니다. 개발자는 '시작'과 '끝'만 알려 주면, 그 사이의 부드러운 움직임은 브라우저가 알아서 그립니다.
- 등장: 투명하고 살짝 아래에 있던 상태에서 → 또렷하고 제자리로 떠오릅니다.
- 퇴장: 또렷하던 상태에서 → 투명하게 옅어지며 물러납니다.
- 제어: 이 모든 과정에 자바스크립트 타이머가 필요 없습니다.
사라질 때까지 책임지는 allow-discrete
여기에 transition-behavior: allow-discrete라는 짝이 더해집니다. 앞서 말한 '있음과 없음, 딱 두 상태뿐이라 애니메이션이 안 되던' 속성마저, 애니메이션이 끝난 뒤에 마지막으로 전환되도록 순서를 잡아 주는 장치입니다. 덕분에 요소가 완전히 사라지는 순간까지 화면 밖으로 부드럽게 배웅할 수 있습니다. 자바스크립트로 종료 시점을 계산하던 그 복잡한 일이, 속성 한 줄로 정리됩니다.
작은 회사 웹사이트에 이것이 왜 중요한가
화려한 효과를 넣자는 이야기가 아닙니다. 오히려 반대입니다. 손님이 흐름을 놓치지 않게 하는 것이 목적입니다. 문의 창이 어디서 열렸는지, 방금 누른 메뉴가 어떻게 펼쳐졌는지를 눈이 따라갈 수 있어야, 손님은 다음 행동을 망설이지 않습니다. 부드러운 전환은 장식이 아니라 길 안내에 가깝습니다.
게다가 이 방식은 자바스크립트 코드를 크게 줄여 줍니다. 코드가 줄면 사이트가 가벼워지고, 나중에 고칠 곳도 줄어듭니다. 유지보수 비용을 아끼면서 완성도는 올리는, 작은 회사에 특히 반가운 방향입니다.
좋은 화면 전환은 손님이 알아차리지 못합니다. 다만 '이 사이트는 왠지 매끄럽다'는 인상만 남깁니다.
도입할 때 챙길 점
@starting-style과 allow-discrete는 최신 브라우저에서 안정적으로 동작하지만, 오래된 브라우저를 쓰는 손님도 있습니다. 이럴 때 원칙은 하나입니다. 애니메이션이 없어도 기능은 멀쩡히 작동해야 한다는 것. 부드럽게 뜨지 않더라도 팝업은 열리고 닫혀야 합니다. 효과는 '있으면 더 좋은 것'으로 얹고, 핵심 동작은 어디서나 되게 설계하면 안전합니다.
CYAN 에이전시는 작은 회사 웹사이트를 만들 때 이런 최신 CSS 기법을 실무에 맞게 골라 적용합니다. 눈에 띄는 효과를 위해서가 아니라, 손님이 화면 위에서 길을 잃지 않도록 하기 위해서입니다. 새로 만들 홈페이지가 '왠지 매끄럽다'는 인상을 남기길 바란다면, 그 매끄러움이 어디서 오는지부터 함께 설계해 드립니다.
