아임웹 기본 텍스트 위젯 커스텀 코드 | 고급스러운 글래스 효과 만들기

 

아임웹으로 홈페이지 제작을 하다 보면 기본 텍스트 위젯만으로는

디자인이 조금 밋밋하게 느껴질 때가 있습니다.

 

특히 서비스 소개, 프로세스 설명, 장점 정리처럼 3개 정도의 내용을 나란히 보여줘야 할 때는

카드형 디자인을 적용하면 훨씬 깔끔하고 전문적인 느낌을 줄 수 있습니다.

 

이번 글에서는 아임웹 텍스트 위젯에 적용할 수 있는 HTML/CSS 커스텀 코드를 소개합니다.
검정 배경에 잘 어울리는 글래스 효과, 배경 숫자, hover 애니메이션, 상단 그라데이션 라인까지 포함된 카드 디자인입니다.

---

 

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

이 코드는 아임웹 텍스트 위젯 3개를 카드처럼 보이게 만들어줍니다.

적용되는 효과는 다음과 같습니다.

• 반투명 유리 느낌의 카드 배경
• 둥근 모서리와 얇은 테두리
• 마우스를 올렸을 때 위로 떠오르는 효과
• 카드 뒤쪽에 은은하게 보이는 큰 숫자
• 상단에 움직이는 그라데이션 라인
• 모바일 화면에 맞춘 글자 크기와 여백 조정

기본 텍스트 위젯에 작성된 첫 번째 번호는 숨기고, CSS의 가상 요소를 이용해 더 고급스러운 숫자 배경으로 보여주는 방식입니다.

---

 

사용하면 좋은 상황

이 코드는 홈페이지 제작 시 다음과 같은 영역에 사용하기 좋습니다.

• 서비스 장점 3가지 소개
• 제작 프로세스 안내
• 브랜드 핵심 가치 정리
• 병원, 법률사무소, 제조업 홈페이지의 신뢰 요소 정리
• 랜딩페이지의 핵심 포인트 카드
• 포트폴리오 사이트의 섹션 카드 디자인

특히 배경이 검정색이거나 어두운 톤인 웹디자인에 잘 어울립니다.

---

 

적용 방법

아임웹에서 적용하는 방법은 간단합니다.

1. 먼저 텍스트 위젯 3개를 준비합니다.
2. 각 텍스트 위젯 안에는 아래와 같이 내용을 넣습니다.

<p>01</p>
<p>기획 중심 설계</p>
<p>방문자가 필요한 정보를 빠르게 이해할 수 있도록 구조를 먼저 설계합니다.</p>

3. 첫 번째 줄의 번호는 실제 화면에서는 숨겨지고, 카드 배경 숫자로 다시 표현됩니다.

4. 그다음 아임웹 코드 위젯을 추가한 뒤, 아래 전체 코드를 붙여넣으면 됩니다.

---

 

전체 코드

<style>
#w2026060769b200be683cf,
#w202606075289b7f85b2c9,
#w202606079c49c852ef329{
  position:relative;
  overflow:hidden;
  padding:50px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:32px !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:all .4s ease !important;
}

#w2026060769b200be683cf:hover,
#w202606075289b7f85b2c9:hover,
#w202606079c49c852ef329:hover{
  transform:translateY(-10px);
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 30px 70px rgba(0,0,0,.42);
}

/* 배경 숫자 */
#w2026060769b200be683cf:before{content:"01";}
#w202606075289b7f85b2c9:before{content:"02";}
#w202606079c49c852ef329:before{content:"03";}

#w2026060769b200be683cf:before,
#w202606075289b7f85b2c9:before,
#w202606079c49c852ef329:before{
  position:absolute;
  top:-20px;
  right:20px;
  font-size:120px;
  font-weight:900;
  color:rgba(255,255,255,.045);
  line-height:1;
  pointer-events:none;
}

/* 상단 애니메이션 그라데이션 */
#w2026060769b200be683cf:after,
#w202606075289b7f85b2c9:after,
#w202606079c49c852ef329:after{
  content:"";
  position:absolute;
  left:-60%;
  top:0;
  width:60%;
  height:2px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.15),
    rgba(255,255,255,1),
    rgba(255,255,255,.15),
    transparent
  );
  animation:motsaCardLine 2.8s ease-in-out infinite;
  opacity:.9;
}

@keyframes motsaCardLine{
  0%{left:-60%;}
  100%{left:100%;}
}

