현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 포토 슬라이드 v2 앱에서 스마트 배너 관리 앱으로 갈아타기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2021-07-31
  • 추천 추천하기
  • 조회수 19



스마트 배너 관리 앱 사용하는 방법 >


 

현재 고객님 쇼핑몰 메인화면에서 메인 이미지들이 슬라이드 되고있는데, 

이는 카페24에서 제공하는 포토 슬라이드 v2 라는 앱을 이용하여 노출중입니다.

 

하지만 포토 슬라이드 v2 앱 서비스를 카페24에서 곧 종료시키게되어, 

2021년 9월 30일까지만 포토 슬라이드 v2앱을 사용 가능합니다.

 

그러므로 2021년 9월 30일 이전에 미리 포토 슬라이드v2 앱 사용을 중단하시고, 

카페24 기본 앱인 스마트 배너 관리 앱을 사용하여 메인 이미지 슬라이드를 메인화면에 

노출시켜주시기 바랍니다. 


9월30일 이후에는 이미지 복구 및 백업이 불가능므로

아래 설명을 보시고 미리 수정을 해주셔야 합니다.

 


아래 설명은 포토 슬라이드 v2 앱을 사용하시던 분들이

스마트 배너 관리 앱으로 변경하여 사용하는 방법입니다. 

어렵지않은 간단한 작업이니 순서대로 따라해주시기 바랍니다.

 


관리자 페이지 상단 좌측의 모드를 스마트 모드가 아닌 프로 모드로 설정하신 다음 작업해주세요.

 



1. 디자인관리 > 앱스토어 에서 포토 슬라이드 v2 앱의 관리하기 버튼을 클릭합니다


 

 



2. 기존에 메인화면에서 사용하시던 슬라이드명 메인 이미지 슬라이드 (PC 디자인) - 삭제금지 를 클릭하시면 

상단에 슬라이드 영역 사이즈 라고 표시된 부분의 가로, 세로 크기를 메모해두세요.

아래 이미지는 예시이며 디자인마다 이미지 크기가 다릅니다.

 

 

























3. 아래쪽에 보시면 현재 올라와있는 이미지들이 작은 섬네일 이미지로 보여집니다. 

각각의 이미지에 마우스를 대고 마우스 오른쪽 버튼을 눌러 이미지를 다른 이름으로 저장 하셔서 컴퓨터에 저장해주세요. 

(컴퓨터에 저장한 이미지들을 스마트 배너 관리 앱에 업로드해주어야 하기때문에 저장하는 것입니다.)


 

 




4. 디자인관리 > 앱스토어 에서 스마트 배너 관리 앱의 관리하기 버튼을 클릭해주세요. 


 

 


 

 


 

5. 상단에 모바일 탭과 PC 탭이 있는데 모바일 탭이 선택된 상태에서 배너 영역 추가하기 라는 글자 위의 

버튼을 클릭해주세요. (모바일 탭 바로 옆의 PC탭은 클릭하실 필요 없습니다.)


 

  

 

 



 

6. 스마트 배너 관리 앱 설정 화면이 나옵니다.

 


 

1) 영역명 : 본인이 원하는 제목을 넣어주시면 됩니다. 

2) 배너 크기 : 포토 슬라이드 v2 앱에서 설정되어있던 이미지와 동일한 크기로 입력해주세요.

3) 활성여부 : ‘활성’ 으로 설정해주셔야 이미지가 화면에 노출됩니다.

4) 슬라이드 사용 여부 : 이미지를 2장 이상 사용하실 경우에는 ‘사용’으로 설정하셔서 

 슬라이드 효과를 사용 가능합니다. 이미지를 한 장만 노출시킬 경우는 슬라이드 효과를 사용안함으로 설정해주시면 됩니다.

 

위의 설정들을 완료 후 저장 버튼을 클릭해주세요. 

 



 

7. 그리고 화면 아래 배너 등록 버튼을 클릭해주세요. 

 


 

 

 

 

8. 이미지 등록 > 찾아보기 버튼을 클릭하여 이미지를 업로드 해주시면 됩니다.

(포토 슬라이드 v2앱에서 컴퓨터에 저장하셨던 이미지들 올려주시면 됩니다.)

 

바로 아래 링크 URL 항목에서 이미지 클릭시 연결될 페이지 주소를 넣어주시고 

(쇼핑몰의 모든 페이지는 주소창에 각 페이지 고유의 주소가 있습니다. 복사하여 붙여넣어주시면 됩니다.)

그 아래 링크 방식은 쇼핑몰 내의 페이지로 링크를 할 경우 현재창에서 이동으로 선택해주시기 바랍니다. 

만약 타사이트로 링크시키려면 새 창 열기를 선택해주세요.

 

모두 설정 후 ‘저장’ 버튼을 클릭해주세요.

 

나머지 다른 이미지들도 배너등록 버튼을 클릭하셔서 동일한 방법으로 업로드 해주시면 됩니다.


 

 

 

 

 

 


 

9. 이미지 슬라이드 순서를 변경하시려면 순서변경을 클릭하셔서 원하시는 롤링 순서로 변경 가능합니다. 

 


 



10. 스마트 배너 관리 앱에서 모든 설정을 완료 후, 상단의 생성 코드 바로 옆에 소스 복사 버튼이 있습니다. 

해당 버튼을 반드시 클릭하여 소스를 복사해주세요.

 




 

디자인 관리 > 앱스토어 메뉴에서의 작업은 모두 완료되었고, 

아래부터는 스마트 디자인 편집창에서 소스를 수정해야합니다. 

소스를 수정하지않으면 메인화면에서 스마트 배너 관리 앱을 사용할 수 없습니다.

소스복사 버튼을 클릭하여 소스가 복사된 상태에서 아래 설명 보시면서 순서대로 따라해주시기 바랍니다.

 

 

