아임웹 HTML/CSS/JS 심화학습 가이드｜커스텀 코드 적용 전 꼭 알아야 할 것

아임웹 HTML/CSS/JS 심화학습 가이드｜커스텀 코드 적용 전 꼭 알아야 할 것

아임웹에서 HTML, CSS, JS 커스텀 코드를 활용하는 방법을 쉽게 정리했습니다. 홈페이지 제작 시 활용할 수 있는 실전 예제와 적용 방법, 수정 포인트까지 초보자도 따라 할 수 있도록 안내합니다.

 

아임웹은 기본 기능만으로도 홈페이지 제작이 가능하지만, 원하는 디자인이나 움직임을 더 세밀하게 표현하려면 HTML/CSS/JS를 함께 활용하는 경우가 많습니다. 특히 버튼 스타일, 섹션 디자인, 스크롤 효과, 탭 메뉴, 팝업, 애니메이션처럼 기본 위젯만으로 구현하기 어려운 부분은 커스텀 코드를 사용하면 훨씬 자유롭게 조정할 수 있습니다.

 

이번 글에서는 아임웹에서 HTML/CSS/JS 커스텀 코드를 사용할 때 알아두면 좋은 기본 구조와 적용 방법을 초보자 기준으로 쉽게 정리해보겠습니다.

---

이 코드로 구현되는 기능 설명

HTML/CSS/JS는 각각 역할이 다릅니다.

HTML은 화면에 들어갈 구조를 만듭니다.

예를 들어 버튼, 박스, 제목, 설명문 같은 기본 뼈대를 만드는 역할입니다.

 

1. CSS는 디자인을 담당합니다.
글자 크기, 색상, 여백, 배경색, 둥근 모서리, hover 효과 등을 조정할 수 있습니다.

 

2. JS는 움직임이나 동작을 담당합니다.
버튼을 클릭했을 때 메뉴가 열리거나, 스크롤할 때 요소가 움직이거나, 특정 섹션을 보이게 하는 기능을 만들 수 있습니다.

 

즉, HTML/CSS/JS를 함께 사용하면 아임웹 홈페이지 안에서도 더 완성도 높은 웹디자인을 구현할 수 있습니다.

---

사용하면 좋은 상황

아임웹 커스텀 코드는 이런 상황에서 사용하면 좋습니다.

• 기본 버튼 디자인이 아쉬울 때
• 특정 섹션만 다르게 꾸미고 싶을 때
• 마우스를 올렸을 때 반응하는 효과를 넣고 싶을 때
• 스크롤 애니메이션을 추가하고 싶을 때
• 브랜드 분위기에 맞는 레이아웃을 만들고 싶을 때
• 기본 위젯으로 구현하기 어려운 디자인이 있을 때

단, 모든 부분을 코드로 만들 필요는 없습니다.
기본 위젯으로 가능한 부분은 아임웹 기능을 사용하고, 꼭 필요한 부분에만 커스텀 코드를 적용하는 것이 관리하기 좋습니다.

---

적용 방법

아임웹에서 커스텀 코드를 적용하는 방법은 보통 두 가지입니다.

첫 번째는 HTML 위젯을 사용하는 방법입니다.디자인 모드에서 HTML 위젯을 추가한 뒤, 원하는 코드를 붙여넣으면 됩니다.
두 번째는 사이트 설정의 코드 삽입 영역을 사용하는 방법입니다.공통으로 적용해야 하는 CSS나 JS가 있다면 이 방법을 사용할 수 있습니다.

초보자라면 먼저 HTML 위젯에 코드를 넣어 테스트하는 방식을 추천합니다.
특정 섹션 안에서만 작동하기 때문에 오류가 생겨도 확인하고 수정하기 쉽습니다.

---

전체 코드

아래는 HTML/CSS/JS 구조를 한 번에 이해하기 좋은 예시 코드입니다.
아임웹 HTML 위젯에 그대로 붙여넣어 사용할 수 있습니다.

<section class="custom-code-section">
  <div class="custom-code-inner">
    <p class="custom-label">CUSTOM DESIGN</p>
    <h2>아임웹 커스텀 코드 활용하기</h2>
    <p class="custom-desc">
      HTML/CSS/JS를 활용하면 기본 위젯보다 더 섬세한 디자인과 움직임을 만들 수 있습니다.
    </p>

    <button class="custom-btn" type="button">
      자세히 보기
    </button>
  </div>
</section>

