[유니티 에셋 추천] Odin Inspector and Serializer

 

유니티 에셋 스토어 스프링 세일이 시작됐다.

6월 2일 00시까지 진행한다고 하니 필요한게 있다면 미리미리 사두는것이 좋을 것 같다.

 

---

Odin Inspector and Serializer

 

 

이 에셋은 요약해서 간단하게 말하자면 인스펙터를 쉽고 간단하게 꾸밀 수 있다.

 

회사에서 쓰는 에셋중에 하나인데,

첫 인상은  그냥 협업을 위해서만 사용할만한 에셋으로 생각했다.

예를들면 같은 개발자들끼리 인스펙터를 좀 더 깔끔하게 관리한다던지, 아니면 기획자들이 좀 더 보기 편하게 한다던지..

하지만 써보니 개발을 진행할때 개발을 위한 에디터를 만들때나 기능을 구현할때도 도움이 많이 됐다.

 

내 개인 계정에도 있으면 좋겠다고 생각은 했었는데,

개인이 사기에는.. 55달러라는 요즘 환율로 7만원이 넘는 가격이라 구매하기가 망설여졌다.

 

 

하지만 이번 세일에 50% 할인을 하니 원하셨던 분들은 한번 구매를 고려해보셔도 좋을 것 같다.

 

---

사용법

 

오딘 인스펙터는 기본적으로 공식 사이트에 사진과 코드로 설명이 참 잘되어있다.

 

https://odininspector.com/documentation

Odin Inspector and Serializer | Improve your workflow in Unity

 

그리고 굳이 사이트에 들어가지 않더라도, 유니티 엔진내에서도 사용법을 제공한다.

 

Tools - Odin - Inspector - Attribute Overview로 들어가보자.

 

여러가지 Attribute들을 코드와 그 코드를 입력했을때 인스펙터에 어떻게 표현되는지까지 확인이 가능하다.

 

이어서 내가 나름 자주 사용했던 Attribute들을 소개한다.

---

Attribute

 

애트리뷰트는 코드에 대한 부가 정보를 기록하고 읽을 수 있는 기능이다.

주석이 사람이 읽고쓰는 정보라면, 애트리뷰트는 사람이 작성하고 컴퓨터가 읽는다.

 

오딘 인스펙터의 애트리뷰트들을 사용하기전에, Sirenix.OdinInspector 네임스페이스를 Using 해줘야 한다.

 

---

Title & InfoBox & DetailedInfoBox

 

    [Title("InfoBox")]
    [InfoBox("간략 설명")]
    public int a;

    [DetailedInfoBox("디테일 인포박스 간략 설명", "디테일한 설명.\n디테일한 설명.\n디테일한 설명.")]
    public int b;

 

[Title]

 

- 유니티에는 Header라는 비슷한 Attribute가 있지만, Title은 구분선까지 정확하게 타이틀을 구분해준다.

 

[InfoBox]

 

- 해당 변수 위에 간단한 정보 박스를 만든다.

 

[DetailedInfoBox]

 

- InfoBox와 비슷하지만, 클릭으로 인포박스를 늘리고 줄일수가 있어서 디테일한 표기가 가능하다.

 

---

Propertyspace

 

    [Title("Space")]
    [Space]
    public int Space1;
    [PropertySpace(3.0f,10.0f)]
    public int space2;
    public int space3;

 

유니티에는 Space라는 간격을 띄우는 애트리뷰트가 있지만,

오딘 인스펙터의 Propertyspace를 활용하면 앞 뒤 간격을 정할 수 있다.

 

---

ReadOnly

    [Title("Read Only")]
    [ReadOnly]
    public string readOnlyString = "이 문자열은 읽기만 가능합니다.";

 

인스펙터의 변수를 수정이 불가능하고 읽기만 가능하게 만들어준다.

 

---

ValueDropdown

 

    [Title("ValueDropDown")]
    [ValueDropdown("DropDownNum")]
    public int dropDown;
    private int[] DropDownNum = new int[] { 1, 2, 3, 4, 5 };

 

이런식으로 변수에 드롭다운 값들을 정해놓고 선택할 수 있다.

 

---

Searchable

 

    [Title("Searchable")]
    [Searchable]
    public List<string> searchString = new List<string>()
    {
        "바나나","사과","메론"
    };

 

인스펙터에서 변수를 검색 가능하게 만들어준다.

 

---

EnumPaging & EnumToggleButtons

 

    [Title("Enum")]
    [EnumPaging]
    public TestEnum enumPaging;
    [EnumToggleButtons]
    public TestEnum enumToggleButtons;

 

