갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (라이트박스 활용)

메뉴 이동 없이 갤러리 대표 이미지 클릭 시 여러 갤러리 이미지가 표시되도록 구성할 수 있습니다. 

메뉴 이동을 활용한 갤러리 위젯 응용 방법은 다음 도움말을 참조하세요.

구성 방법

1단계, 메뉴 추가하기

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 관리를 클릭합니다.
3. 상단 메뉴 오른쪽 끝 ⨁를 클릭합니다.
4. 메뉴명을 입력하고 확인을 누릅니다.

2단계, 갤러리 위젯 추가하기

1. 왼쪽 상단 아이콘을 클릭합니다.

2. 갤러리 위젯을 클릭합니다.

   

3단계, 이미지 추가하기

1. 갤러리 위젯에 마우스 오른쪽 버튼을 클릭합니다.
2. 갤러리 설정에서 왼쪽 상단 +이미지, 동영상 추가에서 이미지 추가를 클릭합니다.
3. 내 PC 이미지를 선택하고 업로드합니다.
   참고 : 미리 모든 이미지의 비율(4:3, 16:9 등)을 같게 편집해두시면 보다 깔끔하게 표시됩니다.

4단계, 갤러리 묶음으로 구성하기

1. 갤러리 설정 창 상단 디자인 탭을 클릭합니다.

2. 아래 설정 항목을 다음처럼 지정합니다.

   
   • 이미지 비율 : 편집하신 이미지 비율 선택 *필수
   • 한줄 표시 : 1개 *필수
   • 간격 : 0
   • 세로 줄 수 : 1줄 *필수
   • 이미지 음영 : rgba(0, 0, 0, 0) 을 입력
   • 라이트 박스 사용 안함 : 체크 해제 *필수

(선택 사항) 5단계, 갤러리 묶음 추가하기

1. 위 2-4단계를 반복해 원하는 만큼 추가합니다.

2. 갤러리 위젯을 다음 샘플 사이트처럼 배치합니다.

   

캘린더 위젯

위젯 소개

중요한 일정을 등록하고 방문자들에게 보여주거나 알릴 수 있습니다.

위젯 설정

위젯 설정에서 캘린더를 설정하고, 페이지에 접속해 일정을 추가할 수 있습니다.

1. 캘린더 위젯을 추가합니다.

2. 캘린더 위젯 설정을 엽니다.

   

캘린더 설정항목

캘린더 위젯 설정항목을 알아봅니다.

1. 캘린더 연동 : 기존 추가한 캘린더 일정 및 설정을 불러옵니다.
2. 캘린더 이름 : 새로운 캘린더 이름을 입력합니다. 향후 추가한 일정 및 캘린더 설정은 해당 이름으로 서버에 저장됩니다. 저장된 데이터(DB)는 관리자 메뉴 [컨텐츠 관리 - 캘린더 관리] 메뉴에서 확인할 수 있습니다.
3. 한줄 최소 높이 : 달력 한줄 높이를 지정합니다.
4. 분류 : 분류를 추가하여 유형에 따라 다른 색상으로 표현할 수 있습니다. 기본값은 사이트의 브랜드 색상입니다.
5. 읽기 권한 / 작성 권한 : 캘린더를 읽고 작성할 수 있는 권한을 설정합니다.
6. 기본 형식 / 기본 날짜 : 기본 달력 표시 형식과 날짜를 설정합니다.
7. 표시항목 : 캘린더 표시항목을 끄거나 켤 수 있습니다.

캘린더 활용하기

캘린더에 일정을 추가할 때는 디자인 모드가 아닌 페이지에서 추가합니다.

1. 캘린더 위젯이 추가된 페이지에 접속합니다.
2. 원하는 날짜를 클릭합니다.

3. 일정 내용을 입력합니다.

   
4. 왼쪽 하단 일정 추가를 클릭하면 달력에 추가됩니다.
5. (필요한 경우) 오른쪽 하단 상세 일정을 클릭해 일정 상세 정보를 추가합니다.

추가 정보

