CSS 및 UI 기능은 맞춤 자바스크립트 솔루션이나 일부 CSS 해킹을 줄이거나 대체하고 더 효과적이고 간단한 코드를 작성하는 데 도움이 되는 새로운 CSS 기능 및 구문을 의미합니다. 최신 CSS 기능을 도입한 개발자는 다음 작업을 할 수 있습니다.
- 개발 시간 단축
- 코드 효율성, 가독성, 유지관리 용이성을 개선합니다.
- 성능을 개선합니다.
- 원활하고 효율적이며 액세스 가능한 멋진 사용자 인터페이스를 만듭니다.
이 일련의 우수사례에서는 다양한 전자상거래 사이트에서 스크롤 기반 애니메이션, 뷰 전환, Popover API, 컨테이너 쿼리, has() 선택기를 채택한 방법과 이를 통해 얻은 이점을 알아봅니다.
전자상거래 사이트에서 이러한 기능을 사용해야 하는 이유는 무엇인가요?
Forrester Research는 더 나은 UX를 정당화하는 6단계에서 잘 설계된 UI를 통해 전환율을 최대 200%까지 높일 수 있다고 발표했습니다. 소비자의 94%는 디자인이 웹사이트를 떠나거나 신뢰하지 않는 주된 이유라고 언급하면서 디자인 품질과 신뢰의 상관관계를 밝히는 것으로 나타났습니다. 이러한 이유로 전자상거래 사이트에서 특히 이러한 CSS 및 UI 기능을 활용할 수 있습니다. 전환 유입경로는 사용자가 쉽고 자신 있게 작업을 완료할 수 있도록 최대한 원활하게 진행되어야 합니다. 반응형 상호작용과 원활한 탐색을 통해 사용자에게 좋은 시각적 피드백을 제공할 수 있으며 전체 여정에 즐거움과 표현을 더할 수 있습니다.
이러한 기능은 쉽게 사용할 수 있도록 설계되었으며, 최소한의 JavaScript로 대부분 CSS로 구현할 수 있습니다. 따라서 동일한 기능을 만들기 위해 서드 파티 라이브러리나 맞춤 자바스크립트를 사용하지 않고도 멋진 전자상거래 환경을 만들 수 있습니다. JavaScript를 적게 사용하면 성능이 향상되어 더 원활하고 반응성이 뛰어난 환경을 만들 수 있습니다.
웹 UI 기능은 사용자 여정의 모든 부분에서 사용할 수 있습니다. 다음은 실제 사용 사례입니다.
| 기능/회사 | redBus | PolicyBazaar | 토코피디아 |
|---|---|---|---|
| 스크롤 기반 애니메이션 | 장바구니 | 제품 목록 페이지 (PLP) | 제품 세부정보 페이지 (PDP) |
| 전환 보기 | 로그인 | 제품 설명 페이지 | 제품 설명 페이지 |
| 팝오버 | - | - | 제품 설명 페이지 |
| 컨테이너 쿼리 | 홈 | - | 제품 설명 페이지 |
| :has() | - | PLP(PLP) | 제품 설명 페이지 |
이는 전환 유입경로로도 표시할 수 있습니다.
다음 우수사례에서는 기업에서 이러한 기능을 구현한 방법과 이를 통해 발견한 이점을 설명합니다.
이 도움말 시리즈에 대한 의견과 검토를 위해 페넬로페 맥라클런, 한나 반 옵스탈, 우나 크라베츠, 브라무스 반 담, 레이첼 앤드류님께 특별 연락드립니다.