아임웹 기본 갤러리 커스텀 코드 공유 | 더 고급스럽게 만드는 코드

 

 

아임웹으로 홈페이지 제작을 하다 보면 기본 갤러리 기능만으로는 조금 밋밋하게 느껴질 때가 있습니다.

특히 웹디자인 포트폴리오나 작업 사례를 보여주는 페이지라면, 단순히 이미지만 나열하는 것보다 “이 영역이 작업물입니다”라는 표시가 있으면 훨씬 더 정돈된 느낌을 줄 수 있습니다.

이번 글에서는 아임웹 갤러리 카드 우측 상단에 태그를 자동으로 추가하는 HTML/CSS/JS 커스텀 코드를 공유합니다.

 

실제 구현 예시

믓아 스튜디오

 

---

 

이 코드로 구현되는 기능

이 코드를 적용하면 아임웹 갤러리 이미지 카드 위에 작은 뱃지가 자동으로 표시됩니다.

단순한 텍스트 라벨이 아니라, 흰색 반투명 배경과 블러 효과가 들어간 글라스 스타일 뱃지입니다.

또한 왼쪽에는 초록색 점이 부드럽게 커졌다 작아지는 애니메이션으로 들어가 있어, 정적인 갤러리보다 조금 더 생동감 있는 웹디자인을 만들 수 있습니다.

 

구현되는 기능은 다음과 같습니다.

• 갤러리 카드 우측 상단 태그 표시
• 반투명 글라스 느낌의 뱃지 디자인
• 초록색 점 애니메이션 효과
• 마우스 오버 시 살짝 위로 올라가는 인터랙션
• 모바일 화면에서도 자연스럽게 보이는 반응형 처리
• 아임웹 갤러리 카드가 추가되어도 자동 적용

---

 

사용하면 좋은 상황

이 코드는 단순 이미지 갤러리보다 “작업물 모음”을 더 전문적으로 보여주고 싶을 때 사용하기 좋습니다.

예를 들면 아래와 같은 페이지에 잘 어울립니다.

• 웹디자인 포트폴리오 페이지
• 홈페이지 제작 사례 페이지
• 브랜드 디자인 작업물 소개
• 프로젝트 리스트 페이지
• 시공 사례 갤러리
• 병원 홈페이지 제작 사례
• 법률사무소 홈페이지 제작 사례
• 아임웹 리디자인 작업물 모음

특히 프리랜서 디자이너, 웹에이전시, 홈페이지 제작 업체처럼 작업 사례가 중요한 사이트라면

기본 갤러리에 작은 태그만 추가해도 훨씬 완성도 있게 보입니다.

---

 

적용 방법

적용 방법은 어렵지 않습니다.

아임웹 관리자에서 HTML 위젯을 추가한 뒤, 아래 전체 코드를 그대로 붙여넣으면 됩니다.

 

다만 한 가지 중요한 부분이 있습니다.

코드 안에 들어간 위젯 ID는 현재 예시 사이트 기준입니다.

w202606011900f77b66ee3

본인의 아임웹 사이트에 적용할 때는 이 값을 실제 갤러리 위젯 ID로 변경해야 합니다.

적용 순서는 다음과 같습니다.

1. 아임웹 디자인 모드 접속
2. 태그를 넣을 갤러리 위젯 ID 확인
3. HTML 위젯 추가
4. 아래 전체 코드 붙여넣기
5. 위젯 ID를 본인 사이트에 맞게 변경
6. 저장 후 PC와 모바일 화면 확인

---

 

전체 코드

<style>
#w202606011900f77b66ee3 .item_container{
  position:relative!important;
  overflow:hidden!important;
}

#w202606011900f77b66ee3 .motsa-view-tag{
  position:absolute!important;
  top:18px!important;
  right:18px!important;
  z-index:30!important;

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

  padding:10px 14px!important;

  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;

  border-radius:999px!important;

  font-family:Pretendard,sans-serif!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;

  color:#111!important;

  text-transform:uppercase!important;

  box-shadow:0 10px 30px rgba(0,0,0,.12)!important;

  transition:all .25s ease!important;
}

#w202606011900f77b66ee3 .motsa-view-tag:hover{
  transform:translateY(-3px)!important;
}

#w202606011900f77b66ee3 .motsa-dot{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#22c55e!important;
  animation:motsaPulse 1.6s infinite!important;
}

@keyframes motsaPulse{
  0%{
    transform:scale(1);
    opacity:1;
  }
  50%{
    transform:scale(1.4);
    opacity:.4;
  }
  100%{
    transform:scale(1);
    opacity:1;
  }
}

@media(max-width:768px){

  #w202606011900f77b66ee3 .motsa-view-tag{
    top:12px!important;
    right:12px!important;

    padding:8px 12px!important;
    font-size:11px!important;
  }

}
</style>

