[ko] Translation done to 'Web audio spatialization basics' document (#2782)

* translate the below document.

Web audio spatialization basics

* small fixes

fix flaws
fix not modified parts

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* translation modified

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

* overall modification

* addtional modification

Co-authored-by: Yeji Choi <61399588+yechoi42@users.noreply.github.com>

1 files changed, 76 insertions, 76 deletions

diff --git a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html
index 2846d45d6c..4d456c82b9 100644
--- a/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html
+++ b/files/ko/web/api/web_audio_api/web_audio_spatialization_basics/index.html
@@ -1,5 +1,5 @@
 ---
-title: Web audio spatialization basics
+title: Web audio 공간화 기초
 slug: Web/API/Web_Audio_API/Web_audio_spatialization_basics
 tags:
   - PannerNode
@@ -9,36 +9,36 @@ tags:
 <div>{{DefaultAPISidebar("Web Audio API")}}</div>
 
 <div class="summary">
-<p><span class="seoSummary">As if its extensive variety of sound processing (and other) options wasn't enough, the Web Audio API also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3D game. The official term for this is <strong>spatialization</strong>, and this article will cover the basics of how to implement such a system.</span></p>
+<p><span class="seoSummary">Web Audio API의 사운드 프로세싱 (그리고 다른 것들) 의 광범위한 다양성이 마치 충분하지 않다는 것처럼, Web Audio API는 또한 리스너가 음원 주위에서 움직일 때 소리의 차이를 모방할 수 있게 하는 기능을 포함하고 있습니다. 그 예시로는 3D 게임에서 음원 주위에서 움직일 때의 패닝 기능을 들 수 있습니다. 이 기능에 대한 공식적인 용어는 <strong>spatialization</strong>(공간화)이고, 이 글은 어떻게 그런 시스템을 구현하는지에 대한 기초를 다룰 것입니다.</span></p>
 </div>
 
-<h2 id="Basics_of_spatialization">Basics of spatialization</h2>
+<h2 id="Basics_of_spatialization">공간화 기초</h2>
 
-<p>In Web Audio, complex 3D spatializations are created using the {{domxref("PannerNode")}}, which in layman's terms is basically a whole lotta cool maths to make audio appear in 3D space. Think sounds flying over you, creeping up behind you, moving across in front of you. That sort of thing.</p>
+<p>Web Audio에서, 복잡한 3D 공간화는 {{domxref("PannerNode")}}를 사용하여 생성되는데, 쉽게 말하자면 이는 기본적으로 오디오가 3D 공간에 나타날 수 있게 하는 멋진 수학적 마법입니다. 위로 날아가는, 뒤에서 슬금슬금 다가오는, 앞을 가로질러 가는 소리들을 생각해 보세요. 그런 종류의 것들을 다룹니다.</p>
 
-<p>It's really useful for WebXR and gaming. In 3D spaces, it's the only way to achieve realistic audio. Libraries like <a href="https://threejs.org/">three.js</a> and <a href="https://aframe.io/">A-frame</a> harness its potential when dealing with sound. It's worth noting that you don't <em>have</em> to move sound within a full 3D space either — you could stick with just a 2D plane, so if you were planning a 2D game, this would still be the node you were looking for.</p>
+<p>이 노드는 WebXR과 게이밍에 정말로 유용할 뿐만 아니라, 3D 공간에서 현실적인 오디오 효과를 낼 수 있게 하는 유일한 방법입니다. <a href="https://threejs.org/">three.js</a>와 <a href="https://aframe.io/">A-frame</a>같은 라이브러리들은 소리를 다룰 때 이 노드의 가능성을 활용합니다. 또한 주목할 가치가 있는 것은 <strong>꼭</strong> 3D 공간 내에서 사운드를 움직일 필요가 없다는 것입니다. 2D 평면 또한 사용할 수 있으므로, 만약 2D 게임을 계획하고 있다면 이것은 여전히 필요한 노드일 것입니다.</p>
 
 <div class="note">
-<p><strong>Note</strong>: There's also a {{domxref("StereoPannerNode")}} designed to deal with the common use case of creating simple left and right stereo panning effects. This is much simpler to use, but obviously nowhere near as versatile. If you just want a simple stereo panning effect, our <a href="https://mdn.github.io/webaudio-examples/stereo-panner-node/">StereoPannerNode example</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/stereo-panner-node">see source code</a>) should give you everything you need.</p>
+<p><strong>참고</strong>: 간단한 좌우 스테레오 패닝 이펙트를 생성하는 경우를 다루기 위해 설계된 {{domxref("StereoPannerNode")}}가 있습니다. 이 노드는 사용하기가 더욱 단순하긴 하지만, 명백히 다재다능하지는 않습니다. 만약 단지 간단한 스테레오 패닝 이펙트가 필요하다면, <a href="https://mdn.github.io/webaudio-examples/stereo-panner-node/">StereoPannerNode 예제</a> (<a href="https://github.com/mdn/webaudio-examples/tree/master/stereo-panner-node">소스 코드는 여기서 보실 수 있습니다</a>) 에서 충분한 정보를 얻을 수 있을 것입니다.</p>
 </div>
 
-<h2 id="3D_boombox_demo">3D boombox demo</h2>
+<h2 id="3D_boombox_demo">3D 라디오 데모</h2>
 
-<p>To demonstrate 3D spatialization we've created a modified version of the boombox demo we created in our basic <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a> guide. see the <a href="https://mdn.github.io/webaudio-examples/spacialization/">3D spatialization demo live</a> (and see the <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">source code</a> also).</p>
+<p>3D 공간화를 시연하기 위해 기초 <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a> 가이드에서 만든 라디오 데모가 수정되었습니다. <a href="https://mdn.github.io/webaudio-examples/spacialization/">3D 공간화 작동 예제</a>를 구경해 보세요 (그리고 <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">소스 코드</a> 또한 보실 수 있습니다).</p>
 
-<p><img alt="A simple UI with a rotated boombox and controls to move it left and right and in and out, and rotate it." src="web-audio-spatialization.png"></p>
+<p><img alt="회전된 라디오와 이것을 좌우, 안팎으로 이동하고 회전시키기 위한 조종 버튼을 가진 단순한 UI" src="web-audio-spatialization.png"></p>
 
-<p>The boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls. When we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc. This is done by setting the different properties of the <code>PannerNode</code> object instance in relation to that movement, to emulate spacialization.</p>
+<p>이 라디오는 (브라우저 뷰포트의 가장자리에 의해 정의되는) 방 안에 위치하고 있고, 이 예제에서, 라디오는 여러 버튼을 통해 움직여지거나 회전될 수 있습니다. 라디오가 움직일 때, 라디오가 생성하는 사운드는 방의 좌우를 향해 움직여질 때 패닝되거나, 사용자로부터 떨어지거나 회전되어 스피커가 사용자를 등졌을 때 조용해지는 등 상황에 맞춰 변화합니다. 이러한 기능은 공간화를 모방하기 위해 그러한 움직임에 관한 <code>PannerNode</code> 객체 인스턴스의 여러 속성들을 설정함으로써 이루어질 수 있습니다.</p>
 
 <div class="note">
-<p><strong>Note</strong>: The experience is much better if you use headphones, or have some kind of surround sound system to plug your computer into.</p>
+<p><strong>참고</strong>: 위 예제가 제공하는 경험은 헤드폰을 사용하거나 컴퓨터에 연결할 서라운드 시스템 같은 것을 가지고 있다면 훨씬 낫게 다가올 것입니다.</p>
 </div>
 
-<h2 id="Creating_an_audio_listener">Creating an audio listener</h2>
+<h2 id="Creating_an_audio_listener">오디오 리스너 생성하기</h2>
 
-<p>So let's begin! The {{domxref("BaseAudioContext")}} (the interface the {{domxref("AudioContext")}} is extended from) has a <code><a href="/en-US/docs/Web/API/BaseAudioContext/listener">listener</a></code> property that returns an {{domxref("AudioListener")}} object. This represents the listener of the scene, usually your user. You can define where they are in space and in which direction they are facing. They remain static. The <code>pannerNode</code> can then calculate its sound position relative to the position of the listener.</p>
+<p>그럼 시작해 봅시다! ({{domxref("AudioContext")}}가 상속받는 인터페이스인) {{domxref("BaseAudioContext")}}는 {{domxref("AudioListener")}} 객체를 반환하는 <code><a href="/ko/docs/Web/API/BaseAudioContext/listener">listener</a></code> 속성을 가지고 있습니다. 이것은 현장의 리스너를 나타내는데, 보통 사용자입니다. 여러분은 사용자가 공간 내에서 어디에 있는지, 그리고 어떤 방향을 향하고 있는지를 정의할 수 있습니다. 사용자는 고정되어 있습니다. 그리고 나서 <code>pannerNode</code>가 리스너의 위치에 관해서 자신의 사운드 위치를 계산할 수 있습니다.</p>
 
-<p>Let's create our context and listener and set the listener's position to emulate a person looking into our room:</p>
+<p>컨텍스트와 리스너를 생성하고 리스너의 위치를 설정하여 방 안을 바라보고 있는 사람을 모방해 봅시다.</p>
 
 <pre class="brush: js">const AudioContext = window.AudioContext || window.webkitAudioContext;
 const audioCtx = new AudioContext();
@@ -53,7 +53,7 @@ listener.positionY.value = posY;
 listener.positionZ.value = posZ-5;
 </pre>
 
-<p>We could move the listener left or right using <code>positionX</code>, up or down using <code>positionY</code>, or in or out of the room using <code>positionZ</code>. Here we are setting the listener to be in the middle of the viewport and slightly in front of our boombox. We can also set the direction the listener is facing. The default values for these work well:</p>
+<p><code>positionX</code>를 통해 리스너를 좌우로 움직이거나, <code>positionY</code>를 통해 위아래로 움직이거나, <code>positionZ</code>를 통해 방의 안팎으로 움직일 수 있습니다. 위 코드에서 리스너의 위치는 뷰포트의 중앙 그리고 라디오의 살짝 앞에 있는 것으로 설정되었습니다. 또한, 리스너가 향하고 있는 방향도 설정할 수 있습니다. 이 속성들의 기본 값이면 충분할 것입니다.</p>
 
 <pre class="brush: js">listener.forwardX.value = 0;
 listener.forwardY.value = 0;
@@ -63,51 +63,51 @@ listener.upY.value = 1;
 listener.upZ.value = 0;
 </pre>
 
-<p>The forward properties represent the 3D coordinate position of the listener's forward direction (e.g. the direction they are facing in), while the up properties represent the 3D coordinate position of the top of the listener's head. These two together can nicely set the direction.</p>
+<p>forward 속성은 리스너 앞 방향의 3D 좌표 위치를 나타냅니다 (예: 리스너가 마주하고 있는 방향), 한편 up 속성들은 리스너 머리 위의 3D 좌표 위치를 나타냅니다. 방향은 이 두 속성에 의해 잘 설정될 수 있습니다.</p>
 
-<h2 id="Creating_a_panner_node">Creating a panner node</h2>
+<h2 id="Creating_a_panner_node">패너 노드 생성하기</h2>
 
-<p>Let's create our {{domxref("PannerNode")}}. This has a whole bunch of properties associated with it. Let's take a look at each of them:</p>
+<p>{{domxref("PannerNode")}}를 생성해 봅시다. 이 노드와 관련된 많은 속성들이 있습니다. 각 속성들을 살펴봅시다.</p>
 
-<p>To start we can set the <a href="/en-US/docs/Web/API/PannerNode/panningModel"><code>panningModel</code></a>. This is the spacialization algorithm that's used to position the audio in 3D space. We can set this to:</p>
+<p>첫번째로 <a href="/ko/docs/Web/API/PannerNode/panningModel"><code>panningModel</code></a>을 알아봅시다. 이 속성은 3D 공간에서 오디오를 위치시키기 위해 사용되는 알고리즘입니다. 설정될 수 있는 값은 다음과 같습니다.</p>
 
-<p><code>equalpower</code> — The default and the general way panning is figured out</p>
+<p><code>equalpower</code> — 기본값이며, 패닝이 계산되는 일반적인 방법</p>
 
-<p><code>HRTF</code> — This stands for 'Head-related transfer function' and looks to take into account the human head when figuring out where the sound is.</p>
+<p><code>HRTF</code> — HRTF는 'Head-related transfer function' 의 약자이고 사운드가 어디 있는지를 계산할 때 사람의 머리를 고려하는 것으로 보입니다.</p>
 
-<p>Pretty clever stuff. Let's use the <code>HRTF</code> model!</p>
+<p>꽤 똑똑한 것이군요. <code>HRTF</code> 모델을 사용합시다!</p>
 
 <pre class="brush: js">const pannerModel = 'HRTF';
 </pre>
 
-<p>The <a href="/en-US/docs/Web/API/PannerNode/coneInnerAngle"><code>coneInnerAngle</code></a> and <a href="/en-US/docs/Web/API/PannerNode/coneOuterAngle"><code>coneOuterAngle</code></a> properties specify where the volume emanates from. By default, both are 360 degrees. Our boombox speakers will have smaller cones, which we can define. The inner cone is where gain (volume) is always emulated at a maximum and the outer cone is where the gain starts to drop away. The gain is reduced by the value of the <a href="/en-US/docs/Web/API/PannerNode/coneOuterGain"><code>coneOuterGain</code></a> value. Let's create constants that store the values we'll use for these parameters later on:</p>
+<p><a href="/ko/docs/Web/API/PannerNode/coneInnerAngle"><code>coneInnerAngle</code></a>과 <a href="/ko/docs/Web/API/PannerNode/coneOuterAngle"><code>coneOuterAngle</code></a> 속성은 어디서 볼륨이 발생되는지를 명시합니다. 둘 다 기본 값은 360도입니다. 이 예제의 라디오는 기본 값보다 작은 원뿔을 가지도록 정의될 것입니다. 내부 원뿔은 gain (볼륨) 이 항상 최대로 발생되는 곳이고 외부 원뿔은 gain이 줄어들기 시작하는 곳입니다. 이 gain은 <a href="/ko/docs/Web/API/PannerNode/coneOuterGain"><code>coneOuterGain</code></a>의 값에 의해 감소됩니다. 이 매개변수들의 값을 저장할 상수를 생성합시다.</p>
 
 <pre class="brush: js">const innerCone = 60;
 const outerCone = 90;
 const outerGain = 0.3;
 </pre>
 
-<p>The next parameter is <a href="/en-US/docs/Web/API/PannerNode/distanceModel"><code>distanceModel</code></a> — this can only be set to <code>linear</code>, <code>inverse</code>, or <code>exponential</code>. These are different algorithms, which are used to reduce the volume of the audio source as it moves away from the listener. We'll use <code>linear</code>, as it is simple:</p>
+<p>다음 매개변수는 <a href="/ko/docs/Web/API/PannerNode/distanceModel"><code>distanceModel</code></a>입니다. 이 매개변수는 오직 <code>linear</code>, <code>inverse</code>, 또는 <code>exponential</code>로만 설정될 수 있습니다. 이 값들은 각기 다른 알고리즘인데, 리스너로부터 멀어질 때 오디오 소스의 볼륨을 감소시키기 위해 사용됩니다. <code>linear</code>를 사용합시다. 간단하니까요.</p>
 
 <pre class="brush: js">const distanceModel = 'linear';
 </pre>
 
-<p>We can set a maximum distance (<a href="/en-US/docs/Web/API/PannerNode/maxDistance"><code>maxDistance</code></a>) between the source and the listener — the volume will not be reduced anymore if the source moves further away from this point. This can be useful, as you may find you want to emulate distance, but volume can drop out and that's actually not what you want. By default, it's 10,000 (a unitless relative value). We can keep it as this:</p>
+<p>우리는 리스너와 음원 사이의 최대 거리 (<a href="/ko/docs/Web/API/PannerNode/maxDistance"><code>maxDistance</code></a>) 를 설정할 수 있습니다. 만약 음원이 이 지점으로부터 더 멀리 이동하면 볼륨은 더 이상 감소되지 않을 것입니다. 최대 거리 설정은 유용할 수 있습니다. 거리감을 흉내내고자 하나 볼륨이 꺼져 버린다면 곤란할 수 있겠죠. 최대 거리는 기본값으로 10,000 (단위없는 상대 값) 입니다. 아래와 같이 설정할 수 있습니다. </p>
 
 <pre class="brush: js">const maxDistance = 10000;
 </pre>
 
-<p>There's also a reference distance (<code><a href="/en-US/docs/Web/API/PannerNode/refDistance">refDistance</a></code>), which is used by the distance models. We can keep that at the default value of <code>1</code> as well:</p>
+<p>또한 참조 거리 (<code><a href="/en-US/docs/Web/API/PannerNode/refDistance">refDistance</a></code>)가 있는데, 이는 거리 모델에 의해 사용됩니다. 이 또한 기본값 <code>1</code>로 설정할 수 있습니다.</p>
 
 <pre class="brush: js">const refDistance = 1;
 </pre>
 
-<p>Then there's the roll-off factor (<a href="/en-US/docs/Web/API/PannerNode/rolloffFactor"><code>rolloffFactor</code></a>) — how quickly does the volume reduce as the panner moves away from the listener. The default value is 1; let's make that a bit bigger to exaggerate our movements.</p>
+<p>그리고 roll-off 인자 (<a href="/en-US/docs/Web/API/PannerNode/rolloffFactor"><code>rolloffFactor</code></a>) 가 있습니다. 이것은 패너가 리스너로부터 멀어질 때 얼마나 빨리 볼륨이 감소하는지를 정의합니다. 기본값은 1입니다. 이동을 과장시키는 효과를 주기 위해 이 값을 조금 더 크게 설정해 봅시다.</p>
 
 <pre class="brush: js">const rollOff = 10;
 </pre>
 
-<p>Now we can start setting our position and orientation of our boombox. This is a lot like how we did it with our listener. These are also the parameters we're going to change when the controls on our interface are used.</p>
+<p>이제 라디오의 위치와 방향 설정을 시작해 봅시다. 이는 리스너를 설정한 과정과 많이 비슷합니다. 인터페이스의 버튼들이 사용되었을 때 변경될 매개변수들은 아래와 같습니다.</p>
 
 <pre class="brush: js">const positionX = posX;
 const positionY = posY;
@@ -118,9 +118,9 @@ const orientationY = 0.0;
 const orientationZ = -1.0;
 </pre>
 
-<p>Note the minus value on our z orientation — this sets the boombox to face us. A positive value would set the sound source facing away from us.</p>
+<p>z 방향의 음수 값에 주목하세요. 음수 값은 라디오가 우리를 바라보게 만듭니다. 양수 값은 음원이 우리를 등지게 만들 것입니다.</p>
 
-<p>Let's use the relevant constructor for creating our panner node and pass in all those parameters we set above:</p>
+<p>생성자를 사용해 패너 노드를 생성하고 위에서 설정한 모든 매개변수들을 전달합시다.</p>
 
 <pre class="brush: js">const panner = new PannerNode(audioCtx, {
     panningModel: pannerModel,
@@ -140,16 +140,16 @@ const orientationZ = -1.0;
 })
 </pre>
 
-<h2 id="Moving_the_boombox">Moving the boombox</h2>
+<h2 id="Moving_the_boombox">라디오 이동시키기</h2>
 
-<p>Now we're going to move our boombox around our 'room'. We've got some controls set up to do this. We can move it left and right, up and down, and back and forth; we can also rotate it. The sound direction is coming from the boombox speaker at the front, so when we rotate it, we can alter the sound's direction — i.e. make it project to the back when the boombox is rotated 180 degrees and facing away from us.</p>
+<p>이제 라디오를 '방' 주위에서 움직일 것입니다. 이를 위해 준비된 조종 버튼들이 있습니다. 라디오를 좌우로, 위아래로, 앞뒤로 움직일 수 있고, 회전시킬 수도 있습니다. 소리의 방향은 앞에 있는 라디오 스피커에서부터 오므로, 라디오를 회전시키면 소리의 방향을 변경할 수 있습니다. 예: 라디오가 180도 회전되어 우리를 등지고 있을 때 소리의 방향이 뒤를 향하도록 만들기.</p>
 
-<p>We need to set up a few things for the interface. First, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up <a href="/en-US/docs/Web/CSS/CSS_Transforms">CSS transforms</a> to actually do the movement. Finally, we'll set some bounds so our boombox doesn't move too far in any direction:</p>
+<p>인터페이스에 대한 것들을 설정해 봅시다. 첫째로, 우리가 움직이기를 원하는 요소들에 대한 참조를 얻습니다. 그리고 나서 실제로 움직임을 수행하기 위해 <a href="/en-US/docs/Web/CSS/CSS_Transforms">CSS transforms</a>을 설정했을 때 변경될 값들에 대한 참조를 저장합니다. 마지막으로, 경계를 설정해 라디오가 어떠한 방향으로든 너무 멀리 가지 않도록 할 것입니다.</p>
 
 <pre class="brush: js">const moveControls = document.querySelector('#move-controls').querySelectorAll('button');
 const boombox = document.querySelector('.boombox-body');
 
-// the values for our css transforms
+// css transforms를 위한 값들
 let transform = {
     xAxis: 0,
     yAxis: 0,
@@ -158,7 +158,7 @@ let transform = {
     rotateY: 0
 }
 
-// set our bounds
+// 경계 설정
 const topBound = -posY;
 const bottomBound = posY;
 const rightBound = posX;
@@ -167,9 +167,9 @@ const innerBound = 0.1;
 const outerBound = 1.5;
 </pre>
 
-<p>Let's create a function that takes the direction we want to move as a parameter, and both modifies the CSS transform and updates the position and orientation values of our panner node properties to change the sound as appropriate.</p>
+<p>매개변수로 우리가 움직이기를 원하는 방향을 취하고, CSS transform을 수정할 뿐만 아니라 적절하게 소리를 변경하기 위해 패너 노드 속성들의 위치와 방향 값을 갱신하는 함수를 만들어 봅시다.</p>
 
-<p>To start with let's take a look at our left, right, up and down values as these are pretty straightforward. We'll move the boombox along these axis and update the appropriate position.</p>
+<p>상하좌우 값들은 아주 간단하므로, 우선 이 값들을 살펴봅시다. 우리는 라디오를 이 축들을 따라 이동시키고 적절한 위치로 갱신할 것입니다.</p>
 
 <pre class="brush: js">function moveBoombox(direction) {
     switch (direction) {
@@ -201,7 +201,7 @@ const outerBound = 1.5;
 }
 </pre>
 
-<p>It's a similar story for our move in and out values too:</p>
+<p>안팎으로 이동하는 것에 대한 설정도 위와 비슷합니다.</p>
 
 <pre class="brush: js">case 'back':
     if (transform.zAxis &gt; innerBound) {
@@ -217,29 +217,29 @@ case 'forward':
 break;
 </pre>
 
-<p>Our rotation values are a little more involved, however, as we need to move the sound <em>around</em>. Not only do we have to update two axis values (e.g. if you rotate an object around the x-axis, you update the y and z coordinates for that object), but we also need to do some more maths for this. The rotation is a circle and we need <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin">Math.sin</a></code> and <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos">Math.cos</a></code> to help us draw that circle.</p>
+<p>그러나 회전 값들은 조금 더 복잡한데, 왜냐하면 소리를 <strong>주위로</strong> 이동시켜야 할 필요가 있기 때문입니다 (예: 만약 객체를 x축 주위로 회전시킨다면, y와 z좌표를 갱신해야 합니다). 두 축의 값을 갱신해야 할 뿐만 아니라, 이를 위해 수학 계산을 좀 할 필요도 있습니다. 회전은 원이고 이 원을 그리기 위해 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/sin">Math.sin</a></code>과 <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/cos">Math.cos</a></code>이 필요합니다.</p>
 
-<p>Let's set up a rotation rate, which we'll convert into a radian range value for use in <code>Math.sin</code> and <code>Math.cos</code> later, when we want to figure out the new coordinates when we're rotating our boombox:</p>
+<p>라디오를 회전시켰을 때 새로운 좌표를 계산할 수 있도록 추후에 <code>Math.sin</code>과 <code>Math.cos</code>에서의 사용을 위해 라디안 범위 값으로 전환할 회전 비율을 설정해 봅시다.</p>
 
-<pre class="brush: js">// set up rotation constants
-const rotationRate = 60; // bigger number equals slower sound rotation
+<pre class="brush: js">// 회전 상수 설정
+const rotationRate = 60; // 더 큰 수일수록 소리 회전은 더 느려짐
 
-const q = Math.PI/rotationRate; //rotation increment in radians
+const q = Math.PI/rotationRate; // 회전 증가 (라디안)
 </pre>
 
-<p>We can also use this to work out degrees rotated, which will help with the CSS transforms we will have to create (note we need both an x and y-axis for the CSS transforms):</p>
+<p>또한 이를 사용하여 회전된 각도를 계산할 수 있는데, 이는 CSS transform에 사용될 것입니다 (CSS transform을 위해 x축과 y축 모두가 필요하다는 것에 주목하세요).</p>
 
-<pre class="brush: js">// get degrees for css
+<pre class="brush: js">// css를 위해 각도 얻기
 const degreesX = (q * 180)/Math.PI;
 const degreesY = (q * 180)/Math.PI;
 </pre>
 
-<p>Let's take a look at our left rotation as an example. We need to change the x orientation and the z orientation of the panner coordinates, to move around the y-axis for our left rotation:</p>
+<p>예제로써 좌회전을 살펴봅시다. y축을 주위로 이동하기 위해, 패너 좌표의 x방향과 z방향을 변경할 필요가 있습니다.</p>
 
 <pre class="brush: js">case 'rotate-left':
   transform.rotateY -= degreesY;
 
-  // 'left' is rotation about y-axis with negative angle increment
+  // '좌' 는 음수 각 증가를 가지는 y축에 대한 회전입니다
   z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q);
   x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q);
   y = panner.orientationY.value;
@@ -250,13 +250,13 @@ const degreesY = (q * 180)/Math.PI;
 break;
 </pre>
 
-<p>This <em>is</em> a little confusing, but what we're doing is using sin and cos to help us work out the circular motion the coordinates need for the rotation of the boombox.</p>
+<p>이것은 <strong>조금 혼란</strong>스럽지만, 지금 하고 있는 것은 sin과 cos을 사용해 라디오의 회전에 필요한 좌표인 원운동을 계산하는 것입니다.</p>
 
-<p>We can do this for all the axes. We just need to choose the right orientations to update and whether we want a positive or negative increment.</p>
+<p>이 작업은 모든 축에 대해 이루어질 수 있습니다. 필요한 건 단지 갱신할 옳은 방향과 양수 또는 음수 증가 중 어느 쪽을 원하는지를 선택하는 것입니다.</p>
 
 <pre class="brush: js">case 'rotate-right':
   transform.rotateY += degreesY;
-  // 'right' is rotation about y-axis with positive angle increment
+  // '우' 는 양수 각 증가를 가지는 y축에 대한 회전입니다
   z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q);
   x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q);
   y = panner.orientationY.value;
@@ -266,7 +266,7 @@ break;
 break;
 case 'rotate-up':
   transform.rotateX += degreesX;
-  // 'up' is rotation about x-axis with negative angle increment
+  // '상' 은 음수 각 증가를 가지는 x축에 대한 회전입니다
   z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q);
   y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q);
   x = panner.orientationX.value;
