• 가이드

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

방문자가 갤러리 대표 이미지를 클릭하면, 연관된 갤러리가 라이트박스 형식으로 표시되며, 슬라이드 형식으로 다음 갤러리를 감상할 수 있도록 구성할 수 있습니다. 이 방법은 페이드 로드 없이 여러 이미지(동영상)를 표시할 수 있어, 빠르게 제품이나 포트폴리오, 장소 등을 보여줄 때 유용합니다.

이 도움말에서는 Nature, Night Sky, Street 3개 카테고리로 나눠진 사진 포트폴리오를, 3개의 갤러리 위젯을 사용해 구성하는 방법을 설명합니다.

참고: 라이트박스란, 이미지 또는 동영상과 같은 웹 콘텐츠를 마우스로 클릭 했을 때, 페이지 위에 새로운 레이어를 띄워 해당 콘텐츠를 표시하며, 배경은 어둡게 하는 등의 효과를 통해 콘텐츠를 강조해 보여주는 기능을 말합니다.

구성방법

갤러리를 표시할 새로운 메뉴를 생성합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 + 아이콘을 클릭합니다.
  3. 상단 메뉴 항목의 오른쪽 끝에 ⨁ 를 클릭합니다.
  4. 메뉴명을 입력하고 확인을 클릭합니다.
  5. 새로운 메뉴(Home)가 추가됩니다.

갤러리 위젯을 추가하고, 갤러리의 스타일을 설정합니다.

  1. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  2. 갤러리 위젯을 클릭합니다.
  3. 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.
  5. 갤러리 설정 창 상단에 위치한 디자인 탭을 클릭합니다.

  6. 다른 디자인 버튼을 클릭합니다.

  7. 갤러리가 표시되는 스타일을 선택합니다. 그리드 갤러리 또는 Masonry 갤러리 항목의 4번 스타일을 권장합니다.

  8. 갤러리 스타일 선택을 마쳤으면, 아래 그림과 설명을 참고해 갤러리 디자인을 편집합니다.

    참고: 스타일 설정 항목은 위 7번 과정에서 선택하신 갤러리 스타일마다 일부 옵션 사항이 다를 수 있습니다.

    • 이미지 비율: 갤러리에 표시할 이미지의 비율 선택
    • 한줄 표시: 1개 *필수
    • 세로 줄 수: 1줄 *필수
    • 이미지 음영: rgba(0, 0, 0, 0.3)
    • 라이트박스 사용 안함: 체크 해제 *필수
    • 텍스트 제목: 갤러리 이미지 위에 표시될 "제목" 텍스트의 크기
    • 텍스트 설명: 갤러리 이미지 위에 표시될 "설명" 텍스트의 크기
    • 텍스트 안쪽 여백: 이미지 안쪽의 여백을 설정
    • 선두께: 선 두께와 색상을 설정해 갤러리 이미지에 외곽선을 표시

갤러리 이미지를 추가하고, 대표 이미지에 표시할 텍스트를 작성합니다.

중요: 이미지를 올리기 전 모든 갤러리 이미지를 위 2단계 8번 과정에서 리스트 항목의 이미지 비율 옵션에서 선택한 비율로 동일하게 편집해 주세요. 비율이 맞지 않아도 올리는 건 가능하지만, 갤러리 썸네일 이미지의 상/하 또는 좌/우가 잘려 표시될 수 있습니다.
  1. 갤러리 설정 창 상단의 갤러리 설정 탭을 클릭합니다.

  2. 왼쪽 하단의 갤러리 이름 항목에 이 갤러리의 이름을 작성해 줍니다.
  3. 왼쪽 상단의 + 이미지, 동영상 추가 에 마우스 포인터를 올립니다.

  4. 이미지 추가 를 클릭해 갤러리 대표 이미지 1개를 추가합니다.
  5. 하단의 이미지 제목이미지 설명에 카테고리의 제목(Nature)과 부제목(Green & Wild Life)을 작성해 줍니다.

  6. 갤러리 대표 이미지 업로드 및 제목과 설명 작성을 마쳤다면, 다시 왼쪽 상단의 + 이미지, 동영상 추가 에 마우스 포인터를 올리고, 이미지 추가 를 클릭합니다.
  7. 대표 이미지와 연관된 모든 갤러리를 한 번에 모두 올려줍니다. (이미지 크기에 따라 약간의 시간이 소요됩니다.)

  8. 갤러리 설정 창 바깥 영역을 클릭해 갤러리 설정을 완료합니다.

위 3단계에서 추가하고 설정한 갤러리 위젯을 복제합니다. 복제한 갤러리 위젯은 각 카테고리에 맞게 별도의 설정이 필요합니다.

  1. 위 3단계에서 설정한 갤러리 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 컨텍스트 메뉴가 나오면 위젯 복사를 클릭합니다.
  3. 페이지 아무 곳에 마우스 포인터를 올리고, 다시 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 위젯 붙여넣기를 클릭합니다. (갤러리 위젯이 복제되어 추가됩니다.)
  5. 위 3~4번 과정을 반복해 갤러리 위젯을 1개 더 복제합니다. (총 3개의 갤러리 위젯이 존재하게 됩니다.)
  6. 위 3단계 내용을 참고하여, 복제한 2개의 갤러리 위젯의 이름을 입력하고, 연관된 이미지를 추가한 다음, 대표 이미지를 설정합니다.

한 줄에 1개 이미지가 표시되도록 갤러리를 설정하면, 갤러리 아래 더보기가 표시됩니다. 더보기 표시는 간단한 코드를 추가해 숨길 수 있습니다.

  1. 아래의 더보기 숨김 코드를 복사합니다.

    <style>
    #섹션ID .widget._gallery_wrap a._more_btn {
    display: none !important;
    }
    </style>
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 코드 위젯을 클릭합니다.
  4. 코드 위젯을 마우스로 클릭 후 드래그하여 갤러리 위젯(들) 밑에 배치합니다.

    참고: 코드 위젯은 방문자에게 노출되지 않아, 아무 곳에 배치해도 무관합니다. 단, 차후 코드를 수정하거나 삭제하는 경우를 대비해 관련 위젯 주변에 배치하는 것이 좋습니다.

  5. 코드 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 컨텍스트 메뉴가 나오면 코드 설정을 클릭합니다.
  7. 위 1번 과정에서 복사한 코드를 코드 설정 공란에 붙여넣습니다.
  8. 코드에 작성된 #섹션ID 를 갤러리 위젯이 삽입된 페이지 섹션의 #섹션ID 로 변경합니다. 섹션 ID 확인 방법

  9. 저장을 클릭합니다.
  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 갤러리 클릭합니다. (라이트박스 형식으로 이미지가 표시됩니다.)
  3. 이미지 좌우의 화살표를 클릭하거나, 마우스 클릭 후 드래그하여, 다음 또는 이전 갤러리로 변경해 봅니다.
  4. 갤러리 이미지가 정상적으로 표시된다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

관련 도움말

목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.
568.6K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
2.9K
전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.