아임웹에서 가장 많이 사용하는 커스텀 코드 10가지

아임웹에서 가장 많이 사용하는 커스텀 코드 10가지

아임웹은 기본 위젯만으로도 홈페이지 제작이 가능하지만, 실제로 작업하다 보면 더 세밀한 디자인이나 기능이 필요할 때가 많습니다.

예를 들어 버튼 스타일을 바꾸고 싶거나, 특정 영역에 여백을 더 주고 싶거나, 모바일에서만 다른 디자인을 적용하고 싶은 경우가 있습니다.

 

이럴때 사용하는 것이 바로 HTML/CSS/JS 커스텀 코드입니다.

 

이번 글에서는 아임웹에서 가장 많이 사용하는 커스텀 코드 10가지를 초보자도 이해하기 쉽게 정리해보겠습니다.

---

 

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

아랠 코드들은 아임웹 홈페이지 제작 시 자주 사용되는 기본 커스텀 코드입니다.

주로 다음과 같은 기능을 구현할 수 있습니다.

 

   ☑️   버튼 디자인 변경

   ☑️   모바일 전용 CSS적용

   ☑️   특정 섹션 여백 조정

   ☑️   이미지 Hover 효과

   ☑️   고정 상담 버튼 만들기

   ☑️   FAQ 아코디언 만들기

   ☑️   상단 메뉴 스타일 변경

   ☑️   부드러운 스크롤 효과

   ☑️   특정 위젯 숨기기

   ☑️   텍스트 강조 스타일 적용

 

기본 위젯만으로 부족한 부분을 보완할 때 유용합니다.

---

 

사용하면 좋은 상황

이런 경우에 사용하면 좋습니다.

상황	사용하면 좋은 코드
버튼이 너무 기본형일 때	버튼 CSS 변경
모바일 화면이 어색할 때	모바일 전용 CSS
상담 전환을 높이고 싶을 때	플로팅 버튼
콘텐츠를 접어서 보여주고 싶을 때	FAQ 아코디언
홈페이지가 밋밋해 보일 때	hover 효과
특정 영역만 숨기고 싶을 때	display none code
브랜드 느낌을 더 살리고 싶을 때	폰트·색상 CSS

 

아임웹 커스텀 코드는 디자인 완성도를 높이는 용도로 많이 사용됩니다.

---

 

적용 방법

아임웹에서 코드를 넣는 방법은 크게 두 가지입니다.

 

방법 1. HTML 위젯에 넣기

특정 페이지나 특정 섹션에만 적용하고 싶다면 HTML 위젯을 사용하면 됩니다.

 

① 아임웹 관리자 접속

② 디자인 모드 이동

③ 원하는 위치에 HTML 위젯 추가

④ 코드 붙여넣기

⑤ 저장 후 미리보기 확인

 

 방법2. 공통 코드에 넣기

전체 홈페이지에 적용할 코드라면 공통 코드에 넣는 것이 좋습니다.

 

① 아임웹 관리자 접속

② 환경설정 또는 SEO/헤더 설정 이동

③ Header 또는 Body 영역에 코드 삽입

④ 저장 후 전체 페이지 확인

 

CSS는 보통 <style> 태그 안에 넣고, JavaScript는 <script> 태그 안에 넣습니다.

---

 

전체 코드

아래는 아임웹에서 자주 사용하는 커스텀 코드 예시 10가지입니다.

 

1) 버튼 디자인 변경 코드

버튼을 조금 더 깔끔하고 브랜드 느낌 있게 바꿀 수 있습니다.

<style>
.custom-btn {
  display: inline-block;
  padding: 14px 28px;
  background: #111;
  color: #fff !important;
  border-radius: 40px;
  font-size: 16px;
  text-decoration: none;
  transition: 0.3s;
}

.custom-btn:hover {
  background: #555;
}
</style>

<a href="/contact" class="custom-btn">상담 문의하기</a>

 

2) 모바일 전용 CSS 코드

모바일에서만 글자 크기나 정렬을 다르게 적용할 때 사용합니다.

<style>
@media screen and (max-width: 768px) {
  .mobile-text {
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
  }
}
</style>

 

3) 섹션 여백 조정 코드

섹션 간 간격이 너무 좁거나 넓을 때 활용하기 좋습니다.

<style>
.custom-section {
  padding: 100px 20px;
}
@media screen and (max-width: 768px) {
  .custom-section {
    padding: 60px 20px;
  }
}
</style>

<div class="custom-section">
  <h2>브랜드 소개</h2>
  <p>홈페이지에 들어갈 내용을 작성합니다.</p>
</div>

 

4) 이미지 hover 효과 코드

이미지에 마우스를 올렸을 때 확대되는 효과입니다.

<style>
.hover-img {
  overflow: hidden;
  border-radius: 20px;
}
.hover-img img {
  width: 100%;
  transition: 0.4s;
}
.hover-img:hover img {
  transform: scale(1.08);
}
</style>

<div class="hover-img">
  <img src="이미지주소" alt="이미지">
</div>

 

5) 플로팅 상담 버튼 코드

홈페이지 하단에 고정되는 상담 버튼을 만들 수 있습니다.

<style>
.floating-btn {
  position: fixed;
  right: 20px;
  bottom: 30px;
  z-index: 9999;
  background: #111;
  color: #fff !important;
  padding: 14px 22px;
  border-radius: 50px;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
</style>
<a href="/contact" class="floating-btn">상담 문의</a>

 

6) FAQ 아코디언 코드

