갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (게시판 활용)

갤러리 이미지를 클릭하면 새로운 갤러리가 표시되도록 메뉴를 구성할 수 있습니다. 이 구성은 주로 여러 개의 포트폴리오 또는 제품을 전시할 때 유용하며, 장소를 소개할 때도 사용할 수 있습니다.

갤러리 이미지 클릭 시 새로운 갤러리가 나오게 구성하는 방법은 여러 가지가 있지만, 이 도움말에서는 갤러리 위젯과 링크, 게시판 위젯을 사용해 구성하는 방법을 설명합니다.

이 방법은 표시해야 할 이미지가 많은 경우 유용합니다. 이미지 표시에는 게시판 위젯이 사용되어, 한 페이지에 설정한 개수의 이미지가 초과되는 경우, 다음 페이지에서 볼 수 있도록 페이징 형식으로 구성할 수 있기 때문입니다.

시작에 앞서

이 도움말을 진행하기에 앞서, 아래의 구조도를 숙지해 주세요. 홈 메뉴에는 대표 이미지를 추가하고, 각 메뉴 1~3에는 대표 이미지와 연관된 상세 갤러리 이미지를 추가합니다. 홈 메뉴에 추가한 각 이미지는 메뉴 1~3으로 이동할 수 있는 링크가 추가됩니다.

구성방법

갤러리를 구성하기 위한 메뉴들을 생성합니다. 이 도움말에서는 Home, Nature, Night Sky, Street 4개 메뉴를 생성할 것입니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 왼쪽에서 메뉴 관리 창이 나오면, 상단 메뉴 항목에 위치한 를 클릭합니다.
  4. 메뉴명(Home)을 작성하고, 확인 버튼을 클릭합니다.
  5. 위 3~4번 과정을 반복해 남은 모든 메뉴(Nature, Night Sky, Street)를 추가합니다.

위 1단계에서 생성한 메뉴들을 하나의 그룹으로 구성합니다. 각 갤러리를 대표하는 대표 이미지를 표시할 메뉴(Home)에 나머지 메뉴들(Nature, Night Sky, Street)을 하위 메뉴로 포함시키세요.

  1. Nature 메뉴를 마우스로 클릭 후 드래그하여, Home 메뉴 위에 올리고, 화살표 아이콘이 생기면, 마우스를 놓아줍니다. (Nature 메뉴가 Home의 하위 메뉴로 구성됩니다.)

  2. 위 애니메이션을 참고해, 같은 방법으로 남은 메뉴들도 Home 메뉴의 하위 메뉴로 구성합니다.
  3. 닫기 ✕ 아이콘을 클릭해 메뉴 생성 및 편집을 완료합니다.

각 하위 메뉴에 게시판 위젯을 추가하고, 게시판 작성 권한, 스타일 등을 설정합니다.

  1. Nature 메뉴로 이동합니다. (메뉴 관리를 열고 Nature 를 클릭해 이동하거나, 상단 메뉴에서 Nature 를 클릭해 이동할 수도 있습니다.)
  2. 디자인 모드 왼쪽 상단의 위젯 추가 + 아이콘을 클릭하고, 게시판 위젯을 클릭합니다.
  3. 추가된 게시판 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 게시판 설정을 클릭합니다.
  5. 아래 그림과 설명을 참고해, 게시판을 설정합니다.

    • 게시판 연동: 일반 게시판을 선택합니다.
    • 게시판 이름: 게시판 이름을 작성합니다.
    • 옵션: 글쓰기 버튼 옵션을 권한이 있는 경우 표시로 선택하고, 댓글 표시 옵션은 댓글 사용 안함을 선택합니다. 소유자에게만 글쓰기 버튼이 노출되며, 게시물에 댓글을 사용할 수 없게 됩니다.
    • 권한: 글 작성 옵션을 소유자로 변경하고, 나머지는 모든 사용자 그대로 둡니다. 소유자만 글을 작성할 수 있게 됩니다.
    • 글쓰기: 대표 이미지 지정기능 사용을 선택하면, 게시물에 2개 이상의 이미지를 추가한 경우, 게시물 작성 시 게시판 썸네일에 표시할 대표 이미지를 선택할 수 있게 됩니다.
  6. 게시판 설정 상단의 디자인 탭을 클릭합니다.

  7. 다른 스타일 버튼을 클릭합니다.

  8. 이미지를 표시할 스타일을 선택합니다. (그리드 게시판 또는 Masonry 게시판의 1번 스타일을 권장합니다.)

  9. 아래 그림과 설명을 참고해, 게시판의 표시요소를 설정하고 스타일을 변경합니다.

    • 구성 요소: 본문 이미지 클릭 시 라이트박스를 선택합니다. 게시물 본문의 이미지 클릭 시, 라이트박스 형식으로 이미지가 표시됩니다.
    • 리스트 항목: 게시판 썸네일에 표시될 요소를 선택합니다.
    • 리스트: 게시판에 표시되는 게시물의 숫자 및 간격 등을 설정할 수 있습니다.
    • 배경/테두리: 썸네일의 음영을 투명하게 처리하고, 필요에 따라 모서리를 둥글게 만들 수 있습니다. 또한, 선 두께와 색상을 설정해 외곽선을 그리는 것도 가능합니다.
  10. 게시판 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  11. 위 1~10번 과정을 반복해 남은 2개 메뉴(Night Sky, Street)에도 게시판을 추가하고 설정합니다.

