"이커머스 관리자 페이지에서 웹디자인 수정하는 방법 | 실무 디자이너를 위한 가이드"

쇼핑몰 디자인은 처음에만 중요한 게 아닙니다.
운영 중에도 이벤트 배너 수정, 상세페이지 디자인 변경, 구성 요소 재배치 등
디자인 수정이 지속적으로 발생합니다.

그렇다면 디자이너는 개발자 없이
관리자 페이지 안에서 어느 정도까지 수정할 수 있을까요?

오늘은 실무 디자이너 입장에서
이커머스 플랫폼 관리자 페이지에서 직접 웹디자인을 수정하는 방법과 팁을 정리해드립니다.

---

🧩 1. 관리자 페이지에서 수정 가능한 항목은?

플랫폼에 따라 다르지만, 대부분의 관리자 페이지에서 다음 요소는 비개발자도 수정 가능합니다:

항목수정 가능 여부설명

메인 배너/이벤트 이미지	✅ 100% 가능	이미지 교체, 링크 변경
상단/하단 메뉴 구조	✅ 메뉴명/링크 변경 가능	디자인 수정은 제한적
상품 리스트 스타일	△ 구조는 제한, 썸네일/컬러 등은 가능	고급 수정은 HTML 필요
상세페이지 디자인	✅ 에디터로 작성 or HTML 직접 입력	직접 구성 가능
팝업/공지 디자인	✅ 이미지/배경색/텍스트 가능	위치/애니메이션은 제한
카테고리별 배너	✅ 가능	각 카테고리 관리에서 개별 등록

 

---

🧰 2. 주요 이커머스 플랫폼별 디자인 수정 위치

✅ 카페24

• 디자인관리 > 스마트디자인 > HTML편집
  : 전체 템플릿 구조 편집 가능 (layout.html, main.html 등)
• 디자인편집 > 이미지/배너 관리
  : 메인 비주얼, 이벤트 배너 이미지 교체 가능
• 상품관리 > 상품등록/수정
  : 상세페이지 디자인 직접 입력 가능 (에디터/HTML 선택)

✅ 고도몰

• 디자인관리 > 쇼핑몰 디자인 설정
  : 메인페이지 구성요소 끌어다 놓기
• HTML 편집기로 세부 구조 편집 가능 ({%=include%} 구조 사용됨)
• 모바일/PC 분리된 디자인 관리 가능

✅ 메이크샵

• 디자인 수정 > 개별디자인 관리
• 레이아웃, 메뉴, 상품목록 디자인 HTML 직접 수정 가능
• 배너관리는 별도 메뉴 존재

✅ Shopify (해외 플랫폼)

• Online Store > Themes > Customize
  : 드래그&드롭으로 섹션 추가/삭제 가능
• Edit code에서 Liquid 템플릿 직접 수정 가능
• Assets 폴더에서 CSS/JS 수정 가능

---

🎨 3. HTML/CSS 기초만 알아도 할 수 있는 디자인 수정 예시

🎯 상세페이지 HTML 직접 수정

 

• 텍스트, 이미지, 강조 스타일 자유롭게 조정
• <style> 태그로 개별 디자인도 추가 가능

🎯 배너 이미지 교체 (카페24 기준)

• 디자인관리 > 이미지 배너 등록
• 동일 사이즈의 JPG/PNG로 교체
• 링크 수정도 클릭하여 수정 가능
• 모바일용 배너도 따로 등록 가능

 

📱 4. 모바일/PC 디자인 따로 적용하는 법

• 대부분의 플랫폼에서 모바일 전용 페이지/템플릿 분리 제공
• 배너 등록 시 PC용, Mobile용 따로 등록 필요
• CSS에서 @media 쿼리로 직접 대응도 가능

💡 실무 팁 – 개발자 없이 수정하는 법

1. 자주 바뀌는 영역 = 이미지 배너로 구성하자
   → HTML 수정 없이 이미지 교체만으로 대응 가능
2. 상품 상세페이지는 에디터보다 HTML 탭 활용 추천
   → 폰트, 여백, 강조 등을 깔끔하게 컨트롤 가능
3. 디자인 백업은 꼭 하고 작업하기
   → HTML/CSS 수정 전 기존 코드 저장 필수
4. 브라우저 ‘검사’(F12) 기능 활용하기
   → 적용된 클래스명을 확인하고 관리자 페이지에서 수정 가능

---

🧭 마무리하며

이커머스 관리자 페이지는 단순한 제품 등록 도구가 아닙니다.
조금만 익숙해지면 디자이너 스스로 배너, 섹션 구성, 상세페이지까지 자유롭게 수정할 수 있습니다.

💡 개발 지식이 없어도 HTML/CSS의 기초만 익히면 충분히 가능합니다.
작은 변화부터 시작해보세요.
운영 디자인을 능동적으로 다룰 수 있다면, 실무 디자이너로서 경쟁력이 확실히 달라집니다.