현재 프로젝트를 6개월간 개발한 끝에 드디어 괜찮아 보이고 확장 가능한 UI 테두리(Borders)를 만드는 법을 배웠습니다 ㅋㅋ

저는 영혼을 다해 UI 작업을 싫어하기 때문에, 공유하면 좋을 것 같아 글을 올립니다:

저는 거의 프로젝트 시작 첫날부터 UI 요소에 테두리(Borders)를 추가하는 데 어려움을 겪어왔습니다. 제가 메뉴용으로 사용하는 대부분의 UI 요소는 반투명(Semi-transparent)하기 때문에, 레이어(Layers)를 너무 복잡하게 만들지 않고서는 불투명한(Opaque) 요소를 사용할 수 없었습니다.

또한 메뉴는 텍스트 양과 현지화(Localization)에 따라 스스로 적응(Self-adaptive)해야 하는데, 이 점이 추가적인 문제를 일으켰습니다.

게다가, 서로 다른 요소들(예: [x] 또는 [Space] OK)을 클릭하여 각기 다른 동작을 수행해야 하는데, 테두리를 만들기 위해 추가한 레이어들이 항상 레이캐스팅(Raycasting)을 방해하여 기능을 망가뜨리곤 했습니다.

마침내 해결책을 찾았습니다:

• 원하는 불투명도(Opacity)로 설정된 배경 이미지(Background image)가 있는 패널(Panel)
• 그 안에 필요한 요소들
• 마지막 자식 요소(Last child element)로, Image 컴포넌트가 있는 또 다른 게임 오브젝트(Game object):
  • UISprite, 색상은 흰색으로 설정 (테두리의 색상)
  • Raycast Target: Off. 그래야 클릭을 방해하지 않습니다.
  • Image Type: Sliced. 이것이 핵심이며, UISprite의 9-slice 포맷에 맞춰 적응하게 합니다.
  • Fill Center: Off. 이 기능이 있는 줄도 몰랐는데, 이미지 채우기를 제거하고 테두리만 남겨줍니다.
  • Pixels per unit: 본인에게 맞는 값을 설정하세요. 이 값에 따라 테두리가 더 두꺼워지거나 얇아집니다. 기본값은 1입니다.

여러분은 이미 모두 알고 계실 수도 있지만, 저는 몇 달 동안 이 문제 때문에 스트레스를 받았고 적절하고 확장 가능한(Scalable) 해결책을 찾을 수 없었습니다 😅

좋은 하루 되세요!