캘린더에서 날짜 클릭 시 다른 페이지로 이동하도록 설정할 수 있습니다. 

일정 추가 시 URL 입력에 이동할 링크 주소를 입력해주세요.

참조 : 관리자(혹은 작성자)의 경우 편집을 위해 날짜 클릭 시 편집 창이 뜨지만 일반 방문자의 경우 일정 클릭 시 바로 링크한 페이지로 이동합니다.

입력폼 위젯

위젯 소개

입력폼 위젯은 신청서를 접수받거나 각종 설문조사, 의견 등을 사용자로부터 제출 받을 때 사용하는 위젯입니다. 

게시판과 달리 항목을 다양하게 구성할 수 있으며, 사용자는 제출한 정보를 볼 수 없습니다.

위젯 설정

위젯 설정에서 입력폼을 설정하고 폼 구성요소를 설정할 수 있습니다.

1. 입력폼 위젯을 추가합니다.

2. 입력폼 위젯 설정을 엽니다.

입력폼 설정항목

입력폼 설정 항목 및 폼 구성방법을 알아봅니다.

1. 입력폼 기본 설정

1. 입력폼 연동 : 기존 입력폼 설정을 불러옵니다.
2. 입력폼 이름 : 새로운 입력폼을 만들 때 추가합니다. 향후 해당 입력폼으로 등록된 데이터(DB)는 입력한 이름으로 서버에 저장됩니다. 확인하려면 관리자 메뉴 [컨텐츠 관리 - 입력폼 관리]에서 가능합니다.
3. 완료 메시지 : 사용자가 응답 제출 이후 보게 될 문구를 설정합니다.
4. 버튼 텍스트 : 버튼명을 편집하고, 버튼 정렬(왼쪽, 가운데, 오른쪽, 가득참)을 변경할 수 있습니다.
5. 권한 : 입력폼 응답을 제출할 수 있는 권한을 설정합니다.
6. 응답 제출시 확인팝업 : 입력폼 제출 시 확인 경고창을 표시합니다.
7. 응답 수 제한 : 최대 입력폼 작성 가능한 숫자를 입력합니다.
8. 응답 후 자동 SMS : 응답 후 자동 발송될 SMS를 추가합니다.
9. 시작일 / 마감일 지정 : 입력폼 작성 가능한 시작일과 마감일을 지정합니다.
10. 개인정보 수집동의 : 정보통신망 이용촉진 및 정보보호 등에 관한 법률에 의해 이용자의 개인정보를 수집하거나 이용하려는 경우 이용자에게 알리고 동의를 받도록 규정하고 있습니다. 이러한 유형에 해당되는 경우 옵션을 활성화 합니다.
11. 정보 제3자 제공동의 : 응답 받은 내용을 제3자 정보 제공시 동의를 받습니다.
12. 사용자 정의 색상 설정: 입력폼의 기본 스타일과 색상은 공통 디자인의 입력 필드 스타일을 따르지만 예외적으로 다른 색상을 적용하고자 할 때 사용합니다.

2. 폼 추가하기

추가 버튼을 클릭해 폼을 추가합니다.

3. 폼 구성요소 편집하기

1. 빈 폼이 추가되면 입력폼 이름을 입력하고 오른쪽에 형식을 선택합니다. *단답형, 여러줄, 체크박스 등
2. 반드시 입력해야 하는 사항이라면 필수 옵션을 체크합니다.
3. (필요한 경우) 폼 별로 오른쪽 상단 X를 클릭해 삭제할 수 있습니다.

동영상 위젯

위젯 소개

유튜브(YouTube) 또는 비메오(Vimeo)에 업로드한 동영상 주소(URL)를 입력하여 페이지에 간편하게 동영상을 삽입할 수 있습니다.

위젯 설정

동영상 위젯 설정을 변경해 동영상을 연결하고 다양한 옵션을 추가할 수 있습니다.

1단계, 동영상 위젯을 추가합니다.
2단계, 동영상 위젯 설정 엽니다.
3단계, 동영상 설정 항목을 확인하고 설정 변경합니다.

