아임웹 기본 갤러리 포트폴리오 슬라이드 만들기 |HTML CSS JS 커스텀 코드

아임웹 기본 갤러리가 조금 아쉽게 느껴졌다면

아임웹으로 홈페이지 제작을 하다 보면 갤러리 위젯을 자주 사용하게 됩니다.

포트폴리오, 시공 사례, 프로젝트 소개, 브랜드 작업물 등 이미지를 보여줘야 하는 페이지에서는 가장 간편하게 사용할 수 있는 기능 중 하나입니다.

 

하지만 기본 갤러리만 사용하면 다른 사이트와 비슷해 보이거나 브랜드만의 분위기를 담기 어려운 경우가 있습니다.

특히 공간 디자인, 인테리어, 플라워 디자인, 건축, 웨딩, 브랜드 포트폴리오처럼 이미지를 중심으로 신뢰를 전달해야 하는 업종이라면 조금 더 완성도 있는 구성이 필요합니다.

 

이번에 소개하는 HTML/CSS/JS 커스텀 코드는 아임웹 기본 갤러리를 활용해 보다 전문적인 포트폴리오 섹션을 만들 수 있도록 제작했습니다.

 

실제 구현 예시

믓아 스튜디오

---

이 코드로 구현되는 기능

이 코드는 단순히 화살표만 추가하는 코드가 아닙니다.

갤러리 전체를 포트폴리오 페이지처럼 보이도록 재구성하는 코드입니다.

 

1. 커스텀 화살표 버튼 생성

기본 갤러리의 화살표를 숨기고 별도의 디자인 화살표를 생성합니다.

버튼 디자인을 자유롭게 변경할 수 있으며 홈페이지 분위기에 맞는 UI를 만들 수 있습니다.

 

2. 이미지 호버 확대 효과

마우스를 이미지 위에 올리면 부드럽게 확대됩니다.

최근 브랜드 홈페이지나 포트폴리오 사이트에서 많이 사용하는 방식으로 정적인 이미지보다 훨씬 세련된 느낌을 줄 수 있습니다.

 

3. 프로젝트 소개 영역 추가

왼쪽에는 프로젝트 소개 문구가 배치되고 오른쪽에는 갤러리가 노출됩니다.

이미지를 보여주기 전에 프로젝트의 성격과 내용을 먼저 전달할 수 있어 정보 전달력이 좋아집니다.

 

4. 한 화면에 이미지 3개 노출

PC에서는 이미지가 3개씩 보이도록 설정되어 있습니다.

여러 프로젝트를 한 번에 보여줄 수 있어 포트폴리오 페이지에 적합합니다.

 

5. 모바일 반응형 지원

태블릿과 모바일 화면에서는 자동으로 레이아웃이 변경됩니다.

별도의 모바일 코드를 추가하지 않아도 자연스럽게 반응형으로 작동합니다.

---

이런 홈페이지에 특히 추천합니다

이 코드는 단순 이미지 갤러리보다 프로젝트 중심 홈페이지에서 효과적입니다.

• 인테리어 회사 시공 사례 및 프로젝트 소개
• 건축사무소 건축 포트폴리오 소개
• 플라워 디자인 웨딩, 브랜드 행사, 공간 연출 사례
• 홈페이지 제작 업체 제작 사례 및 포트폴리오
• 브랜드 에이전시 브랜딩 프로젝트 소개
• 호텔 및 스테이 객실 및 공간 소개

---

왜 커스텀 갤러리가 중요할까?

홈페이지 방문자는 생각보다 텍스트를 자세히 읽지 않습니다.

대부분 이미지를 먼저 보고 관심이 생기면 내용을 읽기 시작합니다.

그래서 포트폴리오 페이지에서는 이미지의 첫인상이 매우 중요합니다.

 

실제로 홈페이지 제작 프로젝트를 진행하다 보면 방문자가 가장 많이 보는 페이지 중 하나가 포트폴리오 페이지입니다.

하지만 기본 갤러리는 브랜드의 개성을 보여주기 어렵습니다.

 

반면 이번 구조처럼 텍스트와 이미지를 함께 배치하면 전문적인 인상을 줄 수 있고 프로젝트의 스토리도 함께 전달할 수 있습니다.

특히 B2B 기업, 디자인 스튜디오, 플라워 브랜드, 인테리어 업체처럼 신뢰가 중요한 업종에서는 이러한 차이가 문의 전환에도 영향을 줄 수 있습니다.

---

적용 방법

STEP 1

아임웹에서 갤러리 위젯을 추가합니다.

 

STEP 2

섹션 ID와 갤러리 위젯 ID를 확인합니다.

현재 코드에 사용된 ID는 아래와 같습니다.

#s20260706698c049f95ef7

#w20260706cb2ac4d96bb04

실제 적용 시에는 본인 사이트의 ID로 변경해야 합니다.

 

STEP 3

HTML 위젯 또는 공통 코드 영역에 코드를 삽입합니다.

 

STEP 4

저장 후 페이지를 새로고침하여 확인합니다.

---

전체 코드