/* 기존 번호 숨김 */
#w2026060769b200be683cf .fr-view p:nth-child(1),
#w202606075289b7f85b2c9 .fr-view p:nth-child(1),
#w202606079c49c852ef329 .fr-view p:nth-child(1){
  display:none !important;
}

/* 제목 */
#w2026060769b200be683cf .fr-view p:nth-child(2),
#w202606075289b7f85b2c9 .fr-view p:nth-child(2),
#w202606079c49c852ef329 .fr-view p:nth-child(2){
  margin:0 0 18px !important;
  color:#fff !important;
  font-size:34px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  position:relative;
  z-index:2;
}

/* 설명 */
#w2026060769b200be683cf .fr-view p:nth-child(3),
#w202606075289b7f85b2c9 .fr-view p:nth-child(3),
#w202606079c49c852ef329 .fr-view p:nth-child(3){
  margin:0 !important;
  color:rgba(255,255,255,.65) !important;
  font-size:16px !important;
  line-height:1.9 !important;
  position:relative;
  z-index:2;
}

@media(max-width:768px){
  #w2026060769b200be683cf,
  #w202606075289b7f85b2c9,
  #w202606079c49c852ef329{
    padding:32px !important;
  }

  #w2026060769b200be683cf:before,
  #w202606075289b7f85b2c9:before,
  #w202606079c49c852ef329:before{
    font-size:80px;
  }

  #w2026060769b200be683cf .fr-view p:nth-child(2),
  #w202606075289b7f85b2c9 .fr-view p:nth-child(2),
  #w202606079c49c852ef329 .fr-view p:nth-child(2){
    font-size:24px !important;
  }
}
</style>

---

 

코드 수정 포인트

1. 위젯 ID 변경

아임웹에서는 위젯마다 고유 ID가 다릅니다.

#w2026060769b200be683cf

이 부분을 본인 사이트의 텍스트 위젯 ID로 변경해야 합니다.

 

2. 카드 숫자 변경

배경에 보이는 숫자는 아래 부분에서 수정할 수 있습니다.

content:"01";

원하는 숫자나 짧은 영문 텍스트로 바꿔도 됩니다.

 

3. 카드 여백 변경

카드 안쪽 여백은 아래 값을 수정하면 됩니다.

padding:50px !important;

숫자가 클수록 카드 내부가 여유 있어 보이고, 작을수록 더 압축된 느낌이 납니다.

 

4. 제목 크기 변경

제목 크기는 아래 부분에서 조정합니다.

font-size:34px !important;

모바일에서는 따로 24px로 줄어들도록 설정되어 있습니다.

---

 

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

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

가장 먼저 위젯 ID가 정확한지 확인해야 합니다.
아임웹에서 코드가 안 먹는 대부분의 경우는 위젯 ID가 다르기 때문입니다.

 

2. 카드 안의 글자가 이상하게 잡히는 경우

이 코드는 텍스트 위젯 안의 문단 순서를 기준으로 작동합니다.

<p>번호</p>
<p>제목</p>
<p>설명</p>

이 순서가 달라지면 제목과 설명 스타일이 다르게 적용될 수 있습니다.

 

3. 배경 숫자가 너무 진한 경우

아래 opacity 값을 더 낮추면 됩니다.

color:rgba(255,255,255,.045);

예를 들어 더 연하게 만들고 싶다면 .03 정도로 변경하면 됩니다.

 

4. 모바일에서 카드가 너무 커 보이는 경우

모바일 padding 값을 줄이면 됩니다.

padding:32px !important;

24px 정도로 줄이면 더 컴팩트하게 보입니다.

---

 

마무리 문장

아임웹은 기본 기능만 사용해도 홈페이지 제작이 가능하지만,

HTML/CSS 커스텀 코드를 함께 활용하면 훨씬 더 완성도 높은 웹디자인을 만들 수 있습니다.

이번 카드 디자인 코드는 서비스 소개, 제작 프로세스, 핵심 장점 영역에 활용하기 좋으며,

어두운 배경의 고급스러운 랜딩페이지에도 잘 어울립니다.

간단한 CSS 수정만으로도 분위기가 크게 달라지기 때문에 본인 사이트 컬러와 콘텐츠에 맞게 조금씩 조정해보시면 좋습니다.

 

아임웹 홈페이지 제작 상담 문의

믓아 스튜디오

 

 

아임웹 기본 텍스트 위젯 꾸미기

아임웹 기본 텍스트 위젯 꾸미기 | 호버 효과가 적용된 프리미엄 카드 디자인

 

아임웹 기본 텍스트 위젯 꾸미기