<script>
(function(){

  const widgetId='w202606011900f77b66ee3';

  function addTags(){

    const widget=document.getElementById(widgetId);

    if(!widget) return;

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

    cards.forEach(function(card){

      if(card.querySelector('.motsa-view-tag')) return;

      const tag=document.createElement('div');

      tag.className='motsa-view-tag';

      tag.innerHTML=`
        <span class="motsa-dot"></span>
        <span>WORK</span>
      `;

      card.appendChild(tag);

    });

  }

  addTags();

  const observer=new MutationObserver(addTags);

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

})();
</script>

 

---

 

코드 수정 포인트

1. WORK 문구 변경하기

현재 코드는 갤러리 카드에 WORK라는 문구가 표시되도록 되어 있습니다.

<span>WORK</span>

원하는 문구로 바꾸고 싶다면 이 부분만 수정하면 됩니다.

예시입니다.

<span>PROJECT</span>

<span>CASE STUDY</span>

<span>SELECTED WORK</span>

포트폴리오 사이트라면 WORK, 프로젝트 소개 페이지라면 PROJECT, 상세 사례 중심이라면 CASE STUDY가 잘 어울립니다.

 

 

2. 태그 위치 변경하기

현재 태그는 카드 우측 상단에 표시됩니다.

top:18px!important;
right:18px!important;

좌측 상단으로 옮기고 싶다면 right를 left로 변경하면 됩니다.

top:18px!important;
left:18px!important;

 

 

 

3. 태그 크기 조절하기

태그가 너무 크거나 작게 느껴진다면 아래 값을 조정하면 됩니다.

padding:10px 14px!important;
font-size:12px!important;

숫자를 키우면 더 크게 보이고, 줄이면 더 작게 보입니다.

 

 

4. 점 색상 변경하기

초록색 점 색상은 아래 코드에서 변경할 수 있습니다.

background:#22c55e!important;

예를 들어 파란색으로 바꾸고 싶다면 이렇게 수정하면 됩니다.

background:#2563eb!important;

블랙톤 사이트라면 흰색이나 포인트 컬러로 변경해도 좋습니다.

 

 

5. 위젯 ID 변경하기

가장 중요한 부분입니다.

아래 ID는 예시 사이트의 갤러리 위젯 ID입니다.

w202606011900f77b66ee3

본인의 아임웹 갤러리 위젯 ID로 CSS와 JS 안의 ID를 모두 변경해야 정상 작동합니다.

---

 

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

1. 태그가 안 보여요

대부분 위젯 ID가 맞지 않아서 생기는 문제입니다.

코드 안에 있는

w202606011900f77b66ee3

부분이 실제 갤러리 위젯 ID와 같은지 확인해 주세요.

 

 

2. 디자인 모드에서는 보이는데 실제 사이트에서는 안 보여요

아임웹은 저장 후 실제 반영까지 약간의 시간이 걸릴 수 있습니다.

먼저 새로고침을 해보고, 그래도 보이지 않는다면 브라우저 캐시를 삭제한 뒤 다시 확인해 보세요.

 

 

3. 일부 카드에만 태그가 들어가요

아임웹 갤러리는 페이지 로딩 후 카드가 늦게 불러와지는 경우가 있습니다.

이 코드는 MutationObserver를 사용해서 나중에 불러와진 카드에도 태그가 붙도록 되어 있습니다.

그래도 일부만 적용된다면 갤러리 구조가 다른 위젯일 수 있으니 .item_container 클래스가 있는지 확인해야 합니다.

 

 

4. 모바일에서 위치가 어색해요

모바일에서는 아래 코드로 위치와 크기를 따로 조정하고 있습니다.

@media(max-width:768px)

모바일에서 더 작게 보이게 하고 싶다면 padding과 font-size 값을 줄이면 됩니다.

---

 

마무리 문장

아임웹은 기본 기능만으로도 홈페이지 제작이 가능하지만,

이런 작은 HTML/CSS/JS 커스텀 코드를 더하면 훨씬 전문적인 웹디자인을 만들 수 있습니다.

 

특히 포트폴리오나 작업 사례 페이지는 방문자가 짧은 시간 안에

“이 사이트가 어떤 작업을 했는지” 이해하는 것이 중요합니다.

기본 갤러리에 WORK 태그를 추가하는 것만으로도 작업물 영역이 더 명확해지고,

홈페이지 전체의 완성도도 높아집니다.

 

아임웹으로 포트폴리오 사이트나 홈페이지 제작 사례 페이지를 만들고 있다면

이번 코드를 활용해 갤러리를 조금 더 고급스럽게 꾸며보세요.

---

 

아임웹 기본 갤러리 커스텀 다른 ver

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

 

홈페이지 제작 문의

믓아 스튜디오