동영상 썸네일 이미지 배경과 섹션 배경색을 똑같은 색으로 지정해, 다음 그림과 같이 동영상이 섹션 배경과 일체화된 디자인으로 꾸밀 수 있습니다.

앞서 완료해야 할 사항

본 튜토리얼을 진행하려면 동영상 썸네일 이미지가 필요합니다. 이미지 제작 시 주의해야 할 점은 다음과 같습니다.

• 동영상 썸네일의 배경색은 단색이어야 하며, 해당 배경색의 색상값(HEX 또는 RGB값)을 알아야 합니다.
• 동영상 썸네일은 16:9 비율(1280x720픽셀)로 제작하실 것을 권장해 드립니다. 해당 비율을 벗어나는 경우 썸네일 이미지의 일부가 확대 또는 축소되거나 잘릴 수 있습니다.
• 동영상 썸네일 이미지가 정상적으로 표시되지 않는 경우 새로고침(F5)을 눌러 주시길 바랍니다.
• 동영상 썸네일 제작 시 Play(재생) 아이콘은 추가하지 않으셔도 됩니다.

샘플 이미지 다운로드

원활한 튜토리얼 진행을 위해 아래 샘플 이미지(350KB, ZIP파일)를 내려받아 사용하실 수 있습니
참고: 본 샘플 이미지의 저작권은 (주)아임웹에 있습니다. 

다운로드

제작방법

1단계: 새로운 메뉴 추가하기

새로운 메뉴를 추가합니다. 기존 메뉴가 있는 경우 해당 메뉴로 이동합니다.

1.  디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 상단 메뉴 항목에서 ⨁ 아이콘을 클릭합니다.
4. 메뉴명을 입력하고 확인 버튼을 클릭해 새로운 메뉴를 생성합니다.

2단계: 동영상 위젯 추가하기

배경 위에 동영상 위젯을 추가하고, 동영상을 연결합니다. 

1. 빈 메뉴의 중앙에 위치한 ⨁ 아이콘을 클릭합니다.
2. 위젯 목록이 나오면 동영상 위젯을 클릭합니다.
3. 삽입된 동영상 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 컨텍스트 메뉴가 나오면 동영상 설정 을 클릭합니다.
5. 동영상 설정 창이 나오면 이미지 업로드 버튼을 클릭해, 내 PC에서 동영상 썸네일 이미지를 올려줍니다.
6. 동영상 주소 항목에 유튜브 또는 비메오 동영상 URL(주소)를 입력합니다.
7. 재생설정 항목에서 라이트 박스 옵션을 선택합니다.
8. 옵션 항목에서 제목 감추기, 플레이어 컨트롤 감추기 옵션을 각각 선택합니다.
9. 동영상 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

3단계: 섹션 배경색 변경하기

동영상 위젯이 삽입된 섹션의 배경색을, 동영상 위젯 썸네일 이미지의 배경색과 같은 색상으로 지정하는 과정입니다.

1.  동영상 위젯이 올라간 섹션에 마우스 포인터를 올립니다.
   참고: 동영상 위젯에 마우스 포인터를 올리면 안 됩니다. 위젯이 없는 곳에 마우스 포인터를 올려주세요. 
2. 마우스 오른쪽 버튼을 클릭하면 나타나는 컨텍스트 메뉴에서 섹션 설정 을 클릭합니다.
3.  배경 항목의 배경색 옵션에 동영상 썸네일 이미지에 사용된 배경색과 같은 색상 값을 입력합니다.
4. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

(선택 사항) 4단계: 섹션 그리드 제거하기

섹션 그리드란 쉽게 말해 위젯과 위젯 사이의 간격을 의미합니다. 만약 아래와 같이 이미지 일부가 잘린 동영상 썸네일 이미지를 사용하는 경우 섹션 그리드를 제거하면, 여백 없이 섹션에 딱 붙여 배치할 수 있습니다.

1.  위 3단계 1번~3번 과정에 따라 섹션 설정을 열어줍니다.
2. 간격 항목에서 기본 그리드 간격을 선택 해제합니다.
3. 다음으로 그리드 상하 간격에 0으로 입력합니다.