1) 커버 이미지

유튜브 또는 비메오에 설정된 대표 이미지를 불러옵니다. 필요한 경우 직접 커버 이미지를 업로드할 수 있습니다.

2) 동영상 주소

유튜브 또는 비메오(Vimeo) 동영상 주소(URL)를 입력합니다.

3) 재생설정

• 클릭 시 재생 : 주변이 어두워지면서 확대된 크기로 동영상을 재생합니다. 동영상 위젯의 삽입 공간이 충분하지 않을 때 또는 동영상에 더 집중하게 만들고 싶을 때 추천합니다. 자동재생 기능과 라이트박스 기능은 함께 사용할 수 없습니다.
• 라이트 박스 : 동영상 재생 버튼을 누르면 주변부가 어두워지며 큰 화면으로 영상이 재생됩니다.
• 자동 재생 : 웹사이트가 로드되면서 동영상을 자동으로 재생합니다. 모바일 브라우저에서는 자동재생 기능이 차단되었으며, 데스크톱 브라우저 크롬(Chrome)에서는 무음일 때만 자동재생이 동작합니다. 자동재생 기능과 라이트박스 기능은 함께 사용할 수 없습니다.
• Hover 시 자동 재생 : 위젯에 마우스를 올릴 시 동영상을 재생합니다.

4) 옵션

• 반복 재생 : 동영상 재생이 끝나면 다시 처음부터 재생합니다.
• 제목 감추기 : 동영상 재생이 시작되기 전에 제목 정보를 표시하거나 감출 수 있습니다. *유튜브 적용 불가
• 플레이어 컨트롤 감추기 : 동영상 재생 시 진행상태바 및 툴바를 표시하거나 감춥니다. *유튜브 전용
• 음소거 : 동영상을 무음으로 재생합니다.

단일 지도 위젯

위젯 소개

위치 정보를 사용자에게 알려주고자 할 때 사용합니다. 주로 "찾아오시는 길" 또는 Contact 메뉴 등에서 많이 활용합니다.

지도 사용 전 필수 선행작업

지도 기능이 포함된 위젯을 사용하려면 앞서 지도 API 설정을 완료해야 합니다.

위젯 설정

1. 단일 지도 위젯을 추가합니다.

2. 단일 지도검색 위젯 설정을 엽니다.

   

단일 지도 설정항목

지도 종류
네이버 지도, Google 지도 중 하나를 선택할 수 있습니다. *지도를 사용하려면 네이버 또는 Google 지도 API 설정을 마쳐야 합니다. 

위 내용을 참조하세요.

주소
표시할 위치 주소를 입력합니다.

• 1단계, 주소의 전체 또는 일부를 입력하고 키보드 엔터(Enter)를 누릅니다. *예시 : 연희동 413-16

  
• 2단계, 주소 목록이 나타나면 하나를 선택합니다.
• 3단계, 위치 정보가 반영되면 상세 주소를 추가 입력합니다. *건물 층수나 호수 등
• 4단계, (필요한 경우) 핀의 위치를 변경합니다. 지도에서 위치를 더블클릭하고 적용 버튼을 누릅니다.

정보
핀에 말풍선으로 표시될 정보를 입력합니다.

효과
기본 지도의 확대 정도와 유형을 설정할 수 있습니다.

옵션

• 가로 100% 확장 : 사이트 본문폭을 넘어 브라우저 끝까지 100% 확장됩니다.
• 확대/축소 버튼 숨기기 : 확대/축소 버튼을 숨깁니다.
• 스트리트뷰 버튼 숨기기 : 스트리트뷰 버튼을 숨깁니다.
• 지도/위성 전환버튼 숨기기 : 지도/위성 전환버튼을 숨깁니다.
• 마우스 휠로 확대/축소 허용 : 네이버 지도에서 마우스 휠로 확대/축소가 되는 것을 허용합니다.
• 흑백 효과 : 지도에 흑백 효과를 적용합니다. *Internet Explorer 등 일부 브라우저에서는 적용되지 않습니다.

