[CT] 03. testest （ゲームマル２０２６夏コンテスト）

投稿日 2026/07/21

投稿者 yunarang

42 分で読めます

[ERROR-CODE-H 개발일지] 2주차 — HP 감소 파티클과 Low HP 경고, HUD 프리팹 정리

개발 기간: 2026.07.14 ~ 2026.07.20 담당 역할: 에셋 1 — HP UI 및 HUD 개선

1주차에는 플레이어가 현재 Heat와 장착 중인 Core를 확인할 수 있도록 HUD의 기본 구조를 만들고, 각 시스템의 변경 이벤트를 UI와 연결했다.

2주차에는 여기서 한 단계 더 나아가, 기존 Heat·Core HUD와 통일된 형태로 HP UI를 확장하는 작업을 맡았다.

이번 주의 목표는 단순히 체력 수치와 게이지를 화면에 표시하는 것만이 아니었다. 플레이어가 피해를 입었을 때, 또는 위험한 상태에 진입했을 때 숫자를 직접 읽지 않더라도 상황을 직관적으로 인식할 수 있도록 시각적인 피드백을 추가하는 것이 목표였다.

이번 주에 맡은 세부 항목은 다음과 같았다.

기존 Heat·Core HUD와 통일된 HP UI 제작
HP Bar 배경과 Fill 구성
현재 HP 및 최대 HP 표시
HP 감소 시 시각적 변화
HP 부족 경고
임시 사망 또는 게임오버 UI
HUD 프리팹 정리

이 가운데 HP 바, HP 감소 파티클, Low HP 경고, HUD 프리팹 정리는 2주차에 구현했다.

사망 또는 게임오버 UI는 관련 에셋이 아직 제작 중이었기 때문에 이번 주에는 추가하지 않고, 후속 작업으로 남겨두었다.

기존 HUD 구조 정리와 Core 아이콘 연동

HP UI를 추가하기에 앞서, 먼저 1주차에 제작했던 HUD의 계층 구조를 정리했다.

1주차 당시 현재 Core UI는 CoreData에서 Core 이름을 받아 텍스트로 표시하는 수준이었다. 하지만 전투 중에는 텍스트보다 이미지가 훨씬 빠르게 인식되기 때문에, 2주차에는 현재 장착 중인 Core를 보다 직관적으로 확인할 수 있도록 CoreData에 UI용 아이콘을 추가했다.

  
[Header("Identity")]
[SerializeField] private string coreName;
[SerializeField] private Sprite coreIcon;

public string CoreName => coreName;
public Sprite CoreIcon => coreIcon;

각 Core의 ScriptableObject 데이터에 Sprite를 지정할 수 있도록 coreIcon 필드를 추가했다.

그리고 CoreDrawer에서는 기존처럼 이름만 표시하는 것이 아니라, 현재 Core에 지정된 아이콘까지 함께 받아 표시하도록 수정했다.

  
public void SetCore(CoreData coreData)
{
    if (coreData == null)
    {
        coreText.text = "None";
        coreImage.sprite = null;
        return;
    }

    coreText.text = coreData.CoreName;
    coreImage.sprite = coreData.CoreIcon;
}

정상적인 CoreData가 전달되면 Core의 이름과 아이콘을 함께 표시한다.

반대로 Core 데이터가 존재하지 않는 경우에는 텍스트에 None을 표시하고, 이전에 사용하던 Core 아이콘이 그대로 화면에 남지 않도록 Sprite를 비워두었다.

이 작업을 통해 Core UI는 임시 텍스트 위주의 표시에서 벗어나, 실제 아이콘을 사용할 수 있는 구조로 확장되었다.

또한 UI 테스트 폴더에 임시로 들어 있던 Core 이미지들을 공용 아트 리소스 폴더로 옮기고, 각 Core 데이터에 사용할 아이콘을 지정했다.

HP UI를 새롭게 추가하기 전에, 기존 HUD의 구조와 리소스부터 먼저 정리한 셈이다.

[이미지 1 삽입 — Core 아이콘이 적용된 HUD]