4. 동영상 썸네일 이미지 위, 아래로 여백이 제거 되었는지 확인합니다.

5. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

5단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 동영상을 재생해보고, 섹션 그리드 간격이 정상적으로 제거 되었는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

디자인 모드에서 로그인과 회원가입 메뉴로 이동해 임의로 디자인을 변경할 수 있습니다. 로그인 및 가입 메뉴에는 통합 위젯이 사용되므로 일부만 디자인 변경할 수 있습니다.

설정방법

1단계: 로그인/가입 모달로 사용 해제하기

1. 디자인 모드 오른쪽 상단의 톱니바퀴 아이콘을 클릭합니다.
2. 브라우저 오른쪽에서 공통 디자인 설정 패널이 나타납니다.
3. 공통 디자인 설정 맨 아래 로그인/가입 모달로 사용 옵션을 선택 해제합니다.

4. 공통 디자인 설정 메뉴 바깥 영역을 클릭하고, 저장 버튼을 클릭해 설정을 완료합니다.

2단계: 로그인/가입 메뉴 디자인하기

1. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
2. 글로벌 메뉴에서 로그인/가입 메뉴 클릭합니다.

3.  메뉴를 클릭합니다.

4. 위젯을 추가하거나, 섹션 배경을 변경해 로그인 메뉴를 디자인합니다

5. 다시 왼쪽 상단의 메뉴 관리 ≡ 를 클릭합니다.
6. 각 회원가입 종류 선택, 회원가입 동의, 회원가입 정보입력 메뉴를 클릭해 회원가입 관련 메뉴를 디자인합니다.

3단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. Google 크롬 시크릿창을 켜서 회원가입 또는 로그인을 클릭해 관련 메뉴 디자인을 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

디자인 모드에서 그룹 메뉴를 만들면, 그룹 메뉴의 상위 메뉴에 마우스 포인터를 올렸을 때, 아래 그림처럼 하위 메뉴가 나타납니다. 이 같은 메뉴를 '풀다운 메뉴' 라고 합니다.

이 도움말에서는 메뉴 관리에서 메뉴 설정을 열어 풀다운 메뉴를 비활성시키는 방법을 설명합니다.

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.

3. 그룹 메뉴에서 최상위 메뉴(또는 상위 메뉴)의 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭해 메뉴 설정 창을 열어줍니다.

4. 메뉴 설정 창에서 풀다운 메뉴 사용 안함 옵션을 선택합니다.

5. 메뉴 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
6. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
7. 상위 메뉴에 마우스 포인터를 올려 풀다운 메뉴가 표시되지 않는지 확인합니다.
8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

메뉴 버튼 위젯을 통해 추가한 상단 사이드 메뉴에, 하위 메뉴를 표시할 수 있습니다.

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 디자인 모드 오른쪽 상단의 상단설정 을 클릭합니다.
3. 상단에 메뉴 버튼 위젯을 추가합니다. 상단 위젯 추가하기
   참고: 메뉴 버튼 위젯을 이미 추가했다면 이 과정은 건너 뛰어도 무방합니다.
4. 메뉴 버튼 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면, 메뉴 버튼 설정 을 클릭합니다.
6. 화면 오른쪽에서 메뉴 버튼 설정 패널이 나오면, 펼침메뉴 탭을 클릭합니다.
7. 펼침메뉴 최하단의 공통 항목에서 하위 메뉴 표시 옵션을 선택합니다.
8. 메뉴 버튼 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
10. 메뉴 버튼을 클릭해, 하위메뉴가 정상적으로 표시되는지 확인합니다.
11. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

테이블(표)를 사용해 비주얼섹션의 한 줄에 텍스트와 이미지를 나란히 삽입할 수 있습니다. 이 방법은 비주얼섹션뿐 아니라 텍스트 에디터를 제공하는 모든 위젯 및 관리자 페이지에서 적용 가능합니다.

1단계: 비주얼섹션 추가 및 설정 열기