지도 게시판 위젯

위젯 소개

여러 위치정보를 한 번에 표시하고자 할 때 사용합니다. 

예를 들어 서대문구에 있는 모든 음식점 정보를 표시하거나, 프랜차이즈 가맹점 위치를 표시하고자 할 때 사용할 수 있습니다.

단, 개인정보법 개정 이후 개인 위치정보 기능을 사용하려면 SSL이 필수로 설치 되어야 합니다. 

지도 게시판 사용 전 필수 선행작업

지도 기능이 포함된 위젯을 사용하려면 앞서 지도 API 설정을 완료해야 합니다.

위젯 설정

위젯 설정에서 지도 게시판을 설정하고, 페이지에 접속해 지도게시글을 추가할 수 있습니다.

1. 지도 게시판 위젯을 추가합니다.

2. 지도 게시판 위젯 설정을 엽니다.

   
3. 설정을 완료하고 지도 게시판이 삽입된 페이지에 접속합니다.
4. 글쓰기를 클릭해 지도 게시물을 추가합니다.

지도 게시판 설정항목

지도 게시판 설정 메뉴를 알아봅니다.

1. 지도 연동 : 지도 위젯을 삭제하더라도 데이터는 삭제되지 않습니다.(단일 지도형 은 지도를 삭제할 경우 데이터가 사라집니다) 다른 메뉴에서 같은 지도 리스트 데이터를 사용하고자 할 때 이를 활용합니다. 연동된 지도 리스트 명을 알기 쉬운 말로 변경하여 사용하시기 권장합니다. (예: 성북구 맛집)
2. 지도 종류 : 네이버 지도 또는 구글 지도 중 하나를 선택합니다. *지도 API 설정이 앞서 완료되어야 합니다.
3. 카테고리 : 게시물 카테고리를 추가합니다. 차후 카테고리 별 게시물만 모아 보기/표시가 가능합니다.
4. 정보 : 게시물 보기, 읽기, 등록, 댓글 권한을 설정합니다.
5. 글쓰기 : 대표 이미지 지정 기능 사용유무를 선택합니다.
6. 작성자 표시방식 : 작성자 표시방식을 선택합니다.
7. 옵션 : 지도게시판에 대한 옵션을 선택합니다.
8. 리스트 항목 : 지도 리스트에서 표시될 항목을 설정합니다. 이곳에서 해제한 항목은 상세 정보에서도 표시되지 않습니다.
9. 정렬 옵션 : 기본 정렬 방법을 선택합니다. 방문자가 임의로 변경 가능합니다.
10. 댓글 정렬 : 게시물에 달린 댓글 정렬 방법을 선택합니다.
11. 제목/ 본문 양식 : 게시물 작성 시 미리 작성된 양식을 만들 수 있습니다.
12. 지도 본문 상단/하단 코드 : 게시물 상단 또는 하단에 추가할 코드를 입력할 수 있습니다. 코드를 입력하는 경우 모든 게시물 상단/하단에서 작동됩니다.

지도 게시물 작성하기

지도 게시물은 디자인 모드에서 추가할 수 없으며, 미리보기 또는 직접 페이지에 접속해 추가합니다.

1. 지도 게시판이 있는 페이지에 접속합니다. 또는 미리보기를 클릭합니다.
2. 글쓰기 버튼을 클릭합니다.
3. 제목 및 본문을 작성합니다.

4. 위치추가 버튼을 클릭해 주소 및 상세주소, 전화번호, 웹사이트(옵션)를 작성합니다.

   

이미지 맵 위젯

이미지맵 위젯

하나의 이미지에 여러 링크 영역을 구현하고자 할 때 사용합니다.

*빠른 연습을 위해 하단에 PSD 예시파일을 첨부해두었습니다.

이미지맵 위젯 사용 방법

1단계, 위젯 목록 창 열기

빈 섹션을 추가해 곧바로 + 아이콘을 클릭하거나, 좌측 툴바에서 + 아이콘을 클릭해 위젯 목록 창을 열어주세요.

