articy:draft 첫 걸음 튜토리얼 시리즈 L05 플로우

안녕하세요. articy:draft 첫 걸음 튜토리얼 시리즈의 5번째 강좌에 오신 것을 환영합니다.

 

https://youtu.be/secKTSDgkKQ?si=a8dl6EmnTlsfsaQU

 

 

복습:

지난 강좌에서는 프로젝트를 위한 흥미롭고 중요한 단계를 다뤘습니다. 엔티티에 대해 배우고, 이야기의 주인공인 미나를 생성했으며, 템플릿 기능을 처음으로 살펴보았습니다.

 

이번 강좌:

오늘은 articy:draft의 핵심인 플로우를 살펴보겠습니다. 플로우가 왜 중요한지 알아보고, 중첩(nesting) 개념에 대해 이야기하며, 우리의 이야기를 위한 최상위 구조를 만들어보겠습니다.

바로 시작해봅시다.

 

 

플로우 개요

1. 드라큘라 프로젝트의 점프스타트 페이지에서 플로우 아이콘을 더블 클릭합니다.

 

화면 왼쪽에는 탐색기와 유사한 계층적 데이터 구조를 가진 내비게이터가 있습니다. 콘텐츠 영역에서는 이른바 캔버스라고 불리는 공간에 콘텐츠가 시각적으로 표시됩니다. 현재로서는 특별한 내용이 없으니, 이미 존재하는 플로우 구조를 살펴보겠습니다.

 

2. 내비게이터에서 먼저 튜토리얼(Tutorial) 항목을 확장한 다음, 드라큘라와 미나 - 최후의 대결(Dracula and Mina – Final confrontation) 항목을 확장합니다. 이제 선 중 하나를 클릭하여 해당 콘텐츠로 이동합니다.

 

플로우는 콘텐츠를 이해하기 쉬운 시각적으로 구조화된 방식으로 표시합니다. 이는 마치 플로우 차트와 같아서 분기형 스토리라인과 상호작용을 설계할 때 매우 유용합니다. 스토리를 만들기 위해 다양한 요소, 즉 노드(nodes) 를 사용할 수 있습니다.

 

연결선을 활용하여 분기형 플로우 구조를 구성할 수 있습니다.

 

👉 플로우 내비게이션 방법: 마우스 휠을 사용하여 확대 또는 축소할 수 있으며, 마우스의 가운데 버튼 또는 오른쪽 버튼을 누른 상태로 드래그하면 화면을 이동할 수 있습니다.

 

곧 여러분도 이런 플로우를 직접 만들어보게 될 것입니다. 사실, 다음 강좌에서 바로 진행할 예정입니다. 하지만 그 전에 플로우의 또 다른 중요한 요소인 중첩(nesting) 지원에 대해 조금 더 알아보겠습니다.

 

3. 내비게이터에서 플로우(Flow) 항목을 클릭하여 튜토리얼(Tutorial) 과 최종 노드(Final nodes) 를 다시 확인합니다.

 

 

 

중첩(Nesting) 개념

중첩은 콘텐츠를 여러 계층으로 구조화할 수 있게 해줍니다. 이는 이야기를 거시적(Macro) 관점에서 미시적(Micro) 관점으로, 즉 넓은 아이디어에서 개별 대사 한 줄까지 체계적으로 구성할 수 있도록 돕는 도구입니다. 이렇게 계층화하더라도 전체적인 개요를 쉽게 파악할 수 있습니다.

 

이론은 이쯤하고, 이제 articy에서 중첩이 어떻게 작동하는지 살펴보겠습니다.

 

내비게이터에서 플로우(Flow) 항목을 선택하면, 오른쪽에는 최상위 계층의 콘텐츠가 표시됩니다. 이 계층에는 튜토리얼(Tutorial) 과 최종(Final) 데이터가 포함되어 있습니다.

 

1. 튜토리얼(Tutorial) 노드를 왼쪽 클릭하여 선택하세요. 이때 툴바를 주의 깊게 살펴보면, 이 특정 요소에 대한 컨텍스트 기반의 두 번째 명령줄이 나타나는 것을 볼 수 있습니다.

 

