새 기능보다, 이미 깔린 코드가 먼저 깨지는 이유
이미 운영 중인 카페24 몰에 커스텀을 붙일 때, 많은 분들이 ‘버튼 하나·화면 하나’만 더하면 된다고 생각합니다. 그런데 오픈 직후 깨지는 쪽은 새 기능 자체보다 **상세·주문서·공통 레이아웃에 이미 붙어 있는 스킨 스크립트·앱·이전 업체 코드**인 경우가 많습니다.
기존 몰에 커스텀을 추가할 때 깨지기 쉬운 지점은, 같은 DOM·같은 주문 흐름을 여러 주체가 건드리는 구간입니다. 기본 기능·앱만으로 되는 일은 굳이 스킨을 깊게 파지 않는 편이 안전하고, 운영 규칙(가격·연동·정산)을 바꿀 때는 프론트 패치보다 API·별도 서버 쪽을 검토하는 편이 충돌을 줄입니다.
기존 몰에서 커스텀이 자주 부딪히는 구간
신규 제작과 달리, 기존 몰은 ‘누가 무엇을 이미 넣었는지’가 불완전한 상태로 시작합니다. 앱스토어 앱, 유료 스킨, 예전 업체 스크립트가 한 페이지에 같이 있는 경우가 흔합니다. 커스텀을 넣기 전에 이 목록을 문장으로 적어 두지 않으면, 작업 범위가 ‘기능 하나’가 아니라 ‘몰 전체 회귀’로 커집니다.
상품 상세·옵션 스크립트
추가금액·품절 표시·옵션 조합을 스킨 JS로 계산하는 몰이 많습니다. 여기에 앱이 같은 옵션 영역을 다시 그리면, 커스텀 한 줄이 옵션 선택·장바구니 버튼을 멈출 수 있습니다. 기본 옵션·앱으로 버티는 범위인지, 별도 계산이 필요한지부터 나누는 편이 안전합니다.
주문서·결제 직전 화면
쿠폰 앱, PG, 사은품·약관 스크립트가 주문서에 같이 붙습니다. 커스텀 입력란·회원별 가격을 여기서 끼워 넣으면 결제 버튼·금액 표시가 어긋나기 쉽습니다. 주문 데이터에 값을 실어야 하면 스킨만으로 끝내기 어렵고, 주문 생성 이후 API·서버에서 받는 구성이 충돌이 적습니다. 운영 중 몰이면 테스트몰 없이 실몰 주문서만 고치는 것은 피해야 합니다.
공통 헤더·푸터·레이아웃
전체 페이지에 로드되는 스크립트·CSS는 한 곳만 고쳐도 리스트·마이페이지·모바일까지 영향을 줍니다. 이전 업체가 남긴 `display:none`·강제 높이·중복 jQuery가 있으면, 새 커스텀 UI가 가려지거나 클릭이 안 됩니다. 공통 파일을 손대기 전에 ‘이 기능이 정말 전 페이지에 필요인지’를 먼저 묻는 것이 좋습니다.
앱 + 이전 커스텀이 겹친 영역
재고·리뷰·팝업·픽셀 앱이 같은 클래스를 쓰는 경우가 있습니다. 문서가 없으면 배포 후에야 충돌이 보입니다. 앱 설정만으로 되는 표시는 커스텀에서 빼고, 앱이 덮어쓰는 구간은 직접 패치하지 않는 편이 유지보수에 유리합니다. 멀티쇼핑몰·다국어면 샵·언어별로 스킨이 나뉘어 한곳만 고치고 나머지가 깨지기도 합니다.
- 상세: 옵션·추가금액·품절 JS와 앱 재렌더 충돌
- 주문서: PG·쿠폰·커스텀 입력·금액 표시
- 공통 레이아웃: 전 페이지 스크립트·CSS 부작용
- 앱·이전 업체 코드: 같은 클래스·훅을 서로 수정
깨짐을 줄이는 검수·대안, 그리고 한계
가능하면 테스트몰에서 상세 옵션 변경, 비회원·회원 주문서, 모바일·PC, 쿠폰 적용, 결제 직전까지를 같은 시나리오로 돌립니다. 스킨은 수정 전 백업을 남기고, 공통 파일 변경은 diff를 짧게라도 기록해 두면 롤백이 됩니다. 데이터 규칙(연동·정산·회원가)은 스킨에 시크릿·계산을 넣지 말고 서버에서 처리하는 쪽이 기존 화면을 덜 건드립니다.
한계도 분명합니다. 이전 업체 소스가 난독화되어 있거나, 앱이 DOM을 비공개로 갈아끼우면 ‘안 깨지게 패치’가 사실상 어렵습니다. 이때는 기능을 1차로 축소하거나, 앱을 끄고 되는지 확인하거나, 부분 커스텀 대신 해당 페이지만 재구성하는 쪽이 현실적입니다. 깨질 지점이 주문서·결제까지 넓으면 리뉴얼·동선 재설계를 같이 검토하는 편이 나을 수 있습니다.
배포 시간대도 리스크입니다. 피크 타임에 공통 레이아웃을 올리면 CS가 바로 쌓입니다. 운영 중 몰은 점검 창을 짧게 잡고, ‘손대지 않을 파일’을 명시해 두는 것이 커스텀 범위만큼 중요합니다.
- 테스트몰 + 상세·주문서·모바일 회귀 시나리오
- 스킨 백업·공통 파일은 최소 변경
- 규칙 계산·토큰은 프론트가 아니라 서버
- 앱·이전 코드가 불명이면 1차 축소 또는 페이지 재구성
옴니어스가 기존 몰 커스텀에서 먼저 보는 것
옴니어스는 운영 중인 카페24 몰에 기능을 붙일 때, 바로 스킨부터 열지 않고 설치된 앱·공통 스크립트·주문서 의존부터 같이 적습니다. 기본·앱으로 되는 표시는 커스텀에서 빼고, 깨지기 쉬운 구간은 영향 범위를 문장으로 고정한 뒤 작업합니다.
거품 없는 범위로 일한 만큼 제안드리며, 이전 업체 자료가 없어도 막히는 화면 캡처와 앱 목록만 있으면 충돌 지점을 가늠하는 데 도움이 됩니다. 오픈 이후 수정까지 이어서 보는 쪽을 목표로 합니다.
기존 몰 커스텀 다음에 보면 좋은 글·페이지
화면 수정과 기능 개발의 차이는 스킨 vs 커스텀 글에서, 부분 수정과 전면 개편은 리뉴얼 vs 부분 커스텀 글에서 이어서 볼 수 있습니다. 범위를 줄여 비용을 지키는 방법은 기능추가 자르기 글과, API·별도 서버가 왜 안전한지는 API 안내 글과 연결됩니다.
진행 방식·FAQ·서비스 안내에서도 기존 몰 작업 순서를 확인할 수 있고, 문의 페이지에 지금 깨질까 봐 걱정되는 화면(상세·주문서 등)과 설치 앱만 남겨 주셔도 됩니다. 영향 범위부터 같이 정리해 드립니다.