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

아임웹으로 홈페이지를 만들다 보면 기본 기능만으로는 원하는 디자인이나 기능을 구현하기 어려울 때가 있습니다.

예를 들어,

• 버튼을 더 예쁘게 만들고 싶을 때
• 후기 슬라이드를 넣고 싶을 때
• 문의 버튼을 고정하고 싶을 때
• 탭 메뉴나 FAQ 아코디언을 만들고 싶을 때
• 기본 위젯보다 더 자유로운 디자인을 넣고 싶을 때

이럴 때 사용하는 기능이 바로 HTML 위젯입니다.

HTML 위젯을 사용하면 아임웹 안에서도 HTML, CSS, JavaScript 코드를 넣어 원하는 디자인과 기능을 직접 구현할 수 있습니다.

 

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

 

---

1. 아임웹 HTML 위젯이란?

아임웹 HTML 위젯은 페이지 안에 직접 코드를 넣을 수 있는 위젯입니다.

쉽게 말하면,

 

아임웹 기본 위젯으로 만들기 어려운 디자인이나 기능을 직접 넣을 수 있는 공간

 

이라고 보면 됩니다.

HTML 위젯에는 보통 아래 3가지를 넣을 수 있습니다.

HTML 구조
CSS 디자인
JavaScript 동작

예를 들어 버튼 하나를 만든다면,

• HTML: 버튼의 구조
• CSS: 버튼의 색상, 크기, 여백, 둥근 정도
• JavaScript: 클릭했을 때 움직임이나 기능

을 담당합니다.

---

 

2. HTML 위젯은 어디에 있나요?

아임웹 관리자에서 원하는 페이지로 이동한 뒤,

1. 디자인 모드 접속
2. 원하는 섹션 선택
3. 위젯 추가 클릭
4. HTML 위젯 선택
5. 코드 입력
6. 저장

순서로 사용할 수 있습니다.

HTML 위젯은 일반 텍스트나 이미지 위젯처럼 원하는 위치에 배치할 수 있습니다.

---

 

3. HTML 위젯을 사용하는 경우

HTML 위젯은 이런 상황에서 많이 사용합니다.

기본 디자인보다 더 자유롭게 꾸미고 싶을 때

아임웹 기본 버튼, 카드, 섹션 디자인이 부족할 때 HTML 위젯으로 직접 디자인할 수 있습니다.

움직이는 효과를 넣고 싶을 때

스크롤 등장 효과, 숫자 카운트업, 슬라이드, 탭 전환 같은 기능을 넣을 수 있습니다.

문의 전환 요소를 강화하고 싶을 때

하단 고정 문의바, 플로팅 상담 버튼, CTA 버튼 등을 만들 수 있습니다.

특정 섹션만 커스텀하고 싶을 때

전체 홈페이지를 새로 만드는 것이 아니라, 필요한 부분만 커스텀할 수 있습니다.

---

 

4. 가장 기본적인 HTML 위젯 코드 예시

아래 코드는 HTML 위젯에 바로 넣어볼 수 있는 간단한 버튼 코드입니다.

<div class="motsa-custom-box">
  <h3>아임웹 HTML 위젯 예시</h3>
  <p>이 영역은 HTML 위젯으로 만든 커스텀 박스입니다.</p>
  <a href="#contact" class="motsa-custom-btn">문의하기</a>
</div>

<style>
  .motsa-custom-box {
    padding: 40px;
    background: #f7f8fa;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    text-align: center;
    font-family: Pretendard, sans-serif;
  }

  .motsa-custom-box h3 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 800;
    color: #111827;
  }

  .motsa-custom-box p {
    margin: 0 0 24px;
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
  }

  .motsa-custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    background: #111827;
    color: #ffffff;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
  }

  .motsa-custom-btn:hover {
    transform: translateY(-3px);
    background: #2563eb;
  }

  @media (max-width: 768px) {
    .motsa-custom-box {
      padding: 28px 20px;
      border-radius: 16px;
    }

    .motsa-custom-box h3 {
      font-size: 22px;
    }

    .motsa-custom-box p {
      font-size: 15px;
    }
  }
</style>

---

 

5. HTML 위젯 사용 시 주의할 점

