카페24 반응형 스킨 - kape24 ban-eunghyeong seukin

 반응형 디자인의 타입에 따라 설정 방법이 상이합니다. 자세한 내용은 아래 내용을 확인하시기 바랍니다.

  태블릿. 모바일 등 다양한 기기에 최적화된 '반응형 디자인'에 대한 니즈가 많아지고 있으며, 카페24를 통해서도 반응형 디자인의 쇼핑몰을 구축할 수 있습니다.

  반응형 디자인은 PC 디자인만으로 반응형을 구현하는 타입과, PC와 모바일 각각에 반응형 디자인이 존재하는 타입이 있으며
  반응형 디자인을 쇼핑몰에 적용하고자 하는 경우 각 타입별로 설정하는 방법이 상이합니다.

1. PC 디자인으로 반응형 디자인 구현하는 경우 (모바일 디자인 X)

  일반적인 반응형 디자인으로, PC 디자인이 PC나 태블릿, 모바일의 화면 크기에 맞춰 가변하는 형태입니다.

 주요 해당 서비스
 - 쇼핑몰 관리자 : '에디봇 디자인'의 기본 스킨(디자인)
 - 카페24 디자인센터 : PC 디자인만 제공하는 반응형 상품

    1) 쇼핑몰 관리자 '디자인관리 > 디자인 보관함'에 반응형 스킨(디자인)을 추가한 뒤, 운영 중인 쇼핑몰의 대표 디자인으로 설정합니다.

   

카페24 반응형 스킨 - kape24 ban-eunghyeong seukin

    2) 쇼핑몰 관리자 '모바일쇼핑몰 > 모바일 환경설정 > 기본설정(탭)'의 '모바일 전용 디자인 사용설정'에서 '사용안함'을 선택한 후,
        하단의 '저장' 버튼을 클릭합니다.

        ※ 모바일 쇼핑몰을 '사용안함' 으로 설정할 경우, 모바일 전용 기능에 제약이 따를 수 있으니, 충분한 테스트를 해보는 것을 권장합니다.

   

카페24 반응형 스킨 - kape24 ban-eunghyeong seukin

2. 반응형 디자인을 PC와 모바일 각각 보유한 경우

  구입/제작한 반응형 디자인이 PC와 모바일 각각 존재하는 경우에 해당됩니다.
  1가지의 디자인으로 반응형을 구현는 것이 아닌 다양한 사이즈로 출시되는 모바일 기기에 최적화된 반응형 디자인을 제공하고 있습니다.

 주요 해당 서비스
 - 카페24 디자인센터 : 반응형 상품 중 상품 구분이 'PC및 모바일 세트'인 경우

  예시)
   

카페24 반응형 스킨 - kape24 ban-eunghyeong seukin

    1) 적용할 디자인을 아래 경로에서 각각 대표 디자인으로 설정합니다.

      ① PC 디자인 : 쇼핑몰 관리자 '디자인관리 > 디자인 보관함'

      ② 모바일 디자인 : 쇼핑몰 관리자 '모바일쇼핑몰 > 디자인 보관함'

    2) 쇼핑몰 관리자 '모바일쇼핑몰 > 모바일 환경설정 > 기본설정(탭)'의 '모바일 전용 디자인 사용설정'에서 '사용함'을 선택한 후,

        하단의 '저장' 버튼을 클릭합니다.

카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.

더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]

카페24쇼핑몰의 반응형 스킨의 개념이해

하바나스 스킨을 구매하셨거나 구매예정인 고객분들께서

확인하고 이해하셔야 할 반응형 쇼핑몰의 개념입니다.

카페24 반응형 스킨 - kape24 ban-eunghyeong seukin

1.반응형웹이면 PC와 모바일 모두 관리가 되는것 아닌가요?

네, 일반적으로 반응형 웹이라고 하면 PC와 모바일..등 다양한 디바이스를 대응할 수 있도록 만들어진 웹사이트를 말합니다.

하지만, 카페24쇼핑몰은 구조상 PC웹과 모바일웹을 분리하여 운영되도록 만들어졌기 때문에 분리된 상태로 운영하는 반응형 웹 으로 이해하시는게 맞습니다. 즉, PC 반응형웹과 모바일 반응형웹 이렇게 이원화하여 운영하는 반응형 웹사이트입니다.

하지만, 운영을 하시다 몰의 규모가 커지게 되면 PC반응형웹과 모바일 반응형 웹으로 분리해서 운영하는 것이 더욱 효율적이라는 것을 알게 되실 것입니다. 아래의 글을 계속 읽어보시면 운영에 많은 도움이 되실 것입니다.

2. 카페24쇼핑몰에서의 반응형 디자인의 개념은 조금 다릅니다.

카페24는 모바일웹을 별도로 운영하도록 설계된 시스템

하바나스 스킨은 모바일웹도 반응형 레이아웃으로 디자인되어 있습니다.

카페24쇼핑몰은 솔루션의 구조상(태생 자체) PC웹과 모바일웹을 구분하여 운영하도록 설계되어있습니다.

PC웹은 관리자화면 > 디자인관리에서 다루어지고있으며,

모바일웹은 관리자화면 > 모바일쇼핑몰 > 디자인관리에서 관리를 할 수 있도록 분리되어있습니다.

모바일 웹을 사용하고 싶지 않아요!

모바일 웹을 사용하고 싶지 않은 경우에는 관리자화면 > 모바일 쇼핑몰 > 모바일 환경설정에서 모바일 쇼핑몰 사용안함에 체크를 하시면 됩니다.

모바일 쇼핑몰 사용설정에서 모바일 쇼핑몰을 사용안함으로 체크를 하시면 모바일에서도 PC웹 디자인이 보여집니다.