메뉴에 비주얼섹션을 추가하고, 비주얼섹션의 설정을 여는 과정입니다.

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
3. 비주얼섹션을 클릭합니다. 섹션 설정 열기
4. 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 비주얼 설정을 클릭합니다.

2단계: 슬라이드 선택 및 배경색 채우기

비주얼섹션 슬라이드의 샘플 콘텐츠는 모두 삭제하고, 배경색을 지정하는 과정입니다.

1.  비주얼 설정 창 왼쪽 상단에서, 편집할 슬라이드를 선택합니다.
   참고: 새로운 슬라이드를 클릭해, 슬라이드를 추가하거나, 슬라이드 썸네일 상단의 ⨂를 클릭해 삭제합니다. 
2. 선택한 슬라이드에 있는 샘플 텍스트를 경우 모두 삭제합니다.

3. 배경속성 / 배경색 항목에서, 를 클릭해, 원하는 배경색을 지정합니다.

3단계: 테이블 추가 및 테두리 없애기

테이블(표)을 추가하고, 추가한 테이블의 테두리를 없애는 과정을 다룹니다.

1. 텍스트 편집도구의 테이블 아이콘을 클릭하고, 테이블을 추가합니다. 이 도움말에서는 2열로 테이블을 추가하였습니다.
2. 삽입된 테이블의 아무 곳에 마우스를 클릭합니다.
3. 아래 그림처럼 테이블 옵션 메뉴가 나오면, 표 스타일 옵션에서 을 선택합니다.

4단계: 테이블 셀에 텍스트 및 이미지 첨부하기

테이블 셀에 텍스트와 이미지를 첨부하고, 이미지 크기를 수정하는 과정입니다.

1.  테이블 왼쪽 셀을 클릭하고, 텍스트를 입력합니다. 텍스트의 크기를 변경하거나, 두께, 단락 등을 원하는 스타일로 수정합니다. 
2. 테이블 오른쪽 셀을 마우스로 클릭하고, 텍스트 편집도구에서 를 클릭합니다.
3. 내 PC에서 이미지를 올리면, 다음 그림처럼 작게 이미지가 삽입됩니다. 이제 이미지를 클릭해 주세요. 옵션 메뉴가 나오면, 크기 변경 옵션을 클릭합니다.
4. 폭 또는 높이에 숫자가 있는 경우 삭제하고, 업데이트를 클릭합니다.
   참고: 폭과 높이를 빈 칸으로 두면, 테이블 셀 크기에 맞춰 꽉 차게 됩니다. 
5. (선택 사항) 비주얼섹션에 버튼이 필요한 경우 텍스트 위젯, 비주얼섹션, 상품 요약설명 등에 버튼 추가하는 방법 도움말을 참고해 추가해 주세요.

5단계: 테이블 셀 가로 크기 지정하기

테이블은 처음 생성 시, 선택하신 열과 행의 수에 따라 자동으로 크기가 지정됩니다. 우리는 이 단계에서 직접 테이블의 가로폭을 변경해줄 것입니다.

1. 텍스트 편집도구에서   아이콘을 클릭합니다.
2. <td> 태그의 width 값을 변경합니다. 이 도움말에서는 왼쪽 열의 크기를 30%, 오른쪽 열의 크기를 70%로 수정했습니다. 텍스트 및 이미지 크기에 따라 적절하게 조절합니다.
3. width 값 수정을 마쳤으면 다시 코드보기 </> 아이콘을 클릭합니다.
   주의: 코드보기 아이콘을 꼭 다시 클릭해 주세요. 비주얼 설정 창을 바로 끄면 수정한 코드가 다시 초기화 될 수 있습니다.
4. 비주얼 설정 창 바깥 영역을 클릭해, 설정을 완료합니다.

5. 아래 그림처럼 비주얼섹션에 테두리 없는 테이블이 있고, 테이블 안에 텍스트와 이미지가 한 줄로 형식으로 삽입되는 걸 볼 수 있습니다.

6단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 의도한대로 디자인이 되었는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.

7단계: 모바일 버전 편집하기

모바일은 PC와 달리 가로폭이 좁기 때문에, 테이블을 2열로 만들어 텍스트와 이미지를 추가하는 건 보기 안 좋을 수 있습니다. 따라서 이 도움말에서는 비주얼섹션을 모바일에 맞게 재편집하는 방법을 설명합니다. 

