문제/상황

• 튜토리얼 진행 시, 특정 UI 요소(예: 버튼)를 가리키는 화살표를 화면에 배치해야 했습니다. Unity 에디터 환경에서는 화살표가 정확히 UI 타겟을 가리켰으나, WebGL 빌드나 다양한 해상도 기기에서는 Canvas Scaler의 스케일 팩터 차이로 인해 화살표와 타겟 간의 간격이 비정상적으로 벌어지는 현상이 발생했습니다. 이는 Canvas 내에서 좌표가 픽셀 기반이 아닌 스케일된 공간에서 계산되기 때문으로, 화면 해상도나 종횡비에 따라 화살표의 위치가 의도한 곳에서 벗어나는 문제가 있었습니다.

해결법

• 본 이슈는 Canvas Scaler의 스케일링 전후 좌표계를 혼용함으로써 발생한 문제로, RectTransform.sizeDelta(스케일 적용 전 로컬 크기)와 스케일링이 반영된 월드 좌표를 동시에 사용하는 로직의 불일치가 원인이었습니다.
• 이를 해결하기 위해, UI 요소의 실제 화면 상 위치와 크기를 정확하게 파악할 수 있는 RectTransform.GetWorldCorners() 메소드를 활용하였습니다. 이 메소드를 통해 UI 요소의 네 꼭짓점에 해당하는 월드 좌표를 받아와, 그 좌표를 기반으로 UI의 실제 렌더링 크기와 중심점을 계산하였습니다.
• 이후 모든 위치 계산 및 오브젝트 배치는 월드 좌표계 기준으로 통일하여 처리함으로써, 해상도나 스케일 변화에 관계없이 정확한 위치에 튜토리얼 화살표가 배치되도록 수정하였습니다.

   // 튜토리얼 화살표를 배치하는 메서드
    public void Place(RectTransform target, bool placeOnTop)
    {
        //  타겟의 실제 높이 계산
        Vector3[] targetCorners = new Vector3[4];
        target.GetWorldCorners(targetCorners);
        float actualTargetHeight = targetCorners[1].y - targetCorners[0].y;

        // 화살표의 실제 높이 계산 
        Vector3[] indicatorCorners = new Vector3[4];
        m_RectTransform.GetWorldCorners(indicatorCorners);
        float actualIndicatorHeight = 
		        Mathf.Abs(indicatorCorners[1].y - indicatorCorners[0].y); 
    
        // 간격 계산 
        float margin = 0f;
        float indicatordist = (actualTargetHeight / 2f) + 
				        (actualIndicatorHeight / 2f) + margin;
    
        // 타겟의 정중앙 위치 계산
        _targetPosition = (targetCorners[0] + targetCorners[2]) / 2f;
        Vector3 position = _targetPosition;
        Quaternion rotation;
    
        if(placeOnTop)
        {
            position.y += indicatordist;
            rotation = Quaternion.Euler(0, 0, 180.0f);
        }
        else
        {
            position.y -= indicatordist;
            rotation = Quaternion.identity;
        }

        m_RectTransform.gameObject.SetActive(true);
        m_RectTransform.position = position;
        m_RectTransform.localRotation = rotation;
    }

결론

Canvas Scaler의 영향을 받지 않고, 어떤 해상도에서도 튜토리얼 화살표를 정확한 위치에 일관되게 표시하는 데 성공했습니다. 이 과정을 통해 반응형 UI 와 좌표계 처리에 대한 실질적인 이해도를 크게 향상시킬 수 있었습니다.