쇼핑몰을 운영하다 보면 배너 이미지 하나 바꾸는 데 며칠씩 걸려 답답함을 한 번쯤 느끼게 돼요. 시즌 이벤트나 신상품 출시처럼 타이밍이 중요한 순간일수록 더 그렇죠. 고도몰 디자인 에디터는 에이전시를 기다리지 않고도 코드를 몰라도 운영자가 원하는 순간에 바로 화면을 바꿀 수 있도록 만들어졌어요. 이번 글에서는 디자인 에디터의 기본 구조부터 편집, 저장까지 단계별로 알려드릴게요!

STEP 1. 디자인 에디터 첫 화면 이해하기

디자인 에디터로 화면을 자유롭게 편집하려면 먼저 작업 공간이 어떻게 구성되어 있는지 익숙해지는 것이 가장 빨라요. 화면 구조와 디바이스 전환 방식을 알아두면 이후 편집 단계도 훨씬 수월해져요.

1️⃣ 에디터의 세 가지 영역 살펴보기

디자인 에디터에 접속하면 세 개의 영역이 한눈에 들어와요. 중앙 캔버스는 고객이 실제로 보게 될 화면을 그대로 보여주는 영역이고, 왼쪽 사이드바는 페이지의 전체 구조를 트리 형태로 보여줍니다. 캔버스에서 요소를 선택하면 오른쪽 속성 패널에 상세 설정 항목이 나타나 색상·크기·여백까지 세밀하게 조정할 수 있어요.

✅ 고도몰 가이드

세가지 영역은 구조 파악(왼쪽) → 화면 편집(중앙) → 세부 조정(오른쪽) 이라는 작업 흐름에 맞춰 구성되어 있어요. 이 순서대로 작업하면 빠르고 정확하게 편집할 수 있습니다.

• [고도몰 관리자 > 디자인 > 디자인 관리 > 디자인 스킨 리스트] 메뉴에서 [반응형] 슬로우홈 스킨 [미리보기]를 선택하고 추가합니다.
• 보유 스킨 리스트 항목에서 슬로우홈 스킨 [디자인 에디터로 편집하기] 버튼을 클릭해 접속합니다.

• 에디터에 접속했다면 편집 도구를 살펴볼 차례예요. 캔버스 위에 마우스를 올리면 순서 변경(↑↓), 복사, 숨기기(👁), 삭제(🗑) 아이콘이 나타나 별도 메뉴 없이 즉시 수정할 수 있습니다.
• 요소를 클릭하면 본격 편집 모드로 전환되어 오른쪽 속성 패널에서 색상·크기·여백 등 세부 항목을 조정할 수 있습니다.

2️⃣ PC와 모바일 화면 각각 최적화하기

디자인 에디터는 반응형 스킨 기반으로 한 번의 등록만으로 PC와 모바일에 동일하게 적용됩니다. 다만 기기별 노출 방식이 달라질 수 있으니 PC·모바일 화면을 번갈아 확인하며 최적화해 주세요. 이미지·동영상 콘텐츠는 양쪽에 동일하게 쓰거나 각각 따로 등록할 수 있어 운영자가 원하는 방식대로 자유롭게 작업할 수 있습니다.

 ✅ 고도몰 가이드

• 에디터 상단 우측의 디바이스 아이콘(💻 PC / 📱 모바일 / 🔳 전체화면)을 클릭해 화면을 전환합니다. 단축키 Alt+1(PC), Alt+2(모바일), Alt+3(전체화면)로도 빠르게 전환할 수 있어요.

• 속성 패널의 ✅모바일에서 동일한 미디어 항목 체크 여부에 따라 PC와 모바일에 동일하게 적용하거나 각 화면으로 전환해 별도로 설정할 수 있습니다.
• 🔳 전체화면 아이콘을 클릭하면 사이드바와 속성 패널이 사라지고 캔버스만 크게 볼 수 있어 작업 결과를 더 넓은 화면으로 확인할 수 있습니다.

STEP 2. 페이지 구조 파악하기

본격적으로 편집을 시작하기 전에 디자인 에디터가 화면을 어떻게 조립하는지 큰 틀에서 한 번 짚어볼게요. 구조를 먼저 이해해두면 어디를 어떻게 손볼지 헷갈리지 않고 편집 단계에서 막힘없이 작업할 수 있어요.

1️⃣ 페이지 - 섹션 - 위젯, 3단 구조 이해하기

디자인 에디터로 만드는 모든 화면은 페이지 → 섹션 → 위젯이라는 3단 계층으로 이루어져 있어요. 이 구조를 이해하면 쇼핑몰을 원하는 대로 조립할 수 있다는 감이 잡혀요.

• 페이지: 메인, 상품 상세, 장바구니처럼 쇼핑몰의 한 화면 단위
• 섹션: 슬라이드 배너, 상품 목록, 이미지와 상품처럼 페이지를 구성하는 큰 블록
• 위젯: 섹션을 채우는 텍스트, 이미지, 버튼 같은 세부 기능

✅ 고도몰 가이드

각 섹션과 위젯은 쇼핑몰 기능이 미리 연결된 상태로 제공되기 때문에 디자인을 바꾸더라도 상품 불러오기·장바구니 담기 같은 동작은 그대로 유지됩니다.