이때, 하바나스 스킨의 PC웹은 반응형 디자인으로 제작되어있기 때문에 모바일디바이스에서도 최적화되어 잘 보여집니다.

하바나스 스킨은 반응형 디자인으로 제작되어 모바일에서도 PC웹이 모바일 사이즈에 최적화되어 보여지지만, 카페24솔루션의 특성상 모바일에서 모바일웹을 사용하는 것이 아니기 때문에 일부 기능이 제한적으로 작동하지 않습니다.

카페24 반응형 스킨 - kape24 ban-eunghyeong seukin

하바나스 스킨은 PC웹은 반응형 디자인인가요?

네. 반응형 레이아웃을 대표적인 프레임워크 Bootstrap을 기반으로 제작되어진 스킨입니다.

브라우져 사이즈를 줄였다 넓혔다 해보세요. 사이즈에 맞춰서 자동 변형하는 레이아웃을 확인하실 수 있습니다.

하바나스 스킨의 모바일웹은 반응형 디자인인가요?

네. 맞습니다. 모바일웹도 마찬가지로 반응형 디자인으로 구성되어있습니다.

하바나스 스킨을 구매시 PC웹과 모바일웹을 모두 설치해주나요?

네, 그렇습니다. HBC / HBS스킨 구매시 PC웹은 물론, 모바일 반응형웹 소스코드까지 모두 설치해드리고 있습니다.

#카페24디자인센터 구매페이지에서 상세정보내용을 꼭 확인해보세요.

(추후에, 별도 판매하거나 모바일웹이 없을 경우도 있을수 있기때문에 디자인센터 구매페이지를 꼭 확인해보세요! )

모바일웹을 사용하지 않으면 어떤가요?

카페24쇼핑몰에서 모바일 웹을 사용하지 않고 PC 반응형 웹만 사용할 경우에도 하바나스 디자인 스킨은 반응형으로 제작되어있어 별 문제가 없이 모바일에서도 잘 보여집니다. 하지만, 카페24쇼핑몰의 특성상 모바일 웹에서 몇가지 주요 기능이 작동을 하지 않습니다.

아래의 기능이 확인된 기능이며, 카페24고객센터의 공식적인 입장입니다.

꼭 확인하세요!

1. 모바일 스마트 원터치 결재모듈을 사용할수 없습니다.

2. 프로모션 > 혜택관리에서 혜택 설정시 모바일 할인 적용 불가능 합니다.

3. 쿠폰 발행시 모바일에서는 쿠폰적용이 불가능합니다.

4. PC 반응형 웹을 사용시 NPAPI 지원중단으로 모바일에서는 카드결제등이 불가능하며 무통장으로만 결제가 가능합니다.

5. 모바일기기로 주문을 하여도 매출은 PC로 잡힙니다. 별도 모바일 통계 분석이 불가능합니다.

6. 상품관리 > 상품분류관리> 분류관리의 쇼핑몰 표시설정에서 모바일 쇼핑몰에서만 노출되도록 설정 불가능 합니다.

7. 모바일에서 PC웹 게시판에 글쓰기사용시 첨부파일 업로드가 불가합니다.

8. 기타 모바일에 최적화된 기능은 모두 사용이 불가합니다.

반드시 알아야할 카페24쇼핑몰 TIP : 모바일웹을 사용하지 않을 경우에 발생하는 주요사항

위의 기능이 특별히 필요없는 쇼핑몰은 PC반응형 웹으로 모바일웹까지 대응이 가능합니다.

대표적으로 무통장 입금만으로 쇼핑몰을 운영하는 경우, 상품가격을 문의로만 대처하는 경우, 상품판매 위주보다는 상품의 홍보/전시가 중요한 쇼핑몰...등은 PC 반응형웹만 운영해보시다가 불편함을 느끼시면 모바일 웹을 사용함으로 체크만 하시면 언제든지 모바일 웹을 함께 사용할 수 있습니다.

운영이 쉬운 하바나스 모바일 반응형웹의 특징

하바나스 스킨은 PC나 모바일이나 모두 반응형 웹으로 제작된 소스코드입니다.

따라서 PC 반응형 웹이던 모바일 반응형 웹이던 거의 유사한 소스코드로 제작되어있습니다.

( 물론, css나 부분적으로 모바일에만 최적화된 영역도 있습니다. 특히 결제부분, 모바일에 특화된 부분은 전혀 다릅니다.)

BUT, 고객께서 주로 수정하실 메인페이지의 각각의 섹션 영역에 대해서는 전반적으로 같은 소스코드 이루어져 있습니다.

따라서, PC웹 스마트디자인 편집창에서 수정한 내용을 모바일웹 스마트디자인편집창을 열어 복사(Ctrl + C) 후 붙여넣기 (Ctrl + V) 만 하시면 간단하게 수정이 완료됩니다.

모바일웹을 따로 운영하는것이 더욱 효과적입니다.

운영 초기에는 반응형웹으로 PC와 모바일을 같이 운영하길 원하는 분들이 많습니다.

하지만, 쇼핑몰의 규모가 커지면서 마케팅전략이 다변화되는 시점에서는 모바일웹을 별도로 운영관리하는 것이 훨씬 효과적입니다.

PC웹에는 많은 정보를 보여줄 수 있으며, 그래야 합니다.

하지만 모바일웹에서는 필수 정보만 요약해서 보여줄 필요가 있습니다.

이렇게 서로 다른 내용으로 서비스를 효과적으로 보여주기 위해서라도 모바일웹이 별도로 있는 것이 좋다고 느끼는 시점이 오실것입니다.

단순한 예로 많은 유명 사이트(네이버/쿠팡/인터파크...등등)들이 모바일 웹과 PC 웹을 별도로 운영하는 것을 확인하실 수 있을것입니다.

감사합니다.