icon
8장 : 환경 상호작용 구현

사용자 인터페이스와 환경 연동


이전 절에서 트리거를 활용한 기본적인 환경 상호작용 구현 방법을 배웠습니다. 이제 플레이어가 게임 환경과 상호작용할 때, 이를 시각적으로 명확하게 전달하고 게임 경험을 향상시키는 핵심 요소인 사용자 인터페이스(User Interface, UI) 연동에 대해 알아볼 차례입니다. 플레이어가 오브젝트를 바라보거나 상호작용 가능한 영역에 진입했을 때, 직관적인 UI 피드백을 제공함으로써 게임 세계와의 연결감을 강화하고 다음 행동을 유도할 수 있습니다. '나 혼자 언리얼 기본' 교재를 통해 여러분이 언리얼 엔진에서 UI와 환경 상호작용을 효과적으로 연동하여, 플레이어에게 더욱 세련되고 직관적인 경험을 제공할 수 있도록 안내해 드리겠습니다. 마치 현실에서 특정 사물에 집중할 때 정보가 눈에 띄듯, 여러분의 레벨도 UI를 통해 필요한 정보를 플레이어에게 명확히 전달해 봅시다.


사용자 인터페이스 (UI) 연동의 중요성

환경 상호작용에 UI를 연동하는 것은 플레이어 경험에 다음과 같은 긍정적인 영향을 미칩니다.

  • 직관적인 정보 전달: 플레이어가 무엇과 상호작용할 수 있는지, 어떻게 상호작용해야 하는지 즉시 알 수 있게 합니다. (예: "E 키를 눌러 문 열기")
  • 몰입감 향상: 게임 세계 내에서 일어나는 일에 대한 시각적인 피드백을 제공하여 플레이어가 더욱 게임에 몰입하게 합니다.
  • 방향성 제시: 플레이어가 다음에 무엇을 해야 할지, 또는 어떤 목표를 향해 나아가야 할지 간접적으로 안내합니다.
  • 오류 방지: 플레이어가 잘못된 행동을 하거나, 상호작용할 수 없는 오브젝트에 불필요한 시도를 하는 것을 방지합니다.

사용자 인터페이스 (UI) 기본 개념

언리얼 엔진에서는 주로 위젯 블루프린트(Widget Blueprint) 를 사용하여 UI를 제작하고 화면에 표시합니다.

위젯 블루프린트 (Widget Blueprint)

  • 역할: 버튼, 텍스트, 이미지, 진행 바 등 게임 UI 요소를 시각적으로 디자인하고 기능을 부여하는 에셋입니다.
  • 생성: 콘텐츠 브라우저에서 마우스 오른쪽 버튼 클릭 사용자 인터페이스(User Interface) > 위젯 블루프린트(Widget Blueprint)를 선택합니다.
    • 보통 User Widget을 부모 클래스로 선택하고 WBP_ 접두사를 붙여 이름을 지정합니다. (예: WBP_InteractionPrompt)
  • 위젯 디자이너 (Widget Designer)
    • 팔레트(Palette)에서 Text, Image, Button 등 UI 요소를 캔버스에 드래그하여 배치하고 크기, 위치, 색상 등을 조절합니다.
    • Hierarchy 패널에서 위젯들의 계층 구조를 관리합니다.
    • Details 패널에서 각 위젯의 속성(텍스트 내용, 이미지 소스, 글꼴, 크기)을 설정합니다.
  • 그래프 (Graph)
    • 위젯의 기능적 로직을 구현하는 블루프린트 그래프입니다.
    • Construct (위젯 생성 시), Destruct (위젯 제거 시), OnButtonClicked (버튼 클릭 시) 등 다양한 이벤트와 함수를 활용합니다.
    • 텍스트 내용 변경, 이미지 교체 등 동적인 UI 변화를 여기서 제어합니다.