기존 텍스트 중심의 Core UI에 아이콘을 연결했다. 각 Core 데이터가 자신의 이름과 UI용 Sprite를 함께 제공하도록 구성했다.

기존 Heat·Core HUD와 통일된 HP UI 구성

HP UI는 기존 Heat·Core UI와 동일한 HUD 안에 배치했다.

HP 영역은 다음과 같이 구성했다.

HPFrame: HP 바의 배경 및 외곽 프레임
HPFill: 현재 HP 비율에 따라 줄어드는 이미지
HPText: 현재 HP와 최대 HP를 표시하는 텍스트
HPParticle: HP가 감소했을 때 재생되는 파티클

HP 데이터는 HPDrawer.SetHP()를 통해 화면에 반영하도록 만들었다.

  
public void SetHP(int current, int max)
{
    if (max <= 0)
        return;

    float fill = (float)current / max;

    hpFill.fillAmount = fill;

    if (hpText != null)
        hpText.text = $"{current}/{max}";

    previousHP = current;
}

현재 HP를 최대 HP로 나누어 0~1 사이의 비율로 변환한 뒤, 해당 값을 hpFill.fillAmount에 전달했다.

예를 들어 현재 HP가 75이고 최대 HP가 100이라면 다음과 같이 표시된다.

HP 바 채움 비율: 0.75
HP 텍스트: 75/100

이렇게 현재 수치와 최대 수치를 함께 표시함으로써, 플레이어는 남은 체력의 비율뿐 아니라 정확한 수치도 동시에 확인할 수 있도록 했다.

HP 시스템이 완성되기 전에 VFX부터 만들기

HP 감소 파티클을 제작하기 시작했을 당시에는 실제 플레이어 HP 시스템이 아직 프로젝트에 추가되지 않은 상태였다.

따라서 처음부터 실제 전투에서 HP가 감소했을 때 파티클이 재생되도록 연결할 수는 없었다.

그렇다고 HP 시스템이 완성될 때까지 UI 작업을 멈출 필요는 없다고 생각했다.

그래서 우선 파티클의 모양과 위치, 재생 방식 등 독립적으로 구현할 수 있는 시각 요소부터 먼저 제작하고, Unity Inspector에서 직접 확인할 수 있도록 구성했다.

당시 팀 디스코드에도 다음과 같이 현재 상황을 공유했다.

추가로 아직 플레이어 HP 관련 부분이 구현되지 않은 듯해서 UI와 연결은 안 해둔 상태입니다. Inspector에서 Particle 설정의 Play on Awake 설정이랑 Looping 설정을 켜면 대략적으로 어떻게 나타나는지 보실 수 있습니다.

이 단계에서는 파티클의 동작을 확인하기 위해 Play on Awake를 사용했다.

파티클을 자동으로 반복 재생하도록 설정하면, 실제 HP 이벤트가 존재하지 않더라도 화면에서 파티클의 위치와 형태를 먼저 확인할 수 있었다.

이후 실제 HP 시스템과 연결한 뒤에는 파티클이 씬 시작과 동시에 재생되지 않도록 Play on Awake를 끄고, 반복 재생을 방지하기 위해 Looping 역시 비활성화했다.

최종적으로는 HP가 실제로 감소하는 순간에만 코드에서 Play()를 호출하는 구조로 정리했다.

다른 시스템의 구현을 기다리면서 작업을 멈추기보다, 먼저 독립적으로 제작할 수 있는 부분을 준비하고 나중에 연결하는 방식으로 개발을 진행한 것이다.

HP가 감소했을 때만 파티클 재생하기

단순히 HP UI가 갱신될 때마다 파티클을 재생하면 문제가 생긴다.

씬이 시작되면서 초기 HP를 표시하거나, 플레이어가 HP를 회복하는 상황에서도 피해를 입은 것처럼 파티클이 재생될 수 있기 때문이다.

이를 방지하기 위해 이전 HP 값을 저장해 두고, 새로운 HP가 이전 값보다 작아졌을 때만 파티클을 재생하도록 만들었다.

  
private int previousHP = -1;