Enum 변수를 선언하고, 해당 애트리뷰트만 달아주면 인스펙터에서 드롭다운 메뉴가 표시되게도 할 수 있고,

토글 버튼처럼 누르게 할 수도 있다.

 

---

TableList

 

일단 테스트를 위해 클래스 하나를 만들어주었다.

 

public class OdinClass
{
    public Sprite picture;
    public string name;
    public int age;
    public float height;
}

 

이 클래스를 그냥 인스펙터에 띄우면 변수가 하나씩 뜨겠지만,

 

    [Title("TableList")]
    [TableList]
    public List<OdinClass> testClass = new List<OdinClass>();

 

이런식으로 TableList 애트리뷰트를 달아준다면..

 

 

아래처럼 깔끔한 테이블 모양으로 만들 수있다.

이제 이 테이블을 좀 더 깔끔하게 만들어보자.

 

---

PreviewField

 

    [PreviewField(50,ObjectFieldAlignment.Center)]
    public Sprite picture;

위에 만든 클래스에서 picture 변수에 PreviewField 애트리뷰트를 선언 해주었다.

첫번째 인자값은 높이, 두번째는 정렬 위치이다.

 

 

이런식으로 깔끔하게 미리보는 창이 생겼다.

하지만 옆에 변수 입력 창들의 높이가 안맞는게 뭔가 안예쁘다.

 

VerticalGroup

 

    [VerticalGroup("property")]
    public string name;
    [VerticalGroup("property")]
    public int age;
    [VerticalGroup("property")]
    public float height;

 

버티컬 그룹을 이용하려면 같이 그룹을 묶을 변수들위에 그룹 이름을 정해서 그 이름을 입력해주면 된다.

 

 

이런식으로 변수가 Property라는 이름 밑으로 그룹이 되어 묶였다.

 

---

조건들 - DisableIf & EnableIf & HideIf & ShowIf

 

   public bool isDisable;

    [DisableIf("isDisable",true)]
    public string disableText;

    public bool isEnable;

    [EnableIf("isEnable", true)]
    public string enableText;

    public bool isHide;

    [HideIf("isHide", true)]
    public string hideText;

    public bool isShow;

    [ShowIf("isShow", true)]
    public string showText;

 

이 애트리뷰트들은 전부 적어놓은 변수나 조건이 뒤에 적어둔 조건과 부합할때 해당 기능을 작동시킨다.

 

 

[DisableIf]

 

 

- 조건에 부합하면 그 변수를 수정 불가능하게 만들어준다.

 

 

[EnableIf]

 

 

- Disable과 반대로 조건에 부합하면 그 변수를 수정가능하게 만들어준다.

 

 

[HideIf]

 

 

- 조건에 부합하면 그 변수를 숨긴다.

 

 

[ShowIf]

 

 

- HideIf 와 반대로 조건에 부합하면 그 변수를 보여준다.

 

 

[여러조건 확인하기]

 

이러한 조건들을 확인할때 한가지 조건이 아닌 여러개의 조건을 확인하고 싶을때가 있는데 , 

이 경우에는 변수 대신에 @와 조건을 적어주면 된다.

 

    [ShowIf("@isShow == true && isEnable == true",true)]
    public string showAndEnable;

 

isShow 변수와 isEnable 변수가 전부 true일때 showAndEnable 변수를 보여주라는 코드를 작성했다.

 

이렇게 한가지 조건에만 부합할때는 나오지 않지만,

 

조건에 모두 부합하는 순간 맨 아래 Show And Enable 변수가 나온것을 볼 수 있다.

 

---

BoxGroup

 

    [Title("그룹")]
    public int anotherGroup1;
    [BoxGroup("Test")]
    public int boxgroup1;
    public int anotherGroup2;
    [BoxGroup("Test")]
    public int boxgroup2;

 

그룹은 너무 많아서 BoxGroup을 대표적으로 소개한다.

아까 VerticalGroup을 썼던것처럼 묶고싶은 변수의 위에 BoxGroup 애트리뷰트와 그룹 이름을 입력해주면 된다.

이렇게 뒤죽박죽 변수를 섞어 놓더라도,

 

 

기가 막히게 그룹을 묶어준다.

 

---

숫자 - MinValue, MaxValue, MinMaxSlider

 

    [Title("Numbers")]

    [MinValue(0)]
    public int min;

    [MaxValue(10)]
    public int max;

    [MinMaxSlider(0f, 10f)]
    public Vector2 slider;

 

