번쩍이는 Y2K 웹 디자인, 크롬·홀로그램 부품 9개
Y2K 웹 디자인은 2000년대 CD·홀로그램 포장지의 크롬 금속광과 무지개 반사를 다시 불러온 홈페이지 스타일입니다. CD 뒷면에 번지던 무지개가, 이번엔 버튼과 헤드라인 글자 안으로 들어왔습니다. 아홉 개 부품 중 하나는 카드가 아니라 회전하는 아바타 테두리에 이 반사를 씁니다.
바로 아래에서 아홉 개를 한 화면에 조립한 모습부터 보세요. 스크롤을 내리면서 크롬 헤드라인이 어디서 밝아지고 어디서 옅어지는지 먼저 눈으로 좇아 보시길 권합니다.
한 화면으로 보고 나면, 각 부품을 하나씩 분리해 격자로도 정리해 뒀습니다.
자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip
- 01 크롬 헤드라인 히어로
- 02 브러시드 메탈 내비
- 03 홀로그램 포일 카드
- 04 크롬 구슬 아이콘
- 05 강조 플랜 홀로그램
- 06 CD 링 아바타 인용
- 07 브러시드 알루미늄 CTA 밴드
- 08 홀로그램 실선 푸터
- 09 크롬 버튼·홀로그램 포커스
카드 순서는 임의로 정하지 않았습니다. 눈에 띄고, 기능을 확인하고, 값을 보고, 다른 사람 후기를 읽고, 마지막에 버튼을 누르는 — 방문자가 실제로 거치는 다섯 단계를 그대로 따라갑니다.
01크롬 헤드라인 히어로
헤드라인 글자를 background-clip: text로 잘라내고, 그 안에서 흰색→크림→노랑→파랑→주황→흰색 순서의 6단 그라디언트가 background-position만 바뀌며 흐릅니다. 글자 색을 직접 칠하지 않고 그라디언트를 글자 모양의 창으로만 씁니다.
.hero-c__title {
background: linear-gradient(100deg,
$stage-paper 0%, rgba($stage-paper, .35) 14%, $subject-cream 28%,
$stage-yellow 40%, $color 52%, $stage-orange 64%,
$stage-paper 80%, rgba($stage-paper, .4) 100%);
background-size: 240% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: chromeFlow $duration $easing infinite;
}
@keyframes chromeFlow {
0% { background-position: 0% 50%; }
100% { background-position: 240% 50%; }
}
02브러시드 메탈 내비
메뉴 바 배경은 잉크색 명암이 번갈아 도는 그라디언트로 브러시드 메탈 질감을 흉내 내고, 그 위로 가는 흰 빛줄기 하나가 left 값으로 좌에서 우로 지나갑니다. 활성 메뉴는 배경만 옅게 표시할 뿐 따로 움직이지는 않습니다.
.nav-c::after {
content: "";
position: absolute;
top: 0; left: -20%; width: 14%; height: 100%;
background: linear-gradient(90deg, transparent, rgba($stage-paper, .55), transparent);
animation: glint $duration linear infinite;
}
@keyframes glint { 0% { left: -20%; } 100% { left: 106%; } }
03홀로그램 포일 카드
카드 표면 위에 mix-blend-mode: overlay로 홀로그램 포일 띠를 얹고 background-position을 대각선으로 흘립니다. 실제 홀로그램 스티커를 손에 쥐고 기울일 때 보이는 반사를 흉내 낸 것으로, 카드 자체는 짙은 잉크색으로 고정해 반사가 도드라지게 했습니다.
.card-c::after {
content: "";
position: absolute;
inset: -30% -10%;
pointer-events: none;
mix-blend-mode: overlay;
opacity: .8;
background: repeating-linear-gradient(115deg,
transparent 0 18px,
rgba($color, .55) 18px 30px,
rgba($stage-yellow, .55) 30px 42px,
rgba($subject-cream, .6) 42px 54px,
transparent 54px 72px);
background-size: 200% 200%;
animation: foilSweep $duration linear infinite;
}
04크롬 구슬 아이콘
아이콘 배지마다 광원이 왼쪽 위에 고정된 것처럼 보이는 radial-gradient 구슬을 얹고, 그 하이라이트의 위치만 옮겨 광원이 표면을 도는 느낌을 냅니다. 세 아이콘이 같은 애니메이션 하나를 공유합니다.
.feat-c__icon {
background: radial-gradient(circle at 30% 30%, $stage-paper, $color 40%, $stage-ink 82%);
background-size: 280% 280%;
animation: ballShine $duration steps(8, jump-none) infinite;
}
@keyframes ballShine {
0% { background-position: 0% 0%; }
100% { background-position: 180% 180%; }
}
05강조 플랜 홀로그램
추천 플랜 카드에만 5색 그라디언트 배경을 깔고 background-position을 흘려, 표 없이도 어느 플랜을 미는지 한눈에 보이게 했습니다. 일반 플랜은 옅은 무광 회색 그대로 남겨 대비를 만듭니다.
.pricing-c__plan--pro::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, $color, $stage-yellow, $stage-orange, $subject-cream, $color);
background-size: 320% 100%;
animation: holoShift $duration linear infinite;
}
.pricing-c__plan--pro .pricing-c__name { color: $stage-ink; }
06CD 링 아바타 인용
인용 카드 옆 아바타가 CD 테두리처럼 도는 conic-gradient 링 안에 앉습니다. 링은 mask로 도넛 모양만 남기고 나머지는 가려, 안쪽 아바타 원과 자연스럽게 겹칩니다.
.test-c__avatar::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
padding: 3px;
background: conic-gradient($color, $stage-orange, $subject-cream, $stage-ink, $color);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: cdSpin $duration linear infinite;
}
@keyframes cdSpin { to { transform: rotate(360deg); } }
07브러시드 알루미늄 CTA 밴드
화면 폭 전체를 덮는 밴드 위로, 반투명 크림·흰 대각선 줄무늬 두 세트가 background-position으로 흘러 브러시드 알루미늄이 빛을 받으며 지나가는 순간을 흉내 냅니다. 밴드 전체가 피사체라 이 편에서 변한 픽셀의 면적(36.01%)이 가장 넓은 항목입니다.
.cta-c::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(115deg,
rgba($stage-ink, 0) 0 60px,
rgba($color, .28) 60px 70px,
rgba($stage-ink, 0) 70px 160px,
rgba($stage-paper, .22) 160px 172px,
rgba($stage-ink, 0) 172px 260px);
background-size: 220% 100%;
animation: bandSweep $duration linear infinite;
}
08홀로그램 실선 푸터
푸터 상단 경계에 3px짜리 실선을 긋고, 그 안에 4색 그라디언트를 깔아 background-position으로 흘립니다. 실선 하나뿐이라 변하는 픽셀 면적은 이 편에서 가장 작지만(0.73%), 색이 확실히 대비돼 눈에는 또렷이 반짝입니다.
.footer-c::before {
content: "";
position: absolute;
top: 0; left: $sp-6; right: $sp-6; height: 3px;
border-radius: $r-pill;
background: linear-gradient(90deg, $color, $stage-yellow, $stage-orange, $subject-cream, $color);
background-size: 260% 100%;
animation: hairlineShift $duration linear infinite;
}
09크롬 버튼·홀로그램 포커스
버튼을 손으로 누르면 위에 있던 밝은 하이라이트가 아래로 뒤집히며 실제 금속이 눌리는 촉감을 흉내 냅니다. 입력창은 따로 움직이지 않고 파랑·노랑·주황 3색 box-shadow 글로우 링으로 늘 은은하게 빛납니다.
.bi-c__btn::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba($stage-paper, .9), transparent 55%);
}
.bi-c__btn:hover::after, .bi-c__btn:focus-visible::after {
animation: pressFlip $duration $ease-out infinite;
}
.bi-c__input {
box-shadow: 0 0 0 2px rgba($subject-blue, .5), 0 0 16px rgba($stage-yellow, .4), 0 0 22px rgba($stage-orange, .3);
}
tailwind.config 커스텀
아홉 개 부품이 공유하는 색·반경 값은 이 설정 하나뿐이라, 여기서 색을 바꾸면 전부 같이 따라옵니다 — 단 하나는 예외입니다. backgroundImage.chrome 유틸리티는 위 colors를 참조하지 않고 같은 hex 여섯 개를 리터럴로 다시 적어둔 상태라, colors만 고치면 이 유틸리티는 저절로 안 바뀝니다. 색을 바꿀 때마다 이 두 자리를 함께 손봐야 어긋나지 않습니다.
theme: {
extend: {
colors: {
ink: "#17141a", cream: "#fff7e6", paper: "#ffffff",
blue: "#2f6df6", yellow: "#ffd23f", orange: "#ff4d1f",
},
borderRadius: { tile: "16px", control: "12px", pill: "999px" },
backgroundImage: {
chrome: "linear-gradient(100deg, #ffffff, #fff7e6, #ffd23f, #2f6df6, #ff4d1f, #ffffff)",
},
},
},
바이브코딩 프롬프트
위 설정을 먼저 심어 두면, 그다음부터는 Claude Code나 Cursor에 아래 조각 하나만 넘겨도 화면이 이 스타일로 바뀝니다. 프롬프트 전문은 zip 속 prompt.md 파일 안에 있습니다.
헤드라인은 background-clip: text 로 글자 모양만 남기고, 흰→크림→노랑→파랑→주황→흰
순서의 6단 그라디언트를 background-position 애니메이션으로만 흐르게 한다.
카드 표면의 홀로그램 띠는 mix-blend-mode: overlay 로 ink 카드 위에만 얹는다.
버튼을 누르면 하이라이트가 위에서 아래로 뒤집히는 느낌을 준다.
이 조각을 page/index.html에 실제로 적용해 1280px 너비 화면을 통째로 캡처한 결과가 아래 스크린샷입니다.
어디서 깨지는가 — 함정
크롬·홀로그램 효과는 매끄러운 곡선으로 움직이면 오히려 안 움직이는 것처럼 측정됩니다. 04번 크롬 구슬 아이콘을 처음 만들었을 때 ease-out으로 위치를 왕복시켰더니 렌더 측정에서 변한 픽셀의 강도가 14.6으로, 통과 기준(15)에서 딱 0.4가 모자랐습니다. 타이밍을 8단 steps(8, jump-none)으로 바꾸고 이동 범위를 넓힌 뒤에야 강도 96.2로 넉넉히 넘어섰습니다 — 계단식으로 뚝뚝 끊어 보내야 프레임마다 차이가 뚜렷해진다는 뜻입니다. 06번 CD 링 아바타는 다른 종류의 함정이었습니다. 아바타와 인용 카드를 세로로 쌓았더니 폭 320px 화면에서 세로로 넘쳤습니다(측정값 그대로: 넘침 있음). 둘을 가로로 나란히 놓고서야 좁은 화면에서도 스크롤바 없이 들어갔습니다. 이번 편의 부품 아홉 개와 원페이지 전체 소스를 묶은 압축 파일은 열 때 비밀번호 hxqy3hr4를 넣어야 하고, 버튼을 누르면 바로 내려받습니다.
마지막 함정은 절제입니다. 아홉 개 부품에 전부 동시에 그라디언트·회전·글로우를 넣으면 화면이 번쩍이는 게 아니라 어지럽습니다. 한 화면 안에서 크롬 효과는 한두 자리에만 남기고 나머지는 잉크색 무광으로 눌러야 번쩍이는 자리가 도드라집니다.
접근성
09번 버튼의 하이라이트 플립과 01·02·03·04·05·06·07·08번의 그라디언트 흐름·회전은 전부 MDN prefers-reduced-motion 문서가 정의한 미디어 쿼리로 감쌌고, 동작 줄이기를 켠 방문자에게는 정지된 그라디언트만 보입니다. 06번처럼 mask-composite로 링 모양을 잘라내는 항목은 MDN mask-composite 문서를 참고해 구형 사파리용 -webkit-mask-composite 값도 함께 넣었습니다. 헤드라인·버튼 글자는 그라디언트가 흐르는 동안에도 항상 잉크색 배경 위 밝은 색이나 밝은 배경 위 잉크색으로만 둬서 대비가 무너지지 않게 했습니다.
크롬 말고 다른 방향의 홈페이지 트렌드도 함께 둘러보고 싶다면 디자인 트렌드 카테고리에 나머지 편이 모여 있고, 이 사이트가 어떤 곳인지는 소개 페이지에 적어 뒀습니다.
FAQ
Y2K 크롬·홀로그램 효과도 CSS만으로 만들 수 있나요?
가능합니다. 아홉 개 부품 코드 어디에도 자바스크립트 줄은 없습니다. 09번 버튼의 눌림 반응조차 :hover·:focus-visible 두 의사 클래스만으로 짰고, 스크립트는 데모를 gif·mp4 로 캡처할 때 애니메이션을 강제로 돌리는 도구 쪽에서만 잠깐 등장합니다.
크롬 그라디언트 텍스트는 모든 브라우저에서 보이나요?
background-clip: text는 대부분의 최신 브라우저에서 지원하지만 여전히 -webkit-background-clip도 함께 써야 구형 사파리·일부 모바일 브라우저에서 안전합니다. 지원 범위는 caniuse에서 확인할 수 있고, 지원하지 않는 브라우저에서는 그라디언트 없이 흰 글자로만 보이도록 color 폴백을 함께 지정하는 편이 안전합니다.
홀로그램 카드 효과를 밝은 배경에도 쓸 수 있나요?
밝은 배경 위에서도 그라디언트 자체는 그대로 쓸 수 있지만, 이 편의 mix-blend-mode: overlay 포일 띠는 짙은 잉크색 배경을 기본값으로 삼아 대비를 만들었습니다. 밝은 배경에서는 혼합 모드를 multiply나 soft-light로 바꾸고 띠의 불투명도를 낮춰야 글자 대비가 무너지지 않습니다.