public void SetHP(int current, int max)
{
    if (max <= 0)
        return;

    float fill = (float)current / max;

    if (previousHP != -1 &&
        current < previousHP &&
        hpParticle != null)
    {
        MoveParticle(fill);
        hpParticle.Play();
    }

    hpFill.fillAmount = fill;

    if (hpText != null)
        hpText.text = $"{current}/{max}";

    previousHP = current;
}

previousHP의 초기값은 -1로 설정했다.

처음 UI를 초기화할 때에는 비교할 이전 HP가 존재하지 않기 때문에, 이때는 파티클을 재생하지 않는다.

두 번째 갱신부터는 다음 세 가지 조건을 확인한다.

이전 HP 값이 존재하는가
현재 HP가 이전 HP보다 감소했는가
사용할 파티클 시스템이 연결되어 있는가

세 조건을 모두 만족했을 때만 HP 감소 파티클을 재생한다.

덕분에 상황에 따라 다음과 같이 동작하도록 만들 수 있었다.

씬 시작 시 최대 HP 표시 → 파티클 재생 안 함
HP 회복 → 파티클 재생 안 함
같은 HP 값으로 다시 갱신 → 파티클 재생 안 함
피해를 받아 HP 감소 → 파티클 재생

단순히 SetHP()가 호출되었는지를 기준으로 판단하는 것이 아니라, 실제로 HP가 감소했는지를 비교하여 피해 효과가 필요한 순간을 구분한 것이다.

감소한 HP 바의 끝으로 파티클 이동하기

HP 감소 파티클은 HP 바의 고정된 위치에서 재생되는 대신, HP가 감소한 뒤 남아 있는 Fill의 끝부분에서 재생되도록 만들었다.

플레이어가 피해를 받으면 HP 바가 줄어들고, 그 줄어든 경계에서 파티클이 발생하는 방식이다.

  
private void MoveParticle(float fill)
{
    RectTransform rt = hpFill.rectTransform;

    float x = rt.rect.xMin + rt.rect.width * fill;

    Vector3 worldPos =
        rt.TransformPoint(new Vector3(x, 0, 0));

    hpParticle.transform.position = worldPos;
}

먼저 HPFill 이미지의 RectTransform을 가져온다.

그다음 HP의 현재 비율을 이용해, 이미지 내부에서 Fill이 끝나는 X좌표를 계산한다.

계산 방식은 다음과 같다.

**HP Fill의 왼쪽 좌표

HP Fill 전체 너비 × 현재 HP 비율 = 현재 HP 바가 끝나는 위치**

해당 위치는 UI 오브젝트의 로컬 좌표이므로, TransformPoint()를 이용해 월드 좌표로 변환한 뒤 파티클의 위치에 적용했다.

예를 들어 HP가 100%라면 파티클은 HP 바의 오른쪽 끝에 가깝게 위치하고, HP가 30%라면 왼쪽에서 30% 지점으로 이동한다.

[이미지 2 삽입 — HP 감소 시 Fill의 끝에서 재생되는 파티클]

HP가 감소하면 남아 있는 HP Fill의 끝으로 파티클을 이동시킨 뒤 재생한다. HP 바가 줄어드는 위치와 피해 효과가 일치하도록 구성했다.

단순히 숫자와 게이지만 변화시키는 것보다, HP가 실제로 잘려나가는 위치에 시각 효과를 배치함으로써 피해를 보다 직접적으로 느낄 수 있도록 만들고자 했다.

파티클을 UI 위에 표시하기 위한 Canvas 설정 변경

HP 감소 파티클은 Unity의 ParticleSystem을 사용해 제작했다.

그런데 기존 Canvas는 Screen Space - Overlay 방식으로 렌더링되고 있었다.

Overlay 방식의 Canvas는 일반적인 월드 공간의 파티클보다 앞에 그려지기 때문에, 파티클이 UI 뒤에 가려지거나 원하는 순서대로 표시되지 않는 문제가 발생할 수 있었다.

이를 해결하기 위해 Canvas의 Render Mode를 다음과 같이 변경했다.

