홈페이지 그림과 파일을 CDN으로 내보내기

들어가는 길

설정 앱설정 → 홈페이지 → 추적 및 SEO
앱 메뉴홈페이지 → 설정 → 설정
개발자 모드켜야 이 설정이 보입니다
권한역할 / 관리자 · 홈페이지 / 편집 및 디자이너

CDN은 그림, 글꼴, 화면 꾸밈 파일 같은 정적 파일을 세계 여러 곳의 서버에 복사해 두고 방문자와 가까운 곳에서 내려주는 외부 서비스입니다. 이 설정을 켜면 홈페이지가 그런 파일의 주소를 CDN 주소로 바꿔서 방문자에게 보냅니다. 해외 방문자가 많아 홈페이지가 느리게 열릴 때 검토하는 설정입니다.

이 설정이 영향을 주는 곳

값은 홈페이지 기록에 저장됩니다. 홈페이지를 여러 개 두었다면 설정 화면 위에서 고른 홈페이지에만 걸립니다.

쓰는 곳	영향
방문자 화면	그림, CSS, 자바스크립트 주소 가운데 CDN 필터에 맞는 것을 CDN 기본 URL 아래 주소로 바꿔 내보냅니다. 페이지 글 자체는 지금처럼 위피스 서버가 보냅니다
편집·번역·개발자 모드	페이지를 편집하거나 번역하는 중, 개발자 모드에서는 주소를 바꾸지 않고 원래 주소를 씁니다

위피스에서 처음 들어 있는 값

칸	처음 값	뜻
콘텐츠 전송 네트워크 (CDN)	꺼짐	모든 파일을 위피스 서버가 직접 보냄
CDN 기본 URL	비어 있음	켜면 꼭 채워야 하는 칸
CDN 필터	아래 6줄	주소를 바꿀 파일의 규칙

CDN 필터 처음 값은 다음과 같습니다. 고쳤다가 되돌릴 때 그대로 붙여 넣습니다.

^/[^/]+/static/ ^/web/(css|js)/ ^/web/image ^/web/content ^/web/assets ^/website/image/

위피스에서는 이렇게 고릅니다

국내 방문자가 대부분인 회사: 끈 채로 둡니다. 위피스 서버가 국내에 있어 CDN을 거쳐도 빨라지는 폭이 작고, 방문자 정보가 외부 업체로 한 번 더 나가게 됩니다.
해외 방문자가 많은 회사: CDN 업체와 따로 계약해 쓸 수 있습니다. 사용료는 업체에 따로 내고, 방문자의 IP 주소가 그 업체로 전달되므로 개인정보 처리방침에 적어 둡니다.

설정 순서

CDN 업체에서 원본을 끌어오는 방식(pull)의 영역을 만듭니다. 원본 주소에는 지금 홈페이지 주소 전체(예: https://고객사.wepeace.co.kr)를 적고, 다른 주소에서 파일을 불러갈 수 있게 하는 CORS 허용을 켭니다. 업체가 이 영역의 주소를 알려 줍니다.
개발자 모드를 켭니다. 이 설정은 개발자 모드에서만 보입니다.
설정 → 홈페이지에서 추적 및 SEO 칸의 콘텐츠 전송 네트워크 (CDN)를 켭니다.
CDN 기본 URL에 1번 주소를 //로 시작하고 /로 끝나게 적습니다. 예: //abcd.cdn-업체.com/
CDN 필터는 처음 값 그대로 둡니다.
위쪽의 저장을 누릅니다.
로그아웃한 창이나 시크릿 창으로 홈페이지를 열어 그림이 제대로 보이는지 확인합니다.

알아 둘 점

확인은 로그아웃한 창에서 합니다. 개발자 모드를 켠 채로 보거나 편집 중인 화면에서는 주소를 바꾸지 않으니, 그 화면만 보고 잘 된다고 판단하면 안 됩니다.
CDN에 문제가 생기면 끄면 됩니다. 그림이 깨지거나 화면 모양이 무너지면 이 설정을 끄고 저장합니다. 저장하는 즉시 원래 주소로 돌아가고, 따로 지울 데이터는 없습니다.
필터를 잘못 고치면 화면이 깨질 수 있습니다. 필터는 주소 규칙(정규식)입니다. 고칠 일이 거의 없고, 고쳤다가 문제가 생기면 위의 처음 값으로 되돌립니다.