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

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

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

예를 들어 버튼 색상을 더 세밀하게 바꾸거나, 스크롤 효과를 추가하거나, 구글 태그 매니저 같은 추적 코드를 넣어야 하는 경우가 있습니다.

 

이럴 때 사용하는 것이 바로 공통 코드입니다.

공통 코드는 한 페이지에만 적용하는 코드가 아니라, 사이트 전체에 공통으로 적용되는 HTML/CSS/JS 코드입니다.

아임웹 공식 안내에서도 공통으로 사용할 CSS나 JavaScript는 환경설정 > SEO(검색엔진최적화) > 공통 코드 삽입 영역에 넣는 방식으로 안내하고 있습니다.

---

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

아임웹 공통 코드를 사용하면 사이트 전체에 동일한 디자인이나 기능을 적용할 수 있습니다.

예를 들어 아래와 같은 작업이 가능합니다.

 

 ☑️  구분가능한 작업

CSS	버튼 색상, 폰트, 여백, 배경색 수정
JavaScript	클릭 이벤트, 스크롤 효과, 팝업 기능
HTML 메타 코드	검색엔진 소유권 확인, 외부 스크립트 삽입
추적 코드	구글 애널리틱스, 구글 태그 매니저, 네이버 애널리틱스

 

즉, 매번 페이지마다 코드를 넣지 않아도 전체 홈페이지에 한 번에 적용할 수 있다는 장점이 있습니다.

---

사용하면 좋은 상황

아임웹 공통 코드는 이런 경우에 사용하면 좋습니다.

첫째, 모든 페이지에 같은 CSS를 적용하고 싶을 때입니다.
예를 들어 전체 버튼 스타일, 특정 폰트, 모바일 여백 등을 통일하고 싶다면 공통 코드가 편합니다.

둘째, 사이트 전체에 JavaScript 기능을 넣고 싶을 때입니다.
스크롤 애니메이션, 플로팅 버튼, 클릭 추적, 상담 버튼 이벤트 등을 모든 페이지에서 사용해야 한다면 공통 코드로 관리하는 것이 좋습니다.

셋째, 구글이나 네이버에서 제공하는 인증 코드, 추적 코드를 넣어야 할 때입니다.
홈페이지 제작 후 검색 등록이나 광고 분석을 진행할 때 자주 사용하는 방식입니다.

 

---

적용 방법

 

아임웹에서 공통 코드를 넣는 방법은 어렵지 않습니다.

아래 순서대로 진행하면 됩니다.

1. 아임웹 관리자 페이지에 접속합니다.
2. 왼쪽 메뉴에서 환경설정을 클릭합니다.
3. SEO(검색엔진최적화) 메뉴로 이동합니다.
4. 고급 설정 영역에서 공통 코드 삽입 항목을 찾습니다.
5. 넣고 싶은 HTML/CSS/JS 코드를 입력합니다.
6. 저장 후 실제 홈페이지에서 적용 여부를 확인합니다.

중요한 점은 CSS와 JavaScript를 넣을 때 반드시 태그를 감싸야 한다는 점입니다.

CSS는 <style> 태그 안에 넣고, JavaScript는 <script> 태그 안에 넣어야 합니다.

---

 

전체 코드

아래 코드는 아임웹 공통 코드 영역에 넣어 테스트할 수 있는 간단한 예시입니다.

사이트 전체의 버튼 스타일을 통일하고, 상담 버튼 클릭 시 콘솔에 기록이 남도록 만든 코드입니다.

<style>
  /* 아임웹 공통 버튼 스타일 */
  .motsa-common-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
  }

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

  @media (max-width: 768px) {
    .motsa-common-btn {
      width: 100%;
      padding: 13px 20px;
      font-size: 14px;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const commonButtons = document.querySelectorAll('.motsa-common-btn');

    commonButtons.forEach(function (button) {
      button.addEventListener('click', function () {
        console.log('공통 버튼이 클릭되었습니다.');
      });
    });
  });
</script>

위 코드를 공통 코드 영역에 넣은 뒤, 아임웹 코드 위젯이나 버튼 링크 영역에서 아래처럼 클래스를 사용하면 됩니다.

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

 