변경 전: Screen Space - Overlay
변경 후: Screen Space - Camera
Render Camera: Main Camera
Plane Distance: 1

Canvas가 Main Camera를 기준으로 렌더링되도록 변경한 뒤, 파티클의 Sorting Order를 조정하여 HP UI 위에 정상적으로 표시할 수 있도록 했다.

이 변경은 코드가 아니라 Unity 씬과 Canvas 설정에 직접 저장되는 값이었다.

따라서 다른 팀원이 동일한 Canvas를 수정한 뒤 병합할 경우, Render Mode나 Render Camera 참조에서 충돌이 발생할 가능성이 있었다.

이 때문에 작업 직후 팀 디스코드에 다음과 같이 변경 내용을 공유했다.

HP Particle을 구현하는 과정에서 Canvas의 Render Mode를 Canvas(Screen Space - Overlay)에서 Canvas(Screen Space - Camera)로 변경했습니다. Main Camera를 Render Camera로 지정해서 사용 중입니다. 이로 인해 Merge하는 과정에서 Canvas 쪽에서 Render Mode 관련 충돌이 일어날 수 있으니 참고 부탁드립니다.

단순히 변경 내용을 커밋하는 데서 끝내지 않고, 다른 팀원이 병합할 때 확인해야 할 Unity 씬 설정까지 함께 공유했다.

Unity의 씬이나 프리팹은 코드처럼 변경 내용을 한눈에 파악하기 어려운 경우가 많다.

특히 Canvas의 Camera 참조처럼 씬 오브젝트와 직접 연결되는 설정은 병합 과정에서 참조가 사라지거나 다른 값으로 변경될 수 있기 때문에, 따로 확인할 필요가 있었다.

[이미지 3 삽입 — Canvas의 Screen Space - Camera 설정]

UI 파티클을 정상적으로 렌더링하기 위해 Canvas를 Screen Space - Camera 방식으로 변경하고 Main Camera를 연결했다.

PlayerHealth 시스템과 HP UI 연결

HP 감소 VFX를 처음 구현했던 7월 20일 오전 1시경에는 플레이어 HP 시스템이 아직 프로젝트에 존재하지 않았다.

그러나 같은 날 이후, 팀원이 다음 기능들을 포함한 PlayerHealth 시스템을 구현했다.

현재 HP와 최대 HP 관리
피해 및 회복 처리
사망 상태 처리
HP 변경 이벤트 발생
가드 성공 시 피해 대신 Heat 증가
사망 시 플레이어 입력 비활성화

PlayerHealth는 HP가 변경될 때 OnHPChanged 이벤트를 발생시키도록 구성되어 있었다.

  
public event Action<int, int> OnHPChanged;

private void NotifyHPChanged()
{
    OnHPChanged?.Invoke(currentHP, maxHP);
}

이 부분은 HP 시스템을 담당한 팀원이 구현한 코드이다.

나는 해당 시스템이 프로젝트에 병합된 뒤, 미리 제작해 두었던 HPDrawer와 HUD 오브젝트가 실제 PlayerHealth의 데이터를 받을 수 있도록 씬과 Inspector 참조를 연결했다.

UIManager에서는 PlayerHealth.OnHPChanged 이벤트를 받아, HP가 변경될 때마다 HPDrawer.SetHP()가 호출되도록 구성되어 있었다.

  
private void HandleHPChanged(int currentHP, int maxHP)
{
    _hpDrawer.SetHP(currentHP, maxHP);
}

이를 통해 실제 전투의 흐름은 다음과 같이 이어졌다.

적의 공격이 플레이어에게 적중 → PlayerHealth.TakeDamage() 호출 → 현재 HP 감소 → OnHPChanged 이벤트 발생 → UIManager.HandleHPChanged() 호출 → HPDrawer.SetHP() 호출 → HP 게이지와 텍스트 갱신 → 이전 HP보다 감소했다면 파티클 재생

처음에는 HP 시스템과 UI가 서로 독립적으로 개발되었지만, OnHPChanged 이벤트를 기준으로 두 작업을 연결함으로써 실제 전투에서 발생한 피해 결과가 HUD까지 자연스럽게 전달되도록 만들 수 있었다.

