편집 창 상세 기능 설명

폴더 추가/화면 추가

원하는 경로에 폴더, 화면을 생성할 수 있어요.
예를 들어 새로운 기능을 적용하기 위해 안내되는 내용이 있을 때 폴더 추가/화면 추가 기능을 이용할 수 있어요.

 

새 이름 저장

선택한 파일을 지정한 이름의 새 파일로 저장할 수 있어요.

 

최신 소스

현재 수정 중인 화면의 최신 버전을 볼 수 있어요.
수정 후에는 저장을 눌러 주세요.
소스가 반영되어요.

 

수정 화면 모드: 화면 보기

수정하는 화면을 미리 보기 형태로 볼 수 있어요.
수정 즉시 수정 내용이 반영되어요.
단, 저장된 게 아니기 때문에 저장하고 싶다면 저장을 눌러 주세요.
마우스 움직임에 따라 모듈 단위로 영역이 표시되어요.
원하는 영역의 편집 버튼을 눌러 수정할 수 있어요.
모듈 추가 기능은 지원되지 않아 모듈을 선택할 수 없는 상태로 표시되어요.

 

수정 화면 모드: 분할 보기

수정하는 화면을 화면 보기 영역과 HTML 영역으로 나누어 두 가지 상태를 동시에 볼 수 있어요.
화면 보기 영역에서 모듈 단위를 선택하면 선택한 모듈의 소스 위치가 HTML 영역에 표시어요.
HTML 영역에서 소스를 수정한 뒤 미리 보기 버튼을 누르거나 저장하면 화면 보기 영역에 수정된 내용이 반영되어요.
모듈 추가 기능이 지원되기 때문에 원하는 위치에 마우스 커서를 올려놓고 모듈 추가를 누르면 원하는 모듈을 추가할 수 있어요.

 

수정 화면 모드: HTML 보기

수정하는 화면의 HTML 소스만 볼 수 있어요. 
모듈 추가 기능이 지원되기 때문에 원하는 위치에 마우스 커서를 올려놓고 모듈 추가를 누르면 원하는 모듈을 추가할 수 있어요.

수정한 소스 저장하기

디자인 보관함에서 수정할 디자인의 편집창을 열어 주세요. 내용을 수정한 뒤 저장할 때 나타나는 안내를 확인해 주세요.

문법 오류 안내가 나타난 경우

JavaScript 문법 오류가 발견되면 파일명, 줄 번호와 오류 메시지가 표시돼요. 오류 메시지는 영문으로 제공돼요.

1. 오류 목록에서 확인할 항목을 누르면 해당 줄로 이동할 수 있어요.
2. 수정하려면 돌아가서 수정을 선택해 주세요. 편집 중인 내용은 유지돼요.
3. 위험을 확인하고 현재 내용을 저장하려면 그래도 저장을 선택해 주세요.

문법 검사를 완료하지 못한 경우

문법 검사를 완료하지 못했습니다라는 안내는 오류가 없다는 뜻이 아니에요. 안내된 사유를 확인한 뒤 취소하거나, 위험을 확인하고 그래도 저장을 선택해 주세요.

여러 파일을 모두저장하는 경우

모두저장을 누르면 먼저 전체 파일을 저장할지 확인해요. 진행하면 문법 오류가 있는 파일은 별도의 브라우저 확인창으로 안내해요. 파일명과 오류 내용을 확인한 뒤 해당 파일을 저장할지 선택해 주세요. 취소하면 해당 파일은 저장에서 제외되고 다른 파일의 저장은 계속돼요. 저장하지 않은 파일의 수정 내용은 남아 있으니, 파일별 저장 결과와 미저장 표시를 확인해 주세요.

파일을 저장할 수 없다는 안내가 나타난 경우

저장 실패 안내가 나타나면 저장이 완료된 것으로 보지 말아 주세요. 편집 내용과 미저장 표시는 유지돼요. 필요한 수정 내용을 따로 보관하고 연결 상태나 편집 권한을 확인해 주세요. 문제가 계속되면 고객센터에 문의해 주세요.

다른 작업자가 먼저 저장한 경우

같은 파일을 다른 작업자가 먼저 저장했다면 변경 내용이 겹친다는 안내가 나타나요. 먼저 저장된 내용과 내 수정 내용을 확인한 뒤 처리 방법을 선택해 주세요.

1. 변경 내용 비교를 선택하면 먼저 저장된 내용과 내 편집 내용을 비교할 수 있어요.
2. 먼저 저장된 내용을 가져오려면 저장된 내용 불러오기를 선택해 주세요. 내 미저장 수정이 사라진다는 안내를 확인하고 진행해 주세요. 확인창에서 취소하면 비교 화면과 내 수정 내용이 유지돼요.
3. 내 내용으로 바꾸려면 내 내용으로 덮어쓰기를 선택해 주세요. 다른 작업자가 저장한 내용을 덮어쓰므로 필요한 내용을 확인한 뒤 진행해 주세요.
4. 결정하지 않고 편집을 계속하려면 취소를 선택해 주세요.

이전 저장 내용과 비교하고 적용하기