홈 메뉴를 제작합니다. 홈 메뉴에는 각 하위 메뉴들을 대표하는 대표 이미지를 추가하고, 대표 이미지 클릭 시, 연관된 하위 메뉴로 이동하도록 링크를 걸어줍니다.

  1. Home 메뉴로 이동합니다. (메뉴 관리를 열고 Home 을 클릭해 이동하거나, 상단 메뉴에서 Home 을 클릭해 이동할 수도 있습니다.)
  2. 디자인 모드 왼쪽 상단의 위젯 추가 + 아이콘을 클릭하고, 갤러리 위젯을 클릭합니다.
  3. 갤러리 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 갤러리 설정을 클릭합니다.
  5. 갤러리 설정 창 왼쪽 상단의 + 상단 이미지, 동영상 추가에 마우스 포인터를 올리고, 이미지 추가를 클릭합니다.

  6. 각 갤러리의 대표 이미지를 추가합니다. (이 도움말에서는 상세 갤러리 메뉴를 총 3개 만들었으므로, 아래 그림과 같이 각 갤러리를 대표하는 3개의 이미지가 추가되었습니다.)
  7. 첫 번째 대표 이미지를 마우스로 클릭합니다.

  8. 갤러리 설정 창 왼쪽 하단의 빈 칸을 마우스로 클릭하면, 아래 그림과 같이 링크할 메뉴 목록이 나타납니다. 해당 이미지 클릭 시 이동할 하위 메뉴를 선택합니다.

    참고: 링크할 메뉴는 사용자가 메뉴 관리에서 생성한 메뉴들이 표시됩니다. 외부 사이트로 연결하려는 경우, http 또는 https 로 시작하는 URL을 작성해 주세요.

  9. (선택 사항) 이미지 제목이미지 설명을 작성합니다. 작성한 이미지 제목과 설명은 갤러리 이미지에 표시됩니다. 단, 이미지 제목과 이미지 설명의 표시여부는 갤러리 스타일마다 상이하며, 일부 갤러리 스타일에서는 표시되지 않을 수 있습니다.

    참고: 갤러리 스타일은 갤러리 설정 창 상단의 디자인 탭을 클릭해, 다른 스타일 버튼을 클릭하여 변경할 수 있습니다.
  10. 위 7~9번 과정을 반복해 남은 대표 이미지도 설정을 완료합니다.

    중요: 반드시 이미지를 먼저 선택하고 링크, 제목, 설명을 추가하세요.
  11. 갤러리 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 상단 메뉴의 Home 을 클릭합니다.
  3. 갤러리 이미지 하나를 클릭합니다.
  4. 링크한 메뉴로 이동하는지 확인하고, 연관 이미지들이 정상적으로 표시되는지 확인합니다.
  5. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

게시판에 표시할 이미지를 추가합니다. 게시물을 추가하면 게시판이 갤러리 형식으로 표시됩니다.

  1. 내 사이트에 접속합니다. (디자인 모드에서 미리보기를 클릭해 접속할 수 있습니다.)
  2. 게시판이 추가된 메뉴로 이동해, 아래의 과정에 따라 게시물을 작성합니다.

    1. 글쓰기 버튼을 클릭합니다. (위 3단계 5번 과정에서 설정한 권한에 따라, 방문자 및 회원에게는 보이지 않으며, 소유자에게만 노출됩니다.)
    2. 제목을 작성합니다.
    3. 본문의 텍스트 도구에서 이미지 첨부를 클릭해 이미지를 올려줍니다.
    4. (선택 사항) 위 3단계 5번 과정에서 대표 이미지 지정기능 사용을 선택했고, 게시물 본문에 2개 이상의 이미지를 삽입했다면, 게시물 작성 페이지 왼쪽에서 게시판에 표시할 대표 이미지를 지정합니다.
    5. 작성 버튼을 클릭해 게시물을 등록합니다.
    6. 위 3~7번 과정을 반복해 게시물을 계속해서 추가합니다.

관련 도움말

목록으로

시작이 어려우신가요?

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

온라인 교육 바로가기

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

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

아임웹과 함께하는 제휴사

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