GODRICH

뱃지 디자인 UI 9종 — 신상·세일·인증 배지 코드

· Godrich · 9종 · 5분 읽기

피드백SCSSCSS만자동 재생결제·쇼핑알림

뱃지 디자인 UI는 상품 썸네일이나 이름 옆에 작게 붙어 지금 상태를 알려주는 라벨 장식이다. NEW·세일·인증·품절처럼 사진 없이 코드 몇 줄로 만들 수 있고, 움직임 하나만 더하면 복붙 몇 줄로도 훨씬 눈에 띈다. 뱃지 디자인 UI 9가지를 모았다.

01 badge-new-ribbon 02 badge-sale-percent 03 badge-verified-check 04 badge-beta-pill 05 badge-live-pulse-dot 06 badge-count-notification 07 badge-trending-flame 08 badge-limited-stock 09 badge-sold-out-overlay

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아홉 개는 인기순이 아니라 뱃지가 실제 쇼핑·서비스 화면에서 겪는 순서로 놓았다. 처음 눈에 띄는 신상(01)과 지갑을 열게 하는 세일(02)을 지나 믿음을 주는 인증(03)·아직 다듬는 중이라는 베타(04)를 거치고, 지금 진행 중인 라이브(05)와 쌓여가는 알림(06)·인기를 증명하는 트렌딩(07)을 지나 재고가 줄어드는 경고(08)와 마감을 알리는 품절(09)로 끝난다.

01코너 리본 뱃지

카드 모서리를 가로지르는 리본을 rotate(-45deg) 로 눕히고, 리본 위에 흰 빛줄기(::after)를 겹쳐 background-position 만 반복 이동시켰다. 가만히 있어도 시선이 가는 신상품 라벨이 된다.

rotate(-45deg)::after 빛줄기 스윕overflow: hidden
.ribbon-wrap {
  position: absolute;
  top: $sp-6; left: -$sp-10;
  transform: rotate(-45deg);
}
.ribbon::after {
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, .7) 45%, transparent 75%);
  background-size: 220% 100%;
}
.stage.is-demo .ribbon::after {
  animation: shine-sweep $duration $easing infinite;
}
@keyframes shine-sweep {
  0%, 15% { background-position: 140% 0; }
  55%, 100% { background-position: -40% 0; }
}

02세일 태그 뱃지

clip-path 로 잘라낸 진짜 가격표 모양(구멍 포함) 뱃지가 살짝 흔들리며 커졌다 작아지길 반복해, 실이 걸려 흔들리는 태그처럼 보인다.

clip-path polygon@keyframes rotate+scalebox-shadow
.tag {
  clip-path: polygon(0 0, 76% 0, 100% 50%, 76% 100%, 0 100%);
  transform-origin: 8% 50%;
}
.stage.is-demo .tag {
  animation: tag-swing $duration $easing infinite;
}
@keyframes tag-swing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  30% { transform: rotate(-6deg) scale(1.05); }
  60% { transform: rotate(3deg) scale(1.02); }
  80% { transform: rotate(-1deg) scale(1); }
}

03인증 체크 뱃지

이름 옆 인증 배지를 Phosphor SVG 아이콘 하나로 두고, 확인되는 순간 transform: scale 이 1 → 1.28 → 0.94 → 1 로 튀어올랐다 가라앉아 확정된 느낌을 준다.

currentColor@keyframes poparia-label
.check {
  transform-origin: center;
  color: $color;   /* Phosphor duotone 의 fill="currentColor" 가 이 값을 물려받는다 */
}
.stage.is-demo .check {
  animation: pop $duration $easing infinite;
}
@keyframes pop {
  0%, 50% { transform: scale(1); }
  62% { transform: scale(1.28); }
  74% { transform: scale(0.94); }
  86%, 100% { transform: scale(1); }
}

04베타 그라데이션 필 뱃지

보라빛 레이어를 필 배경 위에 겹쳐 두고 opacity 만 0→1→0으로 오르내려, 두 색이 서로 스며들듯 교차하는 라벨을 만든다.

