00:00:00최근에 웹사이트에 작지만 아주 멋진 디테일을 더해주는
00:00:04정말 괜찮은 패키지를 발견했습니다. 지금까지는 이런 게 필요한 줄도 몰랐네요.
00:00:07WebHaptics는 이름 그대로 웹사이트에서 햅틱 피드백을
00:00:11사용할 수 있게 해줍니다. 안드로이드든 iOS든 상관없이 지원하며,
00:00:15웹사이트를 마치 네이티브 앱처럼 느껴지게 만듭니다. 구현 방식도 정말 깔끔하고 단순해요.
00:00:20말 그대로 함수 하나면 충분하거든요.
00:00:21저만 이게 멋지다고 생각하는 게 아니더라고요. 이미 트위터에서 큰 화제가 되었고
00:00:24심지어 Polymarket은 이미 이 패키지를 도입했다고 합니다.
00:00:29그럼 이 화제의 패키지가 무엇인지 자세히 살펴보고,
00:00:33iOS에서 작동시키기 위해 사용된 아주 흥미로운 트릭에 대해서도 이야기해 보겠습니다.
00:00:43패키지의 기능을 화면으로 직접 보여드리기는 조금 어렵습니다.
00:00:46폰에서 발생하는 물리적인 진동이기 때문이죠. 유튜브 앱에서 '구독' 버튼을
00:00:50눌렀을 때 느껴지는 것과 똑같은 방식입니다. 이미 구독 중이라
00:00:54직접 테스트해보고 싶다면 WebHaptics 웹사이트를 방문해보시는 걸 추천합니다.
00:00:59영상을 보신 후에 꼭 한번 확인해 보세요. '성공'이나 '에러' 시의 피드백,
00:01:02그리고 버튼 클릭 시의 일반적인 햅틱 반응들을 직접 체험해볼 수 있습니다.
00:01:06또한 나만의 햅틱 패턴을 만들 수 있는 멋진 에디터도 있는데,
00:01:10이건 잠시 후에 다시 살펴보겠습니다.
00:01:11이제 코드를 직접 짜보죠. 보시는 것처럼 매우 간단한 npm 패키지이며
00:01:15React, Vue, Svelte용 헬퍼도 제공합니다. 물론 원하신다면
00:01:19일반 자바스크립트 버전을 사용할 수도 있습니다. 이 'trigger' 함수는
00:01:23모든 프레임워크에서 동일하게 작동합니다.
00:01:24저는 React를 사용하겠습니다. 코드가 믿기지 않을 정도로 간단한데요,
00:01:28그저 'useWebHaptics' 훅을 사용하기만 하면 됩니다. 여기서 'trigger' 함수를 가져와
00:01:32버튼 같은 요소에 연결해 햅틱 피드백을 실행할 수 있습니다.
00:01:36또한 이 훅에서는 실행 중인 햅틱 피드백을 중단하는 'cancel' 함수와
00:01:39브라우저의 햅틱 지원 여부를 확인할 수 있는
00:01:44'isSupported' 불리언 값도 제공합니다.
00:01:45이 간단한 코드 덕분에 안드로이드나 iOS 기기에서 이 버튼을 클릭하면
00:01:48미세한 진동이 느껴지게 됩니다. 지금 저는 노트북을 사용 중이라
00:01:53아무런 반응이 없지만요.
00:01:54개발 중에 이게 제대로 작동하는지 알 수 있는 방법이 하나 있는데,
00:01:57훅 내부 설정에서 'debug'를 true로 설정하는 것입니다. 이렇게 하면
00:02:00버튼을 클릭할 때 햅틱 피드백을 흉내 내는
00:02:04소리가 재생됩니다.
00:02:05진동 패턴을 커스텀하는 것 역시 매우 간단하며
00:02:09trigger 함수 내에서 설정할 수 있습니다.
00:02:10첫 번째 방법은 패키지에 내장된 프리셋을 사용하는 것입니다.
00:02:14'defaultPatterns'를 임포트하면 buzz, error, heavy 등
00:02:18다양한 프리셋을 찾을 수 있습니다. 웹사이트에서
00:02:21이 패턴들이 어떤 느낌인지 미리 체험해볼 수도 있죠.
00:02:22두 번째 방법은 완전히 새로운 진동 패턴을 만드는 것입니다.
00:02:25trigger 함수에 배열을 전달하고 그 안에 진동을 정의하면 됩니다.
00:02:29현재 이 패턴에는 네 개의 진동이 설정되어 있습니다. 보시는 것처럼
00:02:33객체를 통해 진동을 정의하는데, 'delay'는 이전 진동으로부터의
00:02:37대기 시간(ms), 'duration'은 진동이 유지되는 시간(ms),
00:02:41그리고 'intensity'는 진동의 세기를 나타냅니다 (1이 가장 강함).
00:02:46제가 만든 이 패턴을 버튼으로 클릭하면 어떤 소리가 나는지 들리실 겁니다.
00:02:49사용자의 폰에서는 이게 진동으로 느껴진다고 상상해 보세요.
00:02:53커스텀 진동 패턴을 만드는 꿀팁은 공식 웹사이트를 활용하는 것입니다.
00:02:57아주 훌륭한 에디터가 있어서 클릭으로 진동을 추가하고,
00:03:02드래그로 길이를 조절하거나 상하 드래그로 강도를 바꿀 수 있습니다.
00:03:06재생 버튼으로 소리를 들어볼 수도 있고, 폰으로 접속하면
00:03:09실제 진동이 어떤 느낌인지 바로 확인할 수 있습니다.
00:03:11영상으로 보여드리기에 한계가 있긴 하지만, 어떤 느낌인지는
00:03:14충분히 이해하셨을 겁니다. 꽤 단순한 패키지지만, 이제 작동 원리를
00:03:19설명해 드리고 싶네요. iOS는 이 기능을 구현하기가 정말 까다롭거든요.
00:03:21우선 기본적으로 휴대폰의 진동 기능을 호출하는
00:03:24'navigator.vibrate'라는 API가 존재합니다.
00:03:27문제는 이게 안드로이드에서는 잘 작동하지만 iOS에서는 전혀 지원되지 않는다는 거죠.
00:03:32다행히 iOS에서 햅틱 피드백을 구현할 수 있는 또 다른 방법이 있는데,
00:03:36바로 스위치(switch) 타입의 input을 사용하는 것입니다. 사용자가 이걸 클릭하면 햅틱 반응이 오거든요.
00:03:41이 라이브러리는 그 점을 활용합니다. 우리가 햅틱을 트리거하면,
00:03:44우리가 설정한 패턴에 맞춰 보이지 않는 스위치를 대신 클릭해 주는 방식입니다.
00:03:49하단에 있는 체크박스를 보시면 햅틱을 트리거했을 때
00:03:53여러 번 켜지고 꺼지는 걸 볼 수 있는데, 이게 iOS의 스위치 역할을 하는 거죠.
00:03:56앱을 디버깅하면서 이 스위치를 직접 확인해보고 싶다면,
00:03:59훅의 설정에서 'showSwitch'를 true로 바꿔주면 됩니다.
00:04:03패키지 소스 코드를 잠깐 살펴보면 그 원리를 더 명확히 알 수 있습니다.
00:04:06웹 햅틱이 지원되는 경우('navigator.vibrate'가 존재할 때)는 그냥 그 함수를 사용해 진동을 울립니다.
00:04:11하지만 지원되지 않는 환경이라면, 아래쪽 코드처럼
00:04:15스위치를 클릭하게 됩니다. 그리고 여기 보이는 이 함수가
00:04:19보시는 것처럼 스위치를 여러 번 클릭하여 진동 패턴을 만들어내는 핵심 로직입니다.
00:04:23정말 영리한 해결책이라 꼭 소개해 드리고 싶었습니다. 애플이 이걸
00:04:27막지 않았으면 좋겠네요. 혹시 막더라도 제발 표준 'vibrate' 함수를
00:04:31지원해 줬으면 합니다.
00:04:32이 패키지에 대해 말씀드릴 내용은 이게 전부입니다. 여러분의 프로젝트에
00:04:35활용할 계획이 있는지 댓글로 알려주세요. 구독 잊지 마시고,
00:04:38다음 영상에서 뵙겠습니다.
00:04:41[음악]