웹 브라우저 활용하기

# 학습 과정 소개

WebViewComponent를 활용하면 웹 브라우저를 월드에 배치하고 탐색할 수 있습니다. 간단한 예제를 통해 월드에서 웹 브라우저를 활용하는 방법을 알아봅시다.

##### 참고 API Reference

[WebViewComponent](/apiReference/Components/WebViewComponent)

# WebViewComponent 소개

엔티티에 WebViewComponent를 추가하면 월드에 웹 브라우저를 배치할 수 있습니다. 먼저 WebViewComponent의 프로퍼티를 살펴봅시다. [png](16903331826638ab8d0e6040e4a46848cae80cc1028fe)

[{"프로퍼티1":"ClickingEnabled","프로퍼티2":"웹 뷰에서 클릭을 가능하게 할지 여부입니다.","설명":"nan"},{"프로퍼티1":"HoveringEnabled","프로퍼티2":"마우스를 웹 뷰 위에 올려놓았을 때 웹 요소와 상호작용 가능 여부를 설정합니다.","설명":"nan"},{"프로퍼티1":"ScrollingEnabled","프로퍼티2":"웹 뷰에서 스크롤 가능 여부를 설정합니다.","설명":"nan"},{"프로퍼티1":"DragMode","프로퍼티2":"DragToScroll","설명":"드래그 시 스크롤로써 동작합니다.  따라서 스크롤바를 드래그해도 스크롤바를 직접 조종하는 식으로 동작하지 않고 그냥 페이지에서 드래그를 시작하듯 동작합니다.  데스크톱에서 스크롤바를 드래그하는 것과 같이 동작하게 하려면 DragMode로 DragWithinPage를 사용해야 합니다."},{"프로퍼티1":"DragMode","프로퍼티2":"DragWithinPage","설명":"페이지 내에서 드래그하면 일반적으로 웹페이지에서 마우스로 드래그하듯이 작동합니다."},{"프로퍼티1":"DragMode","프로퍼티2":"Disabled","설명":"드래그가 되지 않습니다."},{"프로퍼티1":"DragThreshold","프로퍼티2":"드래그할 때 클릭으로 인식하지 않게 만들기 위한 임곗값입니다. 수치가 매우 높으면 드래그가 클릭으로 인식될 수 있습니다.","설명":"nan"},{"프로퍼티1":"PixelPerUnit","프로퍼티2":"1 Unit 당 표시될 픽셀의 수입니다. 100 ~ 500까지의 값을 사용합니다. 수치가 크면 더 많은 콘텐츠를 보여줄 수 있으나 웹 요소들이 작게 보입니다.","설명":"nan"},{"프로퍼티1":"ScrollSensitivity","프로퍼티2":"마우스 휠로 페이지를 스크롤 할 때 얼마나 많이 스크롤 될지 결정합니다.","설명":"nan"},{"프로퍼티1":"Url","프로퍼티2":"웹 페이지의 주소입니다. Url을 변경하면 해당 웹 페이지를 로드합니다. 빈 문자열이나 유효하지 않은 형태의 주소를 입력하면 작동하지 않습니다.","설명":"nan"},{"프로퍼티1":"SortingLayer","프로퍼티2":"2개 이상의 Entity가 겹쳤을 때 Sorting Layer에 따라 보이는 우선순위가 결정됩니다.","설명":"nan"},{"프로퍼티1":"OrderInLayer","프로퍼티2":"같은 Layer 내의 우선순위를 결정합니다. 수가 클수록 앞에 보입니다.","설명":"nan"},{"프로퍼티1":"IgnoreMapLayerCheck","프로퍼티2":"SortingLayer에 Map Layer 이름을 지정했을 때 자동 치환을 수행하지 않습니다.","설명":"nan"}]

> 더 알아보기 1 Unit은 월드 내의 거리 단위입니다. WorldPosition의 (0,0) ~ (1,0)까지의 거리가 1 Unit입니다.

# 월드에 웹 브라우저 배치하기

월드에 웹 브라우저를 배치하면 월드의 특정 위치에 브라우저를 보여줄 수 있습니다. [gif](1659077818567422ad8f56f884d0286111efe8a38b2ed)   


  1. Hierarchy 탭에서 원하는 맵을 선택한 뒤 콘텍스트 메뉴를 엽니다. Create Entity - Create Empty를 선택해 EmptyEntity를 생성합니다.   

  2. 프로퍼티 에디터에서 EmptyEntity에 TransformComponent를 추가합니다.   

  3. 프로퍼티 에디터에서 EmptyEntity에 WebViewComponent를 추가하고 원하는 Url을 입력합니다.   

  4. WebViewComponent의 SortingLayer 프로퍼티를 Layer1로 변경합니다.   

  5. 엔티티의 크기를 적절하게 조절한 후  [시작] 버튼을 눌러 테스트해 봅시다. 월드의 특정 위치에 웹 브라우저가 보이는 것을 확인할 수 있습니다.



