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

커스텀 후 기본 모습

커스텀 후 마우스 오버 후

 

 

아임웹 갤러리 카드에 버튼을 추가하고 싶다면?

아임웹으로 홈페이지 제작을 하다 보면 “카드 위에 버튼 하나만 있어도 훨씬 고급스럽겠다”
라는 생각이 들 때가 있습니다.

 

특히 쇼핑몰이나 포트폴리오 페이지에서는
사용자가 바로 클릭할 수 있는 CTA(Call To Action) 버튼이 매우 중요합니다.

이번 글에서는 아임웹 갤러리 카드 좌측 상단에
‘상품보러가기’ 버튼을 추가하는 HTML/CSS/JS 커스텀 코드를 공유합니다.

초보자도 그대로 복사해서 사용할 수 있도록 쉽게 설명해드릴게요.

 

실제 구현 예시

믓아 스튜디오

---

 

이 코드로 구현되는 기능

이 커스텀 코드를 적용하면 아래 기능이 추가됩니다.

• 갤러리 카드 좌측 상단 버튼 생성
• hover 시 색상 반전 애니메이션
• 둥근 pill 스타일 버튼 UI
  
  • 아이콘 포함
• 모바일 자동 최적화
• 슬라이드/캐러셀 이동 시에도 버튼 자동 생성
• 아임웹 owl-carousel 대응

즉, 단순한 갤러리 카드가 아니라 조금 더 “브랜드 홈페이지 느낌” 나는 UI로 바뀝니다.

 

06. 아임웹 HTML 위젯 사용법｜초보자도 가능한 커스텀 코드 적용 방법

 

---

 

사용하면 좋은 상황

이런 경우에 특히 추천합니다.

• 아임웹 쇼핑몰 상품 리스트
• 포트폴리오 갤러리
• 프로젝트 소개 카드
• 병원 홈페이지 시술 카드
• 웹디자인 사례 소개
• 브랜드 상세 페이지 연결
• CTA 클릭 유도 강화

특히 “홈페이지 제작”이나 “웹디자인”에서
전환율을 높이고 싶은 경우 효과가 좋습니다.

---

 

적용 방법

1. 아임웹에서 HTML 위젯 추가

아임웹 에디터에서:

• 섹션 추가
• HTML 위젯 삽입

후 아래 코드를 그대로 붙여넣으면 됩니다.

 

2. 위젯 ID 확인하기

코드 안에 아래 부분이 있습니다.

const widgetId = 'w20260528c5486073e6460';

이 부분을 자신의 아임웹 위젯 ID로 변경해야 합니다.

---

 

개발자 코드 확인 방법

크롬 브라우저 기준

갤러리나 게시판 형태에 따라 값이 달라질 수 있으니 확인해주세요.

1. 홈페이지 접속
2. 마우스 우클릭
3. 검사 클릭
4. select an element in the page to inspect it 선택 후 원하는 갤러리 영역 클릭

그러면 이런 형태의 값을 확인해주세요.

이 값을 복사해서 코드에 넣으면 됩니다.

---

 

전체 코드

<!-- =========================================
상품보러가기 버튼 커스텀 코드
아임웹 갤러리 카드 좌측 상단 버튼 생성
========================================= -->