HUD 프리팹 정리

HP UI를 플레이어 테스트 씬에 연결한 뒤에는 HUD 전체 구조를 프리팹으로 정리했다.

기존에는 Canvas와 HUD 구성 요소들이 테스트 씬 안에 직접 배치되어 있었다.

이 상태에서는 다른 씬에서도 같은 HUD를 사용하려면, 매번 오브젝트와 설정을 다시 구성해야 한다.

이를 해결하기 위해 Heat, Core, HP UI를 하나의 HUD.prefab으로 묶었다.

HUD 프리팹에는 다음 요소가 포함되었다.

HP Frame
HP Fill
HP Text
HP Particle
Heat Frame
Heat Fill
Heat Text
Core Image
Core Text

프리팹으로 정리하면서 다음과 같은 장점을 얻을 수 있었다.

다른 씬에서도 동일한 HUD 구조를 재사용할 수 있음
HP·Heat·Core UI의 계층 구조를 한곳에서 관리할 수 있음
UI 수정 사항을 여러 씬에 반복해서 적용할 필요가 줄어듦
UI 리소스와 참조 구조를 확인하기 쉬워짐
팀원이 HUD 전체를 하나의 작업 단위로 사용할 수 있음

7월 20일 정오에는 HP UI 연결 및 HUD Prefab화 커밋을 올리면서, 실제 HP UI 연결과 프리팹 정리를 함께 마무리했다.

[이미지 4 삽입 — Unity Hierarchy 또는 HUD.prefab 구조]

HP·Heat·Core UI를 하나의 HUD 프리팹으로 정리했다. 이후 다른 씬에서도 동일한 HUD를 재사용할 수 있도록 구성했다.

1주차에 만들었던 HUD가 단순히 하나의 테스트 씬 안에 존재하는 UI였다면, 이번 작업을 통해 다른 씬에서도 사용할 수 있는 재사용 가능한 HUD 단위로 한 단계 확장된 셈이다.

HP가 부족할 때 경고 표시 추가

HP UI가 실제 PlayerHealth와 연결된 이후에는, 플레이어의 HP가 일정 비율 이하로 내려갔을 때 시각적인 경고를 표시하는 기능을 추가했다.

Low HP의 기준값은 UIManager에서 직접 설정할 수 있도록 구성했다.

  
[Header("UI Conditions")]
[SerializeField] private float lowHPThreshold = 0.2f;

기본값은 0.2이므로, 현재 HP가 최대 HP의 20% 이하일 때 Low HP 상태로 판단한다.

HP가 변경될 때에는 현재 HP의 비율을 계산하고, 해당 값이 설정된 기준 이하인지 확인한다.

  
private void HandleHPChanged(int currentHP, int maxHP)
{
    _hpDrawer.SetHP(currentHP, maxHP);

    bool isLowHP =
        (float)currentHP / maxHP <= lowHPThreshold;

    _hpDrawer.SetLowHP(isLowHP);
}

또한 플레이 도중에 HP가 변경될 때뿐 아니라, 씬에 처음 진입했을 때 이미 Low HP 상태일 가능성도 고려했다.

따라서 Start()에서도 현재 HP를 기준으로 같은 검사를 수행하도록 구성했다.

  
private void Start()
{
    if (_playerHealth != null)
    {
        _hpDrawer.SetHP(
            _playerHealth.CurrentHP,
            _playerHealth.MaxHP
        );

        bool isLowHP =
            (float)_playerHealth.CurrentHP /
            _playerHealth.MaxHP <= lowHPThreshold;

        _hpDrawer.SetLowHP(isLowHP);
    }
}

이를 통해 다음 두 상황 모두에서 Low HP 상태가 정상적으로 반영된다.

게임을 시작하거나 씬에 진입했을 때
플레이 도중 HP가 변경되었을 때

코루틴을 이용한 Low HP 점멸 효과

