디자인 모드에서 페이지를 꾸밀 때 사용되는 가장 작은 단위의 구성요소입니다. 이미지, 텍스트, 동영상, 버튼, 게시판, 갤러리 등 다양한 위젯들이 준비되어 있습니다. 메뉴를 추가하고 위젯을 사용해 페이지에 글이나 그림, 동영상 등 콘텐츠를 추가해보세요. *위젯은 업데이트에 따라 계속해서 추가될 수 있습니다.
위젯 설정을 열어 각 위젯이 가진 고유의 설정을 변경할 수 있습니다. 이 도움말에서는 이미지 위젯을 기준으로 설정 창을 여는 방법을 설명합니다.
위젯 설정 열기
위젯을 추가합니다.
추가한 위젯 위에 마우스 포인터를 올립니다.
마우스 오른쪽 버튼을 클릭합니다. 참고: 아래 그림은 이미지 위젯에 마우스 오른쪽 버튼을 클릭한 장면입니다.
이미지 설정을 클릭합니다. (위젯에 따라 설정 앞 이름이 달라집니다.) 예시: 갤러리 설정, 버튼 설정 등
디자인 요소 위젯
페이지를 꾸미기 위한 다양한 위젯들이 준비되어 있습니다.
이미지
페이지에 이미지를 삽입할 때 사용합니다.
이미지 맵
하나의 이미지에 여러 링크 영역을 구현할 때 사용합니다.
텍스트
페이지에 텍스트를 삽입할 때 사용합니다. 텍스트 위젯은 글자 입력 외 표(테이블) 삽입, 이미지 첨부, 코드 입력 등 다양한 작업이 가능합니다.
여백
페이지에 여백을 추가할 때 사용합니다. 여백 위젯은 다음 그림처럼 흐린 점선으로 표시되며 실제로는 공간만 차지할 뿐 다른 방문자에게는 보이지 않습니다.
동영상
페이지에 동영상을 삽입할 수 있습니다. 유튜브(YouTube) 또는 비메오(Vimeo)에 업로드한 동영상 주소(URL)를 입력하면 자동으로 삽입됩니다.
가로선
문단이나 콘텐츠 묶음 사이를 명확하게 구분할 때 가로선 위젯을 사용합니다. 그 외 디자인적인 용도로도 사용될 수 있습니다.
버튼
페이지에 버튼을 삽입할 수 있습니다. 버튼을 통해 특정 위치로 유도하거나 전화걸기, 이메일 발송, 파일 다운로드 등 다양한 링크 방식을 설정할 수 있습니다.
메뉴 리스트
본문 영역에 서브 메뉴를 표시할 때 사용합니다. 메뉴 리스트 위젯 추가 후 메뉴(수정, 삭제 등)에 변경사항이 있는 경우 자동 반영되어 수정됩니다.
타이틀
현재 메뉴명을 출력합니다. 출력한 메뉴명의 크기, 색상, 굵기 등을 변경할 수 있습니다.
단일 지도
하나의 위치정보를 사용자에게 알려주고자 할 때 사용합니다. 예 : 찾아오시는 길 또는 Contact 메뉴 등
코드
고급 사용자를 위한 기능으로 외부 모듈 및 사용자 정의 스타일시트 및 스크립트 등을 내 사이트에 삽입하고 싶은 경우 사용할 수 있습니다.
아이콘
그래픽 툴이나 이미지를 사용하지 않고 간편하게 아이콘을 삽입할 수 있습니다.
비주얼 섹션
슬라이드 방식으로 동작하는 비주얼 섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보를 알리는데 사용됩니다.
이 도움말에서는 준비된 예제에 따라 위젯을 추가, 배치하고, 그리드 수를 조절해 레이아웃을 디자인하는 방법을 설명합니다.
튜토리얼을 진행하기에 앞서 다음 사항들을 미리 익혀두시면 더 재밌고 빠르게 그리드 활용법을 배우실 수 있습니다.
위젯 배치 & 그리드 실습하기
총 7개의 튜토리얼에 따라 디자인 모드에서 위젯을 배치하고 그리드 조절하는 방법을 배워봅니다.
[실습] 1x1 위젯 배치, 정렬하기
이미지, 게시판, 갤러리와 같은 위젯은 단독으로 정렬이 불가능합니다. 이 경우 여백 위젯을 활용해 정렬할 수 있습니다. 여백 위젯을 사용하지 않는 경우 12칸 그리드에 꽉 차게 배치됩니다.
[실습] 3x1 위젯 배치하기
한 줄에 이미지 위젯 3개를 3열로 배치해 봅니다. 단순 배치 시 각 위젯의 그리드 수는 균등하게 나눠져 배치됩니다. 필요에 따라 특정 위젯의 그리드 수만 다르게 적용해 위젯의 크기를 조절할 수도 있습니다.
[실습] 3x2 이미지, 텍스트 위젯 배치하기
한 줄에 이미지 위젯 3개를 3열로 배치하고, 각 이미지 위젯 아래 텍스트 위젯을 배치해 봅니다. 주제를 세분화하여 정보를 제공할 때 유용합니다. 예) 서비스 종류, 팀원 소개, 상품 종류 등
[실습] 3x3 지그재그 배치하기
이미지와 텍스트를 지그재그로 배치해 봅니다. 소주제를 더욱 확실하게 구분하여 정보를 전달할 때 사용될 수 있습니다.
[실습] 4x2 이미지, 텍스트, 여백 배치하기
중앙에 이미지를 2열로 배치하고, 이미지 양끝에 여백과 텍스트를 추가하는 방법을 배워봅니다.
[실습] 4x4 목록형 배치하기
이미지 위젯과 텍스트 위젯을 교차하여 목록 형식으로 배치해 봅니다. 필요에 따라 버튼을 추가해 클릭 시 세부정보 페이지로 이동되도록 구성할 수 있습니다.
[실습] 복합 배치하기
여러 위젯들을 다양한 방식으로 배치할 수 있습니다.
위젯이란?
디자인 모드에서 페이지를 꾸밀 때 사용되는 가장 작은 단위의 구성요소입니다. 이미지, 텍스트, 동영상, 버튼, 게시판, 갤러리 등 다양한 위젯들이 준비되어 있습니다. 메뉴를 추가하고 위젯을 사용해 페이지에 글이나 그림, 동영상 등 콘텐츠를 추가해보세요. *위젯은 업데이트에 따라 계속해서 추가될 수 있습니다.
위젯 설정을 열어 각 위젯이 가진 고유의 설정을 변경할 수 있습니다. 이 도움말에서는 이미지 위젯을 기준으로 설정 창을 여는 방법을 설명합니다.
위젯 설정 열기
마우스 오른쪽 버튼을 클릭합니다.
참고: 아래 그림은 이미지 위젯에 마우스 오른쪽 버튼을 클릭한 장면입니다.
예시: 갤러리 설정, 버튼 설정 등
디자인 요소 위젯
페이지를 꾸미기 위한 다양한 위젯들이 준비되어 있습니다.
이미지
페이지에 이미지를 삽입할 때 사용합니다.
이미지 맵
하나의 이미지에 여러 링크 영역을 구현할 때 사용합니다.
텍스트
페이지에 텍스트를 삽입할 때 사용합니다. 텍스트 위젯은 글자 입력 외 표(테이블) 삽입, 이미지 첨부, 코드 입력 등 다양한 작업이 가능합니다.
여백
페이지에 여백을 추가할 때 사용합니다. 여백 위젯은 다음 그림처럼 흐린 점선으로 표시되며 실제로는 공간만 차지할 뿐 다른 방문자에게는 보이지 않습니다.
동영상
페이지에 동영상을 삽입할 수 있습니다. 유튜브(YouTube) 또는 비메오(Vimeo)에 업로드한 동영상 주소(URL)를 입력하면 자동으로 삽입됩니다.
가로선
문단이나 콘텐츠 묶음 사이를 명확하게 구분할 때 가로선 위젯을 사용합니다. 그 외 디자인적인 용도로도 사용될 수 있습니다.
버튼
페이지에 버튼을 삽입할 수 있습니다. 버튼을 통해 특정 위치로 유도하거나 전화걸기, 이메일 발송, 파일 다운로드 등 다양한 링크 방식을 설정할 수 있습니다.
메뉴 리스트
본문 영역에 서브 메뉴를 표시할 때 사용합니다. 메뉴 리스트 위젯 추가 후 메뉴(수정, 삭제 등)에 변경사항이 있는 경우 자동 반영되어 수정됩니다.
타이틀
현재 메뉴명을 출력합니다. 출력한 메뉴명의 크기, 색상, 굵기 등을 변경할 수 있습니다.
단일 지도
하나의 위치정보를 사용자에게 알려주고자 할 때 사용합니다. 예 : 찾아오시는 길 또는 Contact 메뉴 등
코드
고급 사용자를 위한 기능으로 외부 모듈 및 사용자 정의 스타일시트 및 스크립트 등을 내 사이트에 삽입하고 싶은 경우 사용할 수 있습니다.
아이콘
그래픽 툴이나 이미지를 사용하지 않고 간편하게 아이콘을 삽입할 수 있습니다.
비주얼 섹션
슬라이드 방식으로 동작하는 비주얼 섹션은 사이트의 대표적인 아이덴티티를 나타내거나 중요한 정보를 알리는데 사용됩니다.
검색
방문자가 사이트 내 콘텐츠를 검색할 수 있도록 검색 위젯을 추가할 수 있습니다.
상단 전용 위젯
상단 디자인을 위한 다양한 위젯들이 준비되어 있습니다. 본 도움말에서는 상단 전용 위젯들을 소개합니다.
로고 위젯
상단에 로고를 추가합니다. 로고는 텍스트(글꼴 선택 가능)와 이미지 모두 사용 가능합니다.
선 위젯
상단에 선을 추가할 수 있습니다. 상단전용 선 위젯은 상단 영역 구조상 가로선뿐만 아니라 세로선도 추가 가능합니다.
자세히 알아보기
링크/버튼 위젯
상단에 기본 메뉴 외 링크 또는 버튼을 추가할 때 사용합니다.
메뉴 위젯
메뉴 위젯을 삽입해 상단 영역에 메인 메뉴를 추가할 수 있으며, 설정을 통해 하위 메뉴의 디자인 및 스타일을 변경할 수 있습니다.
로그인/장바구니 위젯
상단에 회원가입, 로그인, 장바구니, 마이페이지 버튼을 추가할 수 있습니다. 회원가입 및 쇼핑 기능이 필요한 경우 사용합니다.
다국어 위젯
국가별 사이트로 전환할 수 있는 언어 전환 버튼이 표시됩니다. 글로벌 버전을 사용하면서, 새 언어 사이트를 생성한 경우 작동합니다. 총 6개 국어(한국어, 영어, 일본어, 중국어, 중국어 번체, 스페인어, 베트남어)를 지원합니다.
메뉴 버튼 위젯
메뉴 버튼 클릭 시 사이드에서 메뉴가 나타나는 위젯입니다. 상단에 메인 메뉴를 표시하지 않는 경우 사용합니다.
모바일 전용 메뉴 위젯
모바일 전용 메뉴를 상단 영역 하단에 표시합니다. *모바일 뷰포트에서만 작동
DB 요소 위젯
클릭 한 번으로 게시판, 갤러리, 캘린더, 입력폼, 쇼핑, 예약 위젯을 간편하게 설치할 수 있습니다.
게시판
클릭 한 번으로 간편하게 게시판을 추가할 수 있습니다. 게시판은 메뉴(페이지)당 한 개만 추가 가능합니다. 한 개 메뉴에 여러 개 게시물을 표시하려면 최신글 위젯을 활용해보세요.
갤러리
갤러리 위젯은 이미지(동영상) 및 제목, 설명 텍스트의 묶음이며 다양한 방식으로 표현할 수 있습니다. 이미지(동영상) 위젯으로도 비슷한 구성은 가능하지만 갤러리 위젯만으로 표현할 수 있는 독특한 요소들도 있기에 다양한 위젯들로 함께 구성해보시면 좋습니다.
캘린더
달력을 페이지에 추가하고, 날짜마다 일정을 등록해 방문자들에게 보여주거나 알릴 수 있습니다.
입력폼
입력폼 위젯은 신청서를 접수받거나 각종 설문조사, 의견 등을 사용자로부터 제출 받을 때 사용하는 위젯입니다. 게시판과 달리 항목을 다양하게 구성할 수 있으며, 사용자는 제출한 정보를 볼 수 없습니다.
지도 게시판
여러 위치정보를 한 번에 표시하고자 할 때 사용합니다. 예를 들어 서대문구에 있는 모든 음식점 정보를 표시하거나, 프랜차이즈 가맹점 위치를 표시하고자 할 때 사용할 수 있습니다.
단, 개인정보법 개정 이후 개인 위치정보 기능을 사용하려면 SSL이 필수로 설치 되어야 합니다.
쇼핑 & 쇼핑 기획전
페이지에 상품을 진열하고 판매할 때 사용합니다. 쇼핑 위젯은 메뉴 별로 한 개만 사용 가능하며, 쇼핑 기획전은 여러 개 추가 가능합니다. 상세한 쇼핑 설정방법은 다음 도움말을 참조하세요.
최신글
최신글 위젯을 사용해 특정 게시판(들)의 최신글, 인기글을 모아 보여줄 수 있습니다. 최신글 위젯은 게시판 위젯과 다르게 한 개 메뉴에 여러 개 추가할 수 있습니다.
예약
객실/숙박업에 필요한 예약 상품을 진열하고 판매할 때 사용합니다. 예약 캘린더에 상품을 표시하려면 관리자 메뉴에서 예약 상품을 우선 추가해야 합니다. 상세 설정방법은 다음 도움말을 확인해주세요.