자주 묻는 질문을 깔끔하게 접었다 펼칠 수 있습니다.

<style>
.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 18px 0;
}
.faq-question {
  cursor: pointer;
  font-weight: 600;
}
.faq-answer {
  display: none;
  margin-top: 12px;
  color: #555;
  line-height: 1.6;
}
</style>

<div class="faq-item">
  <div class="faq-question">Q. 홈페이지 제작 기간은 얼마나 걸리나요?</div>
  <div class="faq-answer">A. 작업 범위에 따라 다르지만 보통 2~4주 정도 소요됩니다.</div>
</div>

<script>
document.querySelectorAll('.faq-question').forEach(function(question) {
  question.addEventListener('click', function() {
    const answer = this.nextElementSibling;
    answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
  });
});
</script>

 

7) 상단 메뉴 배경 변경 코드

아임웹 상단 메뉴를 더 깔끔하게 보이도록 만들 수 있습니다.

<style>
#doz_header {
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
</style>

 

8) 부드러운 스크롤 코드

버튼을 눌러 특정 섹션으로 이동할 때 부드럽게 이동하는 효과입니다.

<style>
html {
  scroll-behavior: smooth;
}
</style>

 

9) 특정 위젯 숨기기 코드

특정 요소를 숨기고 싶을 때 사용합니다.

단, 실제 적용할 때는 숨기고 싶은 위젯에 맞는 클래스명이나 ID를 확인해야 합니다.

<style>
.hide-widget {
  display: none !important;
}
</style>

 

10) 강조 텍스트 스타일 코드

중요한 문장에 형광펜처럼 강조 효과를 줄 수 있습니다.

<style>
.highlight-text {
  display: inline;
  background: linear-gradient(to top, #f8e6a0 45%, transparent 45%);
  font-weight: 700;
}
</style>
<p>우리 홈페이지는 <span class="highlight-text">전환 중심 구조</span>로 제작됩니다.</p>

---

 

코드 수정 포인트

1. 색상 변경

위 부분을 원하는 색상 코드로 바꾸면 됩니다.

예를 들어 베이지 톤으로 바꾸고 싶다면 아래처럼 수정할 수 있습니다.

background: #111;

background: #c8b89f;

 

2. 글자 크기 변경

숫자를 키우면 글자가 커지고, 줄이면 작아집니다.

font-size: 16px;

 

 

3. 버튼 링크 변경

/contact 부분을 원하는 페이지 주소로 바꾸면 됩니다.

예를 들어 카카오톡 상담 링크나 네이버 예약 링크로도 변경할 수 있습니다.

<a href="/contact">

 

4. 모바일 기준 변경

이 코드는 화면 너비가 768px 이하일 때 적용된다는 뜻입니다.

일반적으로 모바일 CSS를 적용할 때 많이 사용합니다.

max-width: 768px

---

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

1) 코드가 적용되지 않을 때

가장 먼저 저장 여부를 확인해야 합니다.

아임웹은 디자인 모드에서 코드를 넣은 뒤 저장하지 않으면 실제 페이지에 반영되지 않을 수 있습니다.

 

2) CSS가 다른 디자인에 밀릴 때

아임웹 기본 스타일이 우선 적용되는 경우가 있습니다.

이럴 때는 아래처럼 !important를 추가하면 해결되는 경우가 많습니다.

color: #fff !important;

 

3) 모바일에서 디자인이 깨질 때

PC 화면만 보고 작업하면 모바일에서 여백이나 글자 크기가 어색해질 수 있습니다.

반드시 모바일 미리보기까지 확인해야 합니다.

 

4) JavaScript가 작동하지 않을 때

스크립트 코드가 너무 위쪽에 있으면 요소를 찾지 못할 수 있습니다.

이 경우 HTML 코드 아래쪽에 <script>를 넣는 것이 좋습니다.

 

5) 위젯 ID를 잘못 입력했을 때

특정 위젯에만 적용하려면 정확한 ID나 클래스명이 필요합니다.

크롬 개발자 도구를 이용해 적용할 영역을 확인한 뒤 코드를 넣어야 합니다.

---

 

홈페이지 제작 상담

믓아 스튜디오

아임웹은 초보자도 쉽게 홈페이지 제작을 시작할 수 있는 장점이 있지만, 브랜드에 맞는 디자인과 기능을 만들기 위해서는 커스텀 코드 활용이 필요할 때가 많습니다. HTML/CSS/JS 코드를 조금만 활용해도 버튼, 여백, 모바일 디자인, 상담 버튼, FAQ 영역처럼 실제 홈페이지 완성도에 큰 영향을 주는 부분을 개선할 수 있습니다.

 

처음부터 복잡한 코드를 적용하기보다는 오늘 소개한 기본 코드부터 하나씩 테스트해보는 것을 추천드립니다.

아임웹 커스텀 코드를 잘 활용하면 기본 템플릿 느낌을 줄이고, 더 전문적인 웹디자인을 구현할 수 있습니다.

 

 

아임웹 HTML 위젯 사용법

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

 

아임웹 풀페이지 슬라이드 만들기

아임웹 풀페이지 슬라이드 만들기 | 스크롤 연동 메인 비주얼 코드