위젯을 화면에 추가/제거

  • 위젯 생성 및 화면 추가
    • 블루프린트에서 Create Widget 노드를 사용하여 위젯 블루프린트의 인스턴스를 생성합니다.
    • 생성된 위젯의 참조를 가져와 Add to Viewport 노드를 호출하여 위젯을 화면에 표시합니다.
  • 위젯 제거
    • 위젯 참조를 가져와 Remove from Parent 노드를 호출하여 위젯을 화면에서 제거합니다.

시선 기반 상호작용 구현

플레이어의 카메라 시선이 특정 오브젝트에 닿았을 때 이를 감지하고 UI를 표시하는 방식입니다. 정교한 상호작용에 주로 사용됩니다.

Line Trace (라인 트레이스)

  • 역할: 특정 시작점에서 특정 방향으로 선(Ray)을 발사하여, 그 선이 어떤 오브젝트와 충돌하는지 감지하는 물리 쿼리입니다.
  • 주요 노드: Line Trace By Channel
    • Start: 라인 트레이스가 시작될 월드 좌표. (보통 카메라 컴포넌트의 월드 위치)
    • End: 라인 트레이스가 끝날 월드 좌표. (Start에서 카메라의 앞쪽 방향 벡터에 일정 거리를 곱한 값을 더함)
    • Trace Channel: 어떤 충돌 채널과 충돌을 감지할지 지정합니다. (예: Visibility, Camera)
    • Draw Debug Type: 디버깅을 위해 라인 트레이스를 시각화합니다. (Line, Persistent, ForDuration 등)
    • Out Hit: 충돌이 발생했을 때 충돌한 액터, 위치, 법선(Normal), 충돌 컴포넌트 등의 상세 정보를 반환합니다.

Line Trace를 활용한 상호작용 UI 구현 로직

UI 위젯 변수 생성: PlayerCharacter 블루프린트에 InteractionPromptWidget (타입: WBP_InteractionPrompt 오브젝트 참조) 변수를 추가합니다.

Event Tick에서 Line Trace 실행

  • Event Tick 노드에서 Get Player Camera Manager를 가져와 Get Camera Location (Start)과 Get Camera World Rotation (Direction)을 얻습니다.
  • Get Forward Vector 노드에 Get Camera World Rotation을 연결하여 카메라가 바라보는 방향 벡터를 얻습니다.
  • Vector * Float 노드를 사용하여 방향 벡터에 상호작용 가능 거리(예: 250.0 cm)를 곱합니다.
  • Vector + Vector 노드를 사용하여 Camera Location에 계산된 벡터를 더해 End 지점을 만듭니다.
  • Line Trace By Channel 노드를 호출합니다.
    • StartEnd에 위에서 계산한 값을 연결합니다.
    • Trace ChannelVisibility로 설정합니다.
    • Draw Debug TypeForDuration으로 설정하여 디버깅을 돕습니다.
  • Line Trace By ChannelReturn Value (충돌 여부)를 Branch 노드에 연결합니다.

충돌 대상 처리

  • True (충돌 발생 시)
    • Out Hit 구조체 핀을 Break Hit Result 노드로 분리합니다.
    • Hit Actor 핀을 Cast To BP_InteractableBase (또는 상호작용 가능한 모든 오브젝트의 부모 클래스)로 연결합니다. 이 캐스트는 현재 바라보는 액터가 상호작용 가능한 액터인지 확인합니다.
    • UI 표시: 캐스트 성공 시
      • InteractionPromptWidget 변수가 유효하지 않다면 (Is Valid 노드), Create Widget (WBP_InteractionPrompt) 노드를 사용하여 위젯을 생성하고 Add to Viewport로 화면에 추가한 후, InteractionPromptWidget 변수에 저장합니다.
      • 위젯의 텍스트를 "E 키를 눌러 [오브젝트 이름] 상호작용"과 같이 설정합니다.
      • Set Visibility (InteractionPromptWidget) 노드를 사용하여 위젯을 보이게 합니다.
    • 이전 프레임의 상호작용 대상 저장: PrevHitActor (Actor Object Reference) 변수를 만들어 현재 바라보는 액터를 저장합니다. 다음 프레임에서 이 액터와 현재 액터가 다른지 비교하여, 더 이상 상호작용 대상이 아닐 경우 UI를 숨깁니다.
  • False (충돌 없음 시)
    • InteractionPromptWidget 변수가 유효하다면 (Is Valid 노드), Set Visibility (InteractionPromptWidget) 노드를 사용하여 위젯을 숨깁니다.
    • PrevHitActor 변수도 초기화합니다.