2단계, 이미지맵 위젯 선택하기

위젯 목록이 나타나면, [이미지맵] 위젯을 선택해주세요.

3단계, 이미지맵 위젯 설정 창 열기

이미지맵 위젯에 마우스 커서를 올려놓고, 마우스 오른쪽 버튼을 클릭하면 나타나는 [이미지맵 설정]을 클릭해주세요.

4단계, 이미지 업로드하기

이미지맵 설정 창이 열리면 [이미지 업로드] 버튼을 클릭해주세요. 

이미지맵으로 사용할 이미지 파일을 내 PC에서 선택해 업로드할 수 있습니다.

5단계, 이미지맵 링크 추가하기

1) 아래 그림 1번 영역에 이전 단계에서 업로드한 이미지가 표시됩니다.
2) 이미지 내 링크를 추가하기 위해 이미지맵 링크 [추가] 버튼을 클릭해주세요.

6단계, 링크 URL 및 클릭 영역 설정하기

1) 이미지맵 링크 [추가] 버튼을 클릭하면 아래 그림처럼 링크 URL을 입력할 수 있는 칸이 나타납니다. URL 입력칸 우측에 있는 [새창] 옵션을 체크하면, 이 링크를 클릭했을 때 새 브라우저 창이 뜨도록 설정할 수 있습니다.
2) 이미지맵 링크를 추가하면 2번 영역에 반투명한 파란 네모가 함께 추가됩니다. 이 네모 영역은 방문자가 마우스로 클릭할 수 있는 영역을 가리키며, 그 크기는 마우스로 조절할 수 있습니다.

7단계, 링크는 사이트 내부 메뉴도 연결 가능

링크 URL은 반드시 외부로만 연결하거나, URL을 입력해야 하는 건 아닙니다. 

링크 입력란을 클릭하면 아래 그림처럼 내부 메뉴를 연결할 수도 있습니다. 

[링크] 대신 [전화걸기]나 [문자발송], [이메일] 방식으로도 설정 가능합니다.

*전화걸기 및 문자발송은 스마트폰에서만 정상적으로 작동합니다.
*PC 환경에 따라서는 스카이프 또는 페이스 타임으로 동작할 수도 있습니다.

TIP. 이미지맵 위젯의 이미지가 깨져 보인다면?

이미지 위젯에 사용한 이미지가 [공통 디자인 설정]에서 설정한 [본문폭] 보다 가로 길이가 긴 경우, 섹션 설정에 따라 이미지가 깨져 나올 수도 있습니다. 

그런 경우 아래 그림처럼 섹션 설정 창에서 [좌우 여백] 크기를 0px로 바꿔주시면 이미지 깨짐 현상을 없앨 수 있습니다.

*공통 디자인 설정 또는 섹션 설정에 따라 이미지 깨짐 현상의 이유는 매우 다양합니다. 

아래 방법으로 이미지가 깨짐이 해결되지 않는 경우 이미지 크기에 영향을 주는 어떤 옵션을 사용 중인 건 아닌지 확인해주세요.

검색 위젯

위젯 소개

방문자가 사이트 내 콘텐츠를 검색할 수 있도록 검색 위젯을 추가할 수 있습니다. 

검색 결과는 통합 검색 형식으로 표시되며, 필요한 경우 검색결과에 노출하고 싶은 콘텐츠만을 나눌 수도 있습니다.

위젯 설정

1. 검색 위젯을 추가합니다.

2. 검색 위젯 설정을 엽니다.

   

검색 설정항목

검색 위젯 설정항목을 알아봅니다.

1. 다른 스타일 : 검색 아이콘 또는 필드 디자인 스타일을 선택합니다.

   
2. 버튼 : 검색 버튼 텍스트 또는 아이콘을 추가합니다. 글자색 및 Hover 색상, 크기를 변경할 수 있습니다.
3. 폼 : 크기, 여백, 정렬, 배경색, 선 색상/두께/라운딩을 편집해 검색 폼을 변경할 수 있습니다.
4. 텍스트 : 검색 폼 내 텍스트를 편집합니다.

