머티리얼 그래프 정리하기

코멘트, 경유 등의 전략을 사용하여 머티리얼 그래프를 정리하고, 읽고 편집하기 쉽게 유지하는 방법입니다.

Choose your operating system:

Windows

macOS

Linux

머티리얼이 복잡해지면, 노드 그래프를 읽고 상호작용하기가 어려워질 수 있습니다. 그래프가 복잡하고 정리되어 있지 않으면 편집 속도가 떨어지며, 최초 제작자에게서 머리티얼을 넘겨 받은 다른 아티스트나 개발자가 이해하기 어려울 수 있습니다.

머티리얼 에디터 정리 툴

언리얼 엔진에는 머티리얼 그래프를 체계적으로 정리할 수 있는 툴이 몇 가지 있습니다.

  1. 코멘트 생성

  2. 경유 노드

  3. 이름 경유

  4. 정렬 및 분포

  5. 노드 접기

코멘트 생성

코멘트는 머티리얼 그래프의 가독성을 가장 쉽게 향상시킬 수 있는 방법입니다. 이 머티리얼이 매우 복잡한 것은 아니지만, 주석을 달지 않으면 다음에 전달받을 아티스트가 그래프를 해석하는 데 상당한 시간이 소요될 것입니다.

코멘트가 있는 머티리얼 그래프 네트워크와 코멘트가 없는 머티리얼 그래프 네트워크

슬라이더를 드래그해서 똑같은 머티리얼에 코멘트로 주석이 달린 모습을 확인해 보세요. 각 그룹의 노드가 어떤 용도인지 라벨을 통해 바로 확인할 수 있습니다.

머티리얼에 코멘트를 추가하는 방법은 두 가지입니다.

노드 설명

노드 그래프의 각 머티리얼 표현식이나 함수에 코멘트나 설명을 추가할 수 있습니다.

  1. 머티리얼 그래프의 노드 위에 마우스 포인터를 올립니다.

  2. 코멘트 버블 토글(Toggle Comment Bubble) 아이콘을 좌클릭 합니다.

    코멘트 버블 토글

  3. 필드에 코멘트를 입력합니다.

    코멘트 입력

  4. 머티리얼 그래프를 줌 인 또는 줌 아웃할 때 코멘트가 계속 보이도록 하려면 핀 아이콘을 클릭합니다. 이렇게 하면 머티리얼 그래프를 줌 아웃해도 코멘트가 읽을 수 있는 크기로 유지됩니다. 코멘트 버블 토글 아이콘을 다시 클릭하면 코멘트를 숨길 수 있습니다.

    코멘트 고정

코멘트 버블에 입력하는 모든 내용은 해당 노드 디테일(Details) 패널의 설명(Desc) 필드에도 나타납니다. 이 설명은 코멘트 버블을 숨겨도 볼 수 있습니다.

노드 설명 박스

코멘트 박스

코멘트 박스를 사용하여 관련 있는 노드끼리 그룹으로 묶을 수 있습니다.

UV 타일링 코멘트 박스

  1. 코멘트 박스에 넣을 노드를 전부 선택합니다.

  2. C 를 눌러 선택한 노드 주변에 코멘트 박스를 생성합니다.

  3. 헤더 필드에 이름을 입력합니다.

코멘트 박스를 사용하면 박스 안의 모든 노드를 하나의 그룹으로 묶어 이동시킬 수 있습니다. 헤더 바를 좌클릭하고 드래그하여 코멘트 박스를 옮깁니다.

  • 코멘트 박스에서 노드를 드래그하여 추가하거나 제거할 수 있습니다.

  • 변이나 모서리를 드래그하여 코멘트 박스의 크기를 조절합니다.

  • 코멘트 박스 안에 다른 코멘트 박스를 넣을 수 있습니다.

코멘트 색

코멘트 박스의 색 프로퍼티는 디테일 패널에 있습니다.

  1. 헤더 바 를 클릭하여 코멘트 박스의 디테일 프로퍼티에 액세스합니다.

    코멘트 헤더 바

  2. 코멘트 색(Comment Color) 스와치를 클릭하고 색 선택 툴(Color Picker) 다이얼로그에서 새로운 색을 선택합니다.

    코멘트 색 선택 툴

경유 노드

경유 노드는 두 머티리얼 표현식 노드 간의 와이어 경로를 수정하는 하나의 방법입니다. 경유 노드로 와이어를 분할하여 여러 개의 입력에 연결할 수도 있습니다.

경유 노드를 추가하려면 와이어에서 아무 곳이나 더블 클릭합니다.

와이어 경유 핀 추가

와이어 경로를 수정하려면 커서에 이동 아이콘이 나타날 때까지 경유 노드 위에 마우스를 올려 둡니다.

케이블 경유 핀 이동

노드를 좌클릭하고 새 위치로 드래그합니다. 노드 주위의 와이어가 기존 경로와 겹치면 경유를 통해 해당 와이어의 방향을 변경할 수 있습니다.

