CSS로 구현한 착시의 세계…현실과 다른 시각적 마법

[디지털투데이 AI리포터] CSS를 활용해 다양한 착시 현상을 직접 체험할 수 있는 웹사이트 CSS 옵티컬 일루젼스가 공개됐다.

15일(현지시간) 온라인 매체 기가진에 따르면, 해당 사이트(CSS Optical Illusions)는 실제로 존재하지 않거나 다르게 보이는 시각적 현상을 CSS만으로 구현한 데모를 모아 소개하고 있다. 각 착시는 코드펜(CodePen) 예제를 통해 확인할 수 있으며, 마우스 호버(또는 모바일 탭) 시 숨겨진 요소가 드러나 실제 형태를 확인할 수 있도록 구성됐다.

사이트에는 포겐도르프 착시, 유도 그라데이션, 화이트 착시(뮌커 착시), 곡률 맹, 카페 월 착시, 폰조 착시, 수직-수평 착시, 뮐러-리어 착시 등 다양한 고전적 착시가 포함됐다. 예를 들어 포겐도르프 착시는 CSS의 ::before, ::after 의사요소만으로 구현됐으며, 카페 월 착시는 3개의 그라데이션만으로 타일 경계가 기울어 보이는 효과를 만든다. 폰조 착시는 rotate3d() 함수를 활용해 원근감을 구현했다.

또한 색이 다른 것처럼 보이지만 실제로는 동일한 회색으로 구성된 구체, 배경 그라데이션에 의해 색이 달라 보이는 막대, 동일한 곡률임에도 다르게 휘어 보이는 파형 등도 CSS 애니메이션과 그라데이션을 활용해 표현했다. 이 밖에도 회전하는 컬러 팬, 호흡하는 사각형 등 다양한 시각 효과가 포함돼 있으며, CSS 구현 방식을 함께 확인할 수 있다.