통합검색 설정하기

방문자들이 사이트에서 검색 시 표시될 통합검색 영역을 어떻게 표시할지 설정할 수 있습니다.

1. 디자인 모드에서 메뉴 관리를 엽니다.

2. 글로벌 메뉴에서 통합 검색 메뉴를 클릭합니다.

   
3. 통합 검색 위젯 설정창을 엽니다.

4. 표시할 검색 탭, 검색 범위, 기본 검색 탭 선택합니다.

   
5. 창을 닫고 미리보기를 클릭해 검색 결과를 확인합니다.

타이틀 위젯

위젯 소개

현재 위치한 메뉴명을 출력해 줍니다. 

일반적으로는 잘 사용하지 않지만 섹션 설정에서 사이드 영역의 상단에 타이틀 위젯을 배치하면 매번 페이지 제목을 입력하지 않아도 되므로 편리합니다. 

단, 타이틀 위젯이 관련 모든 페이지에 자동으로 삽입되는 것은 아니기 때문에 각 페이지마다 타이틀 위젯을 복사해 붙여넣으셔야 합니다.

위젯 설정

1. 타이틀 위젯을 추가합니다.

2. 타이틀 위젯 설정을 엽니다.

타이틀 설정항목

현재 메뉴명이 나타나며, 타이틀 텍스트의 크기, 색상, 자간, 굵기, 기울기 등을 조절할 수 있습니다. 

필요한 경우 타이틀 텍스트의 정렬을 변경합니다.

1. 텍스트 : 타이틀 텍스트의 크기, 색상, 자간을 설정할 수 있습니다.
2. 정렬 : 타이틀 텍스트를 왼쪽, 가운데, 오른쪽 중 하나로 설정합니다.
3. 옵션 : 타이틀 텍스트의 굵기, 기울리기를 설정합니다.

텍스트 위젯, 비주얼섹션, 상품 요약설명 등에 버튼 추가하는 방법

개요

비주얼 섹션 설정, 텍스트 위젯, 상품 요약설명, 상품 상세 설명 등 텍스트 입력 가능한 편집도구를 통해 버튼을 삽입할 수 있습니다.

제작방법

1단계, 버튼 텍스트 입력하기
버튼명으로 사용할 텍스트를 입력합니다. *본 가이드에서는 텍스트 위젯이 사용되었습니다.

2단계, 텍스트 선택하기
마우스로 드래그하여 입력한 텍스트를 선택합니다.

3단계, 링크 클릭하기
텍스트 편집도구 오른쪽 상단에 위치한 링크 아이콘  을 클릭합니다.

4단계, 메뉴 선택 또는 링크 주소 입력하기
버튼 클릭시 이동할 경로는 메뉴를 직접 선택하거나 주소(URL)를 입력하는 방식으로 지정할 수 있습니다.

1) 메뉴 선택 : 돋보기 아이콘을 클릭해 기존에 만든 메뉴 중 하나를 선택합니다. [삽입]을 클릭해야 저장됩니다.

2) 직접 입력 : 링크 주소(URL)를 입력합니다. 입력 후에는 꼭 [삽입]을 클릭해주세요.

5단계, 스타일 변경하기
링크 삽입 후 나타는 보조 메뉴에서 두 번째 스타일을 클릭합니다.

다음으로 큰 버튼, 작은 버튼, 아주 작은 버튼 중 하나를 선택합니다.

6단계, 버튼 삽입 완료
버튼이 정상적으로 삽입, 적용 되었는지 미리보기를 통해  확인합니다.

버튼명 또는 링크 수정이 필요하다면?

1단계, 버튼 클릭하기
마우스로 버튼을 클릭합니다.

2단계, 링크 수정 클릭하기
보조 메뉴가 나타나면 3번째 링크 수정 메뉴를 클릭합니다.

3단계, 텍스트 및 링크 수정하기
텍스트 및 링크 주소(URL) 편집 후 업데이트를 눌러 저장합니다.