아임웹 위젯 ID 찾는 방법, 커스텀 코드 적용 전 꼭 확인하세요

아임웹 위젯 ID 찾는 방법

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

예를 들어 특정 버튼만 색상을 바꾸거나, 입력폼 디자인을 조금 다르게 만들거나, 특정 이미지 위젯에만 효과를 넣고 싶은 경우가 있습니다.

 

이때 필요한 것이 바로 위젯 ID입니다.

위젯 ID는 아임웹 안에 들어간 각각의 요소를 구분하는 이름이라고 생각하시면 됩니다.

HTML/CSS/JS 커스텀 코드를 적용할 때 이 ID를 정확히 알아야 원하는 부분에만 코드가 적용됩니다.

---

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

이번 글은 특정 효과를 만드는 코드라기보다,
아임웹에서 커스텀 코드를 적용하기 전 필요한 위젯 ID를 찾는 방법을 정리한 글입니다.

위젯 ID를 찾으면 아래와 같은 작업이 가능해집니다.

 

☑️ 활용 상황설명

특정 버튼만 수정	전체 버튼이 아니라 원하는 버튼 하나만 디자인 변경
특정 입력폼만 수정	문의폼, 상담폼 등 개별 입력폼 디자인 조정
특정 이미지에 효과 적용	마우스 오버, 애니메이션 효과 적용
특정 텍스트 영역 수정	제목, 문장, 안내 문구 스타일 변경
JS 기능 연결	클릭 이벤트, 스크롤 효과 등 적용

 

아임웹 공식 도움말에서도 섹션 ID를 활용해 특정 섹션으로 이동하는 앵커 링크를 만들 수 있다고 안내하고 있습니다.

위젯 ID도 비슷하게 특정 요소를 구분하기 위해 사용합니다.

---

사용하면 좋은 상황

아래 상황이라면 위젯 ID를 확인해두는 것이 좋습니다.

📌 첫째, 아임웹 기본 설정으로 원하는 디자인이 나오지 않을 때입니다.
📌 둘째, 같은 페이지 안에서 특정 위젯 하나만 다르게 꾸미고 싶을 때입니다.
📌 셋째, HTML/CSS/JS 커스텀 코드를 적용했는데 다른 영역까지 함께 바뀌는 경우입니다.
📌 넷째, 홈페이지 제작 후 버튼, 입력폼, 배너, 이미지 영역에 개별 효과를 넣고 싶을 때입니다.

 

특히 아임웹 커스텀 코드 작업은 전체 페이지에 영향을 줄 수 있기 때문에, 정확한 위젯 ID를 기준으로 코드를 작성하는 것이 안전합니다.

아임웹에서도 코드 작성 시 섹션 ID나 다른 위젯 ID를 직접 호출하는 경우가 많고, 잘못 적용하면 다른 위젯에 영향을 줄 수 있다고 안내하고 있습니다.

---

위젯 ID 확인 하는 방법

아임웹 내에서 위젯 ID를 확인 하는 방법은 두가지가 있습니다.

첫번째, 원하는 위젯 우클릭 후 텍스트 설정 > 우측 화면에서 위젯 ID 확인

 

두번째, 원하는 위젯 우클릭 후 위젯 ID 복사 후 확인

---

적용 방법

1단계. 아임웹 사이트를 미리보기 또는 게시 상태로 열기

먼저 위젯 ID를 확인할 페이지를 엽니다.

디자인 모드 화면보다 미리보기 화면 또는 실제 게시된 화면에서 확인하는 것이 좋습니다.

코드 위젯이나 일부 커스텀 요소는 디자인 모드에서 제대로 보이지 않을 수 있기 때문입니다.

 

2단계. 위젯 위에서 마우스 오른쪽 클릭

ID를 확인하고 싶은 버튼, 이미지, 텍스트, 입력폼 위에 마우스를 올립니다.

그다음 마우스 오른쪽 버튼을 클릭합니다.

메뉴가 나오면 검사 또는 Inspect를 클릭합니다.

크롬 브라우저 기준으로 설명하면 가장 쉽습니다.

 

3단계. 개발자 도구에서 위젯 영역 확인

오른쪽 또는 아래쪽에 개발자 도구가 열립니다.

처음 보면 복잡해 보일 수 있지만, 전부 볼 필요는 없습니다.

선택된 코드 주변에서 아래와 비슷한 형태를 찾으면 됩니다.

<div id="w20240601abcd12345" class="widget">

또는

<div id="text_w20240601abcd12345">

여기서 중요한 부분은 id="..." 안에 들어간 값입니다.

예를 들어 아래 코드라면,

id="w20240601abcd12345"

위젯 ID는 이것입니다.

#w20240601abcd12345

