카페24 기존 몰에 커스텀 기능을 추가할 때 깨지기 쉬운 부분은 무엇인가요?

이미 운영 중인 카페24 쇼핑몰에 새로운 기능을 추가할 때는 생각보다 주의해야 할 부분이 많습니다.

“상품 상세페이지에 입력창 하나만 추가하면 됩니다.”

“버튼 하나만 만들면 됩니다.”

처럼 보이는 기능도 기존 쇼핑몰의 스킨, 앱, JavaScript, 주문서와 연결되어 있다면 다른 기능에 영향을 줄 수 있습니다.

특히 기존 쇼핑몰에는 여러 시기에 추가된 코드가 함께 존재하는 경우가 많습니다.

따라서 기존 몰에 커스텀 기능을 추가할 때는 새로운 기능만 만드는 것이 아니라 기존 기능에 어떤 영향을 주는지도 함께 확인해야 합니다.

새로운 쇼핑몰을 처음부터 개발할 때는 어떤 기능을 어떻게 만들지 처음부터 정할 수 있습니다.

하지만 이미 운영 중인 쇼핑몰은 다릅니다.

현재 어떤 앱이 설치되어 있는지, 이전 업체가 어떤 코드를 추가했는지, 특정 JavaScript가 어디에서 사용되는지 모두 명확하지 않을 수 있습니다.

특히 여러 기능이 같은 화면이나 같은 데이터를 사용하면 충돌이 발생할 가능성이 높아집니다.

예를 들어 상품 상세페이지에서 다음 기능이 동시에 작동할 수 있습니다.

카페24 기본 옵션 + 추가 개발 코드 + 옵션 관련 앱 + 기존 JavaScript

이 상태에서 새로운 기능이 옵션 영역을 수정하면 기존 옵션 선택이나 장바구니 기능까지 영향을 받을 수 있습니다.

따라서 기존 몰에서는 기능을 추가하기 전에 현재 구조를 먼저 확인하는 과정이 중요합니다.

상품 상세페이지는 기존 커스텀 기능과 앱이 많이 연결되는 영역 중 하나입니다.

특히 다음 기능이 함께 사용되는 경우 주의해야 합니다.

예를 들어 기존 스킨에서 옵션을 선택하면 JavaScript가 추가 금액을 계산하도록 만들어져 있다고 가정해 보겠습니다.

여기에 새로운 옵션 앱이 같은 영역을 다시 만들어 버리면 기존 JavaScript가 더 이상 정상적으로 작동하지 않을 수 있습니다.

이 경우 새 기능만 수정해서 해결하기보다 현재 옵션을 누가 처리하고 있는지부터 확인해야 합니다.

상품 상세페이지보다 주문서와 결제 화면은 더 신중하게 수정해야 합니다.

주문서에는 다음과 같은 기능이 함께 연결될 수 있습니다.

여기에 커스텀 기능을 추가하면서 금액이나 주문 데이터를 직접 변경하면 화면에 표시되는 금액과 실제 결제 금액이 달라질 가능성도 있습니다.

예를 들어 회원별 가격을 화면에서 다르게 보여주더라도 실제 장바구니와 주문서에서 같은 금액으로 처리되지 않는다면 정상적인 기능이라고 보기 어렵습니다.

따라서 가격·주문·정산과 관련된 기능은 화면만 수정해서 끝내지 않고 실제 주문 데이터가 어떻게 처리되는지 함께 확인해야 합니다.

카페24 쇼핑몰의 공통 헤더, 푸터, 공통 CSS와 JavaScript는 여러 페이지에서 사용됩니다.

따라서 한 파일을 수정했는데 예상하지 못한 페이지까지 영향을 받을 수 있습니다.

예를 들어 공통 CSS에서 특정 요소의 높이를 변경했는데 상품 목록이나 마이페이지의 화면이 함께 변할 수 있습니다.

또한 이전 업체가 다음과 같은 코드를 남겨 놓았을 수도 있습니다.

이런 코드는 새로운 기능의 버튼이나 입력창을 가리거나 클릭되지 않게 만들 수도 있습니다.

따라서 공통 파일은 필요한 경우에만 최소한으로 수정하는 것이 좋습니다.

그럴 수 있습니다.

특히 앱과 커스텀 코드가 같은 화면을 수정하는 경우 주의해야 합니다.

예를 들어 상품 상세페이지에 다음 기능이 있다고 가정해 보겠습니다.

기존 앱 → 옵션 영역 표시

기존 커스텀 → 옵션 가격 계산

새로운 기능 → 옵션 선택 UI 변경

세 기능이 같은 HTML 영역을 수정하면 서로의 결과를 덮어쓸 수 있습니다.

앱이 페이지를 다시 불러오거나 특정 HTML 영역을 다시 생성하는 방식이라면 기존 커스텀 JavaScript가 작동하지 않는 경우도 있습니다.

따라서 새로운 기능을 개발하기 전에 현재 설치된 앱 목록과 각 앱이 어느 화면에 영향을 주는지 확인하는 과정이 필요합니다.

카페24에서 PC와 모바일 또는 여러 쇼핑몰을 함께 운영한다면 수정 범위가 달라질 수 있습니다.

예를 들어 한 쇼핑몰의 스킨만 수정했는데 다른 쇼핑몰에는 적용되지 않을 수 있습니다.

