화면 단위로 부드럽게 스크롤되는 풀페이지를 제작할 수 있습니다. 이 도움말에서는 풀페이지를 디자인하는 전체적인 과정을 설명합니다.
제작방법
1단계: 비주얼섹션 추가 및 풀페이지 모드 선택하기
풀페이지 모드를 만들려면 비주얼섹션이 필요합니다. 이 단계에서는 새 메뉴에 비주얼섹션을 추가하고, 일반 비주얼섹션을 풀페이지 모드로 변경하는 방법을 설명합니다.
디자인 모드에 접속합니다. 접속방법
왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 상단 메뉴 오른쪽 끝에 위치한 ⨁를 클릭해 새로운 메뉴를 생성합니다. 메뉴 추가하기
왼쪽 상단의 위젯 추가 + 아이콘을 클릭하고, 비주얼섹션을 클릭합니다.
비주얼섹션 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 비주얼 설정 을 클릭합니다.
비주얼 설정 창 상단의 디자인 탭을 클릭합니다.
모드 항목에서 풀페이지 모드 옵션을 선택합니다.
2단계: 새로운 슬라이드 추가하기
풀페이지 디자인을 적용할 슬라이드를 추가합니다. 페이지 상하 스크롤 시 이 슬라이드 단위로 화면이 전환됩니다.
비주얼 설정 창 상단의 비주얼 섹션 탭을 클릭합니다.
비주얼 설정 창 왼쪽 상단의 ⨁ 새로운 슬라이드를 클릭해, 슬라이드를 추가합니다. 슬라이드는 여러 개 추가할 수 있습니다. 필요한 만큼 추가해 주세요. 참고: 아래의 그림은 총 4개의 새로운 슬라이드를 추가했을 때를 캡쳐한 화면입니다.
3단계: 추가한 슬라이드 디자인하기
슬라이드를 디자인합니다. 배경 이미지를 추가하고, 텍스트, 이미지 등 콘텐츠를 추가해 보세요.
위 2단계에서 추가한 슬라이드 중 하나를 마우스로 클릭합니다. (이 도움말에서는 가장 첫 번째 슬라이드를 선택했습니다.)
배경 설정 항목에서 슬라이드에 배경 이미지를 추가합니다.
하단의 텍스트 에디터에 배경 이미지가 삽입되면 텍스트를 작성하고 편집합니다. 이미지를 첨부하거나, 링크를 걸 수도 있으며, 왼쪽/가운데/오른쪽 정렬을 변경할 수도 있습니다. 참고: 비주얼섹션에 관한 더 많은 도움말은 이 문서의 가장 아래 위치한 '관련 도움말' 항목을 확인해 주세요.
위 1~3번 과정을 반복해 남은 슬라이드를 모두 디자인 완료합니다.
(선택 사항) 4단계: 이용약관 및 저작권 표시하기
풀페이지 모드에는 기본 하단 섹션이 표시되지 않으므로, 하단 정보 항목에 사업자정보, 이용약관, 저작권 문구 등의 표시를 별도로 설정해야 합니다.
중요: 개인정보를 수집(회원가입, 상품 판매 등)하는 경우, 반드시 하단 정보 항목에 쇼핑몰 하단 법적 필수 정보(사업자정보, 이용약관, 개인정보처리방침 등)를 작성해 주세요.
아임웹 디자인 모드에서 지도 위젯을 사용하면 구글 지도 또는 네이버 지도를 통해 위치 정보를 공유하면서 다양한 지도 효과와 디자인을 적용할 수 있게 됩니다. 그러나, 지도 위젯을 사용하기 위해선 내 사이트에 구글 지도 플랫폼 또는 네이버 클라우드 플랫폼을 통해 지도 API 설정을 완료해야 합니다.
만약 API 설정을 하지 않고, 위치 정보만 간단히 페이지에 표시하는 경우, 구글 지도 공유 기능을 활용해 빠르게 지도를 추가해 볼 수 있습니다. 이 방법은 개인 사용자가 지도를 제어함에 있어 제한이 있지만 매우 간편합니다.
삽입방법
1단계: 구글 지도 임베드 코드 복사하기
구글 지도에 접속합니다.
왼쪽 상단의 검색필드에 장소명 또는 주소를 입력하고, 키보드 Enter 키를 눌러 장소를 검색합니다.
검색 결과에 원하는 장소가 나오면 공유 아이콘을 클릭합니다.
공유 팝업이 나오면 지도 퍼가기 탭을 클릭합니다.
HTML 복사 를 클릭해 퍼가기 태그를 복사합니다.
2단계: 코드 위젯 추가 및 임베드 코드 입력하기
아임웹 디자인 모드에 접속합니다. 접속방법
왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해 지도를 삽입할 메뉴로 이동하거나 새롭게 생성합니다. 메뉴 추가하기
왼쪽 상단의 위젯 추가 + 아이콘을 클릭 후 코드 위젯을 클릭해 추가합니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 코드 설정 을 클릭합니다.
코드 입력 칸에 위 1단계에서 복사한 HTML 태그를 붙여넣습니다. (단축키: CTRL + V)
붙여넣은 HTML에서 width 와 height 속성 값을 수정하여 지도의 크기를 변경할 수 있습니다. 아래의 그림과 설명을 참고해 width 와 height 속성의 따옴표 안쪽 값을 수정해 주세요.
width: 지도의 가로 길이는 100% 를 입력합니다.
height: 지도의 세로 길이를 숫자 형식으로 입력합니다. (세로 길이는 % 단위를 사용할 수 없습니다. 입력한 숫자는 픽셀 단위로 처리됩니다.)
8. 저장 버튼을 클릭해 코드 설정을 완료합니다.
(선택 사항) 3단계: 지도를 가로 100% 채우기
지도를 브라우저 가로 길이에 맞춰 가로로 100% 채워 표시할 수 있습니다.
코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
컨텍스트 메뉴가 나오면 가로 영역 확장 을 클릭합니다.
지도가 가로로 100% 채워져 표시됩니다.
4단계: 미리보기 및 게시하기
디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
지도가 정상적으로 표시되는지 확인합니다.
문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.
구글 또는 네이버 지도 API 설정하기
지도 게시판 위젯을 사용하거나 단일 지도의 스타일을 변경하고 싶은 경우, 지도 API 설정이 필요합니다. 아래 도움말에 따라 네이버 또는 구글 지도의 API를 설정하는 방법을 알아보세요.
동영상 썸네일 이미지 배경과 섹션 배경색을 똑같은 색으로 지정해, 다음 그림과 같이 동영상이 섹션 배경과 일체화된 디자인으로 꾸밀 수 있습니다.
앞서 완료해야 할 사항
본 튜토리얼을 진행하려면 동영상 썸네일 이미지가 필요합니다. 이미지 제작 시 주의해야 할 점은 다음과 같습니다.
샘플 이미지 다운로드
원활한 튜토리얼 진행을 위해 아래 샘플 이미지(350KB, ZIP파일)를 내려받아 사용하실 수 있습니
참고: 본 샘플 이미지의 저작권은 (주)아임웹에 있습니다.
다운로드
제작방법
1단계: 새로운 메뉴 추가하기
새로운 메뉴를 추가합니다. 기존 메뉴가 있는 경우 해당 메뉴로 이동합니다.
2단계: 동영상 위젯 추가하기
배경 위에 동영상 위젯을 추가하고, 동영상을 연결합니다.
3단계: 섹션 배경색 변경하기
동영상 위젯이 삽입된 섹션의 배경색을, 동영상 위젯 썸네일 이미지의 배경색과 같은 색상으로 지정하는 과정입니다.
참고: 동영상 위젯에 마우스 포인터를 올리면 안 됩니다. 위젯이 없는 곳에 마우스 포인터를 올려주세요.
(선택 사항) 4단계: 섹션 그리드 제거하기
섹션 그리드란 쉽게 말해 위젯과 위젯 사이의 간격을 의미합니다. 만약 아래와 같이 이미지 일부가 잘린 동영상 썸네일 이미지를 사용하는 경우 섹션 그리드를 제거하면, 여백 없이 섹션에 딱 붙여 배치할 수 있습니다.
동영상 썸네일 이미지 위, 아래로 여백이 제거 되었는지 확인합니다.
5단계: 미리보기 및 게시하기
도움말에 찾으시는 답변이 없으신가요? 문의하기
디자인 모드에서 로그인과 회원가입 메뉴로 이동해 임의로 디자인을 변경할 수 있습니다. 로그인 및 가입 메뉴에는 통합 위젯이 사용되므로 일부만 디자인 변경할 수 있습니다.
설정방법
1단계: 로그인/가입 모달로 사용 해제하기
공통 디자인 설정 메뉴 바깥 영역을 클릭하고, 저장 버튼을 클릭해 설정을 완료합니다.
2단계: 로그인/가입 메뉴 디자인하기
메뉴를 클릭합니다.
위젯을 추가하거나, 섹션 배경을 변경해 로그인 메뉴를 디자인합니다
3단계: 미리보기 및 게시하기
도움말에 찾으시는 답변이 없으신가요? 문의하기
디자인 모드에서 그룹 메뉴를 만들면, 그룹 메뉴의 상위 메뉴에 마우스 포인터를 올렸을 때, 아래 그림처럼 하위 메뉴가 나타납니다. 이 같은 메뉴를 '풀다운 메뉴' 라고 합니다.
이 도움말에서는 메뉴 관리에서 메뉴 설정을 열어 풀다운 메뉴를 비활성시키는 방법을 설명합니다.
설정방법
그룹 메뉴에서 최상위 메뉴(또는 상위 메뉴)의 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭해 메뉴 설정 창을 열어줍니다.
메뉴 설정 창에서 풀다운 메뉴 사용 안함 옵션을 선택합니다.
메뉴 버튼 위젯을 통해 추가한 상단 사이드 메뉴에, 하위 메뉴를 표시할 수 있습니다.
설정방법
참고: 메뉴 버튼 위젯을 이미 추가했다면 이 과정은 건너 뛰어도 무방합니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기
테이블(표)를 사용해 비주얼섹션의 한 줄에 텍스트와 이미지를 나란히 삽입할 수 있습니다. 이 방법은 비주얼섹션뿐 아니라 텍스트 에디터를 제공하는 모든 위젯 및 관리자 페이지에서 적용 가능합니다.
1단계: 비주얼섹션 추가 및 설정 열기
메뉴에 비주얼섹션을 추가하고, 비주얼섹션의 설정을 여는 과정입니다.
2단계: 슬라이드 선택 및 배경색 채우기
비주얼섹션 슬라이드의 샘플 콘텐츠는 모두 삭제하고, 배경색을 지정하는 과정입니다.
참고: 새로운 슬라이드를 클릭해, 슬라이드를 추가하거나, 슬라이드 썸네일 상단의 ⨂를 클릭해 삭제합니다.
배경속성 / 배경색 항목에서, 를 클릭해, 원하는 배경색을 지정합니다.
3단계: 테이블 추가 및 테두리 없애기
테이블(표)을 추가하고, 추가한 테이블의 테두리를 없애는 과정을 다룹니다.
4단계: 테이블 셀에 텍스트 및 이미지 첨부하기
테이블 셀에 텍스트와 이미지를 첨부하고, 이미지 크기를 수정하는 과정입니다.
참고: 폭과 높이를 빈 칸으로 두면, 테이블 셀 크기에 맞춰 꽉 차게 됩니다.
5단계: 테이블 셀 가로 크기 지정하기
테이블은 처음 생성 시, 선택하신 열과 행의 수에 따라 자동으로 크기가 지정됩니다. 우리는 이 단계에서 직접 테이블의 가로폭을 변경해줄 것입니다.
주의: 코드보기 아이콘을 꼭 다시 클릭해 주세요. 비주얼 설정 창을 바로 끄면 수정한 코드가 다시 초기화 될 수 있습니다.
아래 그림처럼 비주얼섹션에 테두리 없는 테이블이 있고, 테이블 안에 텍스트와 이미지가 한 줄로 형식으로 삽입되는 걸 볼 수 있습니다.
6단계: 미리보기 및 게시하기
7단계: 모바일 버전 편집하기
모바일은 PC와 달리 가로폭이 좁기 때문에, 테이블을 2열로 만들어 텍스트와 이미지를 추가하는 건 보기 안 좋을 수 있습니다. 따라서 이 도움말에서는 비주얼섹션을 모바일에 맞게 재편집하는 방법을 설명합니다.
디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.
비주얼섹션의 이미지가 어둡게 보이세요?
원인은 대개 비주얼섹션에 음영 옵션이 추가되어 있기 때문입니다. 아래 도움말 링크를 클릭해 비주얼섹션 음영을 완전히 투명하게 바꾸는 방법을 알아보세요.
비주얼섹션 배경 이미지가 어둡게 보입니다.
도움말에 찾으시는 답변이 없으신가요? 문의하기
메뉴가 그룹으로 구성된 경우, 메인메뉴에 마우스 포인터를 올리면 아래 그림처럼 서브메뉴가 표시됩니다. 사용자는 상단설정에서 메뉴 위젯의 설정을 열어, 서브메뉴 텍스트의 크기, 배경색, 메뉴 간 간격 등 스타일을 변경할 수 있습니다.
이 도움말에서는 상단 메뉴에서 서브메뉴 스타일을 변경하는 방법을 소개합니다.
설정방법
1단계: 상단설정 진입하기
서브메뉴는 상단 영역에 있는 메뉴로 상단설정에서 변경할 수 있습니다. 1단계에서는 상단설정으로 진입하는 방법을 설명합니다.
컨텍스트 메뉴가 나오면 메뉴 설정 을 클릭합니다.
2단계: 서브메뉴 스타일 변경하기
이 도움말에서는 메뉴 설정에서 서브메뉴 스타일을 변경하는 과정을 설명합니다.
3단계: 미리보기 및 게시하기
도움말에 찾으시는 답변이 없으신가요? 문의하기
화면 단위로 부드럽게 스크롤되는 풀페이지를 제작할 수 있습니다. 이 도움말에서는 풀페이지를 디자인하는 전체적인 과정을 설명합니다.
제작방법
1단계: 비주얼섹션 추가 및 풀페이지 모드 선택하기
풀페이지 모드를 만들려면 비주얼섹션이 필요합니다. 이 단계에서는 새 메뉴에 비주얼섹션을 추가하고, 일반 비주얼섹션을 풀페이지 모드로 변경하는 방법을 설명합니다.
모드 항목에서 풀페이지 모드 옵션을 선택합니다.
2단계: 새로운 슬라이드 추가하기
풀페이지 디자인을 적용할 슬라이드를 추가합니다. 페이지 상하 스크롤 시 이 슬라이드 단위로 화면이 전환됩니다.
참고: 아래의 그림은 총 4개의 새로운 슬라이드를 추가했을 때를 캡쳐한 화면입니다.
3단계: 추가한 슬라이드 디자인하기
슬라이드를 디자인합니다. 배경 이미지를 추가하고, 텍스트, 이미지 등 콘텐츠를 추가해 보세요.
참고: 비주얼섹션에 관한 더 많은 도움말은 이 문서의 가장 아래 위치한 '관련 도움말' 항목을 확인해 주세요.
(선택 사항) 4단계: 이용약관 및 저작권 표시하기
풀페이지 모드에는 기본 하단 섹션이 표시되지 않으므로, 하단 정보 항목에 사업자정보, 이용약관, 저작권 문구 등의 표시를 별도로 설정해야 합니다.
비주얼 설정 창 가운데 하단 정보 항목과 하단 표시 옵션을 선택합니다.
5단계: 미리보기 및 게시하기
관련 도움말
도움말에 찾으시는 답변이 없으신가요? 문의하기
섹션 배경에 눈이 내리는 효과를 적용합니다. 눈은 흰색으로 처리되어, 배경색이 같은 흰색 또는 그에 준하는 밝은 색으로 지정된 경우 표시되지 않는 것처럼 보일 수 있습니다.
설정방법
섹션 설정 창의 오른쪽 중앙에 위치한 눈내리기 효과 (PC 전용) 옵션을 선택합니다.
비주얼섹션을 사용 중이세요?
비주얼섹션에도 비주얼 설정 창을 열어 눈내리기 효과를 적용할 수 있습니다.
비주얼섹션 사용하기
도움말에 찾으시는 답변이 없으신가요? 문의하기
아임웹 디자인 모드에서 지도 위젯을 사용하면 구글 지도 또는 네이버 지도를 통해 위치 정보를 공유하면서 다양한 지도 효과와 디자인을 적용할 수 있게 됩니다. 그러나, 지도 위젯을 사용하기 위해선 내 사이트에 구글 지도 플랫폼 또는 네이버 클라우드 플랫폼을 통해 지도 API 설정을 완료해야 합니다.
만약 API 설정을 하지 않고, 위치 정보만 간단히 페이지에 표시하는 경우, 구글 지도 공유 기능을 활용해 빠르게 지도를 추가해 볼 수 있습니다. 이 방법은 개인 사용자가 지도를 제어함에 있어 제한이 있지만 매우 간편합니다.
삽입방법
1단계: 구글 지도 임베드 코드 복사하기
왼쪽 상단의 검색필드에 장소명 또는 주소를 입력하고, 키보드 Enter 키를 눌러 장소를 검색합니다.
검색 결과에 원하는 장소가 나오면 공유 아이콘을 클릭합니다.
2단계: 코드 위젯 추가 및 임베드 코드 입력하기
8. 저장 버튼을 클릭해 코드 설정을 완료합니다.
(선택 사항) 3단계: 지도를 가로 100% 채우기
지도를 브라우저 가로 길이에 맞춰 가로로 100% 채워 표시할 수 있습니다.
4단계: 미리보기 및 게시하기
구글 또는 네이버 지도 API 설정하기
지도 게시판 위젯을 사용하거나 단일 지도의 스타일을 변경하고 싶은 경우, 지도 API 설정이 필요합니다. 아래 도움말에 따라 네이버 또는 구글 지도의 API를 설정하는 방법을 알아보세요.
도움말에 찾으시는 답변이 없으신가요? 문의하기
비실물 상품(예약/임대/서비스)을 판매하는 경우 캘린더에 일정을 등록하고, 일정 클릭 시 해당 일정 관련 상품 상세페이지로 이동하도록 구성할 수 있습니다.
시작에 앞서
구현방법
1단계: 상품 주소(URL) 확인 및 메모하기
상품 주소(URL)를 확인하고, 메모장에 저장해 둡니다. 상품 주소는 차후 캘린더에 상품을 표시할 때 링크로 활용됩니다.
브라우저 주소창의 URL 링크를 확인하고 메모장에 복사해둡니다.
2단계: 캘린더 추가하기
디자인 모드에 접속해 캘린더 위젯을 추가하고 꾸며줍니다.
7. 캘린더 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
3단계: 캘린더 일정 추가 및 링크 걸기
4단계: 확인 및 적용하기
도움말에 찾으시는 답변이 없으신가요? 문의하기