로블록스 UI/UX 아키텍처: CanvasGroup, 반응형 스케일링, 모바일 안전 영역 & 크로스 플랫폼 레이아웃

스마트폰, 태블릿, 1080p 모니터, 울트라와이드 모니터, 4K TV까지 모든 기기에서 선명하고 조화로운 UI를 구현하는 것은 로블록스 개발에서 가장 중요한 과제 중 하나입니다. 고정 픽셀 오프셋을 사용하면 기기 해상도에 따라 버튼이 겹치거나 화면 밖으로 잘리는 문제가 발생합니다.

상위 인기 게임들은 체계적인 반응형 레이아웃 시스템을 채택하고 있습니다. UDim2 Scale 활용, AnchorPoint (0.5, 0.5) 중앙 정렬, UIAspectRatioConstraint 비율 고정, GuiService 안전 영역 보정, 그리고 CanvasGroup 하드웨어 렌더링 최적화를 통해 모든 기기에서 매끄러운 HUD를 제작할 수 있습니다.

1. 상대 스케일링: UDim2 Scale vs Offset 마스터하기

로블록스 스튜디오 반응형 레이아웃의 핵심 기초:

• Scale과 Offset의 차이: UDim2.new(XScale, XOffset, YScale, YOffset). Scale은 부모 컨테이너에 대한 상대적 비율(0.0~1.0)이며, Offset은 절대 픽셀 수입니다.
• 순수 Scale 원칙: 부모 프레임 크기 지정 시 항상 Scale을 우선 사용하여 화면 크기가 작아지더라도 비례하여 축소되도록 설계합니다.
• Offset의 올바른 사용: 얇은 테두리(Border), UIPadding 내부 여백, 고정된 물리적 크기를 유지해야 하는 작은 아이콘에만 제한적으로 Offset을 사용합니다.

2. 종횡비 고정 & AnchorPoint 좌표 수학

와이드스크린과 4:3 화면에서 UI가 찌그러지는 현상 방지:

• AnchorPoint (0.5, 0.5): 기본 기준점인 (0, 0)(좌측 상단) 대신 (0.5, 0.5)로 설정하고 Position을 UDim2.new(0.5, 0, 0.5, 0)로 주면 어떤 해상도에서도 완벽하게 화면 정중앙에 고정됩니다.
• UIAspectRatioConstraint: 정사각 미니맵이나 원형 스킬 아이콘이 직사각형으로 왜곡되는 것을 방지합니다. AspectRatio = 1.0(정사각형) 또는 1.6(카드형)을 설정합니다.
• 기준 축(DominantAxis) 설정: 종횡비 유지 시 가로(Width) 기준인지 세로(Height) 기준인지 결정하여 좁은 화면에서도 UI가 화면 밖으로 넘치지 않도록 제어합니다.

3. 모바일 안전 영역(Safe Area) & 노치 보정

카메라 홀, 다이내믹 아일랜드 및 홈 바 간섭 해결:

• 모바일 카메라 펀치홀 간섭: 화면 최외곽 모서리에 중요한 버튼을 배치하면 최신 스마트폰의 카메라 홀이나 라운드 코너에 가려져 클릭할 수 없게 됩니다.
• ScreenGui.ScreenInsets: 최신 스튜디오 속성에서 DeviceSafeInsets 또는 CoreInsets를 활성화하여 노치 및 시스템 홈 바 영역을 자동으로 우회합니다.
• 가장자리 터치 버퍼: 화면 가장자리로부터 최소 20px 이상의 여백을 유지하여 모바일 OS의 뒤로가기 제스처와 충돌하지 않도록 설계합니다.

-- 반응형 UI 레이아웃 헬퍼 모듈 (종횡비 고정 & 안전 영역 지원)
local GuiService = game:GetService("GuiService")
local ResponsiveContainer = {}
ResponsiveContainer.__index = ResponsiveContainer

function ResponsiveContainer.new(parentScreenGui, config)
    local self = setmetatable({}, ResponsiveContainer)
    
    local rootFrame = Instance.new("Frame")
    rootFrame.Name = config.Name or "ResponsiveRoot"
    rootFrame.AnchorPoint = Vector2.new(0.5, 0.5)
    rootFrame.Position = UDim2.new(0.5, 0, 0.5, 0)
    rootFrame.Size = config.Size or UDim2.new(0.8, 0, 0.8, 0)
    rootFrame.BackgroundTransparency = 1
    rootFrame.Parent = parentScreenGui
    
    if config.AspectRatio then
        local ratioConstraint = Instance.new("UIAspectRatioConstraint")
        ratioConstraint.AspectRatio = config.AspectRatio
        ratioConstraint.AspectType = Enum.AspectType.ScaleWithParentSize
        ratioConstraint.DominantAxis = config.DominantAxis or Enum.DominantAxis.Width
        ratioConstraint.Parent = rootFrame
    end
    
    local sizeConstraint = Instance.new("UISizeConstraint")
    sizeConstraint.MinSize = config.MinSize or Vector2.new(300, 200)
    sizeConstraint.MaxSize = config.MaxSize or Vector2.new(1920, 1080)
    sizeConstraint.Parent = rootFrame
    
    self.Frame = rootFrame
    return self
end

return ResponsiveContainer

4. CanvasGroup 성능 & 배치 렌더링 최적화

복잡한 UI 계층 구조를 저사양 모바일에서도 부드럽게 구동하는 기법:

• CanvasGroup의 원리: 일반 Frame은 투명도 애니메이션 시 자식 요소를 개별 재렌더링하지만, CanvasGroup은 하위 트리를 단일 GPU 텍스처로 합성하여 1회의 드로우 콜로 처리합니다.
• 부드러운 페이드 인/아웃: 팝업 창이나 다이얼로그 모달의 GroupTransparency를 트윈(Tween)하여 CPU 연산 부담 없이 60FPS 페이드 효과를 구현합니다.
• VRAM 주의사항: 활성화된 CanvasGroup이 너무 많으면 GPU 비디오 메모리를 점유하므로, 필요한 모달 창에만 선별적으로 사용합니다.

5. 크로스 플랫폼 게임패드 & 터치 인체공학

콘솔 컨트롤러와 모바일 터치 조작 최적화 설계:

• 터치 타깃 크기: 모바일 터치 버튼은 최소 44x44 픽셀 이상의 히트박스를 유지하여 손가락 오터치 및 클릭 미스를 방지합니다.
• 콘솔 포커스 트래핑: 엑스박스나 플레이스테이션 유저를 위해 메뉴를 열 때 GuiService.SelectedObject를 첫 버튼으로 자동 지정하고 방향키 탐색 경로를 정의합니다.
• 가상 조이스틱 영역 확보: 모바일 화면 좌측 하단의 가상 조이스틱 조작 반경과 스킬 버튼이 겹치지 않도록 동적 레이아웃 마진을 부여합니다.

Frequently Asked Questions