아래 코드를 그대로 복사하여 사용하면 됩니다.

<style>
#s20260706698c049f95ef7{
  position:relative !important;
  background:#f7f8fb !important;
  overflow:hidden !important;
}

#s20260706698c049f95ef7 .inside{
  max-width:none !important;
  width:100% !important;
}

#w202607069dc7977fbb8f7,
#w20260706e7cb708799288{
  display:none !important;
}

/* 전체 2단 구조 */
#s20260706698c049f95ef7 main > .inside{
  display:grid !important;
  grid-template-columns:420px minmax(0, 1fr) !important;
  align-items:start !important;
  column-gap:46px !important;
  padding:0 7vw 110px 7vw !important;
  box-sizing:border-box !important;
}

/* 왼쪽 전체 텍스트 */
#s20260706698c049f95ef7 main > .inside::before{
  content:"PROJECT\A Spatial Styling\A Portfolio";
  white-space:pre-line;
  display:block;
  grid-column:1 !important;
  grid-row:1 !important;

  font-family:'Noto Sans', sans-serif !important;
  font-size:52px !important;
  font-weight:400 !important;
  line-height:1.08 !important;
  letter-spacing:-.05em !important;
  color:#111 !important;


#s20260706698c049f95ef7 main > .inside::after{
  content:"브랜드와 공간의 분위기를 바탕으로\A 완성한 다양한 공간 연출\A 프로젝트를 소개합니다.";
  white-space:pre-line;
  display:block;
  position:absolute !important;
  left:7vw !important;
  top:205px !important;
  width:420px !important;

  font-family:'Pretendard', 'Noto Sans KR', sans-serif !important;
  font-size:22px !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  letter-spacing:-.04em !important;
  color:#111 !important;
  word-break:keep-all !important;
}

/* 갤러리 오른쪽 */
#s20260706698c049f95ef7 main > .inside > .doz_row:nth-of-type(2){
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:start !important;
  width:100% !important;
  min-width:0 !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}

#w20260706cb2ac4d96bb04{
  width:100% !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:0 !important;
}

#w20260706cb2ac4d96bb04 ._gallery_wrap,
#w20260706cb2ac4d96bb04 .widget,
#w20260706cb2ac4d96bb04 .gallery2{
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}

#w20260706cb2ac4d96bb04 .owl-stage-outer{
  overflow:hidden !important;
}

/* 슬라이드 3개만 보이게 */
#w20260706cb2ac4d96bb04 .owl-item{
  width:calc((100vw - 14vw - 420px - 46px) / 3) !important;
}

/* 사진 3:4 */
#w20260706cb2ac4d96bb04 ._item.item_gallary{
  padding:7px !important;
  box-sizing:border-box !important;
}

#w20260706cb2ac4d96bb04 .item_container{
  width:100% !important;
  aspect-ratio:3 / 4 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  background:#ddd !important;
}

#w20260706cb2ac4d96bb04 .img_wrap{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  aspect-ratio:3 / 4 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  transition:transform .7s ease !important;
}

#w20260706cb2ac4d96bb04 .item_container:hover .img_wrap{
  transform:scale(1.05) !important;
}

#w20260706cb2ac4d96bb04 .text_wrap,
#w20260706cb2ac4d96bb04 .owl-controls{
  display:none !important;
}

/* 커스텀 화살표 */
.clv-gallery-custom-arrows{
  position:absolute !important;
  left:7vw !important;
  top:360px !important;
  display:flex !important;
  gap:10px !important;
  z-index:50 !important;
}

.clv-gallery-custom-arrows button{
  width:50px !important;
  height:50px !important;
  border-radius:50% !important;
  border:1px solid rgba(18,18,18,.25) !important;
  background:transparent !important;
  color:#111 !important;
  font-size:20px !important;
  cursor:pointer !important;
  transition:all .35s ease !important;
}

.clv-gallery-custom-arrows button:hover{
  background:#111 !important;
  color:#fff !important;
}

/* 태블릿 */
@media (max-width:991px){
  #s20260706698c049f95ef7 main > .inside{
    display:block !important;
    padding:60px 0 90px !important;
  }

  #s20260706698c049f95ef7 main > .inside::before{
    padding:0 30px 0 !important;
    font-size:52px !important;
    line-height:1.08 !important;
  }

  #s20260706698c049f95ef7 main > .inside::after{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    padding:34px 30px 90px !important;
    font-size:20px !important;
    line-height:1.55 !important;
  }

  .clv-gallery-custom-arrows{
    left:30px !important;
    top:395px !important;
  }

  #w20260706cb2ac4d96bb04 .owl-item{
    width:33.333vw !important;
  }
}

/* 모바일 */
@media (max-width:767px){
  #s20260706698c049f95ef7 main > .inside{
    padding:50px 0 70px !important;
  }

  #s20260706698c049f95ef7 main > .inside::before{
    padding:0 22px 0 !important;
    font-size:38px !important;
    line-height:1.1 !important;
  }

  #s20260706698c049f95ef7 main > .inside::after{
    padding:28px 22px 78px !important;
    font-size:17px !important;
    line-height:1.6 !important;
  }

  .clv-gallery-custom-arrows{
    left:22px !important;
    top:322px !important;
  }

  .clv-gallery-custom-arrows button{
    width:44px !important;
    height:44px !important;
    font-size:18px !important;
  }

  #w20260706cb2ac4d96bb04 .owl-item{
    width:72vw !important;
  }
}
</style>

