designpaca/research/youtube/transcript-ko-compact.txt

웹사이트들이 곧 엄청난 혼란에 빠질 겁니다. 크롬에서 웹사이트들이 곧 엄청난 혼란에 빠질 겁니다. 크롬에서 웹사이트와 비디오 게임의 경계를 허무는 새로운 API를 출시했습니다. 웹사이트와 비디오 게임의 경계를 허무는 새로운 API를 출시했습니다. 캔버스에서는 HTML이라고 부릅니다. 이 기능을 사용하면 캔버스에서는 HTML이라고 부릅니다. 이 기능을 사용하면 버튼, 버튼, 버튼, 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 폼, 웹페이지 전체 등 모든 HTML 요소를 가져와 캔버스 안에 실시간으로 그릴 수 있습니다. 캔버스 안에 실시간으로 그릴 수 있습니다. 전에는 할 수 없었던 일. 지금 당장은 전에는 할 수 없었던 일. 지금 당장은 별것 아닌 것처럼 들릴 수도 있겠지만, 별것 아닌 것처럼 들릴 수도 있겠지만, 별것 아닌 것처럼 들릴 수도 있겠지만, 이 데모 영상을 보시면 생각이 달라질 겁니다 이 데모 영상을 보시면 생각이 달라질 겁니다 이 데모 영상을 보시면 생각이 달라질 겁니다 . 이것은 포트폴리오 웹사이트이고, . 이것은 포트폴리오 웹사이트이고, 저것은 실제 HTML 양식입니다. 저것은 실제 HTML 양식입니다. 웹페이지의 다른 텍스트처럼 마우스로 제목을 선택할 수 있습니다. 버튼도 웹페이지의 다른 텍스트처럼 마우스로 제목을 선택할 수 있습니다. 버튼도 작동하고, 슬라이더도 작동하고, 작동하고, 슬라이더도 작동하고, 작동하고, 슬라이더도 작동하고, 클릭하고, 그리고, 텍스트 입력란에 글씨도 쓸 수 있어요. 클릭하고, 그리고, 텍스트 입력란에 글씨도 쓸 수 있어요. 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 하지만 이 모든 일은 캔버스 안에서 일어나고 있습니다 . 그 형태는 . 그 형태는 3D 장면에서 천 조각 위에 그려져 있습니다. 3D 장면에서 천 조각 위에 그려져 있습니다. 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 찌르기나 쓰다듬기를 클릭하면 천이 실제 천처럼 반응하고 , 형태도 천에 자연스럽게 녹아듭니다 , 형태도 천에 자연스럽게 녹아듭니다 , 형태도 천에 자연스럽게 녹아듭니다 . 그리고 그 등장인물이 그 상황에 부딪히면 . 그리고 그 등장인물이 그 상황에 부딪히면 , 완전히 정면으로 충돌해 버립니다. 또는, , 완전히 정면으로 충돌해 버립니다. 또는, 젤리 슬라이더로 변환된 HTML 범위 입력란을 확인해 보세요. 젤리 슬라이더로 변환된 HTML 범위 입력란을 확인해 보세요. 참고로, 이 API를 사용하기 위해 반드시 완전한 3D 환경을 구축할 필요는 없습니다. 기존 웹사이트를 개선하는 데에도 사용할 수 있습니다. 예를 들어, 다음 입력을 살펴보세요 기존 웹사이트를 개선하는 데에도 사용할 수 있습니다. 예를 들어, 다음 입력을 살펴보세요 . 이것은 실제 HTML 입력 필드이며, 그 . 이것은 실제 HTML 입력 필드이며, 그 위에 텍스트를 입력할 수 있습니다. 하지만 폼을 제출하면 위에 텍스트를 입력할 수 있습니다. 하지만 폼을 제출하면 캔버스 안에 있기 때문에 캔버스 안에 있기 때문에 캔버스 안에 있기 때문에 멋진 효과를 적용할 수 있습니다. 또는, 멋진 효과를 적용할 수 있습니다. 또는, 이 양식을 사용하세요. 겉보기에는 평범해 보이지만, 이 양식을 사용하세요. 겉보기에는 평범해 보이지만, 입력에 대한 초점 효과, 입력에 대한 초점 효과, 입력에 대한 초점 효과, 테두리의 움직임, 빛나는 방식 등 모든 것은 테두리의 움직임, 빛나는 방식 등 모든 것은 테두리의 움직임, 빛나는 방식 등 모든 것은 캔버스에서 실행되는 셰이더에 의해 구현됩니다. 캔버스에서 실행되는 셰이더에 의해 구현됩니다. 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 그런데 제가 그걸 제출하면 셰이더 때문에 HTML이 왜곡됩니다 . 또는, . 또는, 밝은 모드와 어두운 모드 사이를 전환할 때 페이지가 타들어가는 듯한 애니메이션을 확인해 보세요. 그리고 이건 밝은 모드와 어두운 모드 사이를 전환할 때 페이지가 타들어가는 듯한 애니메이션을 확인해 보세요. 그리고 이건 정말 아름답네요. 누군가가 정말 아름답네요. 누군가가 웹상에서 애플의 액체 유리를 만들었습니다. 웹상에서 애플의 액체 유리를 만들었습니다. 이거 정말 멋지지 않나요? 우리가 앞으로 만들어낼 멋진 웹사이트들과 우리가 앞으로 만들어낼 멋진 웹사이트들과 우리가 앞으로 만들어낼 멋진 웹사이트들과 웹이 어떻게 변화할지 상상해 보세요. 웹이 어떻게 변화할지 상상해 보세요. 2D 페이지라기보다는 2D 페이지라기보다는 2D 페이지라기보다는 비디오 게임이나 예술 설치 작품처럼 느껴지는 웹사이트. 그런 비디오 게임이나 예술 설치 작품처럼 느껴지는 웹사이트. 그런 종류의 네트워크가 방금 열린 겁니다. 종류의 네트워크가 방금 열린 겁니다. 그렇다면 이 모든 것이 어떻게 가능한 걸까요? 우리가 그렇다면 이 모든 것이 어떻게 가능한 걸까요? 우리가 알고 있듯이, HTML의 canvas 요소는 알고 있듯이, HTML의 canvas 요소는 알고 있듯이, HTML의 canvas 요소는 그 안의 픽셀을 조작할 수 있게 해줍니다. 그 안의 픽셀을 조작할 수 있게 해줍니다. 엄청나게 강력합니다. 저희는 엄청나게 강력합니다. 저희는 게임, 이미지 편집, 3D 장면 제작 등 게임, 이미지 편집, 3D 장면 제작 등 게임, 이미지 편집, 3D 장면 제작 등 순수한 시각적 순수한 시각적 순수한 시각적 제어가 필요한 모든 분야에서 이 소프트웨어를 사용합니다. 하지만 canvas는 제어가 필요한 모든 분야에서 이 소프트웨어를 사용합니다. 하지만 canvas는 다른 HTML 요소에 대해서는 전혀 알지 못합니다. 제가 다른 HTML 요소에 대해서는 전혀 알지 못합니다. 제가 무슨 말인지 보여드리겠습니다. 무슨 말인지 보여드리겠습니다. 캔버스에 간단한 버튼을 추가하고 싶다고 가정해 봅시다. 버튼 요소를 단순히 드래그해서 버튼 요소를 단순히 드래그해서 버튼 요소를 단순히 드래그해서 안에 넣을 수는 없습니다. 캔버스는 안에 넣을 수는 없습니다. 캔버스는 그걸 이해하지 못해요. 그래서 대신에 이 그걸 이해하지 못해요. 그래서 대신에 이 모든 것을 해야 합니다. 먼저 모든 것을 해야 합니다. 먼저 사각형과 글자를 그립니다. 그다음, 사각형과 글자를 그립니다. 그다음, 캔버스 전체에서 클릭 소리를 감지하고 캔버스 전체에서 클릭 소리를 감지하고 캔버스 전체에서 클릭 소리를 감지하고 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 클릭이 버튼 좌표 내에서 발생했는지 확인합니다 . 그런 다음 . 그런 다음 마우스 오버 시에도 동일한 히트 테스트를 다시 수행하여 마우스 오버 시에도 동일한 히트 테스트를 다시 수행하여 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 마우스가 버튼 위로 이동할 때 버튼을 다른 색상으로 다시 그릴 수 있도록 합니다 . 그런데 그 모든 과정을 거치고 나서도, 여전히 . 그런데 그 모든 과정을 거치고 나서도, 여전히 진짜 버튼은 없네요. 진짜 버튼은 없네요. 버튼 그림은 있는데 버튼 그림은 있는데 버튼 그림은 있는데 접근성도 없고, 키보드 지원도 없고, 접근성도 없고, 키보드 지원도 없고, 접근성도 없고, 키보드 지원도 없고, CSS 스타일링도 없고, 아무것도 없어요. 자, 이제 CSS 스타일링도 없고, 아무것도 없어요. 자, 이제 페이지의 모든 버튼, 모든 페이지의 모든 버튼, 모든 페이지의 모든 버튼, 모든 입력란, 모든 양식, 전체 인터페이스에 대해 이 작업을 수행한다고 상상해 보세요. 입력란, 모든 양식, 전체 인터페이스에 대해 이 작업을 수행한다고 상상해 보세요. 그래서 오랫동안 그래서 오랫동안 그래서 오랫동안 픽셀로 가득 찬 캔버스나 픽셀로 가득 찬 캔버스나 픽셀로 가득 찬 캔버스나 HTML로 가득 찬 웹 페이지 중 하나만 선택해야 했고, 둘 다 동시에 사용할 수는 없었던 것입니다. HTML로 가득 찬 웹 페이지 중 하나만 선택해야 했고, 둘 다 동시에 사용할 수는 없었던 것입니다. 방금 보신 모든 데모, 천, 방금 보신 모든 데모, 천, 방금 보신 모든 데모, 천, 불타는 페이지, 액체 유리 등은 모두 불타는 페이지, 액체 유리 등은 모두 불타는 페이지, 액체 유리 등은 모두 실제 HTML을 기반으로 하고 있지만, 실제 HTML을 기반으로 하고 있지만, 이 API가 나오기 전에는 똑같은 이유로 구현이 불가능했습니다. 이 모든 것을 가능하게 하는 것은 바로 이것입니다 이 API가 나오기 전에는 똑같은 이유로 구현이 불가능했습니다. 이 모든 것을 가능하게 하는 것은 바로 이것입니다 . HTML은 . HTML은 실제로 클릭할 수 있는 버튼이나 실제로 클릭할 수 있는 버튼이나 실제로 클릭할 수 있는 버튼이나 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 입력할 수 있는 입력 필드가 있을 때는 DOM에, 그리고 단순히 픽셀로만 표현될 때는 캔버스에 동시에 존재합니다. 단순히 픽셀로만 표현될 때는 캔버스에 동시에 존재합니다. 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 셰이더는 픽셀을 포착하고, 비틀고, 왜곡하고, 혼합하거나, 심지어 3D 형태로 매핑할 수도 있습니다. 혼합하거나, 심지어 3D 형태로 매핑할 수도 있습니다. 동일한 요소의 두 복사본, 하나는 동일한 요소의 두 복사본, 하나는 동일한 요소의 두 복사본, 하나는 만질 수 있고, 다른 하나는 그림을 그릴 수 있습니다. 그리고 만질 수 있고, 다른 하나는 그림을 그릴 수 있습니다. 그리고 API는 놀라울 정도로 간단합니다. 먼저, API는 놀라울 정도로 간단합니다. 먼저, 레이아웃 서브트리 속성을 추가하고 레이아웃 서브트리 속성을 추가하고 레이아웃 서브트리 속성을 추가하고 그 안에 그리고자 하는 HTML을 넣어 캔버스가 해당 속성을 사용하도록 설정합니다. 그 안에 그리고자 하는 HTML을 넣어 캔버스가 해당 속성을 사용하도록 설정합니다. 그런 다음 해당 요소를 선택하고 그런 다음 해당 요소를 선택하고 그런 다음 해당 요소를 선택하고 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 캔버스 컨텍스트에서 요소 이미지 그리기를 호출합니다 . 요소와 . 요소와 좌표를 입력하면 캔버스가 그 자리에 좌표를 입력하면 캔버스가 그 자리에 좌표를 입력하면 캔버스가 그 자리에 실시간으로 복사본을 그려줍니다. WebGL을 사용 중이라면 실시간으로 복사본을 그려줍니다. WebGL을 사용 중이라면 텍스트 요소 이미지가 2D로 표시됩니다. 텍스트 요소 이미지가 2D로 표시됩니다. WebGPU를 사용 중이라면 WebGPU를 사용 중이라면 WebGPU를 사용 중이라면 요소 이미지를 텍스처로 복사하는 기능이 있습니다. 같은 요소 이미지를 텍스처로 복사하는 기능이 있습니다. 같은 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 아이디어인데, 2D 캔버스 대신 GPU 텍스처에 HTML을 입력하는 것뿐입니다 . . 캔버스 내부의 HTML이 캔버스 내부의 HTML이 캔버스 내부의 HTML이 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 변경될 때마다, 예를 들어 입력 필드에 포커스가 맞춰지거나 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 버튼에 마우스 커서가 올라갈 때마다, 캔버스는 페인트 이벤트를 발생시킵니다. 그 소리에 귀 기울이고 페인트 이벤트를 발생시킵니다. 그 소리에 귀 기울이고 , 그 안에서 원하는 대로 행동하면 됩니다. , 그 안에서 원하는 대로 행동하면 됩니다. HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 HTML을 화면에 표시하거나, 셰이더를 사용하여 변형 하거나, 3D 도형으로 감쌀 수 있습니다. 하거나, 3D 도형으로 감쌀 수 있습니다. 그게 거의 API입니다. 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 이를 제대로 이해하려면, 그것을 이용해 무언가를 만들어 봅시다 . 우리가 만들려는 것은 . 우리가 만들려는 것은 아래쪽에 반사 효과가 있는 간단한 버튼입니다. 버튼은 실제로 아래쪽에 반사 효과가 있는 간단한 버튼입니다. 버튼은 실제로 클릭할 수 있으며, 반사된 모습은 클릭할 수 있으며, 반사된 모습은 클릭할 수 있으며, 반사된 모습은 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 캔버스에 그려진 것입니다. 먼저 HTML 코드부터 살펴보겠습니다. 캔버스 안에 버튼이 있습니다. 캔버스는 안에 버튼이 있습니다. 캔버스는 레이아웃 서브트리 속성을 가지고 있으므로 레이아웃 서브트리 속성을 가지고 있으므로 레이아웃 서브트리 속성을 가지고 있으므로 자식 요소에 대해 알고 있습니다. 해당 버튼은 그냥 자식 요소에 대해 알고 있습니다. 해당 버튼은 그냥 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 일반 HTML 버튼일 뿐이며, 캔버스와는 아무런 관련이 없습니다 . CSS도 그냥 평범한 CSS, . CSS도 그냥 평범한 CSS, 분홍색 둥근 버튼일 뿐입니다. 마우스 커서를 올리면 분홍색 둥근 버튼일 뿐입니다. 마우스 커서를 올리면 보라색으로 변하면서 약간 커집니다. 보라색으로 변하면서 약간 커집니다. 클릭하면 크기가 줄어듭니다. 자, 이제 자바 클릭하면 크기가 줄어듭니다. 자, 이제 자바 스크립트, 전체적인 내용에 대해 이야기해 봅시다. 먼저 스크립트, 전체적인 내용에 대해 이야기해 봅시다. 먼저 페이지에서 페이지에서 페이지에서 캔버스, 그림을 그리는 데 사용하는 도구인 캔버스, 그림을 그리는 데 사용하는 도구인 캔버스, 그림을 그리는 데 사용하는 도구인 컨텍스트, 그리고 버튼, 이렇게 세 가지 요소를 가져옵니다. 그런 다음, 컨텍스트, 그리고 버튼, 이렇게 세 가지 요소를 가져옵니다. 그런 다음, 세 개의 숫자를 저장합니다. X와 Y는 세 개의 숫자를 저장합니다. X와 Y는 캔버스에서 버튼이 나타날 위치입니다. H는 캔버스에서 버튼이 나타날 위치입니다. H는 버튼의 높이입니다. 자, 이제 렌더링 버튼의 높이입니다. 자, 이제 렌더링 함수를 살펴보겠습니다. 이 함수는 초당 60번 호출됩니다 함수를 살펴보겠습니다. 이 함수는 초당 60번 호출됩니다 . 먼저, 매 프레임마다 캔버스를 깨끗하게 닦습니다 . 그렇지 않으면 모든 그림이 . 그렇지 않으면 모든 그림이 쌓이게 될 것입니다. 우리는 브러시에게 쌓이게 될 것입니다. 우리는 브러시에게 현재 상태를 북마크하도록 지시합니다. 그다음엔 현재 상태를 북마크하도록 지시합니다. 그다음엔 붓을 가지고 장난을 쳐 봅니다. 우리는 붓을 가지고 장난을 쳐 봅니다. 우리는 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 모든 것을 약간 아래로 이동시키고, 상하 반전시키고 , 불투명도를 30%로 설정하여 그리도록 지시합니다. 그다음, , 불투명도를 30%로 설정하여 그리도록 지시합니다. 그다음, 버튼을 캔버스에 찍어냅니다. 버튼을 캔버스에 찍어냅니다. 브러시가 뒤집힌 흐릿한 브러시가 뒤집힌 흐릿한 브러시가 뒤집힌 흐릿한 모드이기 때문에 스탬프는 모드이기 때문에 스탬프는 모드이기 때문에 스탬프는 버튼의 흐릿하고 거꾸로 된 복사본처럼 나옵니다. 그런 다음 버튼의 흐릿하고 거꾸로 된 복사본처럼 나옵니다. 그런 다음 붓에게 책갈피로 돌아가라고 지시합니다. 뒤집히지도 붓에게 책갈피로 돌아가라고 지시합니다. 뒤집히지도 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 않고 흐릿해지지도 않은, 원래 모습 그대로 말입니다 . 이제 . 이제 일반 붓으로 버튼에 다시 한번 도장을 찍어줍니다. 일반 붓으로 버튼에 다시 한번 도장을 찍어줍니다. 시청자들이 클릭하는 바로 그 링크입니다. 하지만 여기에 시청자들이 클릭하는 바로 그 링크입니다. 하지만 여기에 문제가 있습니다. 버튼은 실제로 문제가 있습니다. 버튼은 실제로 두 곳에 존재합니다. 하나는 방금 두 곳에 존재합니다. 하나는 방금 버튼을 그린 캔버스이고, 다른 하나는 버튼을 그린 캔버스이고, 다른 하나는 버튼을 그린 캔버스이고, 다른 하나는 브라우저가 실제 보이지 않지만 브라우저가 실제 보이지 않지만 브라우저가 실제 보이지 않지만 클릭 가능한 버튼을 저장하는 DOM입니다. 브라우저는 클릭 가능한 버튼을 저장하는 DOM입니다. 브라우저는 캔버스의 어느 부분에 그림을 그렸는지 알지 못합니다. 캔버스의 어느 부분에 그림을 그렸는지 알지 못합니다. 따라서 화면에 표시된 버튼을 클릭했을 때 따라서 화면에 표시된 버튼을 클릭했을 때 따라서 화면에 표시된 버튼을 클릭했을 때 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 , 브라우저는 실제 보이지 않는 다른 위치의 버튼을 알아채지 못할 수도 있습니다 . 우리는 . 우리는 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 보이지 않는 것을 칠해진 것과 같은 위치로 옮겨야 합니다 . 다행히도 . 다행히도 요소 이미지 그리기 기능이 도움이 됩니다. 전화를 걸었더니 요소 이미지 그리기 기능이 도움이 됩니다. 전화를 걸었더니 버튼이 어디에 그려졌는지 알려주는 계산 결과가 나왔습니다. 우리는 버튼이 어디에 그려졌는지 알려주는 계산 결과가 나왔습니다. 우리는 그 계산 결과를 버튼 스타일 변환에 전달하고, 그 계산 결과를 버튼 스타일 변환에 전달하고, 그 계산 결과를 버튼 스타일 변환에 전달하고, 그러면 보이지 않는 버튼이 그러면 보이지 않는 버튼이 그러면 보이지 않는 버튼이 그려진 버튼과 일치하도록 이동합니다. 자, 이제 클릭이 시작됩니다 그려진 버튼과 일치하도록 이동합니다. 자, 이제 클릭이 시작됩니다 . 마지막으로, 마치 재생 버튼을 누르는 것처럼 브라우저에게 . 마지막으로, 마치 재생 버튼을 누르는 것처럼 브라우저에게 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 다음 프레임에서 다시 렌더링을 호출하도록 요청합니다 . 이게 바로 데모의 전부입니다. . 이게 바로 데모의 전부입니다. 캔버스에 두 번 그려진 실제 클릭 가능한 HTML 버튼이죠. 동일한 요소가 두 개 모두 캔버스에 두 번 그려진 실제 클릭 가능한 HTML 버튼이죠. 동일한 요소가 두 개 모두 정상적으로 작동하며, 약 20줄의 정상적으로 작동하며, 약 20줄의 정상적으로 작동하며, 약 20줄의 자바스크립트로 구현됩니다. 하지만, 여기서부터 자바스크립트로 구현됩니다. 하지만, 여기서부터 재밌어집니다. 이제 버튼이 캔버스에 있으므로 재밌어집니다. 이제 버튼이 캔버스에 있으므로 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 해당 픽셀을 우리가 소유하게 되었고, 이는 클릭 시 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 물결 효과와 같은 어떤 작업이든 수행할 수 있다는 것을 의미합니다 . 그리고 이를 추가하는 코드는 . 그리고 이를 추가하는 코드는 바로 이것입니다. 버튼 클릭을 감지하고 클릭이 바로 이것입니다. 버튼 클릭을 감지하고 클릭이 발생하면 발생하면 발생하면 클릭 좌표에서 ripple 함수를 호출합니다. 클릭 좌표에서 ripple 함수를 호출합니다. 물결 효과 기능 자체는 일반적인 물결 효과 기능 자체는 일반적인 물결 효과 기능 자체는 일반적인 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 캔버스 연산이며, AI가 이를 처리하는 데 도움을 줄 수 있습니다 . 픽셀을 샘플링하고 위치를 조정하는 것은 . 픽셀을 샘플링하고 위치를 조정하는 것은 API에서 새로운 것이 아닙니다. API에서 새로운 것이 아닙니다. 요점은, 일단 HTML이 캔버스에 올라가면 요점은, 일단 HTML이 캔버스에 올라가면 요점은, 일단 HTML이 캔버스에 올라가면 무엇이든 할 수 있다는 것입니다. 자, 이제 무엇이든 할 수 있다는 것입니다. 자, 이제 솔직한 이야기를 해볼게요. 이 API는 아직 상용화 준비가 되지 않았습니다 솔직한 이야기를 해볼게요. 이 API는 아직 상용화 준비가 되지 않았습니다 . . Chrome Canary에 플래그를 남깁니다. 따라서 Chrome Canary에 플래그를 남깁니다. 따라서 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 API가 작동하려면 사용자가 브라우저에서 해당 기능을 활성화해야 합니다 . 그리고 이 모든 것은 아직 . 그리고 이 모든 것은 아직 제안 단계입니다. 방금 보신 내용은 모두 아직 제안 단계입니다. 방금 보신 내용은 모두 아직 초안입니다. 초안입니다. API의 서명이나 기본적인 형태조차도 여전히 변경될 수 있습니다. 그러니까 당장 내일 API의 서명이나 기본적인 형태조차도 여전히 변경될 수 있습니다. 그러니까 당장 내일 생산에 투입할 만한 것은 아니지만, 생산에 투입할 만한 것은 아니지만, 오늘 당장 실험을 시작해 볼 만한 가치가 충분히 있는 것입니다. 오늘 당장 실험을 시작해 볼 만한 가치가 충분히 있는 것입니다. 이게 실제로 구현되면 좋겠어요. 플래시 시절처럼 이게 실제로 구현되면 좋겠어요. 플래시 시절처럼 웹서핑이 다시 재밌어질 수 있을 것 같거든요 웹서핑이 다시 재밌어질 수 있을 것 같거든요 웹서핑이 다시 재밌어질 수 있을 것 같거든요 . 네 . 네 , 여러분 좋은 하루 보내세요. , 여러분 좋은 하루 보내세요. 다음 영상에서 만나요. 안녕.