2. 더 깊은 계층으로 이동하거나 articy에서 이 작업을 "서브머지(Submerge)"라고 부르는 경우, 툴바의 서브머지 버튼을 클릭하거나 단축키 "Return"을 사용할 수 있습니다. 노드에 이미 내부 콘텐츠가 있는 경우, 노드 오른쪽 상단에 있는 두 개의 작은 삼각형으로 구성된 내부 콘텐츠 아이콘을 더블 클릭하면 됩니다.

 

이제 우리는 튜토리얼(Tutorial) 노드 안으로 서브머지되었습니다. 현재 위치는 내비게이터에서 튜토리얼 항목이 표시된 것을 통해 쉽게 확인할 수 있으며, 점선으로 표시된 영역의 왼쪽 상단에 있는 상위 노드의 이름을 통해서도 알 수 있습니다. 이 표시된 영역은 이 내부 콘텐츠를 둘러싸고 있는 상위 노드(parent node) 를 상징합니다.

 

상위 노드 이름 옆에는 이머지(Emerge) 버튼이 있으며, 이를 클릭하면 다시 한 단계 위로 올라갈 수 있습니다.

 

 

최상위 스토리 구조 만들기

현재 이 플로우 레벨에는 “드라큘라 & 미나 - 최후의 대결(Dracula & Mina – Final confrontation)”이라는 오브젝트가 하나 있습니다. 이것은 대화 노드(Dialogue Node)입니다. 대화 노드는 개별 대사를 담는 컨테이너입니다. 오늘 살펴볼 또 다른 노드 유형은 플로우 프래그먼트(Flow Fragment)입니다. 이 두 가지 노드 유형으로 전체 콘텐츠를 구조화할 수 있습니다. 게임의 전형적인 대사는 대화 노드에, 게임플레이 관련 콘텐츠와 일반 설명은 플로우 프래그먼트로 생성됩니다. 표준 시나리오 형식에 익숙하다면, Action과 General 템플릿은 articy에서 플로우 프래그먼트로 처리되는 콘텐츠 유형입니다.

 

⭐ 팁: 콘텐츠를 대화 노드와 플로우 프래그먼트로 구분하는 것이 좋은 습관입니다. 이렇게 하면 전체적인 개요를 더 잘 파악할 수 있고, 게임 엔진에서 사용할 콘텐츠를 내보낼 때도 더 수월합니다.

 

1. 노드를 만들려면 툴바에서 해당 버튼을 왼쪽 클릭한 후 마우스 버튼을 누른 상태로 콘텐츠 영역의 캔버스로 드래그합니다. 플로우 프래그먼트 노드를 만들어 두 요소를 나란히 비교해 봅시다.

 

왼쪽 상단에는 템플릿 아이콘이 있습니다. 템플릿에 맞춤 아이콘을 사용할 수 있으며, 아이콘이 지정되어 있을 경우 한눈에 확인할 수 있습니다.

 

그 옆에는 노드의 이름이 표시됩니다.

 

오른쪽 상단에는 컨테이너 아이콘이 있습니다. 대화 노드(Dialogue Node)와 플로우 프래그먼트(Flow Fragment)는 모두 컨테이너 노드(Container Nodes) 로, 다른 노드를 이 노드 안에 넣어 중첩 구조(Nesting Structure) 를 만들 수 있습니다. 컨테이너 아이콘이 표시되어 있다면 내부 콘텐츠가 있다는 의미입니다. 이 대화 노드에는 이전에 보았던 대화가 내부 콘텐츠로 포함되어 있으며, 새로 만든 플로우 프래그먼트는 아직 내부 콘텐츠가 없습니다.

 

그 아래에는 미리보기 이미지(Preview Image) 를 배치하고, 참조 스트립(Reference Strip) 에 다른 오브젝트를 연결할 수 있습니다. 이는 이전에 엔티티 작업에서 보았던 방식과 동일합니다. 이 대화 노드에서는 참조 스트립을 통해 대화에 등장하는 캐릭터들을 표시했습니다.

 

이미지 아래에는 설명 텍스트(Description Text) 를 작성할 수 있는 공간이 있습니다. 예를 들어 이 부분에서 일어나는 스토리의 간략한 개요를 작성하는 데 사용할 수 있습니다.

 