1. 코드가 다른 영역에 영향을 줄 수 있습니다

CSS 클래스명을 너무 흔하게 쓰면 다른 위젯에 영향을 줄 수 있습니다.

예를 들어 .box, .button, .title 같은 이름은 피하는 것이 좋습니다.

대신 아래처럼 고유한 이름을 사용하는 것이 좋습니다.

.motsa-custom-box
.motsa-custom-btn
.motsa-review-card

 

 

2. 모바일 화면을 꼭 확인해야 합니다

PC에서는 예쁘게 보여도 모바일에서 깨질 수 있습니다.

그래서 HTML 위젯 코드를 넣을 때는 반드시 모바일용 CSS도 같이 작성하는 것이 좋습니다.

@media (max-width: 768px) {
  /* 모바일 스타일 */
}

 

 

3. JavaScript는 충돌 가능성이 있습니다

슬라이드, 탭, 팝업처럼 움직이는 기능을 만들 때는 JavaScript를 사용합니다.

하지만 기존 아임웹 스크립트나 다른 위젯과 충돌할 수 있으므로, 코드 범위를 명확히 잡는 것이 중요합니다.

 

4. 너무 많은 코드를 한 페이지에 넣지 않는 것이 좋습니다

HTML 위젯을 많이 사용하면 페이지 로딩 속도가 느려질 수 있습니다.

필요한 기능만 정리해서 넣는 것이 좋습니다.

---

 

6. HTML 위젯으로 만들 수 있는 기능 예시

아임웹 HTML 위젯으로는 이런 기능들을 만들 수 있습니다.

• 후기 슬라이드
• FAQ 아코디언
• 탭 메뉴
• 카운트업 숫자 애니메이션
• 하단 고정 문의바
• 플로팅 버튼
• 이미지 확대 모달
• 카드 hover 효과
• 스크롤 등장 애니메이션
• 비교표 디자인
• Before / After 슬라이더
• 무한 로고 슬라이드

기본 위젯으로는 제한적인 기능도 HTML 위젯을 사용하면 훨씬 자유롭게 구현할 수 있습니다.

---

 

7. HTML 위젯이 필요한 이유

아임웹은 초보자도 쉽게 홈페이지를 만들 수 있다는 장점이 있습니다.

하지만 브랜드 느낌을 더 살리거나, 전환율을 높이기 위한 구조를 만들려면 기본 기능만으로는 부족할 수 있습니다.

특히 홈페이지 제작에서는 단순히 예쁜 디자인보다

• 사용자가 빠르게 이해하는 구조
• 문의 버튼이 잘 보이는 위치
• 신뢰감을 주는 후기 영역
• 모바일에서 보기 편한 구성
• 클릭하고 싶은 CTA

가 중요합니다.

이런 요소들은 HTML 위젯을 활용하면 훨씬 정교하게 만들 수 있습니다.

---

 

8. HTML 위젯 적용이 어려울 때

HTML 위젯은 처음에는 어렵게 느껴질 수 있습니다.

특히 코드가 깨지거나, 모바일에서 안 맞거나, 기존 아임웹 위젯과 충돌하는 경우가 생길 수 있습니다.

이럴 때는 단순히 코드를 복사해서 넣기보다 현재 페이지 구조에 맞게 수정하는 과정이 필요합니다.

같은 코드라도 페이지 구성, 섹션 ID, 위젯 위치에 따라 결과가 달라질 수 있기 때문입니다.

---

 

마무리

아임웹 HTML 위젯은 기본 기능의 한계를 보완해주는 강력한 기능입니다.

단순한 버튼부터 슬라이드, 탭 메뉴, 고정 문의바, 스크롤 애니메이션까지 다양한 커스텀 기능을 구현할 수 있습니다.

아임웹으로 홈페이지를 만들고 있다면 HTML 위젯 사용법을 알아두는 것만으로도 디자인과 기능의 폭이 훨씬 넓어집니다.

직접 적용이 어렵거나, 아임웹 홈페이지에 맞는 커스텀 코드 제작이 필요하다면 전문 제작을 통해 안정적으로 구현하는 것도 좋은 방법입니다.

 

믓아 스튜디오