Low HP 상태가 되면 HP Fill이 일반 색상과 경고 색상 사이를 오가며 점멸하도록 만들었다.

  
public void SetLowHP(bool active)
{
    if (isLowHP == active)
        return;

    isLowHP = active;

    if (active)
    {
        blinkRoutine = StartCoroutine(LowHPBlink());
    }
    else
    {
        if (blinkRoutine != null)
        {
            StopCoroutine(blinkRoutine);
            blinkRoutine = null;
        }

        hpFill.color = normalColor;
    }
}

가장 먼저 현재 Low HP 상태와 새롭게 전달받은 상태가 동일하다면 아무 작업도 하지 않도록 했다.

이를 통해 HP가 변경될 때마다 같은 코루틴이 여러 번 중복으로 실행되는 것을 방지했다.

Low HP 상태가 시작되면 점멸 코루틴을 실행한다.

반대로 HP가 회복되어 Low HP 상태에서 벗어나면 실행 중인 코루틴을 중지하고, HP Fill의 색상을 다시 일반 상태로 되돌린다.

실제 점멸 패턴은 다음과 같이 구성했다.

  
IEnumerator LowHPBlink()
{
    while (true)
    {
        yield return Blink(0.16f);
        yield return new WaitForSeconds(0.6f);

        yield return Blink(0.16f);
        yield return new WaitForSeconds(0.16f);
    }
}

짧게 한 번 깜빡인 뒤 잠시 기다리고, 다시 한 번 빠르게 깜빡이는 패턴을 반복한다.

단순하게 일정 간격으로 색상을 바꾸는 것보다, 조금 더 위험 경고에 가까운 느낌을 줄 수 있도록 점멸 간격을 다르게 구성했다.

색상이 변화하는 과정에는 Color.Lerp()를 사용했다.

  
IEnumerator Blink(float duration)
{
    float t = 0;

    while (t < duration)
    {
        t += Time.deltaTime;

        float alpha =
            Mathf.Sin(t / duration * Mathf.PI);

        hpFill.color =
            Color.Lerp(normalColor, warningColor, alpha);

        yield return null;
    }

    hpFill.color = normalColor;
}

Mathf.Sin()을 사용하여 점멸의 시작과 끝에서는 일반 색상에 가깝고, 중간 지점에서 경고 색상이 가장 강하게 나타나도록 했다.

기본 경고 색상은 붉은 계열로 지정했다.

  
[SerializeField]
private Color normalColor = Color.white;

[SerializeField]
private Color warningColor =
    new Color(1f, 0.4f, 0.4f);

이 기능을 통해 플레이어는 HP 수치를 직접 읽지 않더라도, HP 바의 색상 변화를 통해 현재 위험 상태에 진입했다는 사실을 바로 인지할 수 있다.

[이미지 5 삽입 — Low HP 상태에서 붉게 점멸하는 HP 바]

현재 HP가 최대 HP의 20% 이하로 내려가면 HP Fill이 붉은 경고 색상으로 점멸한다.

사망 및 게임오버 UI는 후속 작업으로 분리

2주차에 맡았던 역할에는 임시 사망 또는 게임오버 UI도 포함되어 있었다.

하지만 Low HP 경고를 구현한 시점에는 사망 화면에 사용할 에셋이 아직 제작 중이었다.

따라서 완성되지 않은 임시 화면을 억지로 추가하기보다는, 사망 및 게임오버 UI는 후속 작업으로 남겨두기로 했다.

7월 20일 오후에도 팀 디스코드에 다음과 같이 공유했다.

Low HP 표시 기능을 추가했습니다. 다만 사망 기능의 경우 아직 에셋 제작 중이어서 추후 추가하겠습니다.

따라서 2주차에 완료한 기능과 후속 작업은 명확하게 구분할 수 있다.

2주차 완료

HP 바 배경과 Fill 구성
현재 HP와 최대 HP 표시
HP 감소 시 파티클 재생
HP Fill의 끝으로 파티클 위치 이동
실제 PlayerHealth와 HP UI 연결
HP 20% 이하 경고
HP Fill 점멸 효과
HUD 프리팹 정리

후속 작업

