카페24 디자인 수정하기

카페24 ) 스킨 소스 전체 http://를 //로 변경하는 방법

어띠 2020. 9. 18. 22:58

 

 

 

 

최근 보안 문제 등과 관련하여 SSL 인증서 설치를 권장하고 있습니다. SSL은 브라우저와 서버 간 통신에서 정보를 암호화하여 정보유출에 대비한 보안 솔루션입니다. SSL 이 설치된 사이트는 http://가 아닌 https://로 연결됩니다.

 

 

 

 

따라서 사이트에 접속 시 무조건 https 로 접속하게 하기 위해서

1. SSL 인증서가 설치되어 있어야 합니다. (카페24 FAQ > SSL 인증서는 어떻게 신청하나요?)

2. 사이트 내 http:// 링크를 // 형태로 모두 변경해야 합니다.

3. SSL 인증서가 설치된 도메인에 리다이렉트 설정을 활성화시켜야 합니다. (상점관리 > 기본정보관리 > 도메인 설정 > 각 도메인 별 리다이렉트 설정)

위와 관련된 자세한 매뉴얼을 카페24에서도 제공하고 있으니 참고하시면 좋을 것 같습니다. (카페24 보안 및 법적 준수사항 FAQ)

 

이번 포스팅에서는 위 과정 중 2. 스킨 소스 내 모든 http://를 //로 변경하는 방법을 알아보겠습니다.

 

 

 

 

 

 

 

#1 스킨 소스 다운받기

스킨 소스를 다운로드하기 전에 현재 내가 사용하는 스킨이 어떤 스킨인지 확인해야 합니다.

저는 PC 대표 스킨으로 3번 스킨을 사용하고 있고,

 

 

 

 

모바일은 기본 스킨을 사용하고 있습니다.

 

 

 

 

그러면 ftp 서버에 접속해서 PC 3번 스킨 소스와 모바일 기본 스킨 소스를 다운 받아 보겠습니다.

저는 파일질라 ftp 프로그램을 사용하였습니다.

파일질라 ftp 프로그램 사용방법은 아래 이전 포스팅을 참고해주세요.

 

카페24 ) 파일질라 FTP 로 이미지 배너 넣기 - 1

내가 만든 이미지 배너를 쇼핑몰에 사용하기 위해서는 서버(파일 저장 공간)에 파일을 업로드해야 합니다. 이때 내 컴퓨터와 서버 간 파일 전송을 도와주는 서비스를 FTP라고 합니다. 카페24 쇼

eotti.tistory.com

 

카페24 ) 파일질라 FTP 로 이미지 배너 넣기 - 2

이전 포스팅에서 파일질라 ftp 프로그램을 이용하여 이미지 파일을 업로드하고 해당 이미지를 불러와 카페24 쇼핑몰 메인에 넣어보았습니다. 이때, 쇼핑몰에 배너가 정상적으로 보이지 않고 엑��

eotti.tistory.com

 

 

 

스킨 소스는 sde_design 폴더에 있습니다.

 

 

 

 

base는 PC 기본 스킨을, skin1은 PC 1번 스킨을, mobile은 모바일 기본 스킨을, mobile1은 모바일 1번 스킨을 말합니다.

저는 대표 스킨으로 PC는 3번 스킨을, 모바일은 기본 스킨을 사용하고 있으니 skin3 폴더와 mobile 폴더를 각각 다운 받겠습니다.

 

 

 

 

* 특정 스킨 폴더에 접근이 되지 않는 경우

스킨에 저작권 보호 설정(lock)이 되어 있는 경우입니다. 스킨을 구입한 판매자에게 문의하거나, 카페24로 문의하면 락을 해제할 수 있습니다.

 

* 다운로드 버튼이 활성화되지 않는 경우

다운로드할 곳이 내부에 폴더가 없는 내 PC로 선택되어 있다면 다운로드 버튼이 활성화되지 않습니다.

 

 

 

 

 

 

 

