Y2K 스타일

Y2K style

크롬 메탈릭 텍스트, 홀로그램 그라데이션, 반짝이는 별 — 2000년대 초반 인터넷 미학이 2020년대에 다시 유행한 스타일.

다른 이름: Frutiger metallicCyber Y2KMillennium bug aesthetic
···
html
<div class="stage">
  <span class="star s1">✦</span><span class="star s2">✧</span><span class="star s3">✦</span>
  <h1 id="chrome">Y2K</h1>
  <div class="pill">babygirl</div>
</div>
css
body{background:linear-gradient(150deg,#dff1ff,#ffe1f2 55%,#e9e2ff)}
.stage{position:relative;display:grid;place-items:center;width:min(92%,320px);padding:20px}
h1{margin:0;font-family:"Arial Black","Helvetica Neue",sans-serif;font-weight:900;
  font-size:clamp(38px,10vmin,60px);letter-spacing:-.02em;-webkit-text-stroke:1px rgba(50,30,70,.35);
  background:linear-gradient(100deg,#3c4a58 0%,#fff 16%,#1e2732 32%,#fff 50%,#5c3a55 66%,#fff 82%,#3c4a58 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 8px rgba(60,30,70,.35));animation:shift 3.5s linear infinite}
@keyframes shift{to{background-position:220% 0}}
.pill{margin-top:10px;padding:5px 16px;border-radius:999px;font-size:11px;font-weight:800;color:#7a2e63;
  background:linear-gradient(120deg,#ffd6f0,#d6e9ff,#e4ffd9);letter-spacing:.04em;box-shadow:0 2px 8px rgba(120,60,110,.25)}
.star{position:absolute;font-size:20px;color:#fff;text-shadow:0 0 3px #a34ea8,0 0 10px rgba(163,78,168,.8);animation:tw 1.6s ease-in-out infinite}
.s1{top:6%;left:14%;animation-delay:0s}
.s2{top:70%;right:12%;animation-delay:.4s}
.s3{top:14%;right:20%;animation-delay:.8s}
@keyframes tw{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}

1999~2003년, 밀레니엄에 대한 기대와 불안이 뒤섞인 시기의 낙관적인 "미래" 상상이 원형입니다. Windows XP의 파란 하늘, 초기 아이팟 광고, MSN 메신저 이모티콘이 그 시대 분위기를 대표합니다. 2020년대 들어 Y2K 패션 유행과 함께 웹 디자인에도 다시 등장했습니다.

시각적으로는 크롬처럼 반사되는 은색 그라데이션 텍스트, 비눗방울처럼 통통한 3D 버블 폰트, 무지개색이 각도에 따라 바뀌는 홀로그램(이리데슨트) 그라데이션, 반짝이는 별과 하트 스티커가 특징입니다. 실제 3D 렌더링 없이도 `background: linear-gradient`를 여러 색으로 겹치고 `background-clip: text`로 텍스트에 씌우면 크롬 효과를 흉내 낼 수 있습니다.

Z세대를 타깃으로 한 패션·뷰티 브랜드, 음악 아티스트 페이지에서 향수(鄕愁)를 자극하는 용도로 씁니다. 정보 전달이 중요한 화면보다는 무드를 만드는 히어로 섹션에 국한해서 쓰는 게 안전합니다.