새 케이블 경로

이 비디오에서는 경유 노드로 와이어를 분할해 3개의 다운스트림 입력에 연결했습니다.

이름 경유

이름 경유 를 사용하면 와이어 연결을 제거하는 대신, 입력 노드와 출력 노드를 통해 정보를 라우팅하여 머티리얼 그래프를 단순화할 수 있습니다. 이름 경유는 머티리얼 그래프의 한 영역에서 다른 영역으로 연결하는 터널이나 포털이라고 할 수 있습니다.

예를 들면, 러프니스 맵에 연결된 이 작은 노드 클러스터는 머티리얼 그래프를 가로지르는 비교적 긴 와이어를 생성합니다. 이름 경유를 사용하면 데이터 흐름에 영향을 주지 않고도 와이어를 제거할 수 있습니다.

불필요한 케이블

이름 경유 생성

  1. 와이어를 더블 클릭해 경유 노드를 추가합니다.

    이름 경유 핀

  2. 노드를 우클릭하고 컨텍스트 메뉴에서 이름을 가진 경유노드로 변환(Convert to Named Reroute) 을 선택합니다.

    이름 경유로 변환

  3. 와이어 연결이 사라지고 이름 경유 두 개가 연결의 시작 지점과 종료 지점에 생성됩니다. 이름 경유는 터널처럼 나란히 놓여 있습니다. 데이터는 첫 번째 노드로 흘러 들어가 두 번째 노드로 나오며, 이를 이름 경유 사용 노드 라고 합니다.

    이름 경유 노드

경유의 첫 번째 노드를 이름 경유 선언(Named Reroute Declaration) 이라고 합니다. 디테일 패널에서 노드를 설명할 수 있는 고유한 이름을 지정하는 것이 매우 중요합니다.

경유 선언 설명

이름 경유 선언 노드를 선택하고 이름(Name) 필드에 설명을 입력합니다. 노드 컬러(Node Color) 프로퍼티를 변경하여 경유에 색을 입힐 수도 있습니다.

이름 경유 출력 노드 는 이후에 여러 개의 다운스트림 입력으로 전달하거나 복제하여 여러 번 사용할 수 있습니다.

예를 들면, 글로벌 UV 컨트롤을 세 개의 다운스트림 입력으로 보내는 데 경유 노드를 사용했었습니다.

3중 경유 핀

이 핀을 이름 경유로 변환하면 한 개가 아닌 세 개의 사용(Usage) 노드가 스폰됩니다.

세 개의 사용 노드

이제 글로벌 UV 컨트롤(Global UV Controls) 코멘트 박스 안의 모든 요소가 나머지 노드 네트워크에서 물리적으로 분리됩니다. 해당 코멘트 박스를 그래프에서 어디로 옮기더라도 데이터는 여전히 이름 경유를 통과해 알베도(Albedo) , 러프니스(Roughness)베이스 노멀(Base Normal) UV로 흐릅니다.

이름 경유 데이터 흐름

원한다면 이름 경유 출력 노드 한 개를 사용해 세 개의 UV 입력에 전부 연결할 수도 있습니다.

이름 경유 한 개

이름 경유 사용 노드 추가하기

우클릭 메뉴 또는 팔레트(Palette) 에서 이름 경유 사용 노드를 추가로 만들 수 있습니다. **

머티리얼의 이름 경유는 메뉴 최상단에 나타납니다. 경유 노드를 선택하고 Ctrl+D 를 눌러 기존 경유 노드를 복제할 수도 있습니다.

팔레트의 이름 경유

기존 경유로 다시 변환

와이어 연결을 보는 것이 도움이 될 것 같으면, 이름 경유를 이름이 없는 경유 핀으로 다시 변환할 수 있습니다.

러프니스 이름 경유가 기존 경유 핀으로 다시 변환됩니다.

  1. 이름 경유 선언 또는 사용 노드 둘 중 하나를 우클릭 합니다.

  2. 메뉴에서 경유로 변환(Convert to Reroute) 을 선택합니다.

    경유로 다시 변환

  3. 와이어가 복원되고 이름이 없는 경유 핀이 남겨집니다. 핀이 필요하지 않다면 핀을 선택하고 Delete 를 눌러 삭제하면 됩니다.

    경유 핀 삭제

경유 선택 옵션

이름 경유 선택 옵션을 사용하여 머티리얼 그래프에서 해당 경유 노드를 찾아서 선택 할 수 있습니다.

이름 경유 선언 노드를 우클릭하고 이름 경유 사용 선택 을 클릭해 해당 경유의 모든 다운스트림 출력 노드를 선택합니다.

경유 사용 선택

이름 경유 사용 노드를 우클릭하고 이름 경유 선언 선택 을 클릭하여 해당 경유의 업스트림 원본 노드를 선택합니다.

경유 선언 선택

정렬 및 분포

