손전등 효과: 손전등으로 어두운 페이지 탐험하기
손전등 효과는 웹 페이지의 불을 끄고 방문자에게 손전등을 쥐여 줍니다. 손전등은 1인칭 게임처럼 화면 구석 아래쪽에 들려 있고, 포인터가 가는 곳을 향해 실제 원근감으로 돌아가며 가장자리가 부드러운 스폿과 그 주변의 은은한 빛 번짐을 비춥니다. 렌즈에서 나온 빛줄기가 공기를 가르고, 먼지가 빔 속을 떠다니며, 빛 바깥의 페이지는 어둡고 흐릿해집니다. 아래의 페이지는 전혀 바뀌지 않아서 어둠 속에서도 링크와 버튼이 그대로 작동합니다.
사용 방법
스타일 고르기
밤 산책, 따뜻한 손전등, 무대 스포트라이트 등 원하는 스타일로 시작하고, 미리보기 위에서 포인터를 움직여 페이지 곳곳을 비춰 보세요.
빛 다듬기
손과 손전등(가공 알루미늄, 클래식 블랙, 평면 드로잉), 스폿의 크기와 가장자리, 빛줄기, 연무, 먼지, 그리고 나머지 페이지가 얼마나 어둡고 흐려질지를 고르세요. 렌더링 방식에서는 WebGL, 가벼운 버전과 Three.js, 실제 3D 모델 중 하나를 고릅니다.
사용하거나 내보내기
무료 UX Pilot 계정으로 로그인하면 UX Pilot 캔버스에 올리거나 HTML 또는 PNG로 내보낼 수 있습니다.
만들 수 있는 것
불 꺼진 히어로
출시 페이지나 티저를 어둠 속에서 열고, 방문자가 손전등으로 헤드라인을 찾게 하세요.
이스터 에그와 숨은 디테일
빛이 닿는 곳에서만 드러나는 코드, 할인, 메시지를 숨겨 두세요.
게임, 미스터리, 핼러윈
방문자와 함께 움직이는 빛으로 게임, 방탈출, 팟캐스트, 핼러윈 캠페인의 분위기를 만드세요.
하나에 집중하는 스포트라이트
손 없이 무대 스포트라이트를 써서 기능 하나, 제품, 인물 사진을 빛의 원 안에 두세요.
자주 묻는 질문
손전등 효과란 무엇인가요?
웹사이트에서 손전등 효과는 페이지를 어둡게 하고 포인터 주변의 원만 비춰, 방문자가 손전등을 들고 페이지를 탐험하는 것처럼 보이게 합니다. 손전등 효과는 빛을 향해 돌아가는 손에 든 손전등, 공기 중의 빛줄기, 떠다니는 먼지, 빔 바깥의 블러를 더합니다.
손전등이 내 페이지를 바꾸나요?
아니요. 어둠, 빔, 손은 페이지 위에 그려지고 아래의 페이지는 그대로 남습니다. 텍스트는 여전히 선택할 수 있고 링크와 버튼도 작동합니다. 동작 줄이기가 켜져 있으면 페이지는 빛이 켜진 어두운 상태로 열리고 아무것도 저절로 움직이지 않습니다.
WebGL과 Three.js는 무엇이 다른가요?
둘 다 같은 빛, 먼지, 어둠을 그립니다. WebGL은 더 가벼운 버전으로 손전등을 셰이더로 그립니다. Three.js는 손전등을 실제 3D 모델로 그려 핀, 널링 처리된 손잡이, 포켓 클립이 빛을 받지만, 로드하는 데 더 오래 걸립니다. 렌더링 방식에서 둘 중 하나를 고르세요.
코드 없이 손전등 효과를 만들 수 있나요?
네. 브라우저에서 조정한 뒤 무료 UX Pilot 계정으로 로그인하면 UX Pilot 캔버스에 올리거나 HTML 또는 PNG로 내보낼 수 있습니다.