사망 또는 게임오버 UI
사망 화면에 사용할 최종 에셋
사망 상태와 게임오버 화면의 실제 전환 연동

아직 구현하지 않은 기능을 완료된 것처럼 처리하기보다, 현재 사용할 수 있는 기능과 후속 작업을 구분해서 공유하는 것도 팀 개발에서는 중요하다고 생각했다.

GitHub 작업 기록

2주차에 내가 작업한 관련 커밋은 다음과 같다.

`23fd737` — `HUD Hierarchy 정리 및 Core Icon 연동`

작업일: 2026.07.18

HUD Hierarchy 정리
CoreData에 UI용 coreIcon 추가
CoreDrawer에서 Core 이름과 이미지 표시
각 Core ScriptableObject에 아이콘 연결
임시 Core 이미지 리소스 위치 정리

`697ad47` — `HP 감소 VFX 구현`

작업일: 2026.07.20 오전 1시 07분

HP 감소 여부를 판별하기 위한 previousHP 추가
HP 감소 시 파티클 재생
HP Fill의 끝으로 파티클 이동
HP 파티클 리소스 추가
Canvas를 Screen Space - Camera로 변경
Main Camera를 Render Camera로 지정
실제 HP 시스템 연결 전 파티클 미리보기 구성

HP 시스템 관련 팀 커밋

작업일: 2026.07.20 오전

HP 감소 VFX를 만든 직후, 다른 팀원이 PlayerHealth 시스템을 구현했다.

e48edc8 — Player HP 시스템 추가
d18fc2c — HP 시스템 병합
63df863 — 적 공격과 플레이어 HP 연결
fe87581 — 적 공격 및 HP 연결 작업 병합

이 커밋들을 통해 실제 HP 데이터와 피해 흐름이 프로젝트에 추가되었다.

`62016dd` — `HP UI 연결 및 HUD Prefab화`

작업일: 2026.07.20 오후 12시 03분

실제 Player HP와 HP UI 오브젝트 연결
플레이어 테스트 씬에 HP HUD 적용
HP·Heat·Core UI를 HUD.prefab으로 정리
씬에 직접 배치되어 있던 HUD 구조를 재사용 가능한 프리팹으로 분리

`df80c4e` — `Low HP 경고 추가 및 일부 에셋 수정`

작업일: 2026.07.20 오후 4시 52분

HP 20% 이하 판정 추가
Low HP 상태 관리
경고 점멸 코루틴 추가
일반 색상과 경고 색상 사이의 보간 효과 구현
Low HP 해제 시 코루틴 중지 및 색상 복구
HP Fill용 에셋 수정

2주차 작업 흐름 정리

이번 주의 작업 흐름을 정리하면 다음과 같다.

기존 HUD의 계층 구조를 정리했다.
CoreData에 UI용 아이콘을 추가했다.
현재 Core의 이름과 아이콘을 함께 표시하도록 수정했다.
기존 Heat·Core HUD에 맞춰 HP Frame, Fill, Text를 구성했다.
실제 HP 시스템이 없던 상태에서 HP 감소 파티클을 먼저 제작했다.
HP Fill의 끝을 계산해 파티클 위치를 이동하도록 구현했다.
UI 파티클 표시를 위해 Canvas를 Screen Space - Camera로 변경했다.
Canvas 설정 변경과 병합 시 주의점을 팀에 공유했다.
팀원이 PlayerHealth 시스템을 구현한 뒤 HP UI와 실제 데이터를 연결했다.
HP·Heat·Core UI를 하나의 HUD 프리팹으로 정리했다.
HP가 20% 이하일 때 동작하는 Low HP 경고를 추가했다.
사망 UI는 에셋 제작이 완료되지 않아 후속 작업으로 남겨두었다.

이번 주 역시 처음부터 모든 기능을 한 번에 연결한 것은 아니었다.

독립적으로 제작할 수 있는 VFX 구현 → 실제 HP 시스템 연동 → HUD 프리팹화 → 위험 상태 피드백 추가 순서로 기능을 하나씩 확장해 나갔다.

2주차 결과

