안녕하세요, 손사장(sonsazang)입니다!

Windows 창 투명도 조절기

sonsazang — Tue, 23 Dec 2025 19:25:34 +0900

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

오랜만에 하나 있으면 좋겠다 생각이 들어서 만들어보았습니다.

Windows에서 원하는 창의 투명도를 0~100%로 조절할 수 있는 무료 툴입니다.

단일 EXE 파일만 실행하면 됩니다.

주요 기능

실시간 창 하이라이트: 마우스를 올리면 녹색 테두리 표시
클릭으로 창 선택: 버튼 클릭 후 원하는 창을 클릭해 선택
투명도 슬라이더: 0~100% 조절 (0=완전 투명, 100=불투명)
초기화 버튼: 한 번에 100%로 복구 (텍스트/슬라이더/실제 투명도 동시 초기화)
블로그 배너: 하단 배너에서 개발자 블로그로 이동
Notion 스타일 UI: 밝은 톤, 통일된 블루 포인트 컬러

사용 방법

실행: 창투명도조절기.exe 더블클릭
창 선택
- “창 선택하기” 버튼 클릭
- 원하는 창 위로 마우스 이동 → 녹색 테두리 확인
- 그 창을 클릭하면 선택됨 (ESC로 취소 가능)
투명도 조절: 슬라이더로 0~100% 조절
초기화: “투명도 초기화” 버튼으로 즉시 100% 복귀
창 정보 새로고침: 선택된 창의 제목 갱신
블로그 방문: 하단 배너의 “손사장 블로그 방문하기” 버튼 클릭

시스템 요구사항

Windows 7 이상
추가 설치 불필요 (단일 EXE 실행)

다운로드

배포용 EXE만 업로드 예정
링크: https://drive.google.com/file/d/1NeUhsBS3K-4AxmB9Vo8qm2Hz_h2bIuc7/view?usp=sharing

주의사항

일부 시스템/보안 창은 투명도 조절이 제한될 수 있습니다.
서명되지 않은 EXE이므로 최초 실행 시 Windows Defender 경고가 뜰 수 있습니다.
프로그램 종료 후에도 마지막 투명도 값은 적용된 창에 남아 있을 수 있습니다.

FAQ

창이 바로 선택돼요: 버튼 클릭 후 원하는 창을 새로 클릭해야 선택됩니다. (버튼 클릭 위치는 무시하도록 개선됨)
하이라이트가 안 보일 때: 다른 오버레이 프로그램이 있다면 잠시 종료 후 시도해 주세요.

제작 정보

Python, Windows API (pywin32), CustomTkinter 기반
UI 테마: Notion 스타일 (라이트 모드, 블루 포인트 컬러)

면책 조항: 본 프로그램은 개인 사용 목적의 무료 소프트웨어이며, 사용 중 발생하는 문제에 대한 책임을 지지 않습니다.

[Unity 6.1 WEB] Uncaught TypeError: Module.dynCall_viiiii is not a function 에러 해결하기

sonsazang — Tue, 1 Jul 2025 14:18:39 +0900

서론

최근에 회사에서 WebGL 포팅 작업을 담당하게 되면서 발생하게 된 에러입니다.

Unity 6.1 (6000.1.9 f1) 버전에서는 WebGL 할당 메모리가 증가되었다는 이야기를 듣고 빌드를 시도했습니다.

빌드는 정상적으로 되었지만 WebRequest를 호출하는 부분에서

