모바일 친화적인 쇼피파이 반응형 구조 이해하기

퍼스트 모바일을 위한 쇼피파이 구조 이해하기

많은 쇼핑몰 이용자들이 데스크탑을 통해 구매하기 보다 모바일을 이용하여 보다 빠르고 보다 심플하게 원하는 제품의 정보를 얻고 구매하길 원하고 있습니다.  실제로 shopify store의 47%는 모바일 장치를 통해 제품을 경험하고, 구매하고 있으며, 점차적으로 이 비중은 높아지고 있습니다.

shopify 는 모바일 친화적인 구조의 테마와 기능을 지속적으로 제공함으로써 이러한 영역에 있어 두드러진 성장과 결실을 맺고 있습니다. 2021년 소매 모바일 상거래 매출은 3,590억 달러를 초과했으며, 2025년에는 두배가 될 것으로 예상되고 있습니다.

모바일 친화적인 경험과 이에 따른 제작 경험이 풍부한 브릿지세븐에서는 고객사에 보다 명확하고 경험적인 디자인 시스템을 제공해주기 위해 노력하고 있습니다.

1. 반응형 디자인 만들기
쇼피파이는 기본적으로 반응형 솔루션입니다. 따라서 각각의 디바이스의 크기에 따라 반응하여 구현됩니다. 대부분의 테마는 이에따라 반응형에 최적화된 디자인들을 선보이고 있습니다.

a. 쇼피파이의 디자인 스타일들 대부분 더 작은 모바일 화면과 디바이스에 최적화 되어 있어야 하며, 자체적으로 조정되도록 구조를 고려해야 합니다.

b. 각 섹션들은 가로 스크롤을 통한 스와이프 방식보다는 세로 스크롤을 우선시하고 가능하면 가로 스크롤 요소들은 피하는 것이 좋습니다.

모바일을 통한 구매는 2014년 처음으로 데스크탑을 추월하였고, 이후 계속해서 지배적이였습니다. 

2021년에는 BFCM 구매의 71%가 모바일장치에서 이루어졌으며, 데스크톱에서는 29%에 불과했습니다.

 

2. 모바일에 최적화된 앱과 테마 이용하기

쇼피파이 앱들과, 테마들의 주요한 기능들이 모바일에 엑세스 될 수 있는지 살펴봐야 합니다. 모바일에서 사용하지 못하는 기능들은 최대한 지양해야 하고, 모바일에 엑세스가 잘 되는 앱과 테마를 사전에 검토해야 합니다.

3. 모바일 설정이 용이한 테마 사용

최대한 모바일 최적화 작업시 코드작업을 적게 할 수 있는 테마를 선정하는 것이 중요합니다.  Liquid 템플릿이나 코드와 상호 작용할 필요 없이 테마에 동적 요소를 쉽게 추가할 수 있도록 해야 합니다. 가능한 최근 업데이트된 shopify Online Store 2.0 버전을 지원하는 테마를 사용하십시오.

참고
https://www.shopify.com/blog/bfcm-data

Contact UsBridge SevenCompany Profile