1. 뷰포트를 PC에서 모바일로 변경합니다. 뷰포트 변경방법
2. 비주얼 섹션에 마우스 포인터를 올리면 나타나는 아이콘을 클릭합니다. 아이콘 클릭 시 PC에서 제작한 비주얼 섹션은 숨겨집니다. 모바일 섹션 숨김방법
3. 새로운 모바일 전용섹션을 추가합니다. 모바일 전용섹션 추가방법
4. 모바일 전용섹션에 ⨁ 아이콘을 클릭해 비주얼 섹션을 추가합니다.
5. 삽입된 비주얼섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
6. 컨텍스트 메뉴가 나오면 비주얼 설정을 클릭합니다.
7. 제목 텍스트를 입력하고, 텍스트 편집도구에서 이미지 첨부  를 클릭해 이미지를 추가합니다.
8. 비주얼 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

9. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.

비주얼섹션의 이미지가 어둡게 보이세요?

원인은 대개 비주얼섹션에 음영 옵션이 추가되어 있기 때문입니다. 아래 도움말 링크를 클릭해 비주얼섹션 음영을 완전히 투명하게 바꾸는 방법을 알아보세요.

비주얼섹션 배경 이미지가 어둡게 보입니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

메뉴가 그룹으로 구성된 경우, 메인메뉴에 마우스 포인터를 올리면 아래 그림처럼 서브메뉴가 표시됩니다. 사용자는 상단설정에서 메뉴 위젯의 설정을 열어, 서브메뉴 텍스트의 크기, 배경색, 메뉴 간 간격 등 스타일을 변경할 수 있습니다.

이 도움말에서는 상단 메뉴에서 서브메뉴 스타일을 변경하는 방법을 소개합니다.

설정방법

1단계: 상단설정 진입하기

서브메뉴는 상단 영역에 있는 메뉴로 상단설정에서 변경할 수 있습니다. 1단계에서는 상단설정으로 진입하는 방법을 설명합니다.

1. 디자인 모드에 접속합니다. 접속방법
2. 디자인 모드 오른쪽 상단의 상단설정 을 클릭해, 상단 설정을 열어줍니다. 상단 설정 열기
3. 메뉴 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭해 주세요. 만약 선택하신 테마에 메뉴 위젯이 없는 경우 새로운 위젯을 추가합니다. 상단 위젯 추가하기

4. 컨텍스트 메뉴가 나오면 메뉴 설정 을 클릭합니다.

   참고 : 메뉴 위젯은 일반적으로 상단 메인메뉴를 말합니다. 메인메뉴에 마우스 오른쪽 버튼을 클릭해 보세요.

   
5. 화면 오른쪽에서 메뉴 설정 패널이 나타납니다.

2단계: 서브메뉴 스타일 변경하기

이 도움말에서는 메뉴 설정에서 서브메뉴 스타일을 변경하는 과정을 설명합니다.

1.  메뉴 설정 패널 상단의 서브 메뉴 탭을 클릭합니다. 
2. 서브 메뉴에 마우스 포인터를 올렸을 때의 텍스트 및 배경 색상을 설정합니다.
3. 기본 상태에서의 서브메뉴 스타일을 설정합니다.

   참고: 배경 옵션의 rgba는 투명 색상을 의미합니다. 아임웹에서 반투명한 색상을 설정하는 방법은 컬러픽커로 투명도 조절하기 도움말에서 알아보세요.

   
4. 서브메뉴 아래 그림자를 추가하거나, 텍스트를 전부 굵게 또는 기울이기 옵션을 추가할 수 있습니다.
5. 모든 설정을 마쳤으면, 메뉴 설정 패널 바깥 영역을 클릭해 설정을 종료합니다.

3단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 상단 메인메뉴에 마우스 포인터를 올려봅니다.
3. 상단 메뉴 아래 의도한 스타일대로 서브메뉴가 나타나는지 확인합니다.
4. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