머티리얼 에디터의 우클릭 메뉴에는 머티리얼 그래프의 노드를 정렬 및 분포시키는 옵션이 몇 가지 있습니다.

  1. 정렬할 노드를 두 개 이상 선택합니다.

    여러 개의 노드 선택

  2. 노드 중 하나를 우클릭 하고 정렬(Alignment) 하위 메뉴를 엽니다.

    정렬 옵션

  3. 옵션 중 하나를 선택하여 선택된 노드를 정렬하거나 분포시킵니다.

    왼쪽 정렬된 노드

이 예시에서는 좌측 정렬(Align Left) 을 사용해 선택한 노드의 좌측 모서리에 맞춰 정렬했습니다. 그런 다음 세로로 분포(Distribute Vertically) 를 사용해 세로축에 노드를 일정한 간격으로 배치했습니다.

정렬

정렬 메뉴의 옵션을 사용하면 6개의 서로 다른 축에 맞춰서 노드를 정렬할 수 있습니다. 두 노드 사이를 연결하는 와이어를 정돈할 수도 있습니다.

옵션

결과

바로가기

상단 정렬

선택된 노드의 상단 모서리에 정렬합니다.

Shift+W

가운데 정렬

선택된 노드의 세로 가운데에 정렬합니다.

Alt+Shift+W

하단 정렬

선택된 노드의 하단 모서리에 정렬합니다.

Shift+S

좌측 정렬

선택된 노드의 좌측 모서리에 정렬합니다.

Shift+A

중앙 정렬

선택된 노드의 가로 중앙에 정렬합니다.

Alt+Shift+S

우측 정렬

선택된 노드의 우측 모서리에 정렬합니다.

Shift+D

연결 정돈

두 노드 사이의 와이어를 완벽히 수평으로 정돈합니다.

Q

분포

분포(Distribution) 옵션을 사용하면 선택된 노드를 동일한 간격으로 가로축이나 세로축에 배치할 수 있습니다.

옵션

결과

가로 분포

선택된 노드의 가로 간격이 동일하도록 배치합니다.

세로 분포

선택된 노드의 세로 간격이 동일하도록 배치합니다.

노드 접기

노드 접기(Collapse Nodes) 옵션을 사용해 여러 개의 머티리얼 표현식 또는 함수를 하나의 노드로 압축할 수 있습니다.

노드를 접어야 하는 이유가 몇 가지 있습니다.

  • 관련된 노드로 구성된 큰 그룹이 지나치게 복잡해지면 노드를 접어서 그래프에 사용할 공간을 확보하고 머티리얼의 가독성을 향상시킬 수 있습니다.

  • 두 번째로, 노드 세트가 매우 흔하거나 반복적으로 사용되면 용도를 이해하기 위해 전체 노드 네트워크를 볼 필요가 없습니다.

예를 들어, 아래의 디테일 노멀 타일링(Detail Normal Tiling) 노드는 익숙한 방법을 사용하여 텍스처의 스케일을 제어합니다.

디테일 노멀 타일링

그래프를 단순화하려면 디테일 노멀 타일링 박스 안의 모든 요소를 접으면 됩니다.

노드를 접는 방법

  1. 접을 머티리얼 노드를 전부 선택합니다.

    노드 그룹 선택

  2. . 노드 중 하나를 우클릭 하고 컨텍스트 메뉴에서 노드 접기 를 선택합니다.

    노드 접기

  3. 선택된 머티리얼 표현식이 기본 이름이 접힌 노드 로 지정된 하나의 노드로 교체됩니다.

    접힌 노드

  4. 노드 상단의 이름을 좌클릭 한 뒤 노드를 설명할 수 있는 이름을 필드에 입력합니다.

    노드 이름 변경

  5. 그래프의 디테일 노멀 섹션이 매우 단순해집니다.

    단순화된 디테일 노멀

접힌 노드 편집하기

머티리얼 그래프는 전혀 바뀌지 않습니다. 접힌 노드는 단순히 노드 네트워크의 컨테이너 역할을 합니다.

접힌 노드 위에 마우스를 올리면 안에 저장된 머티리얼 그래프의 프리뷰를 확인할 수 있습니다.

프리뷰 호버

접힌 노드를 더블 클릭 하여 콘텐츠를 확인하고 편집합니다. 이렇게 하면 동일한 머티리얼 에디터 탭에서 서브그래프가 열립니다.

머티리얼 에디터 상단의 이동 경로 내비게이션에서 머티리얼 그래프 를 클릭하여 접힌 노드 보기를 멈추고 메인 그래프로 돌아갈 수 있습니다.

그래프로 돌아가기

접힌 노드 펼치기

머티리얼 그래프에서 접힌 노드를 펼쳐 이전 설정으로 되돌릴 수 있습니다.

  1. 접힌 노드를 우클릭합니다.

  2. 컨텍스트 메뉴에서 노드 펼치기(Expand Node) 를 클릭합니다.

    노드 펼치기

  3. 접힌 노드가 기존 위치로 복원됩니다.

    복원된 노드