종류

Canvas

새 UI 오브젝트를 만들 때 반드시 UI의 부모 오브젝트에 이 Canvas가 있어야한다. 캔버스 없이 그림 없듯 UI도 마찬가지이다. 따라서 Rect Transform은 Scene 기준이 아닌 Canvas의 중앙이 좌표의 기준이 된다.

Text

흔히 알고 있는 로 제목이나 내용, 설명, 등을 쓸 때 사용한다. 처음에 Import TMP를 해야 텍스트가 표시된다.

Inspector

Image

png, jpg 등 우리가 흔히 알고 있는 이미지로 스프라이트를 담고 있어서 Texture2D를 사용한다면 스프라이트 변환 과정이 필요하다. 프로젝트 안에 이미지를 넣었다면 Texture Type을 스프라이트로 변환 후 사용해야한다.

Raw Image

위와 같이 표시는 이미지로 표시되지만, 안에 담고 있는 내용은 스프라이트가 아닌 Texture를 담고 있어서 변환 과정이 따로 필요 없다. 따라서 웹에서 이미지를 받아오는 스크립트를 사용하더라도 바로 Raw Image 텍스처에 넣어 표시할 수 있다.

Button

버튼은 클릭을 통해 스크립트의 특정 메서드를 호출하여 다른 오브젝트와 상호작용 할 수 있는 UI다.

Inspector

• Interactable: 체크를 하면 버튼을 누를 수 있는 상태가 된다. 해제하면 버튼은 반투명 상태가 되고 비활성화되어 누를 수 없다.
• Transition: 버튼이 시각적으로 어떻게 변하는지 정할 수 있는 Property다.
• Navigation: 컨트롤 순서를 결정하는 Property다.
• OnClick(): 버튼을 클릭하면 실행되는 스크립트의 특정 함수를 지정할 수 있다.

Toggle

클릭시 체크 혹은 체크 해제를 하는 토글 Object다. 토글 체크/체크 해제시 일어날 이벤트를 스크립트로 연결할 수 있다.

Inspector

Slider

슬라이더는 값에 따라 길이가 변하는 특성을 가지 Object로 볼륨, 등 수치로 된 값을 조절하거나 HP, 경험치 등을 표시하는데 유용하게 사용할 수 있다.

Scrollbar

마우스 휠키를 굴리거나 스크롤바를 사용해서 화면을 이동시킬 수 있다. 상위 계층 Object를 만든 다음 Scroll Rect를 추가한 뒤, 다른 UI를 이 계층에 속하도록 하여 스크롤이 되도록 만들 수 있다. 혹은 후술할 Scroll View를 사용하여 손쉽게 스크롤 바에 연결된 UI를 만들 수도 있다.

Inspector

• Interactable: 체크를 하면 스크롤바가 외부 입력(마우스 스크롤, 클릭 후 끌어내리기, 키보드 방향키 등)과 상호 작용이 가능하다.
• Transition: 시각적으로 어떻게 반응하는지 색을 결정한다.
• Navigation: 컨트롤 순서를 결정한다. 어떤 Object에 커서가 있을 때, 혹은 클릭했을 때 어떤 스크롤 바를 조절할지 결정한다. 보통 Automatic을 사용한다.
• Fill Rect: 컨트롤 배경 영역에 사용하는 그래픽 에셋을 지정할 수 있다.
• Handle Rect: 컨트롤의 슬라이딩 핸들(움직이는 부분) 부분에 사용하는 그래픽 에셋을 지정할 수 있다.
• Direction: 핸들을 드래그할 때 스크롤바의 값이 증가하는 방향이다. Left To Right, Right To Left, Bottom To Top, Top To Bottom 옵션이 있다.
• Value: 스크롤바의 초기 포지션 값으로, 범위는 0.0 ~ 1.0이다. 스크롤을 하면 이 값이 조절된다.
• Size: 스크롤바 핸들의 상대적 크기로 범위는 0.0 ~ 1.0이다.
• Number Of Steps: 스크롤바가 허용하는 스크롤 포지션을 나타내는 정수 값이다. 이 값이 0이면 제한이 없이 부드럽게 이동이 가능하고 0을 초과할 경우 스크롤바가 존재할 수 있는 칸이 나뉘게 된다.

