CSS 및 UI 기능은 맞춤 JavaScript 솔루션이나 일부 CSS 해킹을 줄이거나 대체하고 더 나은 코드를 더 간단하게 작성하는 데 도움이 되는 새로운 CSS 기능과 문법을 말합니다. 최신 CSS 기능을 채택하면 개발자는 다음을 수행할 수 있습니다.
- 개발 시간을 단축합니다.
- 코드 효율성, 가독성, 유지 관리성을 개선합니다.
- 성능을 개선합니다.
- 원활하고 효율적이며 액세스 가능한 멋진 사용자 인터페이스를 만듭니다.
이 케이스 스터디 시리즈에서는 다양한 전자상거래 사이트에서 스크롤 기반 애니메이션, 뷰 전환, 팝오버 API, 컨테이너 쿼리, has() 선택기를 채택한 방법과 그로 인해 얻은 이점을 알아봅니다.
전자상거래 사이트에서 이러한 기능을 사용해야 하는 이유는 무엇인가요?
Forrester Research의 Six Steps for Justifying Better UX에 따르면 잘 설계된 UI는 전환수를 최대 200%까지 늘릴 수 있습니다. 사용자는 디자인 품질과 신뢰를 연관시키는 것으로 보이며 94% 의 소비자가 웹사이트를 떠나거나 신뢰하지 않는 주된 이유로 디자인을 꼽았습니다. 따라서 전자상거래 사이트는 이러한 CSS 및 UI 기능을 특히 유용하게 활용할 수 있습니다. 전환 유입경로는 사용자가 쉽고 자신 있게 작업을 완료할 수 있도록 최대한 원활해야 합니다. 반응형 상호작용과 원활한 탐색은 사용자에게 우수한 시각적 피드백을 제공하고 전반적인 여정에 즐거움과 표현을 더할 수 있습니다.
이러한 기능은 사용하기 쉽게 설계되었으며 대부분 최소한의 JavaScript로 CSS에서 구현할 수 있습니다. 이를 사용하면 동일한 기능을 만들기 위해 서드 파티 라이브러리 또는 맞춤 JavaScript를 사용하지 않고도 멋진 전자상거래 환경을 만들 수 있습니다. JavaScript를 적게 사용하면 성능도 향상될 수 있습니다. 이러한 환경을 더 원활하고 반응이 빠르게 만들 수 있습니다.
웹 UI 기능은 사용자 여정의 모든 부분에서 사용할 수 있습니다. 다음은 실제 사례입니다.
| 기능/회사 | redBus | PolicyBazaar | Tokopedia |
|---|---|---|---|
| 스크롤 기반 애니메이션 | 장바구니 | 제품 등록정보 페이지 (PLP) | 제품 세부정보 페이지 (PDP) |
| 전환 보기 | 로그인 | PDP | PDP |
| 팝오버 | - | - | PDP |
| 컨테이너 쿼리 | 홈 | - | PDP |
| :has() | - | PLP | PDP |
전환 유입경로로 표시할 수도 있습니다.
다음 케이스 스터디에서는 기업이 이러한 기능을 구현한 방법과 발견한 이점을 공유합니다.
이 도움말 시리즈에 관한 의견과 검토를 제공해 주신 Penelope McLachlan, Hannah Van Opstal, Una Kravets, Bramus Van Damme, Rachel Andrew님께 감사드립니다.