스택
5.10.0 버전에서는 Notification 컴포넌트에 새로운 기능을 도입했습니다. 원래 화면을 가득 채울 수 있는 눈에 띄는 알림을 하나로 겹쳐 보여줌으로써, 복잡하고 무거웠던 컴포넌트에 약간의 유연함을 더했습니다:
우리는 이 새로운 기능이 매우 마음에 들어 5.10.0 이후 Notification의 기본 동작으로 설정했습니다. 이 기능은 시각적 변화도 가져옵니다. 예를 들어, 확장된 상태에서 알림 순서가 아래에서 위로에서 위에서 아래로 변경됩니다. 이는 이전 기본 동작과 정확히 반대이지만, 새로운 애니메이션에서는 최적의 순서입니다.
물론, 사용자는 stack: false를 설정해 이 기능을 끄고 5.9.x 이전의 기본 동작으로 되돌릴 수 있습니다. 자세한 내용은 문서를 참고하세요.
세부 정보
이 기능을 구현하기 위해 오랜 시간 동안 코딩을 하며 모든 세부 사항을 완벽하게 만들고자 했습니다. 이제 몇 가지 요구 사항을 소개하겠습니다.
- 기본적으로 세 개 이상의 Notification이 동시에 나타날 때부터 알림이 겹쳐집니다. 즉, 네 번째 Notification이 나타나면 전체 Notification 그룹이 겹쳐진 상태로 표시됩니다. 이 임계값은
stack: { threshold: 3 }를 통해 조정할 수 있습니다. - 겹쳐진 상태에서는 두 개의 Notification이 뒤에 보이는데, 그 배경에 흐림 효과를 추가하여 그 존재감을 약화시켰습니다. 또한 이 효과는 다크 모드에서도 최적화되었습니다. 오른쪽 아래 버튼을 클릭해 테마를 전환해보세요.
- 겹쳐진 상태에서 표시되지 않은 Notification들은 사라지지 않습니다. 마우스를 겹쳐진 Notification 그룹 위에 올리면 자동으로 닫히지 않은 모든 Notification이 확장되어 순서대로 배치되고, 모든 Notification의 지속 시간이 새로 고쳐집니다.
placement 설정에 따라 겹쳐지는 방향이 다르지만, 방향은 위쪽이나 아래쪽 두 가지로 나뉩니다. 확장 시에도 배열 순서는 위에서 아래로 또는 아래에서 위로 두 가지 방식 중 하나입니다.
구현 세부 사항
동적 높이
세심한 사용자라면 Notification의 높이가 변할 때, 뒤에 숨겨진 메시지가 항상 최신 메시지 바로 아래에 위치하며, 경계를 넘는 상황이 없다는 것을 발견했을 것입니다. 네, 맞습니다. 겹쳐진 상태에서는 모든 메시지 박스가 최신 메시지와 같은 높이로 제한되며, 이는 몇 가지 이점을 가져옵니다 :
- 최신 메시지의 높이가 너무 작아도 뒤에 있는 메시지가 넘칠 걱정을 하지 않아도 됩니다.
- 고정된 오프셋만 설정하면, 뒤에 있는 두 메시지 박스의 위치와 너비를 쉽게 계산할 수 있어, 부드럽고 자연스러운 애니메이션 효과를 얻을 수 있습니다.
물론, 단순히 높이를 같게 맞추는 것으로 끝나지 않습니다. 우리의 Notification은 확장을 지원한다는 것을 잊지 마세요. 확장되면 모든 메시지 박스는 원래 크기로 복원되어야 하며, 확장 시의 오프셋은 원래 높이를 기준으로 계산됩니다.
하지만 이미 너비와 높이가 수정된 상태에서 어떻게 복원할 수 있을까요?
이 새로운 기능을 구현하기 위해, 기존 메시지 박스 바깥에 새로운 div 레이어를 추가하여 메시지 박스의 크기 변화를 처리하는 컨테이너로 사용했습니다. 기존 메시지 박스는 내용 부분만 유지하여 그 높이가 컨테이너의 영향을 받지 않도록 했습니다. 컨테이너의 너비는 scaleX로 조정되며, 이를 통해 너비 변화로 인해 텍스트가 줄바꿈되면서 컨테이너 높이가 증가하는 상황을 방지할 수 있습니다. 이러한 구조를 통해 우리는 정확한 내용 크기를 유지하면서도, 컨테이너의 크기를 자유롭게 조정할 수 있어 레이아웃에 영향을 주지 않고 두 마리 토끼를 잡을 수 있게 되었습니다.
위치 지정
위치 지정 측면에서 우리는 가장 간단한 방법인 모든 메시지 박스를 절대 위치로 지정하는 방식을 선택했습니다. 확장할 때는 각 메시지 박스의 높이를 계산하고 그 위치 오프셋을 누적하여 현재의 부드러운 애니메이션 효과를 얻습니다.
애니메이션 효과를 고려하지 않는다면 다른 레이아웃 방법도 있습니다. 예를 들어, 구현 과정에서 우리는 flex 레이아웃을 사용하여 확장 시의 순서를 먼저 구현한 후, 음수 margin을 통해 스택 효과를 구현했습니다. 이것도 하나의 방법이지만, 실제로 애니메이션 효과와 관련된 문제가 발생합니다. 새로운 메시지가 나타날 때, 아래에 있는 모든 메시지가 새로운 메시지를 위해 순간적으로 이동하는 현상이 발생합니다. 이 문제는 다른 위치 지정 문제와 함께 얽혀서 결국 완벽하게 해결하기 어려운 상황이 되었습니다. 그래서 우리는 결국 가장 간단한 방법인 절대 위치 지정을 선택하고, 모든 오프셋은 수동으로 계산하기로 했습니다.
요약
이 새로운 기능은 antd 팀이 컴포넌트의 유연성과 세련됨을 향상시키기 위해 시도한 것입니다. 더 나은 경험을 제공할 수 있기를 바랍니다~
새로운 기능이기 때문에 사용 중 문제가 발생하거나 버그를 발견하신 경우, 언제든지 antd의 이슈 트래커에 말씀해 주시기 바랍니다.
마지막으로, 여러분 모두가 이 스마트한 Notification을 좋아하시길 바랍니다~