Scroll View

일반적으로 스크롤 사각 영역은 마스크와 함께 사용하여 스크롤 가능한 콘텐츠가 보이는 스크롤 뷰를 생성한다.

Scroll Rect Inspector

• Content: 스크롤될 UI 요소의 트랜스폼을 선택할 수 있다.
• Horizontal: 수평 스크롤링을 활성화한다.
• Vertical: 수직 스크롤링을 활성화한다.
• Movement Type: Unrestricted, Elastic이나 Clamped 옵션을 사용하면 콘텐츠가 스크롤 사각 영역 범위 내에서 머물게 됩니다. Elastic 모드를 사용하면 콘텐츠가 스크롤 사각 영역 가장자리에 닿으면 튕긴다.(오버스크롤 효과)
• Elasticity: Elastic 모드에서 사용할 탄성 정도다. 높을 수록 더욱 통통 튕긴다.
• Inertia: 이 관성 옵션이 체크되면 드래그 후 포인터를 떼더라도 콘텐츠가 계속 움직이게 된다. 이를 사용하지 않은 경우, 드래그해야만 콘텐츠가 움직이게 된다.
• Deceleration Rate: 관성이 설정되면 감속률은 콘텐츠가 얼마나 빠르게 정지하는지 결정한다. 이 값이 0이면 스크롤 하지 않을 경우 바로 멈추고, 1이면 콘텐츠는 느려지지 않고 계속 움직이게 된다(등속 운동).
• Scroll Sensitivity: 스크롤 휠과 트랙 패드 스크롤의 민감도
• Viewport: Content의 부모인 Viewport Rect Transform을 선택할 수 있다.
• Horizontal/Vertical Scrollbar: Horizontal/Vertical를 체크한 경우 수평 스크롤바를 선택한다.
• Visibility: 스크롤바를 사용하지 않는 경우 자동으로 숨길지, 선택적으로 뷰포트도 확장할지 결정한다.
• Spacing: 스크롤바와 뷰포트 간 공간을 조절하는 수치다.

이벤트

• On Value Changed: 스크롤 정도에 따라 호출할 UnityEvent 형식 스크립트를 지정 가능하다.

Dropdown

화면에 다 담을 수없어서 평상시에는 숨겨뒀다가 누르면 목록이 쫙 나와서 선택할 수 있게 해주는 UI다. 드롭다운 내용(Template)에 대해 스크롤이 가능하도록 기본적으로 Scroll Rect가 추가되어있어 이에 관한 건 위의 Scrollbar의 내용과 동일하다.

Inspector

• Interactable: 체크를 하면 드롭다운 박스가 외부 입력(클릭, 스크롤, 키보드 방향키로 선택 등)과 상호 작용이 가능하다.
• Transition: 시각적으로 어떻게 반응하는지 색을 결정한다.
• Navigation: 컨트롤 순서를 결정한다. 어떤 Object에 커서가 있을 때, 혹은 클릭했을 때 드롭다운을 펼칠지/접을지 등을 결정한다. 보통 Automatic을 사용한다.
• Template: 드롭다운 리스트 탬플릿의 Object 컴포넌트다. 보통 초기에 생성된 Template가 들어가있다.
• Caption Text: 현재 선택된 옵션의 텍스트를 보여줄 Text 컴포넌트다.
• Caption Image: 현재 선택된 옵션의 이미지를 보여줄 Image 컴포넌트다.
• Item Text: 항목 텍스트를 보여줄 Text 컴포넌트다.
• Item Image: 항목 이미지를 유지하는 Image 컴포넌트다.
• Value: 현재 선택된 옵션의 식별 번호다. 0은 첫 번째 옵션이고 1은 두 번째 이런 식...
• Options: 사용 가능한 옵션의 리스트다. 각 옵션별로 텍스트 문자열과 이미지를 지정할 수 있다.

이벤트