겹친 레이어 opacity 크로스페이드position: absolute; inset: 0border-radius: $r-pill
.pill { position: relative; overflow: hidden; }
.pill__glow {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, $stage-yellow, #a855f7);
  opacity: 0;
}
.stage.is-demo .pill__glow {
  animation: glow-cross $duration $easing infinite;
}
@keyframes glow-cross {
  0%, 10% { opacity: 0; }
  50% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

05라이브 펄스 닷 뱃지

점 뒤에 깔린 ::before 원이 scale 로 커지며 opacity 가 0까지 옅어지길 반복해, 레이더 핑처럼 신호가 퍼져나가는 걸 보여준다.

::before scale·opacityaria-label@keyframes ping
.dot { position: relative; }
.dot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: $color;
}
.stage.is-demo .dot::before {
  animation: ping $duration $easing infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

06알림 카운트 뱃지

숫자 원이 scale(0) 에서 튕기듯 커졌다가 안착하는 순간, 벨 아이콘도 짧게 rotate 로 흔들려 알림이 막 도착했다는 신호를 같이 준다.

@keyframes scale bouncetransform-origin@media (prefers-reduced-motion)
.count {
  transform: scale(0);
}
.stage.is-demo .bell {
  animation: shake $duration $easing infinite;
}
.stage.is-demo .count {
  animation: pop-in $duration $easing infinite;
}
@keyframes pop-in {
  0%, 52% { transform: scale(0); }
  62% { transform: scale(1.15); }
  74%, 100% { transform: scale(1); }
}

07트렌딩 플레임 뱃지

불꽃 SVG 에 filter: brightness·hue-rotate 를 프레임마다 살짝 어긋나게 걸어, 규칙적으로 깜빡이지 않고 진짜 불처럼 고르지 않게 일렁이게 만든다.

filter: hue-rotate·brightness다중 box-shadow 플리커@keyframes
.stage.is-demo .flame {
  animation: flicker $duration $easing infinite alternate;
}
@keyframes flicker {
  0% { filter: brightness(1) hue-rotate(0deg); transform: scale(1); }
  18% { filter: brightness(1.25) hue-rotate(-6deg); transform: scale(1.05); }
  40% { filter: brightness(.92) hue-rotate(4deg); transform: scale(.97); }
  63% { filter: brightness(1.15) hue-rotate(-3deg); transform: scale(1.03); }
  81% { filter: brightness(.97) hue-rotate(2deg); transform: scale(1); }
  100% { filter: brightness(1.2) hue-rotate(-5deg); transform: scale(1.04); }
}

08한정 수량 재고바 뱃지

뱃지 안 얇은 막대가 transform-origin: left 기준으로 scaleX 를 줄이며, 동시에 배경색이 초록→주황→빨강으로 바뀌어 재고가 줄어드는 걸 길이와 색으로 같이 보여준다.

scaleX draintransform-origin: left배경색 다단 보간
.fill {
  transform: scaleX(1);
  transform-origin: left;
}
.stage.is-demo .fill {
  animation: drain $duration $easing infinite;
}
@keyframes drain {
  0%, 10% { transform: scaleX(1); background: $color; }
  50% { transform: scaleX(.6); background: $stage-orange; }
  90%, 100% { transform: scaleX(.25); background: $error; }
}

09품절 스트라이프 오버레이

카드를 덮은 repeating-linear-gradient 사선 줄무늬가 background-position 이동으로 계속 흘러가고, 가운데 SOLD OUT 도장은 숨쉬듯 scale 이 오르내린다.

repeating-linear-gradientbackground-position 애니메이션rgba 오버레이
.overlay {
  background: repeating-linear-gradient(-45deg,
    rgba($color, .82) 0 $sp-4,
    rgba($color, .62) $sp-4 #{$sp-4 * 2});
  background-size: #{$sp-4 * 4} #{$sp-4 * 4};
}
.stage.is-demo .overlay {
  animation: stripes-flow $duration $easing infinite;
}
@keyframes stripes-flow {
  0% { background-position: 0 0; }
  100% { background-position: #{$sp-4 * 4} 0; }
}

어디서 깨지는가 — 리페인트에 기대는 움직임은 녹화에서 사라진다

04번 베타 뱃지의 그라데이션을 처음엔 background-position 을 옮겨 흘려보냈다. 눈으로 보면 분명히 흐르는데, 같은 화면을 프레임 단위로 찍어 비교하니 프레임 사이 차이가 거의 잡히지 않았다 — background-position 의 리페인트 타이밍은 브라우저가 알아서 정하기 때문에 캡처 순간과 어긋나면 변화가 문턱 아래로 묻힌다. 보라 레이어를 한 겹 겹쳐 두고 그 opacity 만 0에서 1로 오르내리게 바꾸자 같은 눈요기가 프레임마다 또렷하게 남았다. 배경 위치·그림자 번짐처럼 리페인트가 필요한 속성 대신 opacity 와 transform 처럼 합성 단계에서 도는 속성을 고르면, 눈에 보이는 것과 녹화에 남는 것이 어긋나지 않는다. 압축을 풀 때 묻는 비밀번호는 wpxqsgtk 이고, 받은 파일 이름 그대로 입력하면 아홉 개 폴더가 그대로 열린다. 03번 인증 체크도 같은 이유로 선을 그려 넣는 방식 대신 아이콘 전체를 transform: scale 로 튀어오르게 했다.

접근성

아홉 개 전부 prefers-reduced-motion: reduce 에서 animation: none 으로 떨어진다. 07번 트렌딩 플레임과 09번 품절 오버레이처럼 계속 움직이는 것들도 멈춘 상태에서 색과 모양만으로 무엇을 뜻하는지 알아볼 수 있게 정지 값을 정해 뒀다. 03번 체크는 애니메이션이 꺼져도 원래 크기(scale(1))로 그대로 보여, 확인 표시 자체가 사라지지 않는다. 이 설정을 켜고 끄는 방법은 MDN 의 prefers-reduced-motion 문서 에 정리돼 있다.

FAQ

뱃지 디자인은 이미지 없이 CSS만으로 되나요?

네, 이 9개 전부 이미지 파일 없이 CSS(및 03·06·07번의 짧은 SVG 아이콘)만으로 만들었다. 배경·그림자·클립 패스만으로도 리본·태그·스트라이프 모양이 다 나온다. 더 많은 CSS 전용 장식은 사이트 검색 에서 "뱃지"로 찾아볼 수 있다.

뱃지 색은 브랜드 색으로 바꿔도 되나요?

된다. 데모마다 SCSS 맨 위 $color 하나만 바꾸면 전체 색이 따라간다(03번 체크 아이콘도 fill="currentColor" 라 color 값 하나를 물려받는다). React 버전은 color prop 하나로 같은 걸 한다. 08번처럼 상태에 따라 색이 여러 단계로 바뀌는 항목은 @keyframes 안의 각 구간 색을 같이 바꿔야 한다.

뱃지 애니메이션이 화면 녹화에서 흐리게 잡히면?

움직이는 속성을 바꾸면 된다. 배경 위치나 그림자 번짐처럼 리페인트가 필요한 속성은 브라우저가 정하는 타이밍에 그려져 캡처와 어긋나기 쉽고, opacity 와 transform 은 합성 단계에서 돌아 프레임마다 그대로 남는다. 이 사이트를 처음 봤다면 소개 페이지 에서 데모를 어떻게 만들고 검증하는지 볼 수 있다.

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.