화면 단위로 부드럽게 스크롤되는 풀페이지를 제작할 수 있습니다. 이 도움말에서는 풀페이지를 디자인하는 전체적인 과정을 설명합니다.

제작방법

1단계: 비주얼섹션 추가 및 풀페이지 모드 선택하기

풀페이지 모드를 만들려면 비주얼섹션이 필요합니다. 이 단계에서는 새 메뉴에 비주얼섹션을 추가하고, 일반 비주얼섹션을 풀페이지 모드로 변경하는 방법을 설명합니다.

1.  디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 상단 메뉴 오른쪽 끝에 위치한 ⨁를 클릭해 새로운 메뉴를 생성합니다. 메뉴 추가하기
3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭하고, 비주얼섹션을 클릭합니다.
4. 비주얼섹션 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 비주얼 설정 을 클릭합니다.
6. 비주얼 설정 창 상단의 디자인 탭을 클릭합니다.

7. 모드 항목에서 풀페이지 모드 옵션을 선택합니다.

2단계: 새로운 슬라이드 추가하기

풀페이지 디자인을 적용할 슬라이드를 추가합니다. 페이지 상하 스크롤 시 이 슬라이드 단위로 화면이 전환됩니다.

1.  비주얼 설정 창 상단의 비주얼 섹션 탭을 클릭합니다.
2. 비주얼 설정 창 왼쪽 상단의 ⨁ 새로운 슬라이드를 클릭해, 슬라이드를 추가합니다. 슬라이드는 여러 개 추가할 수 있습니다. 필요한 만큼 추가해 주세요.
   참고: 아래의 그림은 총 4개의 새로운 슬라이드를 추가했을 때를 캡쳐한 화면입니다.

3단계: 추가한 슬라이드 디자인하기

슬라이드를 디자인합니다. 배경 이미지를 추가하고, 텍스트, 이미지 등 콘텐츠를 추가해 보세요.

1. 위 2단계에서 추가한 슬라이드 중 하나를 마우스로 클릭합니다. (이 도움말에서는 가장 첫 번째 슬라이드를 선택했습니다.)
   
   
2. 배경 설정 항목에서 슬라이드에 배경 이미지를 추가합니다.
3. 하단의 텍스트 에디터에 배경 이미지가 삽입되면 텍스트를 작성하고 편집합니다. 이미지를 첨부하거나, 링크를 걸 수도 있으며, 왼쪽/가운데/오른쪽 정렬을 변경할 수도 있습니다.
   참고: 비주얼섹션에 관한 더 많은 도움말은 이 문서의 가장 아래 위치한 '관련 도움말' 항목을 확인해 주세요.
4. 위 1~3번 과정을 반복해 남은 슬라이드를 모두 디자인 완료합니다.

(선택 사항) 4단계: 이용약관 및 저작권 표시하기

풀페이지 모드에는 기본 하단 섹션이 표시되지 않으므로, 하단 정보 항목에 사업자정보, 이용약관, 저작권 문구 등의 표시를 별도로 설정해야 합니다.

1. 비주얼 설정 창 상단의 디자인 탭을 클릭합니다.

2. 비주얼 설정 창 가운데 하단 정보 항목과 하단 표시 옵션을 선택합니다.

3. 비주얼 설정 창 바깥 영역을 클릭해 풀페이지 모드 설정을 완료합니다.

5단계: 미리보기 및 게시하기

1. 디자인 모드의 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 마우스 휠 스크롤을 움직여 디자인한 풀페이지를 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

관련 도움말

• 비주얼섹션 사용하기
• 비주얼섹션 배경 이미지가 어둡게 보입니다.
• 텍스트 위젯, 비주얼섹션, 상품 요약설명 등에 버튼 추가하는 방법
• 모바일에서 비주얼섹션 배경 이미지가 잘려 보일 때
• 비주얼섹션에 이미지 첨부하기
• 비주얼섹션에 버튼 추가하는 방법
• 비주얼섹션 풀페이지 사용 시 배경 이미지의 최적 해상도는 무엇인가요?

도움말에 찾으시는 답변이 없으신가요? 문의하기

