Style Gallery 실행 예제

기존 사진의 구도·마스크·추상 분위기

Expression controls

상단의 재생 버튼으로 실습을 실행할 수 있습니다.

실습 화면에서 직접 조작해 보세요. 화면을 벗어나거나 재생을 멈추면 실습도 닫히며, 다시 실행하면 처음부터 시작합니다.

이 예제의 코드

실행 화면의 HTML 소스입니다. 연결된 스타일·스크립트·미디어 경로는 원래 실행 위치를 기준으로 합니다.

코드 영역을 열면 원본을 불러옵니다.

BEHIND THE EXAMPLE

이 장면을 만드는 원리

어두운 바탕과 세리프 제목을 기존 사진과 결합하고 이미지 비중을 조절합니다.

입력에 따라 바뀌는 추상 색면과 실제 이미지 콘텐츠의 역할을 구분합니다.

그레인의 투명도를 바꾸며 정보 위계를 가리지 않는 범위를 비교합니다.

실제 WebGL 셰이더를 포인터와 방향키로 조작하고 CSS 대체 경로를 확인합니다.

이미지 면적·제목/본문 비율·마스크 상태를 실제 샘플에서 측정합니다. 통과가 아름다움의 증명은 아닙니다.