노드의 양쪽에는 입력 핀(Input Pin) 과 출력 핀(Output Pin) 이 있습니다. 플로우 방향은 왼쪽에서 오른쪽으로 흐르기 때문에, 입력 핀은 항상 노드의 왼쪽에, 출력 핀은 오른쪽에 위치합니다. 이 핀들은 노드 간의 연결(Connection) 을 생성하는 데 사용됩니다.

 

2. 노드를 이동하려면 마우스 커서를 제목 영역(Title Area) 으로 가져가세요. 그러면 커서가 이동 커서로 변경됩니다. 이 상태에서 왼쪽 클릭 후 누른 상태로 드래그하여 원하는 위치로 옮길 수 있습니다.

 

3. 노드의 크기를 조정하려면 커서를 노드의 모서리(Corner) 로 가져가세요. 그러면 커서가 크기 조정 커서(Scaling Cursor) 로 변경됩니다. 이 상태에서 왼쪽 클릭 후 누른 상태로 드래그하여 원하는 크기로 조정할 수 있습니다.

 

👉 컨테이너 노드의 시각적 크기는 내부에 담을 수 있는 콘텐츠의 양에 아무런 영향을 주지 않습니다.

 

이 플로우 레이어에 있는 김에, 스토리의 기본 구조를 만들어보는 건 어떨까요? 저는 미나(Mina) 와 반 헬싱(Van Helsing) 의 컷신 같은 대화와, 미나와 드라큘라(Mina & Dracula) 가 등장하는 두 개의 본격적인 분기형 대화를 구상하고 있습니다. 앞서 이야기한 전체 구조를 활용하려면, 이 모든 요소를 대화 노드(Dialogue Nodes) 로 만들어야 합니다. 따라서 이전에 만들었던 플로우 프래그먼트(Flow Fragment) 는 삭제해도 괜찮습니다.

 

4. 노드 삭제 방법은 노드를 왼쪽 클릭으로 선택한 후, Delete 키를 눌러 삭제하세요.

 

오른쪽 클릭으로 나오는 컨텍스트 메뉴를 사용한 후, 삭제(Delete) 옵션을 선택하여 노드를 삭제할 수도 있습니다.

 

5. 추가로 두 개의 대화 노드를 만듭니다. 이를 위해 툴바에서 드래그하여 생성하세요.

 

캔버스를 오른쪽 클릭한 후 나타나는 컨텍스트 메뉴를 사용하여 노드를 생성할 수도 있습니다.

 

👉 오른쪽 클릭 컨텍스트 메뉴는 일반적으로 요소를 생성하고 작업하는 또 다른 방법을 제공합니다.

원한다면 노드에 라벨을 추가하고 계획된 콘텐츠를 몇 마디로 설명할 수 있습니다. 그러면 스토리 프레임워크가 거의 완성됩니다. 이제 남은 것은 플로우 구조를 완성하기 위해 노드 간의 연결을 추가하는 것입니다.

 

6. 연결을 추가하려면 첫 번째 노드의 출력 핀을 왼쪽 클릭한 상태로 두 번째 노드의 입력 핀으로 드래그하세요. 세 번째 노드에도 동일한 작업을 반복합니다.

 

우리의 기본 구조가 완성되었습니다. 이제 이 구조를 동료나 친구에게 보여주어 스토리 아이디어를 소개하고 초기 피드백을 받을 수 있습니다. 그리고 중첩 방식을 활용하면 이 구조를 계속 사용하면서 시간이 지나면서 추가적인 계층을 추가하고 콘텐츠를 채워나갈 수 있습니다.

 

이번 강좌는 여기까지입니다.

 

복습:

오늘 우리는 많은 것을 배웠습니다. articy의 핵심인 플로우 뷰를 살펴보았고, 중첩에 대해 배웠으며, 대화 노드와 플로우 프래그먼트 노드의 구조를 이해하고, 게임 스토리를 위한 최상위 구조를 만들었습니다.

 

다음 강좌:

6번째 강좌에서는 첫 번째 실제 대화를 만들어보겠습니다.

 

함께해 주셔서 감사합니다. 다음 튜토리얼에서도 다시 함께해 주세요.