네거티브 스페이스 (숨은 형태)

<div class="ns"> <svg viewBox="0 0 200 200" width="40%" style="aspect-ratio:1;overflow:visible"> <defs> <mask id="cut"><rect width="200" height="200" fill="#fff"/><polygon points="82,58 124,100 82,142 98,100" fill="#000"/></mask> <clipPath id="clip"><circle cx="100" cy="100" r="80"/></clipPath> <linearGradient id="sheen" x1="0" y1="0" x2="1" y2="0"> <stop offset="0" stop-color="var(--accent)" stop-opacity="0"/> <stop offset=".5" stop-color="var(--accent)" stop-opacity=".6"/> <stop offset="1" stop-color="var(--accent)" stop-opacity="0"/> </linearGradient> </defs> <circle cx="100" cy="100" r="80" fill="var(--fg)" mask="url(#cut)"/> <g clip-path="url(#clip)"><rect id="sw" x="-90" y="0" width="90" height="200" fill="url(#sheen)"/></g> </svg> <p class="cap">ONWARD</p> </div>

.ns{display:flex;flex-direction:column;align-items:center;gap:10px} .cap{margin:0;font-size:12px;letter-spacing:.3em;color:var(--muted);font-weight:700} #sw{animation:sweep 3s linear infinite} @keyframes sweep{0%{transform:translateX(0)}100%{transform:translateX(380px)}}

네거티브 스페이스 로고는 도형의 배경, 즉 아무것도 그리지 않은 여백에 또 다른 형태를 숨겨 넣는 기법입니다. 보는 사람이 처음에는 큰 형태(포지티브 스페이스)만 인식하다가, 어느 순간 그 틈에 숨어 있던 두 번째 형태(네거티브 스페이스)를 발견하게 됩니다.

이 기법이 성립하려면 두 형태가 우연이 아니라 정확히 맞물려야 합니다. 보통 두 실루엣의 윤곽선을 겹쳐 공유 지점을 찾고, 그 지점에서 한쪽 도형을 살짝 밀거나 당겨 안쪽에 의미 있는 형태(화살표, 얼굴, 글자)가 정확히 들어맞도록 다듬는 반복 작업이 필요합니다.

한 번 발견되면 "아, 저기 숨어 있었구나" 하는 각인 효과가 강해서 기억에 오래 남습니다. 다만 인쇄가 작아지거나 색이 단순화되면(예: 흑백 팩스, 스탬프) 숨은 형태가 아예 사라질 수 있어, 최소 사용 크기를 반드시 함께 규정해야 합니다.

언제 쓰나

발견의 재미로 기억에 남기고 싶은 브랜드에 씁니다. 숨은 형태가 사라지는 최소 크기를 반드시 가이드라인에 명시하세요.