하이키 조명

High-key lighting

여러 개의 부드러운 조명을 고르게 채워 그림자를 거의 남기지 않는, 밝고 대비가 낮은 조명.

다른 이름: 로우 콘트라스트 조명Flat lighting
···
html
<div class="stage">
  <div class="glow g1"></div><div class="glow g2"></div><div class="glow g3"></div>
  <div class="sphere"></div>
  <div class="gauge"><i></i></div>
</div>
css
.stage{position:absolute;inset:0;background:#f3f1ea;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(30px);opacity:.55;animation:pulse 5s ease-in-out infinite}
.g1{width:46%;aspect-ratio:1;left:-6%;top:-10%;background:#fff}
.g2{width:40%;aspect-ratio:1;right:-6%;top:-6%;background:#ffffee;animation-delay:-1.6s}
.g3{width:44%;aspect-ratio:1;left:28%;bottom:-16%;background:#fff;animation-delay:-3.2s}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.7}}
.sphere{position:absolute;left:50%;top:48%;width:44vmin;aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 36%,#ffffff 0,#f0ecdf 48%,#d9d2c0 82%)}
.gauge{position:absolute;right:6%;top:8%;width:26%;height:6px;border-radius:4px;
  background:linear-gradient(90deg,#050506,#cfcfd8)}
.gauge i{position:absolute;top:-3px;width:2px;height:12px;background:#3ab27a;left:12%}

로우키가 보조광을 빼서 대비를 키운다면, 하이키는 정확히 반대입니다 — 주광 못지않게 강한 보조광, 때로는 3~4개의 소프트 라이트를 동시에 써서 어느 방향에도 뚜렷한 그림자가 남지 않게 만듭니다.

명암비가 거의 1:1에 가까워지므로 화면이 전반적으로 밝고 균일해 보입니다. 시트콤, 뷰티·화장품 광고, 뉴스 스튜디오가 이 스타일을 쓰는 이유는 얼굴의 잡티나 주름 같은 결점을 그림자가 만들지 않게 하기 위해서입니다.

CSS로는 배경을 밝게 두고, 피사체에 여러 방향에서 약한 하이라이트가 겹치도록 radial-gradient를 여러 개 겹치면 됩니다. 완전히 그림자가 없으면 입체감도 사라지므로, 아주 옅은 음영 하나만 남겨 형태를 살짝 구분해 주는 게 좋습니다.

언제 쓰나

밝고 친근한 톤이 필요한 광고·튜토리얼 영상, 뷰티 제품 촬영에. 긴장감이나 미스터리를 주고 싶다면 로우키를 쓰세요.