히스토리에서 날짜를 선택하면 이전 저장 내용과 현재 편집 내용을 비교할 수 있어요. 현재 편집 내용에는 아직 저장하지 않은 수정도 포함돼요.

1. 되돌릴 파일을 열고 히스토리에서 원하는 날짜를 선택해 주세요.
2. 비교 화면에서 변경된 부분을 확인해 주세요. 닫기만 하면 현재 편집 내용이 유지돼요.
3. 이전 내용을 사용하려면 적용을 선택해 주세요. 편집 내용이 선택한 버전으로 바뀌어요.
4. 변경한 내용을 확인한 뒤 저장해 주세요. 적용만으로는 파일이 저장되지 않아요.

소스 찾기와 바꾸기

소스 찾기/바꾸기에서 현재 파일 또는 열려진 모든 파일을 대상으로 찾고 바꿀 수 있어요. 찾을 내용을 입력한 뒤 다음 찾기를 누르거나 Enter 키를 누르면 다음 결과로 이동해요. 파일명, 줄 번호와 검색 순서를 확인할 수 있어요.

읽기 전용 파일도 검색할 수 있지만, 일괄변경 대상에서는 제외돼요.

일괄변경 후에는 파일별 변경 결과를 확인하고 저장해 주세요. 일부 파일을 변경하지 못했다는 안내가 나오면 해당 파일을 확인해 주세요. 이 안내는 편집 내용의 변경 결과이며 파일 저장 결과와는 달라요. 자세한 절차는 디자인 소스 일괄 변경 방법을 참고해 주세요.

모듈

모듈이란 프로그램을 이루는 최소 단위로 1개 또는 그 이상의 콘텐츠와 기능을 하나로 모은 묶음이에요.
각 모듈은 HTML과 변수가 한 덩어리로 모여 동작해요.
모듈은 하나의 독립된 완전한 프로그램으로 사용자가 입력한 module="모듈 아이디(모듈명)"에 따라 판단되고 동작해요.
카페24에서는 다양한 모듈을 제공하고 있어요.
모듈 코드를 HTML  소스 중 원하는 위치에 삽입하여 사용할 수 있어요.

모듈 추가/교체하기

모듈을 추가하거나 교체하는 방법은 두 가지예요.

 

1. 모듈 편집 창 이용

스마트디자인 편집 창에서 모듈의 편집 버튼을 눌러 주세요.
모듈 편집 창에서 추가할 모듈을 선택하고, 선택한 모듈이 추가될 위치를 선택한 뒤 적용해 주세요.

 

2. 모듈 추가 버튼 이용

스마트디자인 편집 창에서 분할 보기 또는 HTML 보기 상태로 모듈을 추가할 위치를 HTML 영역에서 선택해 주세요.
모듈 추가 버튼으로 모듈 편집 창을 열어 원하는 모듈을 선택하고 적용해 주세요.

디자인 구조

온라인 쇼핑몰을 비롯해 모든 웹 사이트는 전체적으로 공통된 구조가 있어요.
레이아웃은 전체 구조 중 공통으로 사용되는 영역을 가리키고, 크게 네 부분으로 나뉘어요.

 

1. 머리글(Header)

온라인 쇼핑몰의 모든 페이지 맨 위에 표시되는 영역이에요.
보통 로고, 로그인 정보, 검색 창, 바로 가기 등이 노출되어요.

 

2. 탐색(Side)

고객이 쇼핑몰을 둘러보는 데 도움이 될 만한 메뉴가 표시되는 영역이에요.
로그인, 마이 쇼핑, 사이드바형 검색 창, 상품 분류 메뉴, 기획전, 고객 상담 안내, 게시판 목록, 인기 상품 등이 노출되어요.

 

3. 본문 (Body)

머리글과 바닥글 사이 영역이에요.
머리글, 바닥글과 달리 고정되지 않고, 페이지마다 다른 디자인으로 노출될 수 있어요.

 

4. 바닥글(Footer)

온라인 쇼핑몰의 모든 페이지 맨 아래에 표시되는 영역이에요.
회사 정보, 이용 안내, 고객센터 안내 등이 노출되어요.

반응형 설정하기

스마트디자인 반응형 스킨은 크게 두 가지로 나뉘어요.

 

1. PC 디자인만 제공하는 반응형 스킨

• 구매할 경우, 상품 구분에 PC 디자인만 표시되어 있어요.
   
• 대표 디자인으로 설정하는 경우, [관리자] 디자인 > 디자인 보관함 으로 이동해 주세요.
  그다음 '모바일 탭'에서 모바일 전용 디자인 사용 설정을 '사용 안함'으로 선택해 주세요.

2. PC와 모바일 디자인 각각 제공하는 반응형 스킨

• 구매할 경우, 상품 구분에 PC, 모바일 디자인으로 표시되어 있어요.
   
• 대표 디자인으로 설정하는 경우, [관리자] 디자인 > 디자인 보관함 으로 이동해 주세요.
  그다음 '모바일 탭'에서 모바일 전용 디자인 사용 설정을 '사용함'으로 선택해 주세요.

연관 콘텐츠