2주차에는 1주차의 Heat·Core HUD를 HP까지 포함하는 전투 HUD로 확장했다.

최종적으로 구현한 결과는 다음과 같다.

기존 Heat·Core HUD와 통일된 HP UI
HP Bar 배경 및 Fill
현재 HP와 최대 HP 텍스트
Core 이름과 Core 아이콘 표시
HP가 감소했을 때만 재생되는 파티클
HP Fill 끝으로 이동하는 피해 파티클
PlayerHealth.OnHPChanged를 통한 HP UI 갱신
HP 20% 이하 Low HP 판정
HP Fill의 붉은 점멸 경고
HP 회복 시 점멸 중단 및 색상 복구
HP·Heat·Core UI를 묶은 HUD 프리팹
Canvas Render Mode 변경 및 팀 공유

반면 사망 또는 게임오버 UI는 관련 에셋이 아직 제작 중이었기 때문에, 2주차 완료 항목에는 포함하지 않았다.

1주차가 게임 시스템의 정보를 HUD에 전달하는 기본적인 구조를 만드는 단계였다면, 2주차에는 그 HUD에 플레이어가 실제 전투 상황을 체감할 수 있는 시각적 피드백을 추가하는 단계였다고 볼 수 있다.

2주차를 마치며

2주차에는 단순히 HP 바 하나를 추가하는 것을 넘어, 플레이어가 피해와 위험 상태를 보다 직관적으로 느낄 수 있는 시각적 피드백을 만드는 데 집중했다.

HP가 감소하면 게이지의 숫자와 Fill만 바뀌는 것이 아니라, 줄어든 HP 바의 끝에서 파티클이 재생되도록 만들었다.

또한 HP가 20% 이하로 내려가면 HP Fill이 붉게 점멸하도록 하여, 플레이어가 숫자를 직접 읽지 않더라도 현재 위험한 상태라는 사실을 알아차릴 수 있도록 했다.

개발 순서에서도 꽤 의미 있는 경험이 있었다.

HP 감소 VFX를 만들기 시작했을 당시에는 실제 Player HP 시스템이 아직 존재하지 않았다. 그래서 우선 파티클과 UI 표시처럼 독립적으로 구현할 수 있는 부분부터 제작하고, Inspector에서 미리 확인할 수 있는 상태로 팀에 공유했다.

이후 팀원이 PlayerHealth 시스템을 구현하자, 미리 만들어 두었던 HPDrawer와 HUD를 실제 HP 변경 이벤트에 연결했다.

각자 맡은 기능을 먼저 개발한 뒤 이벤트와 Inspector 참조를 통해 하나의 기능으로 통합하는 협업 흐름을 직접 경험할 수 있었다.

또한 Canvas의 Render Mode처럼 코드 바깥에서 변경되는 Unity 설정 역시 팀에 미리 공유했다.

Unity의 씬과 프리팹은 병합 과정에서 참조나 설정 충돌이 발생하기 쉬운 만큼, 단순히 Git에 커밋하는 것만으로 끝나는 것이 아니라 무엇을 변경했고, 병합할 때 어떤 부분을 확인해야 하는지 알리는 것 역시 협업의 일부라는 점을 배웠다.

마지막으로 Heat, Core, HP UI를 하나의 HUD 프리팹으로 정리했다.

1주차에 만들었던 테스트 중심의 HUD가 이번 주를 거치면서, 다른 씬에서도 재사용할 수 있는 실제 게임용 HUD 구조로 조금씩 발전하기 시작했다.

사망 및 게임오버 UI는 에셋 제작이 완료되지 않아 이번 주에는 추가하지 않았다.

대신 현재 구현할 수 있는 HP 표시, 피해 피드백, Low HP 경고를 먼저 완성하고, 아직 구현하지 못한 기능은 후속 작업으로 명확히 남겨두었다.

하나씩 만들어가고, 연결하고, 다시 정리한다.

아직은 작은 HUD 하나지만, 이렇게 조금씩 실제 게임의 모습을 갖춰가기 시작했다.

コンテスト・成果物

この投稿は投稿者によって CC BY 4.0 の下でライセンスされています。