---------------------------------------------------------------------------------------

 

 

11. 기존의 포토 슬라이드 v2 앱 소스를 삭제하고, 그 자리에 스마트 배너 관리 앱 소스를 붙여넣기 해야합니다.

아래 설명대로 따라해주세요.

 

- PC디자인 : 디자인관리 > 디자인보관함 에서 현재 대표 디자인으로 사용중이신 디자인을 선택 후 복사 버튼을 클릭하여 실수를 대비해 백업해주세요. 

그리고 대표 디자인의 수정 버튼을 클릭하시면 스마트디자인 편집창이 뜨며 첫 화면에 쇼핑몰 메인화면(index.html)이 보여집니다.

편집창 하단에 조그만 아이콘 3개가 있는데 가장 오른쪽 아이콘(HTML) 을 클릭해주세요.

 


 


 

 

쇼핑몰 메인화면의 HTML 소스가 보입니다. 

소스 상단에 보시면 아래와 같은 형식의 소스가 있습니다. 

다른 소스는 절대 삭제하지마시고 정확하게 빨강색 소스만 삭제해주시기 바랍니다. 

 

<div id=“main_img”>

<div module="photoslide2_slide_1">

 <!--@css(/css/photoslide2.css)-->

 {$slide_images}

</div>

</div>

 

(유의사항) 빨강색 소스 바로 위의 <div id=“main_img”> 와 바로 뒤의 </div> 는 

절대 삭제되지않도록 유의해주세요. 그 외에 다른 소스들도 절대 삭제하지말아주세요.


 

 

 


 


 

 

그리고 소스가 삭제된 자리에 아까 스마트 배너 관리 앱에서 소스복사 버튼을 클릭하여 복사해 두었던 소스를 붙여넣기 해주세요.





  

붙여넣기하여 수정된 소스는 아래와 같습니다.

 

<div id="main_img">

<!--@import(/smart-banner/shop1/smart-banner-admin-MO00001.html)-->

 </div>

 


그리고 소스중에서 <div id="main_img"> 안에 style="z-index:0;" 를 반드시 추가해주세요. 



 




  최종 수정된 소스는 아래와 같습니다. ★  

 

↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

 

<div id="main_img" style="z-index:0;">

<!--@import(/smart-banner/shop1/smart-banner-admin-MO00001.html)-->

 </div>



소스가 위와 동일하게 수정이 되었다면 편집창 상단 좌측의 ‘저장’ 버튼을 반드시 클릭해주신 후

쇼핑몰 PC디자인 메인화면에서 스마트 배너 관리 앱을 이용한 메인 이미지 슬라이드가 

정상적으로 잘 노출되는지 확인바랍니다.

 

 


이제 모바일 디자인 소스를 수정할 차례입니다.  PC디자인보다 수정방법이 간단합니다.



- 모바일 디자인 : 모바일쇼핑몰 > 디자인보관함 에서 현재 대표 디자인으로 사용중이신 디자인을 선택 후 ‘복사’ 버튼을 클릭하여 실수에 대비해 백업해주세요. 

그리고 대표 디자인의 수정 버튼을 클릭하시면 모바일 디자인의 스마트디자인 편집창이 뜨며 첫 화면에 쇼핑몰 메인화면(index.html) 이 보여집니다. 

 

메인화면의 HTML 소스들이 보이는데 소스 상단에 아래와 같은 소스가 있습니다. 디자인마다 소스가 조금씩 차이가 있을 수 있습니다. 
아래 빨강색 소스를 삭제해주시기 바랍니다. 

 

 

<!-- ★ 메인 이미지 슬라이드 ★ : (수정 방법) 앱스토어 > 포토 슬라이드v2 앱 관리하기 에서 'PC쇼핑몰' 탭과 '모바일 쇼핑몰' 탭을 각각 클릭하여 '메인 이미지 슬라이드' 라는 글자 클릭 후 '이미지 수정' 버튼을 각각 클릭하여 수정. 이미지 추가, 삭제, 링크변경, 순서변경 가능 -->

<div module="photoslide2_mdisplay_1">

 {$slide_images}

</div>

<!-- ★ 메인 이미지 슬라이드 ★ // -->

 

 

 

 

빨강색 소스를 삭제하고 그 자리에 PC디자인의 스마트 디자인 편집창에 붙여넣기 하셨던 소스와 동일한 소스인

<!--@import(/smart-banner/shop1/smart-banner-admin-MO00001.html)--> 를 붙여넣기 해주세요.

 





소스 수정이 완료되면, 편집창 상단 좌측의 ‘저장’ 버튼을 반드시 클릭해주세요.



 

 



작업을 모두 완료하신 후, 스마트폰으로 쇼핑몰에 접속하셔서 

모바일 디자인의 메인 이미지가 정상적으로 노출되는지 확인 바랍니다.

 


끝.


 

--------------------------------------------------------------------------------------------------------------------------------------------



(중요사항) 차후에 메인 이미지를 다른 이미지로 변경하고싶으실 경우 

소스 수정은 하실 필요없이 디자인관리 > 앱스토어 > 스마트 배너 관리 앱의 관리하기 버튼 클릭 후

이미 생성해놓으신 배너 영역을 클릭하셔서 배너 수정 버튼을 클릭하여 간단하게 이미지 변경해주시면 됩니다.







스마트 배너 관리에 관한 문의는 관리자 페이지 최상단 우측의 1:1 문의에 문의하셔도 카페24에서 답변 드립니다.




첨부파일
비밀번호 수정 및 삭제하려면 비밀번호를 입력하세요.
댓글 수정

비밀번호 :

/ byte

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

관리자에게만 댓글 작성 권한이 있습니다.