섹션 배경에 눈이 내리는 효과를 적용합니다. 눈은 흰색으로 처리되어, 배경색이 같은 흰색 또는 그에 준하는 밝은 색으로 지정된 경우 표시되지 않는 것처럼 보일 수 있습니다. 

설정방법

1. 디자인 모드에 접속합니다. 접속방법
2. 눈내리기 효과를 적용할 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
3. 컨텍스트 메뉴가 나오면 섹션 설정 을 클릭합니다. 섹션 설정하기

4. 섹션 설정 창의 오른쪽 중앙에 위치한 눈내리기 효과 (PC 전용) 옵션을 선택합니다.

5. 섹션 설정 창 오른쪽 상단에 위치한 닫기 ✕ 아이콘을 클릭해 설정을 완료합니다.
6. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
7. 섹션 배경에 눈내리기 효과가 정상적으로 동작하는지 확인합니다.
8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

비주얼섹션을 사용 중이세요?

비주얼섹션에도 비주얼 설정 창을 열어 눈내리기 효과를 적용할 수 있습니다.

비주얼섹션 사용하기

도움말에 찾으시는 답변이 없으신가요? 문의하기

아임웹 디자인 모드에서 지도 위젯을 사용하면 구글 지도 또는 네이버 지도를 통해 위치 정보를 공유하면서 다양한 지도 효과와 디자인을 적용할 수 있게 됩니다. 그러나, 지도 위젯을 사용하기 위해선 내 사이트에 구글 지도 플랫폼 또는 네이버 클라우드 플랫폼을 통해 지도 API 설정을 완료해야 합니다.

만약 API 설정을 하지 않고, 위치 정보만 간단히 페이지에 표시하는 경우, 구글 지도 공유 기능을 활용해 빠르게 지도를 추가해 볼 수 있습니다. 이 방법은 개인 사용자가 지도를 제어함에 있어 제한이 있지만 매우 간편합니다.

삽입방법

1단계: 구글 지도 임베드 코드 복사하기

1. 구글 지도에 접속합니다.

2. 왼쪽 상단의 검색필드에 장소명 또는 주소를 입력하고, 키보드 Enter 키를 눌러 장소를 검색합니다.

3. 검색 결과에 원하는 장소가 나오면 공유 아이콘을 클릭합니다.

4. 공유 팝업이 나오면 지도 퍼가기 탭을 클릭합니다.
5. HTML 복사 를 클릭해 퍼가기 태그를 복사합니다.

2단계: 코드 위젯 추가 및 임베드 코드 입력하기

1. 아임웹 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해 지도를 삽입할 메뉴로 이동하거나 새롭게 생성합니다. 메뉴 추가하기
3. 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭 후 코드 위젯을 클릭해 추가합니다.
4. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 코드 설정 을 클릭합니다.
6. 코드 입력 칸에 위 1단계에서 복사한 HTML 태그를 붙여넣습니다. (단축키: CTRL + V)
7. 붙여넣은 HTML에서 width 와 height 속성 값을 수정하여 지도의 크기를 변경할 수 있습니다. 아래의 그림과 설명을 참고해 width 와 height 속성의 따옴표 안쪽 값을 수정해 주세요.

• width: 지도의 가로 길이는 100% 를 입력합니다.
• height: 지도의 세로 길이를 숫자 형식으로 입력합니다. (세로 길이는 % 단위를 사용할 수 없습니다. 입력한 숫자는 픽셀 단위로 처리됩니다.)

8. 저장 버튼을 클릭해 코드 설정을 완료합니다.

(선택 사항) 3단계: 지도를 가로 100% 채우기

지도를 브라우저 가로 길이에 맞춰 가로로 100% 채워 표시할 수 있습니다.

1.  코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
2. 컨텍스트 메뉴가 나오면 가로 영역 확장 을 클릭합니다.
3. 지도가 가로로 100% 채워져 표시됩니다.

4단계: 미리보기 및 게시하기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 지도가 정상적으로 표시되는지 확인합니다.
3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

구글 또는 네이버 지도 API 설정하기

