[쇼핑몰 구축기] 쇼핑 경험 강화를 위해 상품 탭에 스티키 기능을 적용해 보자

워드프레스 쇼핑몰이든 다른 한국형 쇼핑몰이든 상품관련 다양한 정보를 제공하기 마련인데요. 이렇게 너무도 많은 정보를 효현하다보니 특히 모바일같은 좁은 화면에서는 위치를 잃어버리기 쉽상입니다.

그래서 상품관련 정보를 보여주는 메뉴탭을 쉽게 이동할 수 있도록 만드는 것도 쇼핑 경험을 개선할 수 있는 좋은 방안입니다.

여기에서는 상품 정보를 보여주는 상품 탭 메뉴를 고정시켜 쉽게 이동할 수 있게 만들어주는 스티키 기능 적용 방안에 대해 알아봅니다.

Table of contents 목차 보이기

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는 https://puripia.com로 아직도 공사중이기는 합니다.)

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이 공유합니다. 조금 사심이 있기는 합니다.

[쇼핑 경험 최적화] 상품 탭에 스티키 기능을 적용해 보자

쇼핑몰에서 상품 설명은 그 중요성을 아무리 강조해도 지나치니 않을 정도로 중요한 요소죠.

그렇기 때문에 상품 설명 내용은 굉장히 길고, 또 부가 설명, 리뷰, FAQ 그리고 질문까지 관련 내용도 많은 편입니다.

때문에 상품 설명관련 메뉴로 쉽게 이동할 수 있도록 만드는 것도 쇼핑몰 이용자들에게 좋은 쇼핑 경험을 줄 수 있는 지름길이기도 합니다.

그러면 어떻게 상품탭에 이 스티키 기능을 적용할 수 있을까요? 처음에는 어떻게 접근해야할지 몰라 난감했는데요.몇주간 삽질한 끝네 알아낸 내용을 간략히 공유해 봅니다.

1. 스티키 기능 구현 플러그인

당연히도 가장 간단히, 우선적으로 고려할 수 있는 것은 이러한 스티키 기능 구현토록 도와주는 플러그인을 사용하는 것입니다.

이 기능 구현 플러그인에는 무료로 사용할 수 있는 플러그인들이 많아서 큰 욕심을 부리지 않는다면 적젏 사용할 수 있습니다.

1.1. myStickymenu Plugin

가장 많이 추천되는 것이 바로 myStickymenu인데요.

Sticky Menu on Scroll, Sticky Header for Any Theme – myStickymenu

기본 기능은 큰 차별점은 없지만 프로기능에는 디바이스 선택 기능, CSS 코드 적용, 특정 페이지에 스티키 기능을 해제할 수 있는 기능등 조그 더 다양한 기능을 추가합니다.

그리고 사소하지만 UX 디자인이 조금 세련되어 있습니다.

무료 버젼에서는 단 하나의 요소만 스티키 기능을 사용할 수 있습니다. 프로버젼은 사용하지는않았지만 마찬가지인듯 싶습니다.

1.2. Sticky Menu (or Anything!) on Scroll by Mark Senff

이 플러그인은 무료 버젼만 있는데요. 단순하면서도 필요한 기능들로 구성되어 있습니다.

이 플러그인도 한 하나의 요소만 스티키 할 수 있습니다. 하나만 할 수 있지만 다른 스티키 기능과 조합해서 사용가능하다는 장점이 있습니다.

어떤 요소도 스티키 가능
스티키 위치를 지정 가능, 예를들면 이미 다른 스티키 기능이 적용되어 있다면 그 스티키 아래에서 구현되도록 50px를 지정해주면 Top으로부터 50px 떨어진 곳에서 고정시킴
적용하지 말아야 할 스크린 사이즈 지정 가능, 예를 들어 화면 크기가 1500px이상 또는 300px 이하에서는 작동하지 않게 설정 가능
Z-index 지원(옵션)
Push-up 지정 가능(옵션), 스티키 요소를 특정 요소 위로 올려주는 기능
디버그 모드

개인적으로는 OceanWP 테마에서 제공하는 sticky head와 이 플러그인을 조합해서 사용중입니다.

2. 코드 사용

플러그인을 사용하지 않고 스티키 기능을 추가하는 방법은 없을까요?

구글링 결과 몇가지 방법이 있습니ㄷ다. 다만 저의 경우는 전부 작동하지 않더군요. 테마와 플러그인들간 충돌이 있는 것으로 보이는데요.

그래도 테마 등등 환경에 따라서 가능할지도 모르니 소개해 보도록 하겠습니다.

2.1. CSS 코드 이용 방법

이는 GeneratePress테마이 문의 내용중 알려진 내용인데요. 아래와 같은 코드 사용을 제안하고 있습니다.

/* 상품 탭 스티키 */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    position: sticky;
    position: -webkit-sticky;  /* Safari */  
    top: 0;
    background: #fff;
}Code language: PHP (php)