<style>
.custom-code-section {
  width: 100%;
  padding: 100px 24px;
  background: #f8f6f1;
  box-sizing: border-box;
}

.custom-code-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.custom-label {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #777;
}

.custom-code-inner h2 {
  margin: 0 0 24px;
  font-size: 42px;
  font-weight: 600;
  color: #222;
  line-height: 1.3;
}

.custom-desc {
  margin: 0 auto 36px;
  max-width: 620px;
  font-size: 17px;
  color: #555;
  line-height: 1.8;
}

.custom-btn {
  width: 160px;
  height: 48px;
  border: none;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.custom-code-section.active .custom-code-inner {
  animation: fadeUp 0.8s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .custom-code-section {
    padding: 70px 20px;
  }

  .custom-code-inner h2 {
    font-size: 30px;
  }

  .custom-desc {
    font-size: 15px;
  }
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const section = document.querySelector(".custom-code-section");

  if (!section) return;

  window.addEventListener("scroll", function () {
    const sectionTop = section.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;

    if (sectionTop < windowHeight * 0.8) {
      section.classList.add("active");
    }
  });
});
</script>

---

코드 수정 포인트

1. 배경색 변경

이 부분의 색상값을 변경하면 섹션 배경색을 바꿀 수 있습니다.
브랜드 컬러에 맞춰 베이지, 화이트, 블랙, 그레이 계열로 변경해도 좋습니다.

background: #f8f6f1;

 

2. 제목 크기 변경

숫자를 키우면 제목이 커지고, 줄이면 더 차분한 느낌이 됩니다.
모바일에서는 별도 설정이 들어가 있으므로 PC와 모바일 크기를 따로 조정할 수 있습니다.

font-size: 42px;

 

3. 버튼 색상 변경

버튼 배경색과 글자색을 변경하는 부분입니다.
홈페이지 제작 시 브랜드 분위기에 맞게 버튼 컬러를 맞추면 전체 디자인 완성도가 높아집니다.

background: #111;
color: #fff;

 

4. 애니메이션 속도 변경

0.8s 숫자를 줄이면 빠르게 나타나고, 늘리면 더 부드럽게 나타납니다.

animation: fadeUp 0.8s ease forwards;

---

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

1. 코드가 아예 보이지 않는 경우

HTML 위젯에 코드가 제대로 들어갔는지 먼저 확인해야 합니다.
특히 <style>이나 <script> 태그가 빠지면 디자인이나 동작이 적용되지 않을 수 있습니다.

 

2. 디자인이 깨지는 경우

아임웹 기존 섹션이나 위젯 스타일과 클래스명이 겹칠 수 있습니다.
이럴 때는 클래스명을 더 독립적으로 바꿔주는 것이 좋습니다.

예를 들어 .box, .btn처럼 흔한 이름보다는 .custom-code-section, .custom-btn처럼 구체적인 이름을 사용하는 것이 안전합니다.

 

3. 모바일에서 글자가 너무 큰 경우

모바일 전용 CSS를 확인해야 합니다.

@media (max-width: 768px)

이 부분 안에 모바일용 글자 크기와 여백을 따로 설정하면 됩니다.

 

4. 스크립트가 작동하지 않는 경우

JS는 HTML 구조가 먼저 불러와진 뒤 실행되어야 합니다.
그래서 예시 코드처럼 아래 구문을 넣어주는 것이 좋습니다.

document.addEventListener("DOMContentLoaded", function () {

이 코드는 페이지가 준비된 뒤 스크립트가 실행되도록 도와줍니다.

---

 

HTML/CSS/JS 커스텀 코드

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

HTML/CSS/JS 커스텀 코드를 함께 활용하면 훨씬 더 섬세한 웹디자인을 만들 수 있습니다.

 

처음부터 복잡한 기능을 만들려고 하기보다는, 버튼 하나나 섹션 하나처럼 작은 부분부터 수정해보는 것이 좋습니다.

커스텀 코드는 홈페이지의 완성도를 높여주는 도구입니다.

브랜드 분위기와 사용자의 흐름에 맞게 적절히 활용하면, 단순히 예쁜 사이트를 넘어 실제 문의와 전환에 도움이 되는 홈페이지로 발전시킬 수 있습니다.

---

홈페이지 제작 상담 문의

믓아 스튜디오

 

 

아임웹 HTML 위젯 사용법

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

 

아임웹 공통 코드 넣는 방법

아임웹 공통 코드 넣는 방법｜HTML/CSS/JS 커스텀 코드 적용 가이드