[MinValue]

 

- 변수의 최소값을 정할 수 있다.

 

[MaxValue]

 

- 변수의 최대값을 정할 수 있다.

 

[MinMaxSlider]

 

- 최소값과 최대값을 정해서 슬라이더로 수정이 가능하게 해준다.

 

---

AssetList

 

에셋 리스트는 폴더안에 파일들을 전부 가져와서 고를 수 있게 해주는 기능이다.

물론 변수의 자료형과 파일이 맞아야 한다.

 

    [Title("AssetList")]

    [AssetList(Path = "/Images")]
    [PreviewField(100, ObjectFieldAlignment.Center)]
    public Sprite assetList;

 

입력할때는 가져올 폴더를 입력해주어야 하는데, 저렇게 입력하면 Assets폴더안에있는 Images 폴더가 된다.

 

 

이런식으로 파일을 불러와서 바로 확인이 가능하다.

 

---

Button

 

    [Title("Button")]
    [Button(ButtonSizes.Large),GUIColor(0,1,0)]
    public void ButtonTest()
    {
        Debug.Log("버튼 테스트!");
    }

 

인스펙터에 버튼을 만들어준다.

함수 위에다가 적어주면 눌렀을때 해당 함수를 호출한다.

인자값으로는 사이즈와 GUI의 색깔을 지정해주었다.

 

 

잘 작동한다.

 

---

Dictionary, Queue, Stack을 인스펙터에서..

 

유니티의 기본 인스펙터는 딕셔너리,큐,스택을 인스펙터에서 보여주지 않지만,

오딘 인스펙터를 사용하면 쉽게 가능해진다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Sirenix.OdinInspector;

public class OdinTest2 : SerializedMonoBehaviour
{
    public Dictionary<int, GameObject> testDic;
    public Queue<int> testQueue;
    public Stack<int> testStack;

    [Button("큐 삽입", ButtonSizes.Large)]
    public void PushQueue()
    {
        testQueue.Enqueue(0);
    }

    [Button("큐 꺼내기", ButtonSizes.Large)]
    public void PopQueue()
    {
        if(testQueue.Count > 0)
            testQueue.Dequeue();
    }

    [Button("스택 삽입", ButtonSizes.Large)]
    public void Pushstack()
    {
        testStack.Push(0);
    }

    [Button("스택 꺼내기",ButtonSizes.Large)]
    public void PopStack()
    {
        if (testStack.Count > 0)
            testStack.Pop();
    }

}

 

MonoBehaviour가 아닌 SerializedMonoBehaviour를 상속받아주자.

그리고 여러가지 기능들을 만들어 주었다.

 

 

---

윈도우 에디터 만들기

 

해보신 분들은 아시겠지만 그냥 유니티에서 제공하는 기능으로 에디터 작업을 하려면 상당히 귀찮다.

하지만 오딘 인스펙터는 이 작업도 쉽게 만들어준다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Sirenix.OdinInspector;
using Sirenix.OdinInspector.Editor;
using UnityEditor;


public class OdinEditor : OdinEditorWindow
{
    public int test;

    [Button("윈도우 테스트 버튼",ButtonSizes.Large)]
    public void FuncTest()
    {
        Debug.Log("윈도우 버튼 입력 " + test);
    }


    [MenuItem("오딘 윈도우 에디터 테스트/오딘 윈도우")]
    private static void OpenWindow()
    {
        GetWindow<OdinEditor>().Show();
    }
}

 

해당 스크립트를 작성해서 Editor폴더에 넣어주었다.

Sirenix.OdinInspector,Editor를  using 해주어야하고, 

MenuItem 애트리뷰트를 이용해서 유니티 엔진의 상단에서 선택 가능하게 만들어주었다.

 

 

 

버튼과 변수를 윈도우 에디터에 띄우는 일도 상당히 간편하다.

 

 

 

버튼의 기능도 잘 작동한다.

 

---

최대한 사용한것들 위주로 설명을 해봤는데, 오딘 인스펙터는 상당히 많은양의 기능들을 제공한다.

나는 단순하게 사용했지만 이걸로 데이터베이스 윈도우를 만들거나 여러 기능테스트를 하는것도 가능하다..

 

 

유니티에서 검증된 솔루션이고, 에셋을 한번 훑어볼때도 늘 상위권에 있는 에셋이기 때문에 개발을 자주 하시는 분이라면 이번 기회에 하나쯤 구비해두시는것도 나쁘지 않을것 같다.