<script>
(function(){
  const section = document.querySelector('#s20260706698c049f95ef7');
  const gallery = document.querySelector('#w20260706cb2ac4d96bb04');

  if(!section || !gallery) return;

  if(!section.querySelector('.clv-gallery-custom-arrows')){
    const arrows = document.createElement('div');
    arrows.className = 'clv-gallery-custom-arrows';
    arrows.innerHTML = `
      <button type="button" class="clv-gallery-prev">←</button>
      <button type="button" class="clv-gallery-next">→</button>
    `;
    section.appendChild(arrows);
  }

  function refreshOwl(){
    const container = gallery.querySelector('.owl-carousel');
    if(window.jQuery && container && window.jQuery(container).data('owl.carousel')){
      window.jQuery(container).trigger('refresh.owl.carousel');
    }
  }

  setTimeout(refreshOwl, 300);
  window.addEventListener('resize', function(){
    setTimeout(refreshOwl, 200);
  });

  section.querySelector('.clv-gallery-next').addEventListener('click', function(){
    const owlNext = gallery.querySelector('.owl-next');
    if(owlNext) owlNext.click();
  });

  section.querySelector('.clv-gallery-prev').addEventListener('click', function(){
    const owlPrev = gallery.querySelector('.owl-prev');
    if(owlPrev) owlPrev.click();
  });
})();
</script>

---

코드 수정 포인트

1. 프로젝트 제목 변경

현재 제목

content:"PROJECT\A Spatial Styling\A Portfolio";

원하는 제목으로 변경 가능합니다.

content:"WORKS\A Interior\A Portfolio";

 

 

2. 설명 문구 변경

설명 업종에 맞게 자유롭게 수정할 수 있습니다.

content:"브랜드와 공간의 분위기를 바탕으로\A 완성한 다양한 공간 연출\A 프로젝트를 소개합니다.";

 

3.배경색 변경

브랜드 컬러에 맞게 변경 가능합니다.

background:#f7f8fb;

 

4. 이미지 비율 변경

현재 비율

aspect-ratio:3 / 4;

정사각형

aspect-ratio:1 / 1;

와이드 이미지

aspect-ratio:16 / 9;

 

 

5. 이미지 개수 변경

현재는 한 화면에 3장이 노출됩니다.

이 숫자를 변경하면 노출 개수를 조절할 수 있습니다.

/ 3

 

6. 화살표 크기 변경

현재 크기 더 크게 또는 작게 변경 가능합니다.

width:50px;
height:50px;

---

자주 발생하는 오류와 해결 방법

1. 코드를 넣었는데 적용되지 않아요

대부분 섹션 ID 또는 갤러리 ID가 다르기 때문입니다.

현재 사용 중인 ID를 다시 확인해보세요.

 

2. 화살표가 움직이지 않아요

아임웹 갤러리가 슬라이드 형식으로 설정되어 있는지 확인해야 합니다.

일반 이미지 나열 형태에서는 작동하지 않을 수 있습니다.

 

3. 모바일에서 이미지가 너무 커요

아래 값을 조정하면 됩니다.

width:72vw;

숫자를 낮추면 이미지가 작아집니다.

 

4. 화살표 위치가 이상해요

아래 값으로 위치를 조정할 수 있습니다.

top:360px;

left:7vw;

 

 

5. 이미지 확대 효과를 제거하고 싶어요

아래 부분을 삭제하거나 주석 처리하면 됩니다.

.item_container:hover .img_wrap{
  transform:scale(1.05);
}

 

---

아임웹 포트폴리오 페이지를 더 고급스럽게 만드는 방법

많은 브랜드 홈페이지를 보면 단순히 이미지를 나열하지 않습니다.

프로젝트 소개 문구, 적절한 여백, 슬라이드 효과, 인터랙션 요소를 함께 사용해 방문자가 자연스럽게 콘텐츠를 탐색하도록 설계합니다.

이번 커스텀 코드는 복잡한 개발 작업 없이도 아임웹 기본 갤러리를 활용해 이러한 구성을 구현할 수 있도록 만든 코드입니다.

특히 홈페이지 제작 포트폴리오, 인테리어 시공 사례, 공간 연출 프로젝트, 브랜드 작업물 소개 페이지를 운영하고 있다면 활용도가 매우 높습니다.

기본 갤러리가 아쉽게 느껴졌다면 한 번 적용해보시기 바랍니다.

---

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

 

기본 갤러리 버튼 추가하기

아임웹 기본 갤러리 커스텀 버튼 추가하는 방법 (HTML/CSS/JS 커스텀 코드)

 

문의폼 2단 배치 커스텀

아임웹 문의폼 2단 배치 만들기 | 문의폼 2열 구성 커스텀 코드