Invoking error handler due to
TypeError: Module.dynCall_viiiii is not a function
at XMLHttpRequest.http_onload (http://localhost:8000/Build/NEW.framework.js:9497:31)
NEW.framework.js:9497 Uncaught TypeError: Module.dynCall_viiiii is not a function
    at XMLHttpRequest.http_onload (NEW.framework.js:9497:31)

다음과 같은 에러가 발생했습니다.

해당 소스코드를 확인해 보니

function _XHR_SetResponseHandler(request, onresponse, onerror, ontimeout, onaborted)
  	{
  		if (_best_http_request_bridge_global.loglevel <= 1) /*information*/
  			console.log(request + ' XHR_SetResponseHandler');
  
  		var http = _best_http_request_bridge_global.requestInstances[request];
  		// LOAD
  		http.onload = function http_onload(e) {
  			if (_best_http_request_bridge_global.loglevel <= 1) /*information*/
  				console.log(request + '  - onload ' + http.status + ' ' + http.statusText);
  
  			if (onresponse)
  			{
  				var responseLength = 0;
  				if (!!http.response)
  					responseLength = http.response.byteLength;
  	
    			// 여기서 발생
  				Module['dynCall_viiiii'](onresponse, request, http.status, 0, responseLength, 0);
  			}
  		};
  
  		if (onerror)
  		{
  			http.onerror = function http_onerror(e) {
  				function HandleError(err)
  				{
  					var length = lengthBytesUTF8(err) + 1;
  					var buffer = _malloc(length);
  
  					stringToUTF8Array(err, HEAPU8, buffer, length);
  
  					// 여기도 발생
  					Module['dynCall_vii'](onerror, request, buffer);
  
  					_free(buffer);
  				}
  
  				if (e.error)
  					HandleError(e.error);
  				else
  					HandleError("Unknown Error! Maybe a CORS porblem?");
  			};
  		}
  
  		if (ontimeout)
  			http.ontimeout = function http_onerror(e) {
            	// 여기도 발생
  				Module['dynCall_vi'](ontimeout, request);
  			};
  
  		if (onaborted)
  			http.onabort = function http_onerror(e) {
            	// 여기도 발생
  				Module['dynCall_vi'](onaborted, request);
  			};
  	}

문제

공통적인 에러 발생 부분을 확인해 본 결과

dynCall 메서드를 실행하지 못하는 에러가 발생한 것으로 확인되었습니다.

유니티 에디터 버전의 업데이트에 따라서 패키지의 업데이트 누락인지 아니면 에디터 버그인지
해당 dynCall 메서드를 불러오지를 못해서 발생하게 된 에러입니다.

해당 내용을 가지고 해결 방법을 찾아보았습니다.

해결방법

아래 두 개의 글을 확인해서 해결 방법을 찾았습니다.

https://discussions.unity.com/t/makedyncall-replacing-dyncall-in-unity-6/1543088/28

https://github.com/hecomi/uLipSync/issues/93

[WebGL][WebAssembly] Enable WebAssembly.Table in Unity 6000.0.xx occur Uncaught TypeError: Module.dynCall_v when click web page

Module.dynCall_v(uLipSync.unityCsharpCallback); Occur Error:Uncaught TypeError: Module.dynCall_v is not a function. This error disapper when disable WebAssembly.Table option.

github.com

Unity 6 (Emscripten 최신 버전 기반)부터:

Module.dynCall_viiiii 같은 함수들이 더 이상 자동으로 생성되지 않는다.
대신 Module.makeDynCall("viiiii") 또는 Module.wasmTable.get(pointer) 방식으로 대체된다.

이렇게 dynCall을 대체할 메서드를 임시로 Jspre 파일을 통해서 선언하면 해결된다.

1. 프로젝트에서 Plugins 폴더에 WebGL폴더를 생성합니다.

(해당 경로가 없을 경우 생성하면 됩니다.)

2. 안쪽에 test.jspre (이름은 자유) 파일을 생성하고 다음 스크립트를 첨부합니다.

// Licensed under the MIT License. See LICENSE in the project root for license information.

/**
 * Initializes the dynCall_* function table lookups.
 * Thanks to @De-Panther for the following code snippet.
 * Checks if specific dynCall functions exist,
 * if not, it will create them using the getWasmTableEntry function.
 * @see https://discussions.unity.com/t/makedyncall-replacing-dyncall-in-unity-6/1543088
*/
Module['preRun'].push(function () {
  if (typeof getWasmTableEntry !== "undefined") {
    Module.dynCall_vi = Module.dynCall_vi || function (cb, arg1) {
      return getWasmTableEntry(cb)(arg1);
    }
    Module.dynCall_vii = Module.dynCall_vii || function (cb, arg1, arg2) {
      return getWasmTableEntry(cb)(arg1, arg2);
    }
    Module.dynCall_viii = Module.dynCall_viii || function (cb, arg1, arg2, arg3) {
      return getWasmTableEntry(cb)(arg1, arg2, arg3);
    }
    Module.dynCall_viiii = Module.dynCall_viiii || function (cb, arg1, arg2, arg3, arg4) {
      return getWasmTableEntry(cb)(arg1, arg2, arg3, arg4);
    }
    // 저는 dynCall_Viiiii도 있어서 추가했습니다.
    Module.dynCall_viiiii = Module.dynCall_viiiii || function (cb, arg1, arg2, arg3, arg4, arg5) {
      return getWasmTableEntry(cb)(arg1, arg2, arg3, arg4, arg5);
    }
  }
});

이렇게 추가한 후에 빌드하면 이전과 다르게 해결되는 것을 확인할 수 있습니다.

빌드된 WebGL 폴더 -> Build -> framework.js 파일을 확인하면 해당 코드가 삽입된 것을 확인 할 수 있습니다.

UI Toolkit : UI Document 활용하기

sonsazang — Fri, 9 May 2025 17:16:46 +0900

지난번에는 UI Toolkit을 소개했으면 오늘은 프로그래머가 어떤 식으로 사용하는지에 대해 정리하는 시간입니다.

이번 글은 다음과 같은 순서로 진행됩니다.

UI Builder를 활용해서 테스트 UI Document(.uxml) 작성하기
작성한 UI Document를 기반으로 C# 코드 작성하기
씬에서 컴포넌트를 연결 한 후 직접 테스트해보기

1. UI Builder를 활용해서 UI Document(. uxml) 작성하기

Project 우클릭 → Create → UI Toolkit → UI Document를 선택해서 새로운 UI Document를 생성합니다.

이름은 TestUIDocument로 설정하겠습니다. (자유입니다.)

생성된 TestUIDocument를 클릭하면 UI Builder 가 열리면서 확인할 수 있습니다.

이번 프로젝트에서는 Style Sheet는 따로 설정하지 않겠습니다.

Hierarchy에서 TestUIDocument.uxml를 클릭 → Inspector에서 Canvas Size를 설정합니다.

저는 1920, 1080으로 설정했습니다.

이제 Library에서 테스트로 사용해 볼 UI 요소들을 하이라키로 가지고 옵니다.

Containers → Visual Element 선택해서 하이라키에 추가합니다.

이름은 #test-main-window로 설정하겠습니다.

이제 그 안쪽으로 다양한 UI 요소들을 추가하겠습니다.

Controls → Dropdown을 추가 후 이름은 #test-dropdown으로 설정하겠습니다.

Controls → Label을 추가 후 이름은 #test-label으로 설정하겠습니다.

Controls → Button을 추가 후 이름은 #test-button으로 설정하겠습니다.

Containers → Visual Element를 추가 후 이름은 #test-window로 설정하겠습니다.

#test-window는 Inspector에서 Inlined Styles → Background → Image에 이미지를 연결합니다.

Controls → Toggle을 추가 후 이름은 #test-toggle으로 설정하겠습니다.

Controls → Progress Bar을 추가 후 이름은 #test-progressbar으로 설정하겠습니다.

Controls → Text Field을 추가 후 이름은 #test-textfield로 설정하겠습니다.

모든 항목 Inspector에서 Inlined Styles → Text → Size만 50으로 변경했습니다. (보기 좋은 용도)

이름 변경은 F2(이름 변경 단축키)를 통해서 하거나 UI 요소를 선택한 후 Inspector 최상단에서 수정 가능합니다.

완성된 TestUIDocument의 모습입니다. → 저와 다르게 원하시는 항목을 추가로 테스트해보세요!

2. 작성한 UI Document를 기반으로 C# 코드 작성하기

이제 C#으로 UI 요소를 제어하기 위해 스크립트를 작성하는 시간입니다.

우선 C# 스크립트를 하나 생성합니다. 이름은 TestUI로 하겠습니다.

스크립트의 상단부에는 앞서 UI Document에서 선언한 UIElement 들을 선언합니다.

그리고 기존 유니티 생명주기와 다르게 UI Element 초기화 및 값을 설정하는 부분은 OnEnable()에서 진행합니다.

OnEnable() 안에서 Root Visual Element를 찾아서 가져온 후 해당 Root 안에 있는 요소들을 찾아서 선언한 UI Element와 연결합니다.

그 후 연결 된 UI Element의 값을 수정하는 방식입니다.

(*해당 글에서는 예외처리 부분 포함하지 않았습니다.)

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class TestUI : MonoBehaviour
{
    // root 요소 선언
    VisualElement root;

    // UI 요소 선언
    Label testLabel;
    Button testButton;
    VisualElement testWindow;
    Toggle testToggle;
    ProgressBar testProgressBar;
    DropdownField testChoice;
    TextField input_test;

    private void OnEnable()
    {   
        // root 요소 찾아서 연결
        root = GetComponent<UIDocument>().rootVisualElement;

        // ui 요소 바인딩
        testLabel = root.Q<Label>("test-label");
        
        testButton = root.Q<Button>("test-button");
        
        testWindow = root.Q<VisualElement>("test-window");
        
        testToggle = root.Q<Toggle>("test-toggle");

        testProgressBar = root.Q<ProgressBar>("test-progressbar");
        testProgressBar.value = 0;

        testChoice = root.Q<DropdownField>("test-dropdown");
        
        input_test = root.Q<TextField>("test-textfield");

        // ui 요소 설정
        testLabel.text = "Test Label !!!";

        testButton.text = "Test Button !!!";
        testButton.RegisterCallback<ClickEvent>(ev =>
        {
            Debug.LogWarning("Test Button Clicked !!!");

            Debug.LogWarning("Input Test Value : " + input_test.value);
        });

        testToggle.value = true;
        testToggle.RegisterValueChangedCallback(evt =>
        {
            Debug.LogWarning("Test Toggle Value : " + evt.newValue);
            testWindow.style.display = evt.newValue ? DisplayStyle.Flex : DisplayStyle.None;
        });

        for (int i = 0; i < 100; i++)
        {
            testProgressBar.value = i % 100;
        }

        List<string> testChoiceList = new List<string>();
        testChoiceList.Add("Test_01");
        testChoiceList.Add("Test_02");
        testChoiceList.Add("Test_03");
        testChoice.choices = testChoiceList;

        testChoice.index = 0;

        testChoice.RegisterValueChangedCallback(ev =>
        {
            Debug.LogWarning("Current Test Choice Index is " + ev.newValue);
        });

        input_test.value = "Input Test Field !!";
    }
}

해당 코드를 확인하면 초반 부분에 Root에서 연결할 때 다음과 같은 코드를 사용합니다.

`testLabel = root.Q<Label>("test-label");`

이 코드를 풀어서 설명하겠습니다.

testLabel에 root에서 Q → Query 쿼리를 통해서 <Label> 타입의 “test-label” 이름을 가진 UI 요소를 가져와서 할당한다입니다.

중반부에 보면 testButton, testToggle, testChoice 에는 Register~~ 하는 코드가 있는데 람다식으로 이벤트를 연결하는 코드로 생각하시면 쉽게 이해할 수 있습니다.

기존 UGUI에서 OnValueChanged 같은 개념입니다.

3. 씬에서 컴포넌트를 연결한 후 직접 테스트해보기

이제 다 왔습니다.

생성한 UI Document와 TestUI 스크립트를 통해서 씬에서 직접 확인해 보도록 하겠습니다.

Project에서 Create → UI Toolkit → Panel Settings Asset을 통해서 Panel Settings를 하나 생성합니다.

씬에서 빈 GameObject를 생성한 후 UI Document와 Test UI 컴포넌트를 Add Component 합니다.

아래 사진처럼 UI Document에 Panel Settings와 TestUIDocument.uxml를 연결합니다.

이제 실행하면 로그를 통해서 정상작동 하는지 확인 가능합니다.

더 다양한 기능은 직접 테스트해보시면 좋을 것 같습니다.

감사합니다.

Unity Eidtor 실행시 Finish Loading Project에서 로딩창 종료 안되는 현상

sonsazang — Fri, 9 May 2025 13:49:30 +0900

해당 사진은 구글에서 가져왔습니다. 유니티 버전도 상황도 동일합니다.

문제

UnityHub : 3.12.1

Unity : 2022.3.23 f1

Unity Hub에서 프로젝트 실행 시 100%는 아니지만 빈번하게 발생하는 현상

해당 현상일 때 모니터 상단부의 일부 영역을 가리는 검은색 박스가 노출된다.

작업 관리자를 통해서 확인하면 Ram이 많이 올라간다.

해결방법

우선 임시적으로 해결하고 있는 방법으로는 강제 종료 후 다시 시작한다.

이 방법으로 해결해서 진행하는데도 문제는 없으나 조금 더 근본적인 해결 방법을 찾아보았습니다.

Unity gets stuck on white loading screen on startup?

Unity Discussions에 저와 비슷한 상황인 글을 발견했습니다.

댓글에 있는 다양한 해결 방법을 하나씩 시도할 예정입니다.

저의 경우 Kaelcoke가 작성한 AppData 안에서 몇몇의 파일을 제거하는 것에서 해결되었습니다.

Kaelcoke - Oct 2017
I’ve got the same problem and after a little research I came to an answear.
Before anything, backup your projects.
Open any folder and go to %AppData%
Then, a “Roaming” folder will open. Search for Unity and delete this folder.
Go up one folder (AppData) and do the same to Local/Unity and LocalLow/Unity.
Hope it works.

내용을 요약하면 프로젝트를 백업하고

AppData/Roaming/Unity
AppData/Local/Unity
AppData/LocalLow/Unity

이렇게 3개의 폴더를 제거하면 해결된다 라는 내용입니다.

저는 여기서 바로 해결이 되었습니다.

이전보다 에디터 로딩시간도 많이 개선되었고 5번 정도 프로젝트를 왔다 갔다 실행해 보았는데 문제가 해결되었습니다.

저와 같은 문제를 겪고 있으시면 해당 글에 있는 다양한 해결방법을 적용해 보시길 추천드립니다.

감사합니다.

*몇번 더 실행하다보니 다시 발생했습니다ㅠ.....

UI Builder Viewport에서 Canvas Size 설정하기

sonsazang — Fri, 9 May 2025 11:10:04 +0900

문제

유니티 에디터를 실행한 이후 처음으로 uxml 파일을 선택해서 UI Builder를 실행하면 아래 화면처럼 비율이 깨져있는 Canvas를 볼 수 있습니다.

해결 방법

UI Builder → Hierarchy에서 최상위 uxml 파일을 클릭합니다.

Inspector를 확인하면 다음과 같이 Width : 350, Height : 450 이렇게 이상한 값으로 설정되어 있는 것을 확인할 수 있습니다.

해당 Size 바로 아래쪽에 위치한 토글인 Match Game View를 클릭하면 UnityEditor → GameView에서 설정한 사이즈로 적용됩니다.

만약 기본 Canvas Size를 변경하고 싶다면?

using System;
using System.Reflection;
using UnityEditor;
using UnityEngine;

#if UNITY_EDITOR

internal class PatchUIBuilderSize
{
    const int UIBUILDER_CANVAS_WIDTH = 1920;
    const int UIBUILDER_CANVAS_HEIGHT = 1080;

    [InitializeOnLoadMethod]
    private static void SetUIBuilderConstants()
    {
        var t = Type.GetType("Unity.UI.Builder.BuilderConstants, UnityEditor.UIBuilderModule");
        if (t == null)
        {
            Debug.LogWarning("Couldn't patch UI Builder default size. BuilderConstants type not found.");
            return;
        }

        FieldInfo initialWidth = t.GetField("CanvasInitialWidth", BindingFlags.Static | BindingFlags.Public);
        if (initialWidth == null)
        {
            Debug.LogWarning("Couldn't patch UI Builder default size. CanvasInitialWidth field not found.");
            return;
        }

        FieldInfo initialHeight = t.GetField("CanvasInitialHeight", BindingFlags.Static | BindingFlags.Public);
        if (initialHeight == null)
        {
            Debug.LogWarning("Couldn't patch UI Builder default size. CanvasInitialHeight field not found.");
            return;
        }

        initialWidth.SetValue(t, UIBUILDER_CANVAS_WIDTH);
        initialHeight.SetValue(t, UIBUILDER_CANVAS_HEIGHT);
        Debug.Log("(PatchUIBuilderSize) Patched UI Builder to set initial dimensions to 1920 * 1080");
    }
}

#endif

해당 스크립트를 사용하면 에디터를 실행할 때 설정한 사이즈 ( 1920, 1080 )로 자동 적용 됩니다.

*uxml 에서 루트 Visual Element가 있어야 작동합니다.

출처

https://discussions.unity.com/t/default-canvas-size/932687/4

Unity UI Toolkit

sonsazang — Thu, 8 May 2025 15:48:49 +0900

Unity의 사용자 인터페이스 설계 및 구현 - 공식 홈페이지 E-Book을 참조했습니다.

https://unity.com/kr/resources/user-interface-design-and-implementation-in-unity

Unity의 사용자 인터페이스 설계 및 구현

Unity의 UI 시스템으로 정교한 인터페이스를 만드는 방법을 알아보세요.

unity.com

최고의 UI는 바로 ‘눈에 띄지 않는’ UI입니다.

UI → 게임의 몰입도를 유도하기 위한 디자인 장치 → 플레이어의 시간을 낭비하면 안 된다.

Unity UI(UGUI) : 게임 오브젝트 기반 UI 시스템

UI Toolkit : 웹 기술에서 아이디어를 얻어 개발된 UI 시스템

UI Toolkit

UI Toolkit은 본질적으로 기능적인 구현과 UI 디자인을 분리합니다.

개발자와 UI 아티스트의 역할이 구분 → 각 팀의 전문 분야에 집중할 수 있습니다.

UI Toolkit 워크플로

UI Toolkit으로 만든 각 인터페이스는 다음과 같이 서로 연동하는 여러 부분으로 구성된다.

UI 문서(UXML) : 이 에셋은 UXML(Unity Extensibel Markup Language)을 참조합니다. HTML, XAML, XML을 기반으로 활용한 이 UI 문서는 사용자 인터페이스 구조를 정의하고 레이아웃의 계층 구조에 대한 정보를 담고 있습니다. 인라인 스타일 규칙과 스타일 시트를 사용하여 스타일을 지정할 수 있습니다.
Assets → Create → UI Toolkit → UI Document에서 에셋을 생성하며 이 에셋은 프로젝트 폴더에 추가되며 UI Builder에서 열 수 있습니다.
스타일 시트(USS) : 이 에셋은 USS(Unity Style Sheet)를 참조합니다. HTML의 CSS(캐스케이딩 스타일 시트)에서 영감을 받은 이 스타일 시트에는 UXML의 시각적 레이아웃에 영향을 줄 수 있는 스타일 프로퍼티에 대한 캐스케이딩 규칙이 포함됩니다.
Assets → Create → UI Toolkit → Style Sheet에서 에셋을 생성하며 이 에셋은 프로젝트 폴더에 추가되며 UI Builder에 열려 있는 UXML 파일에 추가될 수 있습니다.
TSS(테마 스타일 시트) : 이 에셋은 사용할 Panel Settings를 정하는 TSS 및 USS 파일 모음입니다.
UI Document 컴포넌트 : 이 컴포넌트는 표시할 UXML을 정의하고 해당 UI Toolkit에셋을 게임 오브젝트에 연결합니다. 에디터 계층 구조에 있는 게임 오브젝트에 추가 될 수 있고, 어떤 Panel Settings를 사용할지 지정할 수 있습니다.
Sort Order 필드는 이 문서가 동일한 Panel Settings를 사용하는 다른 UI Document와 관련하여 표시되는 방식을 결정합니다.
Panel Settings : 이 에셋은 런타임에 UI Document 컴포넌트가 인스턴스화되고 시각화되는 방식을 정의합니다. 여러 Panel Settings를 사용하여 UI에 다양한 스타일을 사용할 수 있습니다. 게임에 HUD나 미니맵이 있는 경우, 이러한 특수 UI에 각각 고유한 Panel Settings를 사용할 수 있습니다.
Assets → Create → UI Toolkit → Panel Settings Asset에서 생성할 수 있으며 프로젝트 폴더에 추가 및 게임 오브젝트의 UI Document 컴포넌트에 추가할 수 있습니다.

아티스트와 디자이너는 UI Builder(Window → UI Toolkit → UI Builder)에서 Assets 폴더에 저장한 UXML 및 UCSS 파일을 사용하여 작업할 수 있습니다.

UI Builder는 크리에이터가 코드를 작성하지 않고도 인터페이스를 만들고 편집하도록 지원하는 시각적 툴입니다.

Flexbox 기초

UI Toolkit은 Flexbox의 하위 집합을 구현하는 HTML/CSS 레이아웃 엔진인 Yoga를 기반으로 시각적 요소의 위치를 지정한다.

Flexbox 아키텍처는 복잡하고 체계적인 레이아웃 개발에 적합하다.

반응형 UI : Flexbox는 모든 요소를 상자 또는 컨테이너 네트워크로 구성한다. 이러한 요소를 부모 - 자식 관계로 중첩하고 간단한 규칙을 사용하여 화면에서 효율적으로 정렬할 수 있다. 자식은 부모 컨테이너가 변경되면 자동으로 반응합니다. 반응형 레이아웃은 다양한 화면 해상도와 크기에 맞게 조정되므로, 더 쉽게 여러 플랫폼을 타게팅할 수 있습니다.
체계적인 복잡도 : 스타일은 시각적 요소의 미적 가치를 제어하는 간단한 규칙을 정의한다. 스타일 하나를 동시에 수백 개의 요소에 적용할 수 있으며, 변경 사항은 전체 UI에 즉시 반영된다. 따라서 개별적인 요소의 외관을 작업하는 것이 아니라 → 일관되고 재사용 가능한 스타일 위주로 UI를 디자인할 수 있다.
분리된 로직 및 디자인 : UI 레이아웃과 스타일이 코드로 분리되어 있습니다. → 디자이너와 개발자가 종속성을 해치지 않고 원활하게 병렬로 작업할 수 있다.

시각적 요소

UI Toolkit에서 각 인터페이스의 기본 구성 요소는 시각적 요소입니다.

시각적 요소는 모든 UI Toolkit 요소(버튼, 이미지, 텍스트 등)의 기본 클랙스 → UI Toolkit에서 사용하는 게임 오브젝트라고 생각하자.

하나 이상의 시각적 요소로 구성된 UI 계층 구조 → 시각적 트리

UI Toolkit에서 여러 시각적 요소의 조합 →. uxml인 UI 문서 파일에 저장된다.

UXML 파일에는 계층 구조와 관련된 정보뿐만 아니라 스타일이나 시각적 요소의 레이아웃도 포함되어 있다.

시각적 요소의 위치 지정

UI 목업을 만들 때는 각 화면을 별도의 시각적 요소 그룹으로 보고 접근한다.

해당 이미지는 공식 홈페이지에서 제공되는 Unity의 사용자 인터페이스 설계 및 구현 PDF에서 가져왔습니다.

자식 시각 요소를 정의할 때 UI Builder는 다음 두 가지 위치 지정 옵션을 제공합니다.

Relative Position : 새로운 시각적 요소의 기본 설정. 자식 요소는 부모 컨테이너의 Flexbox 규칙을 따른다. 예를 들어 부모 요소의 Direction이 Row로 설정되어 있으면, 자식 시각 요소는 왼쪽에서 오른쪽으로 정렬된다.
- 부모 요소의 크기 또는 스타일 규칙, 자식 요소의 자체 크기 및 스타일 규칙

UI Toolkit은 부모 요소와 자식 요소 간의 충돌을 처리 → 컨테이너에 포함된 자식 요소의 최소 너비가 컨테이너보다 넓으면 오버플로우 발생

Absolute Position : 시각적 요소의 위치는 UGUI가 작동하는 방식과 유사하게 부모 컨테이너에 고정된다. 마진이나 최대 크기 등 규칙은 적용되지만, 부모의 Flexbox 규칙은 따르지 않습니다.

이 내용 말고도 다양하게 기본적인 시각적 요소에 대한 설정 값이 나와 있습니다.

CSS를 사용해 본 경험이 있으면 이해하는데 어려움이 없어서 해당 부분은 넘어가도록 하겠습니다.

UI Toolkit : 스타일링

시각적 요소로 와이어프레임 레이아웃 목업을 만들었으면, 이제 스타일을 지정할 차례이다.

USS 파일은 웹 CSS 파일에 해당되는 Unity 파일이며, 동일한 규칙 기반 형식을 사용한다.

USS 파일은 요소의 크기, 컬러, 폰트, 줄 간격, 테두리, 위치 등을 정의한다.

UI Builder

UI Builder 인터페이스를 사용하면 아티스트와 디자이너가 제작 중인 UI를 시각화할 수 있습니다.

USS Selector (USS 선택자)

스타일 시트는 여러 요소와 UI문서(UXML)에서 USS 선택자를 통해 스타일을 공유하고 적용할 수 있다.

USS Selector는 다음을 기준으로 요소를 일치시킨다.

C# 클래스 이름 : 이 선택자는 유형별(버튼, 레이블, 스크롤러 등)로 작동한다. 선택자는 Library 창에서 특수 문자를 포함하지 않는 유형 이름에 해당한다. 클래스 선택자는 흰색으로 표시된다.
할당된 이름 프로퍼티 : 이 선택자는 똑같은 이름의 모든 요소에 스타일을 적용할 수 있다. 이름 선택자 앞에 ‘#’ 해시 기호가 붙으며 파란색으로 표시된다.
USS 스타일 클래스 : 스타일 클래스 선택자는 모든 시각적 요소에 임의로 적용할 수 있다. 이름 앞에 ‘.’ 기호가 붙으며 노락색으로 표시된다.

가능하면 이름이나 C# 클래스로 요소를 매치하는 것보다 스타일 클래스 선택자를 사용하는 것이 좋다.

선택자는 특정 상태의 요소를 타기팅하는 유사(pseudo) 클래스도 지원한다. → ‘:’으로 표시되며 기존 선택자를 수정한다. 예시로는 Button:hover, #button-play:hover 이런 식이다.

Unity 2D 직교 카메라 설정에 따른 해상도별 PPU 계산 가이드

sonsazang — Thu, 8 May 2025 10:31:40 +0900

Unity 2D 카메라 설정과 스프라이트 PPU 계산법

Unity에서 2D 게임을 개발할 때는 직교 카메라(Orthographic Camera)를 를 주로 사용합니다. 이때 카메라의 Size 설정과 해상도에 맞는 PPU(Pixels Per Unit) 값을 잘 설정해야 스프라이트가 선명하게 보이고 원하는 크기로 출력됩니다.

카메라의 Size란?

직교 카메라의 Size 값은 화면 중심에서 위쪽까지의 거리(유닛)를 를 의미합니다.

이 값은 Unity 유닛 단위이며, 일반적으로 1 유닛 = 1미터로 가정합니다.

- Size = 2 → 전체 세로 시야 : 4 유닛

- Size = 5 → 전체 세로 시야 : 10 유닛

즉, 전체 새로 유닛 = Size * 2

해상도와 FOV(Field of View)

예를 들어, 4K 해상도 (3840 × 2160)를 타겟으로 게임을 만든다고 가정해 볼게요.

화면의 세로 해상도: 2160픽셀
카메라 Size: 5
세로 시야(FOV): 10 유닛

PPU 계산 공식

해상도에 맞는 PPU는 아래 공식으로 계산할 수 있어요:

PPU = 세로 해상도 / 세로 유닛 → 2160 / 10 = 216

→ 즉, 4K 해상도에 최적화된 스프라이트를 만들려면 216 PPU를 기준으로 작업하면 됩니다.

Size/해상도별 PPU 계산 예시

카메라 Size	세로 유닛(FOV)	해상도(세로)	적절한 PPU
2	4	2160	540
5	10	2160	216
10	20	2160	108

팁과 주의사항

너무 높은 PPU는 메모리/성능 부담을 줄 수 있으니, 타겟 플랫폼과 해상도에 따라 적절하게 조절하세요.
1080p 해상도에서 Size = 5인 경우, PPU = 1080 / 10 = 108로 설정하면 적절합니다.
UI나 배경 스프라이트는 상황에 따라 다른 PPU를 사용할 수도 있어요.

요약

Unity 2D에서 선명한 스프라이트 표현을 위해선:

카메라의 Size 값 확인
타겟 해상도 확인
공식에 따라 PPU = 해상도 ÷ (Size × 2) 계산
스프라이트 리소스를 해당 PPU에 맞춰 제작

2025년 5월 7일, 첫 출근을 마치고 나서

sonsazang — Wed, 7 May 2025 20:49:14 +0900

약 반년 간 언리얼 엔진을 공부해 온 시간이 이제 하나의 챕터로 마무리되었습니다.

유니티에서 약 3년간 실무를 경험하고, 게임 회사 이직을 목표로 언리얼 엔진 학습을 시작했지만, 결과적으로 다시 유니티 엔진을 사용하는 회사로 돌아오게 되었습니다.

지난해 10월 퇴사 후, 한 달 정도 충분히 쉰 뒤 12월부터는 하루 12시간씩 몰입하며 공부했습니다.
그때의 집중적인 학습이 지금의 프로그래밍 감각을 유지시켜 준 중요한 시간이었다고 생각합니다.

최근 채용 시장은 제가 처음 유니티로 취업을 준비하던 3년 전과는 분위기가 크게 달랐습니다.
이번 이직은 오랜 시간이 걸릴 수도 있겠다고 예상했지만, 목표로 했던 2025년 4~5월 사이에 다시 취업에 성공할 수 있어서 개인적으로 매우 만족스럽습니다.

메타버스 관련 경력만 3년이라 유니티 엔진 기반의 게임 회사 취업은 쉽지 않을 거라 생각했지만,
첫 회사에서의 WebGL 프로젝트, 두 번째 회사에서의 실무 경험이 긍정적으로 작용해 운 좋게도 게임 회사에 입사하게 되었습니다.

그리고 오늘, 2025년 5월 7일.
한 번쯤 가보고 싶었던 판교에서, 한 번쯤 일해보고 싶었던 게임회사에 첫 출근을 무사히 마치고 돌아왔습니다.

기분 좋게 하루를 마무리하며, 앞으로의 학습 방향도 정리해보려 합니다.
그동안 메타버스 실무 프로젝트에서 두 번의 출시 경험을 통해 전체적인 프로세스는 잘 익혔지만,
정작 게임 콘텐츠 개발 경험은 부족한 편이라 올해 하반기에는 이 부분에 집중해서 성장해보고자 합니다.

힘든 시기였지만, 결국 길은 있었습니다.
이 글을 우연히 보게 된 누군가에게도 분명히 좋은 일이 찾아올 거라 믿습니다.

모두 화이팅입니다.
감사합니다.

20250411 - 전투/아이템 시스템 구조화

sonsazang — Fri, 11 Apr 2025 21:26:20 +0900

이번 주에는 언리얼 기반 게임 프로젝트에서 캐릭터 관련 로직을 컴포넌트 단위로 구조화하고 리팩토링 하는 작업을 진행했다.

주요 목표는 다음과 같다:

목표

캐릭터 로직의 복잡도 해소
전투 / 아이템 로직의 기능 분리 및 확장성 확보
파티 애니멀즈 스타일의 무기 획득 & 교체 시스템 구현

시스템 분리 구조

1. CombatComponent - 전투 관련 처리 전담

공격 실행, 애니몽타주 재생
데미지 계산, 넉백 처리
GameplayEffect 적용
GAS 태그 기반 공격 불가 상태 (State.Stunned) 대응
AnimNotify에서 호출되는 HandleAttackNotify() 처리

2. ItemComponent - 아이템 처리 전담

월드에서 아이템 획득 & 장착
장착 중인 아이템은 무기 소켓에 부착
새 무기 획득 시 기존 무기는 월드에 드랍 (DropItemToWorld)
아이템 사용 처리 (UseEquippedItem)
드랍 아이템에 Physics 적용 & 충돌 활성화

게임 플레이 스타일 변화

기본 상태: 맨손
월드에서 무기를 획득하면 무기로 공격
새 무기 획득 시 이전 무기는 월드에 물리 오브젝트로 드랍

리팩토링 포인트

CharacterBase 단순화

Attack(), UseItem() 등은 각각 컴포넌트로 위임
CombatComponent와 ItemComponent 모두 BeginPlay 시 Init(this)로 캐릭터 참조 주입
StatusEffect 위젯 처리 (ShowStatusWidget, HideStatusWidget)은 아직 CharacterBase에 유지

블루프린트 호환성 문제 해결

C++에서 RootComponent = ItemMesh 설정했으나, 기존 블루프린트에서는 여전히 SceneComponent가 루트로 잡혀버리는 문제 발생
블루프린트에서 직접 루트 컴포넌트 변경 필요 (또는 새 블루프린트 생성)

마무리

이번 리팩토링을 통해 캐릭터의 전투/아이템 관리 기능을 모듈화하여 유지보수성과 확장성이 대폭 향상되었다.

GAS 기반 스테이터스 처리, 아이템 드랍 및 장착 구조, 클라이언트와 서버 간 상호작용 처리에 대해 좋은 구조적 기반을 마련한 한 주였다.

[level 3] 단어 변환 - 43163

sonsazang — Wed, 2 Apr 2025 17:00:22 +0900

[level 3] 단어 변환 - 43163

https://school.programmers.co.kr/learn/courses/30/lessons/43163

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

처음으로 시도한 3 레벨 문제이지만 사실문제를 다 풀고 나서 3 레벨인걸 확인했습니다.

BFS 원리를 이해하고 있으면 생각보다 쉽게 접근이 가능했습니다.

[level 3] 단어 변환 - 43163 풀이코드

#include<bits/stdc++.h>
using namespace std;

string s;
int cnt;
int solution(string begin, string target, vector<string> words) {
    int answer = 0;
    
    bool isExist = false;
    for (string i : words) 
    {
        if (i == target) 
        {
            isExist = true;
            break;
        }
    }
    
    if (!isExist) return 0;
    
    queue<pair<string, int>> q;
    q.push({begin, 0});
    while(q.size())
    {
        tie(s, cnt) = q.front(); q.pop();
        for (int i = 0; i < words.size(); i++) 
        {
            int temp = 0;
            for (int j = 0; j < s.length(); j++)
            {
                if (s[j] != words[i][j]) temp++;
                if (temp > 1) break;
            }
            
            if (temp == 1)
            {
                if (words[i] == target) return cnt + 1;
                else q.push({words[i], cnt + 1});
            }
        }
    }
    
    return answer;
}