• On Value Changed: Value에 변화가 있을 때 호출할 UnityEvent 형식 스크립트를 지정 가능하다.

Input Field

입력 필드(Input Field) 를 통해 텍스트 박스 안의 텍스트를 수정할 수 있다. 다른 상호작용하는 컨트롤과 비슷하게, 그 자체로는 시각적 UI 요소가 아니므로 한 개 이상의 시각적 UI 요소와 결합해야만 그 결과를 확인할 수 있다.

빈 입력 필드

텍스트가 입력된 입력 필드

Inspector

• Interactable: 입력 필드에 텍스트를 입력할 수 있는지 체크하거나 비활성화한다.
• Transition: 일반, 강조, 눌렸을 때, 혹은 비활성화 됐을 때 텍스트 필드의 색과 그래픽을 설정한할 수다.
• Navigation: 컨트롤 순서를 결정한다. 이 입력 필드를 눌렀을 때 어떤 다른 UI가 활성화 될지 선택할 수 있다. 보통 자동으로 둔다.
• TextComponent: 입력할 텍스트의 에셋을 설정할 수 있다.
• Text: 시작 값으로, 수정 이전 필드에 있는 초기 텍스트를 의미한다.
• Character Limit: 입력 필드에 들어갈 수 있는 최대 문자 수를 지정할 수 있다.
• Content Type: 유저가 이 입력 필드에 어떤 텍스트를 입력할 수 있는지 정할 수 있다.
  • Standard: 어떤 글자든 입력이 가능하다.
  • Autocorrected: 유저가 입력할 때 오타를 교정하거나 모르는 단어가 나오면 대체 단어를 제안해준다.
  • Integer Number: 하나의 정수만 입력할 수 있다.
  • Decimal Number: 하나의 실수만 입력할 수 있다.
  • Alphanumeric: 글자와 숫자를 입력할 수 있고, 기호는 입력할 수 없다.
  • Name: 영어로 글자를 입력할 경우 첫 문자를 대문자로 변환한다. 다만 유저가 지우고 강제로 소문자로 쓸 수 있게 허용한다.
  • Email Address: 글자, 숫자와 반드시 한 개의 기호를 사용하여 입력할 수 있다.
  • Password: 입력한 글자를 별 표시로 가린다.
  • Pin: Password와 같으나 숫자만 입력할 수 있다.
  • Custom: 위의 옵션 외에 다양한 제한을 추가하여 조건을 만들 수 있다.
• Line Type: 몇 줄을 입력할 수 있는지 제한할 수 있다.
  • Single Line: 한 줄만 쓸 수 있다.
  • Multi Line Submit: 여러 줄 쓸 수 있지만 엔터키를 누르면 제출된다.
  • Multi Line Newline: 엔터를 눌러 여러 줄을 쓸 수 있다.
• Placeholder: Input Field 가 비어있음을 알리는 선택적으로 사용할 수 있는 ‘빈’ Graphic이다. Input Field 가 선택된 경우, 즉 포커스가 있는 경우에도 이 ‘빈’ 그래픽은 계속해서 표시된다. “텍스트를 입력해야 합니다” 등의 예가 있다.
• Caret Blink Rate: 텍스트 입력 준비를 표시하는 커서가 얼마나 자주 깜빡이는지 조절한다.
• Selection Color: 텍스트 선택 부분의 배경 컬러다.
• Hide Mobile Input (iOS only): Hides the native input field attached to the onscreen keyboard on mobile devices. Note that this only works on iOS devices.

이벤트

• On Value Change: 입력 필드의 텍스트 콘텐츠가 변경된 경우 호출되는 이벤트다. 현재 텍스트 콘텐츠를 string type의 dynamic parameter로 스크립트에 넘길 수 있다.
• End Edit: 사용자가 '제출'하거나 입력 필드 포커스가 제거되도록 다른 곳을 클릭하여 사용자가 텍스트 콘텐츠 수정을 마친 경우 호출되는 이벤트다. 현재 텍스트 콘텐츠를 string type의 dynamic parameter로 스크립트에 넘길 수 있다.