@@ -276,7 +276,7 @@ case 'rotate-up':
 break;
 case 'rotate-down':
   transform.rotateX -= degreesX;
-  // 'down' is rotation about x-axis with positive angle increment
+  // '하' 는 양수 각 증가를 가지는 x축에 대한 회전입니다
   z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q);
   y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q);
   x = panner.orientationX.value;
@@ -286,7 +286,7 @@ case 'rotate-down':
 break;
 </pre>
 
-<p>One last thing — we need to update the CSS and keep a reference of the last move for the mouse event. Here's the final <code>moveBoombox</code> function.</p>
+<p>마지막 하나! CSS를 갱신하고 마우스 이벤트의 마지막 움직임에 대한 참조를 유지할 필요가 있습니다. 아래가 완성된 <code>moveBoombox</code> 함수입니다.</p>
 
 <pre class="brush: js">function moveBoombox(direction, prevMove) {
     switch (direction) {
@@ -329,7 +329,7 @@ break;
         case 'rotate-left':
             transform.rotateY -= degreesY;
 
-            // 'left' is rotation about y-axis with negative angle increment
+            // '좌' 는 음수 각 증가를 가지는 y축에 대한 회전입니다
             z = panner.orientationZ.value*Math.cos(q) - panner.orientationX.value*Math.sin(q);
             x = panner.orientationZ.value*Math.sin(q) + panner.orientationX.value*Math.cos(q);
             y = panner.orientationY.value;
@@ -340,7 +340,7 @@ break;
         break;
         case 'rotate-right':
             transform.rotateY += degreesY;
-            // 'right' is rotation about y-axis with positive angle increment
+            // '우' 는 양수 각 증가를 가지는 y축에 대한 회전입니다
             z = panner.orientationZ.value*Math.cos(-q) - panner.orientationX.value*Math.sin(-q);
             x = panner.orientationZ.value*Math.sin(-q) + panner.orientationX.value*Math.cos(-q);
             y = panner.orientationY.value;
@@ -350,7 +350,7 @@ break;
         break;
         case 'rotate-up':
             transform.rotateX += degreesX;
-            // 'up' is rotation about x-axis with negative angle increment
+            // '상' 은 음수 각 증가를 가지는 x축에 대한 회전입니다
             z = panner.orientationZ.value*Math.cos(-q) - panner.orientationY.value*Math.sin(-q);
             y = panner.orientationZ.value*Math.sin(-q) + panner.orientationY.value*Math.cos(-q);
             x = panner.orientationX.value;
@@ -360,7 +360,7 @@ break;
         break;
         case 'rotate-down':
             transform.rotateX -= degreesX;
-            // 'down' is rotation about x-axis with positive angle increment
+            // '하' 는 양수 각 증가를 가지는 x축에 대한 회전입니다
             z = panner.orientationZ.value*Math.cos(q) - panner.orientationY.value*Math.sin(q);
             y = panner.orientationZ.value*Math.sin(q) + panner.orientationY.value*Math.cos(q);
             x = panner.orientationX.value;
@@ -378,11 +378,11 @@ break;
 }
 </pre>
 
-<h2 id="Wiring_up_our_controls">Wiring up our controls</h2>
+<h2 id="Wiring_up_our_controls">조종 버튼 연결하기</h2>
 
-<p>Wiring up out control buttons is comparatively simple — now we can listen for a mouse event on our controls and run this function, as well as stop it when the mouse is released:</p>
+<p>조종 버튼을 연결하는 것은 비교적 단순합니다. 이제 우리는 조종 장치에 대한 마우스 이벤트를 수신하고 이 함수를 실행시킬 수 있을 뿐만 아니라, 마우스가 떼졌을 때 멈출 수도 있습니다.</p>
 
-<pre class="brush: js">// for each of our controls, move the boombox and change the position values
+<pre class="brush: js">// 각각의 조종 버튼에 대해, 라디오를 움직이고 위치 값을 변경합니다
 moveControls.forEach(function(el) {
 
     let moving;
@@ -405,42 +405,42 @@ moveControls.forEach(function(el) {
 })
 </pre>
 
-<h2 id="Connecting_Our_Graph">Connecting Our Graph</h2>
+<h2 id="Connecting_Our_Graph">그래프 연결하기</h2>
 
-<p>Our HTML contains the audio element we want to be affected by the panner node.</p>
+<p>HTML에는 패너 노드에 의해 영향을 받을 audio 요소가 있습니다.</p>
 
 <pre class="brush: html">&lt;audio src="myCoolTrack.mp3"&gt;&lt;/audio&gt;</pre>
 
-<p>We need to grab the source from that element and pipe it into the Web Audio API using the {{domxref('AudioContext.createMediaElementSource')}}.</p>
+<p>이 요소로부터 소스를 취해 {{domxref('AudioContext.createMediaElementSource')}}를 사용해 Web Audio API에 연결합시다.</p>
 
-<pre class="brush: js">// get the audio element
+<pre class="brush: js">// audio 요소를 얻습니다
 const audioElement = document.querySelector('audio');
 
-// pass it into the audio context
+// audio 요소를 오디오 컨텍스트에 전달합니다
 const track = audioContext.createMediaElementSource(audioElement);
 </pre>
 
-<p>Next we have to connect our audio graph. We connect our input (the track) to our modification node (the panner) to our destination (in this case the speakers).</p>
+<p>다음으로 오디오 그래프를 연결해야 합니다. 목적지 (이 경우 스피커) 에 연결되는 수정 노드 (패너) 에 입력 (이 곡) 을 연결합니다.</p>
 
 <pre class="brush: js">track.connect(panner).connect(audioCtx.destination);
 </pre>
 
-<p>Let's create a play button, that when clicked will play or pause the audio depending on the current state.</p>
+<p>클릭되었을 때 현재 상태에 따라 오디오를 재생하거나 멈추는, 재생 버튼을 만듭시다.</p>
 
 <pre class="brush: html">&lt;button data-playing="false" role="switch"&gt;Play/Pause&lt;/button&gt;
 </pre>
 
-<pre class="brush: js">// select our play button
+<pre class="brush: js">// 재생 버튼을 선택합니다
 const playButton = document.querySelector('button');
 
 playButton.addEventListener('click', function() {
 
-// check if context is in suspended state (autoplay policy)
+// 컨텍스트가 연기(suspended) 상태에 있는지 검사합니다 (자동 재생 정책)
 if (audioContext.state === 'suspended') {
 audioContext.resume();
 }
 
-// play or pause track depending on state
+// 상태에 따라 곡을 재생하거나 정지합니다
 if (this.dataset.playing === 'false') {
 audioElement.play();
 this.dataset.playing = 'true';
@@ -452,16 +452,16 @@ this.dataset.playing = 'false';
 }, false);
 </pre>
 
-<p>For a more in depth look at playing/controlling audio and audio graphs check out <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using The Web Audio API.</a></p>
+<p>오디오의 재생/제어와 오디오 그래프에 대한 더욱 자세한 정보는 <a href="/ko/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API 사용하기</a>에서 찾아볼 수 있습니다.</p>
 
-<h2 id="Summary">Summary</h2>
+<h2 id="Summary">요약</h2>
 
-<p>Hopefully, this article has given you an insight into how Web Audio spatialization works, and what each of the {{domxref("PannerNode")}} properties do (there are quite a few of them). The values can be hard to manipulate sometimes and depending on your use case it can take some time to get them right.</p>
+<p>이 글이 여러분께 어떻게 Web Audio 공간화가 작동하는지, 그리고 {{domxref("PannerNode")}}의 각 속성들이 무슨 일을 하는지 (속성들 중 상당수가 있습니다) 에 대한 이해를 주었기를 바랍니다. 값들은 때때로 조작하기 어려울 수 있고 사용하는 경우에 따라 그것들을 바르게 하는 데 시간이 필요할 수 있습니다.</p>
 
 <div class="note">
-<p><strong>Note</strong>: There are slight differences in the way the audio spatialization sounds across different browsers. The panner node does some very involved maths under the hood; there are a <a href="https://wpt.fyi/results/webaudio/the-audio-api/the-pannernode-interface?label=stable&amp;aligned=true">number of tests here</a> so you can keep track of the status of the inner workings of this node across different platforms.</p>
+<p><strong>참고</strong>: 각기 다른 브라우저 간에 오디오 공간화가 들리는 방식에 약간의 차이가 있습니다. 패너 노드는 아주 복잡한 수학 계산을 필요로 합니다. <a href="https://wpt.fyi/results/webaudio/the-audio-api/the-pannernode-interface?label=stable&amp;aligned=true">여기 몇 개의 테스트</a>가 있으니 여러분은 각기 다른 플랫폼들 사이에서 이 노드의 내부 작동 상태를 확인할 수 있습니다.</p>
 </div>
 
-<p>Again, you can <a href="https://mdn.github.io/webaudio-examples/spacialization/">check out the final demo here</a>, and the <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">final source code is here</a>. There is also a <a href="https://codepen.io/Rumyra/pen/MqayoK?editors=0100">Codepen demo too</a>.</p>
+<p>다시 말하지만, 여러분은 다음의 링크에서 <a href="https://mdn.github.io/webaudio-examples/spacialization/">최종 결과물</a>과, <a href="https://github.com/mdn/webaudio-examples/tree/master/spacialization">소스 코드</a>를 확인할 수 있습니다. <a href="https://codepen.io/Rumyra/pen/MqayoK?editors=0100">Codepen 데모</a> 또한 있습니다.</p>
 
-<p>If you are working with 3D games and/or WebXR it's a good idea to harness a 3D library to create such functionality, rather than trying to do this all yourself from first principles. We rolled our own in this article to give you an idea of how it works, but you'll save a lot of time by taking advantage of work others have done before you.</p>
+<p>만약 여러분이 3D 게임 그리고/또는 WebXR으로 작업한다면 그러한 기능을 만들기 위해 처음부터 직접 모든 것을 하려고 시도하기보다는 3D 라이브러리를 활용하는 것이 좋은 생각입니다. 우리는 이 글에서 여러분에게 어떻게 이것이 작동하는지에 대한 아이디어를 주기 위해 직접 만들었지만, 여러분에 앞서 남들이 해 놓은 작업을 이용함으로써 많은 시간을 절약할 수 있을 것입니다.</p>