사용자 인터페이스 (UI) 피드백 종류

상호작용에 대한 피드백은 텍스트 UI 외에도 다양하게 제공될 수 있습니다.

  • 텍스트 프롬프트 (Text Prompt): "E 키를 눌러 상호작용", "문 열기" 등 가장 흔하고 명확한 피드백입니다.
  • 아이콘/커서 변화: 상호작용 가능한 오브젝트 위에 마우스 커서가 올라가거나 시선이 닿았을 때, 커서 아이콘이 변하거나 전용 상호작용 아이콘이 표시됩니다.
  • 오브젝트 하이라이트: 상호작용 가능한 오브젝트의 외곽선이 빛나거나 색상이 변하여 플레이어의 시선을 끕니다.
    • 구현: 오브젝트의 머티리얼에 하이라이트 기능을 추가하고, 블루프린트에서 Set Scalar Parameter Value 등으로 하이라이트 강도를 조절합니다. 또는 Custom Depth RenderPost Process Material을 조합하여 아웃라인 효과를 구현합니다.
  • 사운드 피드백: 상호작용 가능 영역에 진입하거나 오브젝트를 바라볼 때 미묘한 "띵" 소리나 UI 소리를 재생하여 청각적인 단서를 제공합니다.
  • 애니메이션: 오브젝트 자체에 짧은 시각적 애니메이션(예: 스위치가 살짝 튀어나옴)을 주어 상호작용 가능성을 암시합니다.

사용자 인터페이스 연동 최적화 및 고려 사항

  • 성능: Event Tick에서 Line Trace를 매 프레임 실행하는 것은 성능에 부담을 줄 수 있습니다.
    • 최적화: Set Timer by Event 노드를 사용하여 Line Trace를 0.1초 또는 0.2초 간격으로 실행하거나, 플레이어가 움직일 때만 Line Trace를 실행하는 등 업데이트 주기를 조절합니다.
    • 충돌 채널 최적화: Trace ChannelVisibility 대신 Custom 채널(예: Interactable)을 만들고, 상호작용 가능한 오브젝트에만 해당 채널을 Block하도록 설정하여 불필요한 충돌 계산을 줄입니다.
  • 명확성: UI 피드백은 명확하고 간결해야 합니다. 너무 많은 정보나 혼란스러운 시각 효과는 피합니다.
  • 일관성: 게임 내 모든 상호작용 가능한 오브젝트에 일관된 UI 피드백 방식을 적용하여 플레이어가 빠르게 학습할 수 있도록 합니다.
  • 입력 매핑: 상호작용 키(예: 'E' 키)는 Input Action으로 정의하여 플레이어가 키를 재설정할 수 있도록 합니다.

사용자 인터페이스와 환경 연동은 플레이어가 게임 세계와 소통하는 중요한 다리 역할을 합니다. 이 절에서 배운 위젯 블루프린트 제작, Line Trace를 활용한 시선 기반 상호작용 감지, 그리고 다양한 UI 피드백 방식들을 바탕으로 여러분의 게임에 직관적이고 몰입감 있는 상호작용 시스템을 구축해 보세요. 플레이어가 여러분의 세계를 쉽고 즐겁게 탐험할 수 있도록 돕는 것이 중요합니다.