# UI로 웹 브라우저 배치하기

UI로 웹 브라우저를 배치하면 화면의 특정 위치에 항상 웹 브라우저가 보이도록 할 수 있습니다. [gif](165931683546031588f00cec548c0b1707a90878786ab)   


  1. Hierarchy - ui 아래에서 원하는 UI 그룹의 콘텍스트 메뉴를 엽니다. Create Entity - Create UIEmpty를 선택해 UIEmpty를 생성합니다.   

  2. 프로퍼티 에디터에서 UIEmpty에 WebViewComponent를 추가하고 원하는 Url을 입력합니다.   

  3. 엔티티의 크기를 적절하게 조절한 후  [시작] 버튼을 눌러 테스트해 봅시다. 화면의 특정 위치에 웹 브라우저가 보이는 것을 확인할 수 있습니다.



# 함수 활용 예시

## 키 입력으로 웹 브라우저 제어

키 입력을 통해 웹 브라우저를 제어하는 예제를 살펴봅시다.

  1. Workspace - MyDesk에 새 스크립트 컴포넌트를 추가하고 이름으로 WebViewTest를 입력합니다.   

  2. 원하는 엔티티의 프로퍼티 에디터에서 WebViewTest 스크립트 컴포넌트를 추가합니다. WebViewComponent도 추가합니다.   

  3. 아래와 같이 키보드의 특정 키를 눌렀을 때 웹 브라우저를 제어하는 스크립트를 작성해봅시다. WebViewTest 스크립트에 KeyDownEvent를 추가하고 다음과 같이 작성합니다. 
         
         @Component
         script WebViewKeyboardController extends Component
         @EventSender("Service", "InputService")
         handler HandleKeyDownEvent(KeyDownEvent event)
         --------------- Native Event Sender Info ----------------
         -- Sender: InputService
         -- Space: Client
         ---------------------------------------------------------
         
         -- Parameters
         -- local key = event.key
         ---------------------------------------------------------
         
         if key == KeyboardKey.Backspace then
             self.Entity.WebViewComponent:GoBack()
             -- Backspace : 뒤로 가기
         end
         
         if key == KeyboardKey.Alpha0 then
             self.Entity.WebViewComponent:GoForward()
             -- 0 : 앞으로 가기
         end
         
         if key == KeyboardKey.Alpha5 then
             self.Entity.WebViewComponent:Reload()
             -- 5 : 페이지 새로 고침
         end
         
         if key == KeyboardKey.Equals then
             self.Entity.WebViewComponent:ZoomIn()
             -- = : 화면 확대
         end
         
         if key == KeyboardKey.Minus then
             self.Entity.WebViewComponent:ZoomOut()
             -- - : 화면 축소
         end
         
         if key == KeyboardKey.Home then
             self.Entity.WebViewComponent:Scroll(Vector2(0, -100))	
             -- Home : 페이지 시작 지점으로 이동
         end
         
         if key == KeyboardKey.End then
             self.Entity.WebViewComponent:Scroll(Vector2(0, 100))	
             -- End : 페이지 끝 지점으로 이동
         end
         end
         end
         



    
    
          
    
    4.  **[시작]** 버튼을 누른 뒤 스크립트에서 지정한 키를 입력하여 각 기능을 사용해봅시다.
    
    ## 클릭한 좌표 기록
    웹 브라우저에서 클릭한 지점의 좌표를 로그로 남겨봅시다.
    **WebViewClickedEvent**를 활용하면 클릭한 지점의 **normalizedPosition**을 확인할 수 있습니다. **normalizedPosition**이란 웹 뷰를 하나의 평면 좌표계라고 했을 때 왼쪽 상단을 (0,0), 오른쪽 하단을 (1,1)로 표현한 위치를 말합니다. 화면의 정중앙 좌표는 (0.5,0.5) 입니다.
    [png](1659333200156ced814fff9734a89a53c313e6f386874)
      
    
    1. **WebViewTest** 스크립트에 **WebViewClickedEvent**를 추가하고 다음과 같이 작성합니다.
        ```lua
    @Component
    script WebViewClickHandler extends Component
        @EventSender("Self")
        handler HandleWebViewClickedEvent(WebViewClickedEvent event)
        --------------- Native Event Sender Info ----------------
        -- Sender: WebViewComponent
        -- Space: Client
        ---------------------------------------------------------
    
        -- Parameters
        -- local NormalizedPosition = event.NormalizedPosition
        ---------------------------------------------------------
    
        log("Clicked: ("..NormalizedPosition.x..", "..NormalizedPosition.y..")")
        end
    end
    
    
    
      
    
    

  2.  [시작] 버튼을 테스트해 봅시다. 웹 뷰의 특정 지점을 클릭하면 해당 위치의 normalizedPosition 좌표를 로그로 확인할 수 있습니다. [png](16593302650606bb94d2db1ca44a5882d429e6338bc84)