메뉴 바로가기 본문 바로가기



상세기능 설명

  • 전문 개발자가 없이도, HTML만 안다면 다양한 쇼핑몰 운영자의 욕구를 그대로 구현해낼 수 있는 디자인 관리툴입니다.
  • 어느 브라우저에서나 쾌적한 쇼핑환경을 유지하며, 사이트 경량화를 통해 접속 속도를 높여줍니다.
  • 또, 차별화된 고객 관리를 위해 다양한 스킨 기능을 탑재하고 있으며, 제약 없이 원하는 디자인을 구현할 수 있습니다.
1. 편집중인 디자인
  • 현재 편집창에 열려있는 쇼핑몰 디자인명을 보여줍니다.
  • 대표디자인인 경우만 [사용중] 아이콘이 표시됩니다.
2. 자주쓰는 화면
  • 일반적으로 많이 사용하는 화면을 즐겨찾기 형식으로 모아놓은 리스트입니다.
  • 자주쓰는 화면의 즐겨찾기명을 변경하거나 삭제할 수 있습니다.
3. 폴더추가/화면추가
  • 원하는 경로에 폴더 및 화면을 생성할 수 있습니다.
4. 화면명 검색
  • 검색할 화면명으로 화면을 검색할 수 있습니다.
  • 수정을 원하는 화면을 선택하여 [선택파일 열기]버튼을 클릭하면 해당 화면이 편집창에서 열립니다.
5. 전체화면 보기
  • 쇼핑몰 디자인 폴더에 있는 모든 화면을 트리 형태로 보여줍니다.
6. 자주쓰는 화면 추가
  • 자주 편집하는 화면명의 왼쪽에 위치한 [별] 아이콘으로 클릭하여 '자주쓰는 화면'에 추가됩니다.
7. 수정중인 파일
  • 편집창 왼쪽에서 수정할 파일을 선택하면 탭으로 해당 파일들이 나열됩니다.
  • 열린 화면이 여래개인 경우 좌우 화살표를 클릭해서 원하는 탭을 찾거나, 현재 열린 전체 화면 리스트를 확인할 수 있습니다.
8. 저장 / 새이름 저장 / 삭제 / 닫기
  1. 1) 저장
  • 수정한 화면을 저장합니다.
  1. 2) 새이름 저장
  • 선택된 화면을 새로운 이름으로 저장합니다. 저장경로를 선택하고 파일명을 입력하면 새 파일로 저장됩니다.
  1. 3) 삭제
  • 선택된 화면을 삭제할 수 있습니다. 단, 새로 추가한 화면만 삭제 가능하며, 기본으로 제공되는 화면은 삭제할 수 없습니다.
  1. 4) 닫기
  • 선택된 화면을 닫습니다.
9. 미리보기 / 모듈추가 / 최신소스 / 히스토리
  1. 1) 미리보기
  • 화면을 편집한 후 저장하기 전 적용된 화면을 보고싶으면 미리버튼을 클릭합니다.
  • 일반적으로 화면 모드가 분할보기나 HTML 보기 상태에서 편집한 후에 미리버튼 클릭하게 됩니다.
  1. 2) 모듈추가
  • 현재 편집중인 화면에 새로운 모듈을 추가합니다.
  • 화면모드가 화면보기 상태인 경우에는 모듈추가 버튼이 활성화 되지 않습니다.
  1. 3) 최신소스
  • 현재 편집중인 화면의 최신소스를 보여줍니다. 최신 소스가 없으면 최신소스 버튼이 활성화 되지않습니다.
  • 소스 내용을 확인한 후 적용 버튼을 눌러 현재 화면에 적용합니다. 최종적으로 저장 버튼을 클릭해야 최신 소스가 반영됩니다.
  1. 4) 히스토리
  • 현재 편집중인 화면의 저장 히스토리를 보여줍니다. (최대 10개)
  • 원하는 저장 시간을 선택하면, 선택한 시간에 저장한 내용으로 소스를 변경해줍니다
  • 최종적으로 저장 버튼을 클릭해 저장해야 반영됩니다.
