GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

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

· Godrich · 9종 · 6분 읽기

피드백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)로 끝난다. 빛을 굴절시키는 쪽으로 번지면 CSS 홀로그램 카드 효과 9가지가 되고, 폼의 맞고 틀림을 알리는 쪽으로 가라앉으면 CSS 유효성 검사 애니메이션 9종이 된다.

01코너 리본 뱃지

무엇이 보이나

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

코너 리본 뱃지
새 창에서 열기

01 · 코너 리본 뱃지 — 측정 누적면적 1.912% · 움직인 프레임 9/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

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

세일 태그 뱃지
새 창에서 열기

02 · 세일 태그 뱃지 — 측정 누적면적 3.387% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

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 로 튀어올랐다 가라앉아 확정된 느낌을 준다.

인증 체크 뱃지
새 창에서 열기

03 · 인증 체크 뱃지 — 측정 누적면적 0.231% · 움직인 프레임 6/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

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으로 오르내려, 두 색이 서로 스며들듯 교차하는 라벨을 만든다.

베타 그라데이션 필 뱃지
새 창에서 열기

04 · 베타 그라데이션 필 뱃지 — 측정 누적면적 2.951% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

겹친 레이어 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까지 옅어지길 반복해, 레이더 핑처럼 신호가 퍼져나가는 걸 보여준다.

라이브 펄스 닷 뱃지
새 창에서 열기

05 · 라이브 펄스 닷 뱃지 — 측정 누적면적 0.147% · 움직인 프레임 8/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

::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 로 흔들려 알림이 막 도착했다는 신호를 같이 준다.

알림 카운트 뱃지
새 창에서 열기

06 · 알림 카운트 뱃지 — 측정 누적면적 0.864% · 움직인 프레임 7/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

@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 를 프레임마다 살짝 어긋나게 걸어, 규칙적으로 깜빡이지 않고 진짜 불처럼 고르지 않게 일렁이게 만든다.

트렌딩 플레임 뱃지
새 창에서 열기

07 · 트렌딩 플레임 뱃지 — 측정 누적면적 3.995% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

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 를 줄이며, 동시에 배경색이 초록→주황→빨강으로 바뀌어 재고가 줄어드는 걸 길이와 색으로 같이 보여준다.

한정 수량 재고바 뱃지
새 창에서 열기

08 · 한정 수량 재고바 뱃지 — 측정 누적면적 0.817% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

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 이 오르내린다.

품절 스트라이프 오버레이
새 창에서 열기

09 · 품절 스트라이프 오버레이 — 측정 누적면적 21.144% · 움직인 프레임 23/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

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 처럼 합성 단계에서 도는 속성을 고르면, 눈에 보이는 것과 녹화에 남는 것이 어긋나지 않는다. 빛깔 대신 선 자국으로 화면을 채우는 쪽은 손그림 디자인 랜딩 UI 키트에서 만난다. 압축을 풀 때 묻는 비밀번호는 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 전용 장식은 사이트 검색 에서 "뱃지"로 찾아볼 수 있다. 상태·우선순위처럼 일에 쓰이는 각도의 라벨은 태그 UI 디자인 9종에 따로 모았다.

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

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

알림 목록 ui의 뱃지 애니메이션이 화면 녹화에서 흐리게 잡히면?

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

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

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