#2 Notepad++ 프로그램을 이용하여 소스 변경하기

앞에서 다운 받았던 스킨 내에 있는 http:// 를 모두 // 로 변경할 차례입니다.

저는 Notepad++라는 프로그램을 사용했습니다. (노트패드++로 검색하면 다운로드할 수 있습니다)

이 프로그램을 사용하면 폴더 내 모든 파일에 있는 특정 단어를 한꺼번에 편집할 수 있어 스킨 내 모든 파일을 한 번에 수정하는 데에 용이합니다.

 

노트패드 프로그램을 연 다음 찾기 메뉴 > '파일에서 찾기'를 클릭합니다.

 

 

 

 

먼저 디렉토리에서 다운로드한 스킨 폴더를 선택해야 합니다. 디렉토리창 우측의 '...' 버튼을 클릭해주세요.

 

 

 

 

다운로드하였던 스킨 폴더를 선택해줍니다.

 

 

 

 

그다음 찾을 내용에는 http://를, 바꿀 내용에는 //를 입력하고 모두 바꾸기 버튼을 클릭합니다. 이때 모든 하위 폴더 포함 체크박스에 체크가 되어 있는지 확인해주세요.

 

 

 

 

 

 

 

 

#3 스킨 소스 재업로드 하기

이렇게 변경이 완료된 폴더를 다시 ftp를 이용해 서버에 업로드해보겠습니다. 해당 폴더에서 마우스 오른쪽 버튼을 클릭한 후 업로드를 클릭합니다.

 

 

 

 

이때 동작은 덮어쓰기로, '항상 이 동작 사용'과 '현재 대기열에만 적용'의 체크박스에 체크를 하면 현재 업로드되는 모든 파일이 자동으로 덮어 씌워지게 됩니다.

 

 

 

 

 

 

 

 

#4 확인하기

카페24 쇼핑몰 관리자에서 SSL 인증서를 설치하고 스킨 소스 내 http://를 모두 //로 바꾸는 과정까지 마쳤다면 쇼핑몰 도메인을 https://로 접속하였을 때, 더 이상 주소표시창 왼쪽에 주의요함(크롬 기준) 표시가 나타나지 않습니다.

 

 

 

카페24 호스팅 주소에는 SSL 인증서 설치가 되지 않습니다. 직접 추가한 도메인에만 설치가 가능한 점 참고해주시기 바랍니다.

 

 

 

 

 

 

 

#5 이외 고려해야 할 부분

스킨 소스 내 모든 http://를 //로 변경한 후

 

1) 익스플로러에서 'https://도메인' 형태로 접속 시 '보안 콘텐츠만 표시됩니다'와 같은 안내문구가 표시된다면

아래 항목에서 http://가 작성된 부분은 없는지 확인해보아야 합니다.

- 상품 상세설명 내 링크, 이미지

- 앱스토어의 사용 중인 앱에 작성된 링크

- 팝업 또는 프로모션 > SNS관리 > SNS상품홍보관리 내 SNS 스크립트 관련 등

 

2) SNS 로그인 기능이 되지 않을 수 있습니다.

이 경우 각 SNS 개발자 센터에서 https://로 시작하는 callback URL을 추가해야 합니다.

관련 자세한 안내는 카페24에서 제공하고 있습니다. (카페24 FAQ > SSL사용 시 https 적용 후 SNS 로그인이 되지 않아요.)

 

3) 마케팅, 광고 성과 및 통계 수집 등을 위한 외부 스크립트, 외부 링크 및 URL이 정상 작동하지 않을 수 있습니다.

이 경우 해당 스크립트, 링크 및 URL을 제공하는 업체에 https 접속 지원 여부를 확인해야 합니다.

 

 

 

 

 

이번 포스팅에서는 카페24 스킨 소스 전체에서 특정 문구를 찾아 변경하는 방법을 알아보았습니다.