디자인 아틀라스
EN
◧ 영상·사진 기법

리딩 라인

Leading lines

화면 속 선(길, 난간, 그림자 등)이 한 점으로 모이게 배치해 보는 사람의 시선을 피사체까지 끌고 가는 구도 기법.

다른 이름: 시선 유도선Converging lines
···
html
<svg class="ll" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid meet">
  <polygon points="4,116 100,40 196,116" class="road"/>
  <path id="lp" d="M4,116 L100,40" fill="none" stroke-width="2"/>
  <path id="rp" d="M196,116 L100,40" fill="none" stroke-width="2"/>
  <path d="M40,116 L100,40" fill="none" stroke-width="1" stroke-dasharray="3 4" class="guide"/>
  <path d="M160,116 L100,40" fill="none" stroke-width="1" stroke-dasharray="3 4" class="guide"/>
  <circle cx="100" cy="40" r="5" class="vp"/>
  <circle r="3.2" class="dot">
    <animateMotion dur="2.6s" repeatCount="indefinite"><mpath href="#lp"/></animateMotion>
  </circle>
  <circle r="3.2" class="dot">
    <animateMotion dur="2.6s" begin="1.3s" repeatCount="indefinite"><mpath href="#rp"/></animateMotion>
  </circle>
</svg>
css
.ll{position:absolute;inset:0;width:100%;height:100%}
.ll path{stroke:var(--line)}
.ll .guide{stroke:var(--line);opacity:.5}
.ll .road{fill:color-mix(in oklab,var(--fg) 6%,var(--surface))}
.ll .vp{fill:var(--accent-2)}
.ll .dot{fill:var(--accent)}

원근법에서 평행한 두 선은 멀어질수록 화면 위 한 점(소실점)으로 모입니다. 그 수렴하는 지점에 피사체를 두면, 보는 사람의 시선이 사진 가장자리에서 시작해 자연스럽게 선을 타고 피사체까지 흘러갑니다.

실제로 쓰는 선은 다양합니다 — 도로의 차선, 다리 난간, 건물의 처마선, 강물의 흐름, 심지어 그림자까지. 선이 화면 하단 모서리에서 시작해 위로 모이는 구도가 가장 흔합니다.

너무 많은 선이 서로 다른 방향으로 모이면 오히려 시선이 흩어집니다. 소실점을 하나로 좁히고, 그 지점에 실제로 눈길을 끌 만한 피사체(사람, 조명, 대비되는 색)를 놓아야 완성됩니다.

언제 쓰나

히어로 이미지에서 CTA 버튼이나 제품으로 시선을 몰아야 할 때, 사진에서 명확한 주인공 하나를 강조하고 싶을 때.