CSS에서는 ID 앞에 #을 붙여 사용합니다.

---

전체 코드

아래는 찾은 위젯 ID를 기준으로 특정 위젯에만 디자인을 적용하는 예시 코드입니다.

<style>
/* 아래 ID를 본인 아임웹 위젯 ID로 변경하세요 */
#w20240601abcd12345 {
  border-radius: 20px;
  overflow: hidden;
}

/* 특정 위젯 안의 버튼만 수정 */
#w20240601abcd12345 a {
  background: #222;
  color: #fff;
  border-radius: 999px;
  padding: 14px 24px;
  transition: all 0.3s ease;
}

/* 마우스를 올렸을 때 효과 */
#w20240601abcd12345 a:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}
</style>

위 코드에서 반드시 바꿔야 하는 부분은 이곳입니다.

#w20240601abcd12345

본인이 찾은 아임웹 위젯 ID로 변경하면 됩니다.

예를 들어 내 위젯 ID가 w20260622abcde라면 아래처럼 수정합니다.

#w20260622abcde {
  border-radius: 20px;
  overflow: hidden;
}

---

코드 수정 포인트

1. 위젯 ID 변경

가장 먼저 바꿔야 할 부분은 위젯 ID입니다.

#w20240601abcd12345

이 부분을 본인 사이트에서 확인한 ID로 바꾸면 됩니다.

ID가 틀리면 코드가 적용되지 않습니다.

 

2. 둥근 모서리 값 변경

border-radius: 20px;

숫자가 클수록 더 둥글어집니다.

깔끔한 카드 느낌은 16px~24px 정도가 적당합니다.

 

3. 버튼 색상 변경

background: #222;
color: #fff;

background는 버튼 배경색이고,
color는 글자색입니다.

브랜드 컬러가 있다면 이 부분만 바꿔도 홈페이지 분위기가 달라집니다.

 

4. 마우스 오버 효과 변경

transform: translateY(-2px);

마우스를 올렸을 때 버튼이 살짝 위로 올라가는 효과입니다.

움직임이 부담스럽다면 이 줄은 삭제해도 됩니다.

---

 

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

1. 코드가 적용되지 않는 경우

가장 먼저 위젯 ID가 정확한지 확인해야 합니다.

CSS에서는 ID 앞에 반드시 #을 붙여야 합니다.

잘못된 예시는 아래와 같습니다.

w20240601abcd12345 {
}

올바른 예시는 아래와 같습니다.

#w20240601abcd12345 {
}

 

 

2. 다른 위젯까지 같이 바뀌는 경우

선택자가 너무 넓게 작성된 경우입니다.

예를 들어 아래처럼 작성하면 페이지 안의 모든 버튼에 적용될 수 있습니다.

a {
  background: #222;
}

특정 위젯 안의 버튼만 바꾸려면 이렇게 작성하는 것이 좋습니다.

#w20240601abcd12345 a {
  background: #222;
}

 

 

3. 모바일에서 모양이 깨지는 경우

PC 기준으로만 여백을 크게 잡으면 모바일에서 어색해질 수 있습니다.

이럴 때는 아래처럼 모바일용 코드를 추가할 수 있습니다.

<style>
@media (max-width: 768px) {
  #w20240601abcd12345 a {
    padding: 12px 18px;
    font-size: 14px;
  }
}
</style>

 

 

4. 디자인 모드에서는 안 보이는 경우

아임웹에서는 일부 코드가 디자인 모드에서 바로 보이지 않을 수 있습니다.

이럴 때는 미리보기 또는 게시 후 실제 화면에서 확인하는 것이 좋습니다. 아임웹 공식 도움말에서도 코드 위젯은 디자인 모드에서 빈 박스로 보일 수 있고, 실제 결과는 미리보기나 게시 후 방문자 화면에서 확인해야 한다고 안내하고 있습니다.

---

홈페이지 제작 상담 문의

믓아 스튜디오

 

아임웹 위젯 ID를 찾는 방법은 처음에는 어렵게 느껴질 수 있지만, 한 번만 익숙해지면 커스텀 코드 작업이 훨씬 쉬워집니다.

특정 버튼, 입력폼, 이미지, 텍스트에만 HTML/CSS/JS 코드를 적용할 수 있기 때문에 홈페이지 제작 완성도를 높이는 데 도움이 됩니다.

아임웹으로 만든 홈페이지를 조금 더 브랜드에 맞게 다듬고 싶다면, 위젯 ID를 기준으로 필요한 부분만 정확하게 수정하는 방식으로 작업해보시기 바랍니다.

 

 

아임웹 HTML 위젯 사용법

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

 

아임웹 CSS 적용하는 방법

아임웹 CSS 적용하는 방법｜초보자도 가능한 디자인 수정 방법