10. 소스 일괄변경 소스 일괄변경 도움말
  • 편집 중인 파일에서 특정 소스를 찾아서 일괄 변경할 수 있습니다.
  • [소스 일괄변경] 클릭시 하단에 레이어가 노출됩니다. (소스 일괄변경은 분할보기 및 HTML보기 모드에서 제공되는 기능입니다.)
  1. ※소스 복원 방법 안내
  1. 변경하기 전의 소스코드로 복원해야 할 경우, 편집창 내의 [히스토리] 기능으로 최근 소스로 되돌릴 수 있습니다.
  1. 1) 찾을 내용/바꿀 내용
  • 찾을 내용 : 찾을 문자열을 입력합니다. (입력 필수)
  • 바꿀 내용 : 변경할 문자열을 입력합니다. 바꿀 내용을 입력하지 않고 일괄변경시, 공백으로 치환됩니다.
  1. 2) 일괄변경
  • 찾을 내용과 일치하는 문자열이 일괄적으로 치환됩니다.
  • 일괄변경 후 저장해야 쇼핑몰 화면에 반영되니 유의하시기 바랍니다.
  1. 3) 범위
  • 일괄 변경할 범위를 설정합니다.
  • 현재 파일 : 현재 편집중인 파일 내에서 변경할 수 있습니다. (예 : 캡쳐화면의 index.html에서 찾아서 일괄 변경)
  1. 열려진 모든 파일 : 열려있는 전체 파일에서 찾아서 변경할 수 있습니다. (예 : 캡쳐화면의 index.html, detail.html 에서 찾아서 일괄 변경 )
  1. 4) 옵션
  • 대소문자 구분 : 체크시 대소문자를 구분하여 검색합니다.
    1. 예) 찾을 내용이 $cafe24인 경우, $cafe24만 검색되어 일괄 변경됩니다. ($CAFE24 또는 $Cafe24 등은 검색 및 변경되지 않습니다.)
11. 모두저장 / 모두닫기
  • 모두저장 : 열려있는 모든 화면을 저장합니다.
  • 모두닫기 : 열려있는 모든 화면을 닫습니다.
12. 로그인전 / 로그인후
  • 로그인전 : 현재 편집중인 화면을 로그인 전 상태로 미리보기 합니다.
  • 로그인후 : 현재 편집중인 화면을 로그인 후 상태로 미리보기합니다.
13. 편집 화면 모드
  • 화면 모드는 아래와 같이 화면보기, 분할보기, HTML보기 3가지 형태를 제공합니다.

  1. 1) 화면보기
  • 편집하려는 화면을 미리보기 형태로 보면서 수정합니다.
  • 마우스 움직임에 따라 모듈 단위로 영역이 잡히고, 수정을 원하는 영역의 편집 버튼을 눌러 디자인/설정 등을 수정할 수 있습니다
  • 수정 즉시 수정한 내용으로 미리보기 형태가 변경됩니다.
    1. ※ 미리보기 형태이므로, 화면에 수정된 내역이 보인다고 해서 저장된 것이 아니므로, 주의하세요.
    1. ※ 화면보기 상태에서는 모듈추가 기능은 지원되지 않아 비활성 상태로 나타납니다.
  1. 2) 분할보기
  • 편집하려는 화면을 화면보기와 HTML보기 두 가지 상태로 보면서 수정합니다.
  • 좌측의 화면보기 영역은 화면보기 기능을 그대로 사용할 수 있고, 우측의 HTML보기 영역은 HTML보기 기능을 그대로 사용할 수 있습니다.
  • 좌측의 화면보기 상태에서 편집할 영역을 선택하면 우측의 HTML보기 영역에는 선택한 영역의 소스가 하이라이트 됩니다.
  • HTML보기 영역에서 소스를 수정한 후 상단의 미리보기 버튼을 누르면 화면보기 영역에서 수정된 내용이 미리보기 됩니다
    1. ※ HTML보기 상태에서는 모듈추가 기능이 지원됩니다. 원하는 위치에 커서를 위치한 후 모듈추가 버튼을 눌러 추가하고 싶은 모듈을 선택하세요.
  1. 3) HTML보기
  • 편집하려는 화면을 HTML 소스를 열어 코드를 직접 수정합니다.
  • HTML을 아는 사용자는 바로 수정할 수 있고, 모듈 코드 어시스트 기능이 지원되므로, 편리하게 수정이 가능합니다.
    1. ※ 소스를 수정한 후 수정내용을 화면상에서 확인하고 싶으면 ‘화면보기’ 또는 ‘분할보기’ 상태로 이동해야 합니다.
    1. ※ HTML보기 상태에서는 모듈추가 기능이 지원됩니다. 원하는 위치에 커서를 위치한 후 모듈추가 버튼을 눌러 추가하고 싶은 모듈을 선택하세요.