지도 게시판 위젯을 사용하거나 단일 지도의 스타일을 변경하고 싶은 경우, 지도 API 설정이 필요합니다. 아래 도움말에 따라 네이버 또는 구글 지도의 API를 설정하는 방법을 알아보세요.

• 네이버 지도 설정하기
• 구글 지도 설정하기

도움말에 찾으시는 답변이 없으신가요? 문의하기

비실물 상품(예약/임대/서비스)을 판매하는 경우 캘린더에 일정을 등록하고, 일정 클릭 시 해당 일정 관련 상품 상세페이지로 이동하도록 구성할 수 있습니다. 

시작에 앞서

1. 이 도움말을 진행하려면 쇼핑 기본설정을 완료해야 합니다. 쇼핑몰 시작하기
2. 아임웹의 예약 시스템은 현재까지 객실/숙박에 최적화 되어 있습니다. 따라서, 임대/서비스 예약 등 비실물 상품을 판매하는 경우, 비실물 상품 옵션 설정방법 도움말에 상품 구성을 일반 상품으로 설정하실 것을 권장합니다.

구현방법

1단계: 상품 주소(URL) 확인 및 메모하기

상품 주소(URL)를 확인하고, 메모장에 저장해 둡니다. 상품 주소는 차후 캘린더에 상품을 표시할 때 링크로 활용됩니다. 

1. 내 사이트 관리자 페이지에 접속합니다. 접속방법
2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다.
3. 상품명 오른쪽 끝의 새 탭으로 열기 아이콘을 클릭합니다.
4. 새 브라우저 탭이 열리며 해당 상품 상세페이지가 열립니다.

5. 브라우저 주소창의 URL 링크를 확인하고 메모장에 복사해둡니다.

6. 위 3~5번 과정을 반복해 필요한 상품 주소를 모두 준비합니다.

2단계: 캘린더 추가하기

디자인 모드에 접속해 캘린더 위젯을 추가하고 꾸며줍니다.

1.  관리자 페이지 왼쪽 상단의 디자인모드 를 클릭합니다.
2. 디자인 모드에 진입하면, 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
3. 캘린더 위젯을 선택합니다.
4. 캘린더 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
5. 컨텍스트 메뉴가 나오면 캘린더 설정 을 클릭합니다.
6. 아래의 그림과 설명을 참고해 캘린더 설정을 완료합니다.

• 캘린더 이름: 캘린더 이름을 입력합니다.
• 분류: 캘린더 카테고리를 사용해, 일정마다 색상으로 표시해줄 수 있습니다. 월별 상품 종류가 많은 경우 일정 구분에 유용합니다.
• 읽기 권한: 일정을 볼 수 있는 사용자를 지정합니다.
• 작성 권한: 일정을 추가/편집 할 수 있는 사용자를 지정합니다. 이 경우 소유자 또는 선택그룹 사용자를 선택할 수 있습니다.

7. 캘린더 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

3단계: 캘린더 일정 추가 및 링크 걸기

1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
2. 캘린더가 나오면 일정을 추가하려는 날짜 칸을 마우스로 클릭합니다.
3. 일정 작성 칸에 상품명을 입력하고, URL 입력 칸에 위 1단계에서 복사한 상품 주소(URL)를 입력합니다.
4. 왼쪽 하단 일정 추가를 클릭해 등록을 완료합니다.
5. (선택 사항) 위 2~4번 과정을 반복해 필요한 만큼 추가합니다.

4단계: 확인 및 적용하기

1. 새로운 구글 크롬 시크릿 창을 켜고, 캘린더가 삽입된 페이지로 이동합니다. 크롬 시크릿 창 켜는 방법

   참고: 소유자 또는 운영진 그룹은 로그인된 상태에서 캘린더 일정을 클릭하면, 링크한 곳으로 이동되지 않습니다. 캘린더 일정 링크를 테스트하려면 로그아웃을 해야 하는데, 이때 시크릿창을 활용하면 아임웹에서 로그아웃할 필요 없이 간편하게 테스트가 가능합니다.

2.  캘린더 일정 클릭 시 해당되는 상품 상세페이지로 이동하는지 확인합니다.
3. 아임웹 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기