---

 

코드 수정 포인트

1. 버튼 색상 바꾸기

버튼 배경색은 아래 부분에서 수정할 수 있습니다.

background: #111827;

파란색, 베이지색, 초록색 등 홈페이지 분위기에 맞게 변경하면 됩니다.

 

2. 마우스를 올렸을 때 색상 바꾸기

마우스를 올렸을 때 색상은 아래 부분을 수정하면 됩니다.

background: #2563eb;

 

3. 버튼 둥근 정도 바꾸기

버튼의 둥근 정도는 아래 코드로 조정합니다.

border-radius: 999px;

숫자가 클수록 더 둥근 버튼이 됩니다.

 

4. 모바일 버튼 크기 조정하기

모바일 화면에서 버튼이 너무 크거나 작다면 아래 영역을 수정하면 됩니다.

@media (max-width: 768px) {
  .motsa-common-btn {
    width: 100%;
    font-size: 14px;
  }
}

 

---

 

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

1) CSS가 적용되지 않는 경우

가장 먼저 클래스명이 정확한지 확인해야 합니다.

예를 들어 CSS에는 .motsa-common-btn이라고 작성했는데, HTML에는 motsa-btn이라고 작성하면 적용되지 않습니다.

클래스명은 띄어쓰기, 철자, 대소문자까지 정확히 맞아야 합니다.

 

2) 코드가 사이트 전체를 깨뜨리는 경우

HTML 태그가 제대로 닫히지 않으면 레이아웃이 깨질 수 있습니다.

특히 아래 태그는 꼭 닫아야 합니다.

<style>
</style>

<script>
</script>

코드를 넣은 뒤 화면이 이상해졌다면 방금 추가한 코드를 먼저 삭제하고 다시 저장해보는 것이 좋습니다.

 

3) JavaScript가 작동하지 않는 경우

JavaScript는 페이지가 모두 불러와진 뒤 실행되어야 안정적입니다.

그래서 아래 코드처럼 DOMContentLoaded 안에 넣는 것이 좋습니다.

document.addEventListener('DOMContentLoaded', function () {
  // 실행할 코드
});

 

 

4) 특정 페이지에만 적용하고 싶은 경우

공통 코드에 넣으면 모든 페이지에 적용됩니다.

특정 페이지에만 적용하고 싶다면 아임웹 디자인 모드에서 해당 페이지에 코드 위젯을 추가한 뒤 코드를 넣는 방식이 더 적합합니다.

공통으로 쓸 코드는 공통 코드에 넣고, 한 페이지에서만 쓸 코드는 코드 위젯에 넣는 식으로 구분하면 관리가 쉬워집니다.

 

5) 기존 아임웹 스타일과 충돌하는 경우

아임웹 기본 스타일이 더 강하게 적용되어 내가 작성한 CSS가 보이지 않을 수 있습니다.

이럴 때는 필요한 부분에만 !important를 사용할 수 있습니다.

color: #ffffff !important;

다만 너무 많이 사용하면 나중에 수정이 어려워질 수 있으므로 꼭 필요한 경우에만 사용하는 것이 좋습니다.

 

---

 

홈페이지 제작 상담 문의

믓아 스튜디오

 

아임웹 공통 코드는 홈페이지 제작 후 디자인을 조금 더 세밀하게 다듬거나, HTML/CSS/JS를 활용해 커스텀 기능을 넣고 싶을 때 꼭 알아두면 좋은 기능입니다.

처음부터 복잡한 코드를 넣기보다는 버튼 하나, 색상 하나, 추적 코드 하나처럼 작은 단위로 테스트하면서 적용하는 것이 안전합니다.

공통 코드와 코드 위젯의 차이만 이해해도 아임웹 홈페이지를 훨씬 더 자유롭게 수정할 수 있습니다.

웹디자인 완성도를 높이고 싶다면 공통 코드를 활용해 사이트 전체의 스타일과 기능을 한 번에 관리해보세요.

 

아임웹 기본 갤러리 커스텀 버튼 추가하는 방법

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

 

아임웹 JS 적용하는 방법

아임웹 JS 적용하는 방법, 초보자도 가능한 JavaScript 가이드