빛을, 웹으로 옮기는 법
조명이 본질인 브랜드를 화면 안에 담는다면, 화면도 빛처럼 살아 있어야 하지 않을까.
“조명 브랜드 콘셉트를 만들어 보자.” 그 한마디에서 시작했습니다. 스마트 전구·라이트스트립·Bridge… 제품을 나열하는 건 쉬워요. 어려운 건 ‘빛’이라는 감각을 웹에서 느끼게 하는 일이었죠. 이 글은 그 과정을 — 멈춰 있는 화면을 어떻게 살아 움직이는 빛으로 바꿨는지를 — 직접 만져보며 따라가는 기록입니다.
멈춘 화면을 ‘살아 있는 빛’으로 바꾼 과정 — ① 터너에서 가져온 대기 빛 배경, ② 마우스를 따라 흐르는 빛, ③ 버튼 하나로 사이트 전체 색이 0.9초에 걸쳐 바뀌는 테마. 아래 데모는 모두 실제로 작동하고, 각 데모 밑 ‘코드 엿보기’에서 구현도 볼 수 있어요.
문제 — 빛이 본질인데, 화면은 멈춰 있었다
조명 브랜드 사이트인데 화면이 정적이라 ‘빛’이 하나도 안 느껴졌어요. 제품 사진을 또렷하게 깔고 설명을 더해도, 보는 사람 마음엔 ‘무드’가 안 켜집니다. 멋진 이미지일 뿐, 빛이라는 감각이 죽어 있던 거죠. 그래서 화면을 — 배경부터 버튼까지 — 빛처럼 살아 움직이게 풀어내기로 했습니다.
01왜 터너였나
레퍼런스를 찾다 엉뚱한 곳에 닿았습니다. 19세기 화가 윌리엄 터너 — ‘빛의 화가’라 불리는 사람. 그의 그림에서 빛은 또렷한 원이 아니라 안개로 번지고 형태를 녹이며 공간을 채웁니다. 스마트 조명의 무드도 똑같잖아요. 그래서 배경부터 ‘디지털 네온’이 아니라 ‘칠해진 빛’으로 가기로 했습니다. 따뜻한 광원, 차가운 안개, 깊은 블러, 미세한 입자(그레인).
</>코드 엿보기 — 빛 + 안개 + 비네팅
.field::before{
background:
radial-gradient(46% 50% at 26% 30%, #ffc476, transparent 62%),
radial-gradient(40% 46% at 76% 26%, #e0359b, transparent 62%);
filter: blur(40px); /* 빛이 안개로 번진다 */
animation: floaty 16s infinite alternate;
}
/* 가장자리를 깊게 = 빛이 어둠 속에서 피어난다 */
.veil{ background: radial-gradient(120% 96% at 50% 40%,
transparent 38%, rgba(3,2,6,.6) 100%); }“빛은 켜고 끄는 게 아니라, 공간에 스며드는 것이다.”
02마우스를 따라 흐르는 빛
배경이 예뻐도 멈춰 있으면 ‘이미지’일 뿐입니다. 진짜 조명은 내가 다가가면 반응하죠. 그래서 빛이 커서를 부드럽게 뒤따라 흐르게 만들었습니다. 즉시 달라붙지 않고 살짝 늦게 — 트레일처럼. (작은 비밀: transform만 움직여서 60fps, 멈추면 연산도 0이에요.)
같은 색인데, 한쪽만 숨 쉽니다 — 빈 이미지 자리를 ‘무드’로 바꾸는 차이.
빛이 따라옵니다
터치 기기에서는 손가락으로 쓸어보세요.
</>코드 엿보기 — 커서를 뒤따르는 lerp 트레일
box.addEventListener('pointermove', e => {
tx = (e.clientX - r.left) / r.width; // 목표 = 커서 위치
ty = (e.clientY - r.top) / r.height;
});
function tick(){ // 매 프레임 살짝씩 따라간다 = 트레일
cx += (tx - cx) * 0.12;
cy += (ty - cy) * 0.12;
box.style.setProperty('--mx', cx*100 + '%');
}
/* CSS: 위치/transform만 옮겨 60fps, 멈추면 연산 0 */
.glow{ left: var(--mx); top: var(--my) }03버튼 하나로, 전체가 바뀐다
여기가 이 프로젝트의 심장입니다. 휴의 본질은 “버튼 하나로 분위기가 바뀐다”예요. 그래서 씬(휴식·집중·파티·영화)을 고르면 — 단순히 한 영역이 아니라 — 그 화면 전체의 색감이 0.9초에 걸쳐 부드럽게 물들게 했습니다. 비결은 ‘반투명 유리 + 하나의 빛 필드’ 구조와, 색을 부드럽게 보간해 주는 @property. 아래에서 직접 눌러보세요.
완성본에서는 ‘손안의 폰’이 먼저 바뀌고, 잠시 뒤 사이트 전체가 이렇게 물듭니다.
</>코드 엿보기 — @property로 색을 ‘보간’하기
/* 색 변수를 등록하면 그라데이션 색도 부드럽게 전환된다 */ @property --th-a{ syntax:'<color>'; inherits:true; initial-value:#ffc07a } .scene{ transition: --th-a .8s, --th-b .8s } /* 0.8초 스윕 */ .scene[data-scene="party"]{ --th-a:#ff4db0; --th-b:#7b3ff2 } /* 빛 필드가 이 변수를 쓰면 색이 함께 흐른다 */ .field{ background: radial-gradient(50% 50% at 30% 30%, color-mix(in srgb, var(--th-a) 60%, transparent), transparent) }
위 데모에서 이미 두 가지가 같이 일어났어요. ① 카드가 뒤 배경을 유리처럼 비추고(backdrop-filter), ② 글자·배경·테두리 색이 한 번에 바뀌었죠. 완성본에선 이 ‘유리화’를 카드·섹션·푸터 전체에 적용해서, 움직이는 빛 하나가 페이지 전체를 관통하게 만들었습니다.
04손안의 조명, 그리고 상세 페이지
앱 섹션엔 진짜 폰처럼 생긴 목업을 넣고, 씬 버튼을 누르면 화면·밝기 슬라이더·방 카드·자동화 토글이 그 무드로 바뀌게 했어요. “모든 빛을 손안에서”라는 카피를 글이 아니라 손으로 증명하고 싶었거든요. 제품마다는 상세 페이지까지 — 전구는 따뜻하게, 라이트스트립은 화려하게, 실외는 시원하게, Bridge는 깊은 인디고로, 페이지 전체 무드를 다르게.
완성된 Philips Hue 콘셉트 → · 스마트 전구 상세 · 라이트스트립 · 실외 조명 · Bridge
05화려함보다 먼저, 정직함
실제 브랜드를 다루다 보니 가장 신경 쓴 건 ‘선을 넘지 않는 것’이었습니다.
지킨 원칙
① 공식 로고를 베끼지 않고 텍스트 워드마크만 · ② 가짜 가격·스펙·후기·수상 0, 실제로 알려진 기능만 · ③ 상단·푸터에 “공식 사이트가 아닌 제안 콘셉트” 명시 · ④ 모든 장식 모션은 prefers-reduced-motion에서 정지. 멋있게 만드는 것보다, 오해를 만들지 않는 것이 먼저였어요.
06그래서 남은 것
한 페이지를 ‘완벽하게’ 만든다는 건, 효과를 많이 쌓는 게 아니라 — 그 브랜드의 본질 하나를 끝까지 밀어붙이는 일이더라고요. 휴에게 그건 ‘빛’이었고, 그래서 배경부터 버튼, 상세 페이지까지 전부 빛으로 꿰었습니다. 다른 업종이라면 그 ‘하나’가 또 다르겠죠. 카페라면 한 잔의 분위기, 병원이라면 ‘지금 진료 중’이라는 안심처럼.