반대로 공통으로 사용하는 코드라면 한 곳의 수정이 다른 쇼핑몰에 영향을 줄 수도 있습니다.

따라서 작업 전에 다음을 확인하는 것이 좋습니다.

“한 곳만 수정하면 되는 기능인지”를 먼저 확인하는 것이 중요합니다.

운영 중인 쇼핑몰이라면 실제 고객이 사용하는 환경을 기준으로 테스트해야 합니다.

단순히 PC에서 버튼이 작동하는지만 확인해서는 부족할 수 있습니다.

예를 들어 주문과 관련된 기능이라면 다음과 같은 시나리오를 확인하는 것이 좋습니다.

상품 상세

주문서

화면

결제

특히 주문과 결제에 영향을 주는 기능은 실제 운영 쇼핑몰에서 바로 테스트하기보다 가능한 범위에서 테스트 환경을 먼저 사용하는 것이 안전합니다.

기존 쇼핑몰을 수정할 때는 변경 전 상태를 남겨 두는 것이 중요합니다.

최소한 다음 항목을 확인하는 것이 좋습니다.

특히 공통 파일을 수정한다면 무엇을 변경했는지 기록해 두는 것이 좋습니다.

문제가 발생했을 때 변경 전 상태로 되돌릴 수 있어야 하기 때문입니다.

단순한 화면 표시라면 스킨 수정으로 해결할 수 있는 경우가 있습니다.

하지만 다음과 같은 업무 규칙을 처리한다면 별도의 서버나 API를 검토하는 것이 좋습니다.

이런 기능을 모두 JavaScript에 넣으면 보안과 유지보수 측면에서 문제가 생길 수 있습니다.

특히 API Secret이나 인증 토큰 같은 정보는 고객의 브라우저에서 직접 노출되지 않도록 서버에서 관리하는 구조가 필요합니다.

따라서 화면은 카페24 스킨에서 처리하고, 중요한 데이터 계산과 외부 시스템 연동은 서버에서 처리하는 방식을 검토할 수 있습니다.

기존 쇼핑몰에는 이전 개발업체가 만든 코드가 남아 있을 수 있습니다.

문제는 개발자가 바뀌면 해당 코드의 구조와 의도를 바로 알기 어렵다는 것입니다.

특히 다음과 같은 경우 분석 시간이 더 필요할 수 있습니다.

이때 새로운 개발업체가 기존 코드를 무조건 수정하는 것이 항상 좋은 방법은 아닙니다.

기존 코드를 조금 수정하는 것보다 문제가 발생하는 페이지의 해당 기능을 새로 구성하는 것이 더 안정적인 경우도 있습니다.

충돌이 발생했다고 해서 전체 쇼핑몰을 다시 만들어야 하는 것은 아닙니다.

문제의 범위를 먼저 찾고 다음과 같은 방법을 선택할 수 있습니다.

1. 기존 코드 최소 수정

충돌 원인이 명확하고 기존 구조를 유지할 수 있다면 필요한 부분만 수정합니다.

2. 앱 설정 변경

앱과 커스텀 코드가 충돌한다면 앱에서 제공하는 설정만으로 해결할 수 있는지 확인합니다.

3. 기능을 서버로 이동

화면에서 처리하던 복잡한 계산이나 외부 연동을 서버에서 처리하도록 변경합니다.

4. 특정 페이지 재구성

기존 코드가 너무 복잡하거나 충돌 범위가 넓다면 해당 페이지의 기능만 새로 구성합니다.

5. 기능 범위 축소

현재 운영에 꼭 필요한 기능부터 1차로 적용하고 나머지는 이후 단계로 나눌 수도 있습니다.

기능을 추가하기 전에 다음 항목을 확인하면 예상하지 못한 문제를 줄일 수 있습니다.

이 항목을 먼저 확인하면 단순 스킨 수정인지, 앱 설정 변경인지, API·서버 개발이 필요한 기능인지를 구분하기 쉬워집니다.

가장 큰 차이는 이미 작동하고 있는 기능이 있다는 것입니다.

새로운 쇼핑몰은 기능을 처음부터 설계할 수 있지만 기존 쇼핑몰은 현재 사용하는 기능을 유지하면서 새로운 기능을 추가해야 합니다.

따라서 기존 몰에서는

새 기능이 작동하는가?

뿐만 아니라

기존 기능이 그대로 작동하는가?

도 함께 확인해야 합니다.

특히 상품 상세, 장바구니, 주문서, 결제처럼 고객의 구매 과정에 직접 연결되는 부분은 기능 하나를 추가하더라도 전체 구매 흐름을 함께 확인해야 합니다.

옴니어스24는 운영 중인 카페24 쇼핑몰에 새로운 기능을 추가할 때 바로 스킨부터 수정하지 않습니다.

먼저 현재 구조를 확인합니다.

카페24 기본 기능 → 설치 앱 → 현재 스킨 → 기존 커스텀 코드 → 외부 API·서버

순서로 확인하면서 새로운 기능이 어느 부분과 연결되는지 파악합니다.

그리고 필요한 기능을 다음과 같이 나눕니다.

기존 기능을 최대한 유지하면서 필요한 부분만 변경하는 것이 기본적인 방향입니다.

특히 이전 업체의 자료가 부족한 경우에는 현재 쇼핑몰의 화면, 설치 앱, 오류가 발생하는 과정 등을 먼저 확인한 후 작업 범위를 정합니다.