<style>

  #w20260528c5486073e6460 .item_container {
    position: relative !important;
    overflow: hidden !important;
  }

  #w20260528c5486073e6460 .motsa-product-btn {
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    z-index: 30 !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    padding: 10px 14px !important;
    border-radius: 999px !important;

    background: #ffffff !important;
    color: #111111 !important;

    font-family: Pretendard, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1 !important;
    letter-spacing: -0.02em !important;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;

    text-decoration: none !important;
    cursor: pointer !important;

    transition: all 0.25s ease !important;
  }

  #w20260528c5486073e6460 .motsa-product-btn:hover {
    transform: translateY(-2px) !important;
    background: #111111 !important;
    color: #ffffff !important;
  }

  #w20260528c5486073e6460 .motsa-product-icon {
    width: 18px !important;
    height: 18px !important;

    border-radius: 50% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #111111 !important;
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    line-height: 1 !important;

    transition: all 0.25s ease !important;
  }

  #w20260528c5486073e6460 .motsa-product-btn:hover .motsa-product-icon {
    background: #ffffff !important;
    color: #111111 !important;
  }

  @media (max-width: 768px) {

    #w20260528c5486073e6460 .motsa-product-btn {

      top: 12px !important;
      left: 12px !important;

      padding: 9px 12px !important;

      font-size: 12px !important;
    }

    #w20260528c5486073e6460 .motsa-product-icon {

      width: 16px !important;
      height: 16px !important;

      font-size: 12px !important;
    }
  }

</style>

<script>

(function () {

  const widgetId = 'w20260528c5486073e6460';

  function addProductButtons() {

    const widget = document.getElementById(widgetId);

    if (!widget) return;

    const cards = widget.querySelectorAll('.item_container');

    cards.forEach(function (card) {

      if (card.querySelector('.motsa-product-btn')) return;

      const btn = document.createElement('a');

      btn.className = 'motsa-product-btn';

      btn.href = '#';

      btn.innerHTML = `
        <span>상품보러가기</span>
        <span class="motsa-product-icon">+</span>
      `;

      btn.addEventListener('click', function (e) {

        e.preventDefault();
        e.stopPropagation();
      });

      card.appendChild(btn);
    });
  }

  addProductButtons();

  const observer = new MutationObserver(addProductButtons);

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

})();

</script>

---

 

코드 수정 포인트

1. 버튼 위치 수정

top: 18px;
left: 18px;

숫자를 변경하면 위치 이동 가능합니다.

 

2. 버튼 배경색 수정

background: #ffffff;

원하는 컬러 코드로 변경하세요.

 

3. 버튼 문구 수정

<span>상품보러가기</span>

원하는 텍스트로 변경 가능:

• 자세히보기
• 프로젝트보기
• 상담신청
• 예약하기

등 다양하게 활용할 수 있습니다.

 

4. 실제 링크 연결하기

현재는:

btn.href = '#';

으로 되어 있습니다.

실제 링크를 연결하려면:

btn.href = '/shop';

처럼 수정하면 됩니다.

그리고 아래 코드도 삭제 가능합니다.

e.preventDefault();

---

 

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

1. 버튼이 안 보이는 경우

대부분 위젯 ID가 다르기 때문입니다.

const widgetId = '위젯ID';

부분을 꼭 확인하세요.

 

2. hover가 적용되지 않는 경우

아임웹 기본 스타일 충돌 가능성이 있습니다.

이 코드처럼:

!important

를 유지하는 걸 추천합니다.

 

3. 모바일에서 버튼이 너무 큰 경우

아래 부분 숫자를 줄이면 됩니다.

font-size: 12px;
padding: 9px 12px;

---

 

마무리

아임웹은 기본 기능만 사용해도 충분히 좋은 플랫폼이지만,
HTML/CSS/JS 커스텀 코드를 활용하면 훨씬 고급스러운 홈페이지 제작이 가능합니다.

특히 이런 작은 인터랙션 하나만 추가해도
사용자 체감 퀄리티가 꽤 많이 달라집니다.

앞으로도 실무에서 바로 사용할 수 있는
아임웹 커스텀 코드와 웹디자인 팁들을 계속 공유해볼게요 :)

 

 

전환 중심 홈페이지 제작이 필요하다면?

단순히 예쁜 디자인이 아니라
“방문 → 이해 → 신뢰 → 문의” 흐름까지 설계하는
전환 중심 홈페이지 제작을 진행하고 있습니다.

• 아임웹 커스텀 코드
• HTML/CSS/JS 인터랙션
• 병원/B2B/브랜드 홈페이지
• UI/UX 구조 설계
• 랜딩페이지 제작

믓아 스튜디오