• 에디터 상단 중앙의 🏠메인 ▼ 항목을 클릭 편집할 페이지를 전환하거나 [+폴더 추가] 로 새 페이지를 추가할 수 있습니다.
• 사이드바에서 섹션 및 위젯에 마우스를 올리면 숨기기(👁), 삭제(🗑) 아이콘으로 빠르게 작업할 수 있고 마우스로 위 아래(↑↓) 움직여 위치 조정도 가능합니다.
• 사이드바 하단에서 [+ 섹션 추가] 버튼을 클릭하면 본문에 새 섹션을 추가할 수 있고 위젯을 클릭하면 속성 패널에서 세부 설정을 조정할 수 있습니다.

STEP 3. 메인 화면 자유롭게 편집하기

페이지 구조까지 익혔다면 이제 직접 화면을 바꿔볼 차례예요. 디자인 에디터의 진짜 강점은 코드 한 줄 건드리지 않고도 원하는 순간에 메인 화면을 바로 바꿀 수 있다는 점이에요. 이번 단계에서는 운영자가 가장 자주 편집하는 영역을 중심으로 실전 편집 흐름을 따라가 볼게요.

1️⃣ 공통스타일 설정하기

공통스타일은 쇼핑몰 전체에 적용되는 대표 색상·글자·버튼 모양 같은 디자인 요소를 한 곳에서 통합 관리하는 기능이에요. 개별 위젯을 수정하기 전에 먼저 세팅해두면 전체 페이지에 자동으로 반영되어 편집 시간이 크게 줄어들어요.

✅ 고도몰 가이드

• 왼쪽 사이드바 하단에 공통스타일 아이콘을 클릭해 설정 메뉴로 이동합니다. 색상 항목에서 브랜드 대표색을 지정하면 버튼·강조 텍스트·아이콘에 일괄 반영됩니다.
• 글자 항목에서 쇼핑몰 분위기에 맞는 폰트를 선택해 전체 페이지의 톤을 통일합니다. 레이아웃·버튼·슬라이드 항목은 필요할 때만 펼쳐 조정해도 충분해요.
• 변경 사항은 캔버스에 실시간으로 반영되어 결과를 즉시 확인하며 작업할 수 있습니다.

2️⃣ 메인배너 이미지 적용하기

메인배너는 고객이 가장 먼저 보는 화면이에요. 시즌·캠페인·신상품처럼 강조하고 싶은 메시지를 가장 빠르게 전달할 수 있는 영역으로 이미지 위젯과 텍스트 위젯이 분리되어 있어 비주얼과 카피를 자유롭게 조합할 수 있어요.

✅ 고도몰 가이드

• 캔버스에서 기본 세팅된 배너 이미지를 클릭하고 오른쪽 속성 패널에서 새 이미지를 업로드 합니다.
• ✅모바일에서 동일한 미디어 사용 설정을 하고 노출기간 항목에서 시작·종료일시를 지정하면 정해진 기간에만 노출되며, 미설정 시 상시 노출됩니다.
• 배너 이미지 내에 텍스트(제목·본문)을 각각 클릭해 속성 패널에서 문구를 수정하고 [저장하기] 합니다.

3️⃣ 이벤트 페이지 만들기

디자인 에디터는 메인배너 같은 기존 페이지 편집은 물론 새 페이지 추가와 화면 간 연결까지 지원해요. 새 이벤트 페이지를 만들고 팝업과 연결하면 메인부터 이벤트 페이지까지 동선 전체를 한 도구에서 설계할 수 있어요.

✅ 고도몰 가이드

• 상단 🏠메인 ▼ 항목의 [+폴더 추가] 로 이벤트 페이지 폴더를 생성하고 [+페이지 추가]로 이벤트 페이지를 추가한 다음 이벤트 새 페이지에서 [+ 섹션 추가]로 소개 섹션을 추가합니다.

• 오른쪽 속성 패널에서 이벤트 이미지를 첨부하고 왼쪽 사이드 우측 상단에 [설정] 아이콘을 클릭해 페이지명, 페이지 주소를 입력한 다음 [저장]합니다. 페이지 주소는 쇼핑몰 주소/폴더주소 뒤에 생성되며, 해당 페이지 주소를 복사합니다.

• 메인 페이지로 돌아와 캔버스의 팝업 이미지를 클릭하고, 오른쪽 속성 패널에서 새 이미지를 업로드한 뒤 콘텐츠 영역의 링크에 앞서 복사한 이벤트 페이지 URL을 입력한 [저장하기] 합니다. 새 탭으로 열기를 체크하면 고객이 메인 화면을 유지한 채 이벤트 페이지를 확인할 수 있어요.
• 편집이 끝났다면 우측 상단의 [미리보기] 로 PC·모바일을 점검한 뒤 [게시하기]를 클릭해 실제 쇼핑몰에 반영합니다. 게시 후에도 언제든 다시 편집·게시할 수 있어요.

디자인 에디터로 메인 화면을 직접 꾸미는 방법을 함께 살펴봤어요. 공통스타일·메인배너·이벤트 페이지로 이어지는 편집 흐름을 익혀두면 다음 이벤트는 훨씬 빠르게 준비할 수 있어요. 운영자가 원하는 순간 직접 화면을 바꾸는 쇼핑몰, 지금 고도몰과 함께 시작해 보세요!

고도몰 디자인 에디터 FAQ