“어제까지 멀쩡했는데 오늘 아침에 쇼핑몰을 열어보니 화면이 이상해요.”
이런 문의를 종종 받습니다. 메뉴가 세로로 주르륵 쏟아지거나, 아이콘 자리에 네모(□)만 떠 있거나, 모바일에서만 화면이 겹쳐 보이는 경우죠. 그사이 고객은 계속 들어오고 있으니 마음이 급해지실 텐데요.
이럴 때 필요한 건 두 가지예요. 지금 당장 화면을 되돌리는 것, 그리고 왜 깨졌는지 원인을 아는 것. 급하실 테니 되돌리는 방법부터 순서대로 정리해 드릴게요. 다만 카페24 복구 기능에는 미리 알아두셔야 할 함정이 몇 개 있어서, 그 부분을 특히 짚어드리겠습니다.
- 카페24 디자인이 어떻게 깨졌는지부터 확인해 보세요
- 카페24 디자인 복구 방법은 두 가지, 복구 버튼 누르기 전에
- 복구했는데도 안 된다면, 카페24 디자인이 깨지는 진짜 원인
- 카페24 디자인 복구가 급하거나 원인을 못 찾겠다면
1. 카페24 디자인이 어떻게 깨졌는지부터 확인해 보세요
깨진 모양을 보면 원인을 절반쯤 짐작할 수 있어요. 지금 화면이 아래 중 어디에 해당하는지 먼저 보시면 좋겠습니다.
| 지금 이런 증상이라면 | 이런 원인일 가능성이 높아요 |
|---|---|
| 레이아웃 전체가 무너짐 (메뉴가 세로로 쏟아지거나 영역이 겹침) | CSS가 로드되지 않거나 HTML 구조가 훼손된 경우 |
| 아이콘만 네모(□)나 이상한 글자로 표시됨 | 아이콘 폰트(XEICON 등) 로드 실패 |
| 모바일에서만 깨짐 | 모바일 스킨 문제 또는 뷰포트 메타 태그 훼손 |
| 특정 페이지(상세·장바구니)만 깨짐 | 그 페이지 파일의 최근 수정 이력 확인 필요 |
| 로고만 안 나오고 자리가 비거나 엑박(□)으로 뜸 | 이미지 경로가 어긋난 경우 (아래 ⑥ 참고) |
| 내 컴퓨터에서만 이상하고 다른 기기는 멀쩡함 | 브라우저 캐시, 시크릿 창부터 확인 |
마지막 경우라면 다행히 사고가 아니에요. 시크릿 창(크롬은 Cmd/Ctrl+Shift+N)에서 정상으로 보이면 그냥 캐시 문제이니, 이 글의 나머지는 예방 지식으로 편하게 읽어보시면 됩니다.
그 외의 경우라면 저는 항상 한 가지부터 여쭤봐요. 최근에 누가, 무엇을 수정했나요? 스킨 HTML이나 CSS를 만졌거나, 배너를 교체했거나, 앱을 새로 깔았거나, 외주 작업이 있었거나, 디자인이 깨지는 건 대부분 “무언가를 수정한 직후”거든요.
2. 카페24 디자인 복구 방법은 두 가지, 복구 버튼 누르기 전에
카페24에서 디자인을 복구하는(되돌리는) 방법은 크게 두 갈래인데, 이걸 헷갈리시는 분이 많아요. 상황에 따라 골라 쓰셔야 합니다.
방법 A. 편집창 ‘히스토리’로 파일 하나만 되돌리기
스킨 코드를 만지다가 특정 파일 하나가 어긋난 경우라면 이게 먼저예요. 스마트디자인 편집창에서 그 파일을 열고 ‘히스토리’ 버튼을 누르면, 저장했던 시점들이 목록으로 뜹니다. 원하는 시점을 고르면 그 순간의 소스로 돌아가고, 마지막에 ‘저장’을 눌러야 반영돼요. 파일별로 되돌아가기 때문에, 다른 작업까지 함께 날아가지 않는 게 장점입니다.
다만 한 가지 미리 알아두실 게 있어요. 편집창엔 최대 10개까지 보관된다고 표시되지만, 며칠까지(보관 기간)는 카페24 공식 문서에 명시돼 있지 않습니다. 제가 공식 매뉴얼과 서포트 문서를 다 찾아봤는데, “저장 시점을 보여준다”는 설명만 있고 보관 기간에 대한 언급은 없더라고요. 그러니 10개가 다 차서 오래된 시점부터 밀려나기 전에, 되돌릴 시점이 보인다면 히스토리에 남아 있으리라 믿고 미루지 마세요. 바로 처리하시는 걸 권합니다.
방법 B. 관리자 ‘디자인 백업/복구’로 스킨 전체 복구하기
[관리자] 디자인 > 예약/백업/복구 > 디자인 백업/복구의 ‘디자인복구’ 탭에서 백업 시점을 골라 복구합니다. 편집창 히스토리로 안 되는 큰 사고일 때 쓰는 방법인데요. 여기엔 공식 문서가 크게 강조하지 않는 함정이 네 가지 있어요. 복구 버튼을 누르기 전에 꼭 확인해 보세요.
함정 ① 복구는 스킨 ‘전체’가 되돌아가요. 파일 하나만 골라 되돌리는 게 아니에요. 백업 시점 이후에 작업한 다른 수정(배너 교체, 상품 상세 수정, 이벤트 페이지)이 전부 함께 사라집니다. 깨진 것 하나 고치려다 일주일치 작업을 날리는 경우가 생각보다 많이 나와요. (그래서 파일 하나 문제라면 방법 A의 히스토리를 먼저 보시는 거예요.) 백업본에서 개별 파일만 되살리고 싶다면 카페24에 1:1 문의를 접수하셔야 합니다.
함정 ② 백업 보관에는 한도가 있어요. 수동으로 받아둔 백업은 7일까지만 보관되고, 백업 파일은 디자인 전체 합쳐서 최대 12개까지만 남아요. 오래된 것부터 밀려서 지워지니, “지난달엔 멀쩡했으니 그때로 돌리자”가 안 되는 경우가 많습니다.
함정 ③ 이미지는 백업되지 않아요. 백업되는 건 HTML·CSS·JS 파일뿐입니다. FTP나 웹FTP에 올린 이미지를 지우셨다면, 디자인 복구로는 돌아오지 않아요.
함정 ④ 자동 백업이 안 되어 있을 수도 있어요. 2024년 9월 25일부터 자동 백업 조건이 바뀌었거든요. 예전에는 관리자 로그인만 있으면 다음 날 새벽에 전체 디자인이 백업됐는데, 지금은 24시간 안에 로그인 기록과 편집 이력이 모두 있는 디자인만 자동 백업됩니다. 평소 편집을 자주 안 하시는 몰이라면 백업 목록이 비어 있을 수도 있어요.
그래서 응급처치는 이 순서로 해보시길 권합니다.
- 파일 하나 문제 같으면 편집창 히스토리부터: 그 파일을 열고 저장 시점을 되돌려 보세요.
- 더 큰 사고면 백업 목록 확인: 깨지기 직전 시점의 백업이 있나요? 있다면, 그 시점 이후에 어떤 수정을 했었는지 먼저 적어두세요. 스킨 전체가 되돌아가니 나중에 다시 반영해야 하거든요.
- 복구 실행: 복구는 되돌릴 수 없으니, 가능하면 지금 상태도 먼저 백업해 두고 진행하세요.
- 백업이 없거나, 복구했는데도 그대로라면, 원인이 스킨 파일 바깥에 있다는 뜻이에요. 아래 3번에서 이어서 봐요.
3. 복구했는데도 안 된다면, 카페24 디자인이 깨지는 진짜 원인
복구했는데도 화면이 그대로거나, 복구로 잠깐 돌아왔더라도 원인을 모르면 같은 일이 또 반복돼요. 특히 복구가 안 먹혔다면 원인이 스킨 파일 바깥에 있다는 신호이기도 하고요. 그래서 원인을 짚고 가는 게 중요합니다. 실제 현장에서 카페24 디자인 깨짐은 대개 아래 여섯 가지 중 하나였어요.
① HTML 구조가 훼손된 경우, 가장 흔해요. 배너 하나 바꾸려고 HTML을 열었다가 태그를 하나 덜 닫거나, 카페24가 자동으로 붙여주는 모듈 클래스(xans-로 시작하는 클래스들)가 들어 있는 영역을 실수로 지운 경우예요. 쉽게 말해, 카페24 스킨은 레고처럼 정해진 조각(모듈)들을 서버가 끼워 맞춰 한 화면을 완성하는 방식이거든요. 그래서 그 조각의 이음새 역할을 하는 영역을 실수로 빼버리면, 바로 그 자리뿐 아니라 그 아래 전체가 와르르 어긋나 버립니다. 깨진 위치와 전혀 상관없는 곳의 수정이 원인인 경우도 많아서, 개발을 안 하시는 담당자분이 눈으로 찾기는 솔직히 어려워요.
② 속도 최적화가 역효과를 낸 경우, jQuery에 defer를 붙였을 때예요. 사이트가 느리다는 얘기에 최적화 가이드를 따라 스크립트에 defer나 async를 붙이시는 경우가 있는데요. 문제는 카페24 스킨의 여러 기능이 jQuery에 바로 의존한다는 점이에요. jQuery나 카페24 코어 스크립트 로드가 지연되는 순간, 메뉴·슬라이드·옵션 선택이 줄줄이 멈춰버립니다. 화면 일부만 이상하게 깨져 보이는 경우 중에 이게 꽤 많아요.
③ 외부 리소스 로드가 실패한 경우, 아이콘이 네모로 보일 때예요. XEICON 같은 아이콘 폰트나 웹폰트를 외부에서 불러오는 스킨에서, 그 리소스 제공이 중단되거나 경로가 바뀌면 어느 날 갑자기 아이콘이 전부 깨져 보입니다. 아무도 아무것도 안 건드렸는데 깨졌다면 이쪽을 의심해 보셔야 해요. 해결은 그 리소스를 자체 서버에 올리고 경로를 바꿔주는 건데, 어느 파일의 어느 경로를 고쳐야 하는지 찾는 게 관건이죠.
④ 꼭 있어야 할 코드가 지워진 경우, 화면은 멀쩡한데 기능이 죽는 가장 조심해야 할 유형이에요. 카페24 스킨에는 지우면 안 되는 영역이 있어요. 결제 진행 UI, PG 연동용 메타 태그, 옵션 처리 영역 같은 것들이죠. 이 영역을 건드리면 디자인은 멀쩡해 보이는데 옵션 선택이 안 되거나 결제창이 안 뜨는 일이 생깁니다. 디자인 깨짐보다 훨씬 위험한 게, 발견이 늦고 그동안 매출이 그냥 빠져나가거든요. 디자인을 수정하신 직후라면 꼭 주문까지 한 번 테스트해 보시길 권하는 이유예요.
⑤ 앱이나 스크립트가 충돌한 경우예요. 리뷰 앱, 팝업 앱, 마케팅 스크립트가 스킨에 코드를 심으면서 기존 스타일과 부딪히는 경우입니다. 최근에 설치한 앱을 잠깐 꺼봤을 때 정상으로 돌아온다면 이쪽이에요.
⑥ 스마트디자인Easy 디자인을 그대로 두고 HTML을 직접 수정한 경우, 로고가 갑자기 깨졌다면 이걸 의심해 보세요. 이건 제가 실제로 겪은 사례라 꼭 짚어드리고 싶어요. 스마트디자인Easy는 HTML을 몰라도 화면에서 시각적으로 편집할 수 있게 해주는 편리한 모드예요. 그런데 이 Easy 디자인을 그대로 둔 채로 HTML을 직접 커스터마이징해서 쓰다 보면, 어느 순간 편집툴에서 “초기 설정 중 오류가 발생했어요” 라는 팝업이 뜨는 때가 옵니다.
문제는 이 오류가 나면서 카페24가 이미지 경로를 Easy가 관리하는 이미지 변수 형태로 되돌려 버린다는 점이에요. 제가 직접 넣어둔 로고 이미지 경로가 그 변수와 맞지 않으니, 로고가 자기 경로를 잃고 화면에서 깨져버리더라고요. 아무 코드도 안 건드렸는데 로고만 갑자기 안 나온다면 이 경우일 가능성이 높습니다.
그래서 이건 애초에 예방하는 게 최선이에요. Easy 디자인을 커스터마이징하실 거라면, Easy 원본을 직접 손대지 마시고 먼저 ‘기본형’ 스마트디자인 디자인으로 복사한 뒤, 그 복사본에서 작업하시길 권합니다. 기본형은 HTML을 직접 다루는 방식이라 Easy처럼 이미지 경로를 자동으로 바꿔버리지 않거든요. 디자인을 만들 때 이 한 단계만 거치면, 위와 같은 로고 깨짐은 아예 생기지 않아요.
가만히 보시면 공통점이 하나 보이실 거예요. ①②④⑥은 전부 ‘직접 수정’에서 시작됩니다. 카페24 공식 문서는 복구 절차는 친절히 알려주지만, 어디를 건드리면 안 되는지, 왜 깨지는지는 알려주지 않아요. 그래서 복구했다가 다시 수정하고 또 깨지고를 반복하시는 몰이 많더라고요.
4. 카페24 디자인 복구가 급하거나 원인을 못 찾겠다면
백업이 없거나, 복구해도 그대로거나, 원인을 못 찾겠다면, 그 상태로 계속 손대시는 게 오히려 제일 위험해요. 수정을 반복할수록 7일짜리 백업 시점이 계속 밀려나면서, 되돌릴 지점이 사라지거든요.
저는 카페24 쇼핑몰만 다룹니다. 깨진 화면 스크린샷과 몰 주소만 보내주시면, 그날 안에 원인을 진단해서 복구 범위와 비용을 먼저 알려드릴게요. 복구 후에는 같은 일이 다시 생기지 않도록, 어떤 수정이 위험했는지까지 정리해서 드립니다.
