UI Function

Template Editor Tab 표시된 각 영역들의 기능에 대해서 설명한다.

• 1️⃣ Template List

  • 템플릿 목록이 표시되는 영역

  • 템플릿 생성, 백업, 삭제 동작 가능

• 2️⃣ UI Editor

  • 오퍼레이터가 입력한 값을 코드로 변환하는 영역

  • Add 클릭 시 코드 변환되어 Code Editor에 표시되며, 세그먼트에 적용

  • Command와 AR Effect를 손쉽게 설정 가능

• 3️⃣ Command Editor

  • 템플릿 내 사용할 Common을 생성하는 영역

  • Apply 클릭 시 목록 내 Common이 UI / Code Editor에 적용

• 4️⃣ Code Editor

  • 기존 사용 방식인 JSON 편집 영역

  • Apply 클릭 시 문법 검사 진행되어, 세그먼트에 적용

• 5️⃣ Explorer

  • 작성한 템플릿의 전체 구조를 표시하는 영역

  • 템플릿 내 세그먼트가 계층 구조로 표시되며, 세그먼트를 선택하여 수정, 삭제, 순서 조정 가능

• 6️⃣ TimeLine

  • 작성한 템플릿의 흐름을 표시하는 영역

  • 세그먼트 별 재생되는 카메라와 시간 정보를 표시

Template List

Template를 생성하고 관리하는 목록이다.

• Template List Jobs

  • Backup: 선택된 템플릿, 즉각적으로 동일한 템플릿으로 생성(List에 표시)

  • Save: 작성한 템플릿 저장, 기존 파일을 수정할 경우 덮어쓰기 진행

  • New: 새로운 템플릿 생성, ‘Create a new Template’ 팝업 되어 Template Name 먼저 작성 필요

  • Refresh: 저장 경로에 저장된 템플릿을 새로 고침

  • Delete: 선택된 템플릿 삭제, 삭제 확인 팝업 발생

  • Edit: 템플릿 왼쪽 클릭 후 템플릿 수정

  • Edit Name: 템플릿 선택 후 마우스 오른쪽 클릭, 템플릿 이름 변경

• Template List View

  • List: 지정된 경로(Preference> Template Path)에 저장된 템플릿 목록 표시

  • Effect: 템플릿 내 AR Effect가 적용되어 있을 경우, 아이콘 활성화

  • Favorite: 자주 사용하는 템플릿 선택하여 목록 최상단에 표시

UI Editor

UI Editor은 오퍼레이터가 입력한 값을 코드로 자동 변환하는 기능을 한다. 각 Job을 통해 Template을 손쉽게 완성할 수 있다.

• UI Editor Tab Jobs

  • Reset : UI Editor의 각 항목 값들을 기본값으로 변경하고 자동 저장

  • Modify : 이미 작성한 세그먼트의 내용 수정하고 자동 저장, Timeline에 세그먼트를 먼저 선택한 뒤 수정 가능

  • Add : 오퍼레이터가 입력한 UI Editor에 값을 JSON 형식으로 자동 변환 후 Code Editor 등록하고 자동 저장

• UI Editor Tab View

  • Segment Type : 세그먼트에 영상 재생 구성을 선택, 선택한 항목에 맞게 Code가 자동으로 변환되어 등록

  • Camera : 사용할 카메라 번호 선택 (Segment Type이 Rotation일 경우, 시작/종료 카메라 번호 선택)

  • Duration : 영상 재생되는 시간을 ms 단위로 작성 (1sec = 1000ms), Start Time에 영상이 시작되어 End Time까지 재생 (Ex1. 0 / 1000 : 0초부터 1초까지 재생, -5000 / 0 : 5초 전부터 0초까지 재생)

  • Option : 재생 속도와 화면 배율 설정

  • Comment : 오퍼레이터가 원하는 텍스트 메모 가능, 메모 기능만 제공하므로 템플릿에 아무 영향을 주지 않음

  • Position : 영상의 중심 또는 오퍼레이터가 지정한 위치를 기준으로 중심점을 지정

• Segment Type

  • 전체 영상을 원하는 촬영하는 방식에 따라 나누는 작은 단위

  • 영상은 Segment를 순서대로 재생하는 하나의 영상으로 제작

  • Play : 하나의 카메라 영상 사용하여, Start-End No로 카메라 1대만 설정 가능

  • Pause : 하나의 카메라 영상 사용하여, Start-End No로 카메라 1대만 설정 가능, 정지할 시점과 정지 화면에 길이를 설정하므로, Pause Time, Pause Duration 설정 가능, 재생 속도는 무의미하여, Speed 미지원

  • Rotation : ‘Start No.’ 영상이 시작하는 시점의 카메라 번호 ‘End No.’ 영상이 종료되는 시점의 카메라 번호 설정 가능, 카메라 회전 시점만 필요하므로 Rotation Time 설정 가능
    (Ex. Start No : 1 – End No : 30으로 설정할 경우, 시작은 1번 카메라부터 1, 2, 3, 4, … , 29, 30 카메라가 순서대로 재생되어 화면이 회전하는 효과를 나타냄)

  • Play-Rotation : 모든 항목 설정 가능

• Play Segment Type의 자세한 설명

  • 시작 시간 ~ 종료 시간까지 일반 영상 재생

  • 카메라 1개 고정, 마지막 카메라 설정 안함

  • 타입 별 설정 여부

    • 카메라 : 1개의 첫-마지막 카메라 Index 설정

    • 기간(Duration) : 시작 시점(ms), 종료 시점(ms) 설정

    • 옵션 : 재생속도, 줌 시작, 줌 종료

• Pause Segment Type의 자세한 설명

  • 시작 시간 ~ 종료 시간까지 정지 화면 재생

  • 카메라 1개 고정, 정지화면으로 재생속도 설정 안함

  • n   타입 별 설정 여부

    • 카메라 : 1개의 첫-마지막 카메라 Index 설정

    • 기간(Duration) : 정지 시점(ms), 정지 기간(ms) 설정

    • 옵션 : 줌 시작, 줌 종료

• Rotation Segment Type의 자세한 설명

  • 설정한 회전 시점에 설정한 카메라 순서대로 회전하며 재생

  • 재생 속도에 맞춰 자동 재생되어 종료시간 설정 안함

  • 타입 별 설정 여부

    • 카메라 : 매핑된 카메라 Index내에서 재생되길 원하는 첫-마지막 카메라 Index 설정

    • 기간 : 회전 시점(ms) 설정

    • 옵션 : 재생속도, 줌 시작, 줌 종료

• Play-Rotation Segment Type의 자세한 설명

  • 설정한 시작-종료 시점에 설정한 카메라 순서대로 회전하며 재생

  • 재생과 회전이 동시에 진행되어 재생

  • 타입 별 설정 여부

    • 카메라 : 매핑된 카메라 Index내에서 재생되길 원하는 첫-마지막 카메라 Index 설정

    • 기간 : 회전 시작 시점(ms), 회전 종료 시점(ms) 설정

    • 옵션 : 재생속도, 줌 시작, 줌 종료

• Camera 설명

  • 입력한 번호의 카메라가 촬영한 영상을 사용

  • Play / Pause 일 경우, 회전 효과 없이 하나의 카메라 영상만 사용하므로 End No 설정하지 않음

  • Rotation 일 경우, 화면이 정지된 상태에서 Start No–End No 카메라까지 순서대로 전환되며, 회전 효과를 줌

  • Play-Rotation 일 경우, 화면이 재생 중인 상태에서 Start No–End No 카메라까지 순서대로 전환되며, 회전 효과를 줌

• Duration 설명

  • Start Time 부터 End Time 까지 녹화 중인 영상으로 Replay 영상을 제작 시 사용

  • 녹화 중인 영상에서 지정한 Marker가 Start Time에서 0을 의미

  • 마이너스 ( - ) 시간을 입력할 경우, Marker 지점 이전 시간을 의미

  • Play / Play-Rotation 일 경우, Start Time 부터 End Time 까지 영상 재생

  • Pause 일 경우, Start Time 시점에 화면을 End Time 시간동안 정지한 상태로 유지

  • Rotation 일 경우, Start Time 시점에 화면을 정지한 상태로 카메라를 회전하므로 End Time 설정하지 않음

• Speed(in Part of Option) 설명

  • 영상을 재생하는 속도를 설정

  • 기본 속도는 1배속(x1)를 의미하며, ½(x0.5), ⅓배(x0.33), ¼배(x0.25) 속도로 재생 속도 변경 가능

  • Play / Play-Rotation 일 경우, 배속에 따라 슬로우 모션으로 재생

  • Pause 일 경우, 정지된 화면이므로 재생 속도를 설 정하지 않음

  • Rotation 일 경우, 정지된 화면이므로 슬로우 모션 효과가 아닌, 카메라 회전 속도가 느려짐

  • ※ 단, 해당 Speed는 30FPS 기준으로 설정된 값이므로 60FPS 촬영일 경우, 오차가 생길 수 있음

• Zoom(in All Option) 설명

  • 영상이 재생되는 시간 동안 줌 인 / 줌 아웃 효과를 설정

  • 카메라 기본 화면 배율은 100%이며, 100% 미만으로 줌 아웃 설정은 불가

  • 줌은 세그먼트 타입에 관계없이 모두 동일하게 동작됨.

  • 재생 시간동안 Zoom Start 부터 Zoom End까지 줌 동작

• Zoom 예시

• Center X, Y 설명

  • 템플릿에 중앙 지점을 의미

  • 줌 인 / 아웃 기능과 Position Tracking 기능 동작 시, 지정된 중앙을 기준으로 동작됨.

• [Code Editor에서 Center X,Y 설명]

  • 기본값으로 x = 1920, y = 1080으로 선정되며, 변경할 경우 Code Editor에서 수동 변경 필요

• Record 되는 영상이 UHD 녹화일 경우의 기본값이며, FHD 녹화일 경우 값 변경 필요
  x = 1920, y = 1080 → x = 960, y = 540

• 좌표 표기 방식 : (가로축, 세로축) = (x, y)상이 재생되는 시간 동안 줌 인 / 줌 아웃 효과를 설정

• ※ 가로, 세로축 예시

Common Editor

Common Editor는 템플릿에서 사용할 값들을 미리 지정하여 중복해서 사용되는 변수들을 손쉽게 설정하게끔 해주기능을 한다. 각 변수들을 Common으로 등록하면 Record Tab에서 쉽게 수정하여 사용이 가능하다.

• Common Editor Jobs

  • Apply : Common List를 UI / Code Editor에 반영하고 자동 저장
    Apply 이후 UI Editor 드롭다운 형식으로 선택 가능

  • Common Name : 템플릿에서 사용하고자 하는 변수 이름 설정. 숫자, 문자, 특수문자 모두 사용 가능하나, 오류 방지를 위해 문자와 특수문자 언더바 ( _ ) 사용 권장

  • Value : 생성한 변수에 대응하는 값 설정 및 템플릿 구조 특징상 숫자만을 사용

  • Add : 오퍼레이터가 설정한 변수, 값들을 목록에 추가
    (단, 목록에만 추가되며, 템플릿에는 반영 안됨)

  • Modify : 목록에 추가된 변수에 이름과 값을 수정
    (단, 값 변경 시 즉시 수정되나 목록에만 수정된 상태, 템플릿에는 반영 안됨)

  • Delete : 해당되는 변수를 삭제하는 기능 
    (단, 목록에만 삭제되며, 템플릿에 반영 안됨)

Code Editor

Code Editor는 기존 JSON형식으로 Template 직접수정할 수있는 기능을 한다. 해당 영역에서 JSON 형식의 유효성을 검사하고, 직접 수정한 내용을 세그먼트에 적용할 수 있다.

• Code Editor Jobs

  • Common 항목은 Common Editor로 작성 / MovieMake 항목은 UI Editor로 작성

  • Validate: JSON 작성은 정해진 JSON 형식으로 작성되어야 하기에 작성된 Code가 적절한지 확인을 해주는 버튼

  • Reset : 작성된 모든 내용을 초기화. 초기화 시, 확인 팝업 출력

  • Apply : Code Editor에서 새로 작성한 내용을 Explorer, Timeline에 반영, JSON 파일의 규칙에 어긋나는 경우에는 에러 발생

Explorer

Explorer은 작성한 템플릿의 전체 구조를 표시하는 영역이다. 해당 영역에서는 템플릿 내 세그먼트가 계층 구조로 표시되며, 세그먼트를 직접 선택하여 간편하게 수정, 삭제 및 순서 조정이 가능하다.

• Explorer Jobs

  • Delete: 세그먼트, 이펙트 선택하여 삭제. 삭제 시, 확인 팝업 출력
    특정 세그먼트 선택하여 삭제할 수 있으며 Root 선택하여 삭제 시 모든 세그먼트 삭제
    (단, Common, Command 영역은 삭제 불가능)

• Explorer View

  • Root: 템플릿을 구성하는 계층의 최상단 영역, 템플릿의 이름을 표시

  • Common: 세그먼트에서 사용할 공통 항목에 대해 사전 정의 항목을 표기
    Common Editor에서 작성한 항목을 표기
    Common에 정의된 항목은 모든 세그먼트에서 사용 가능

  • Segment: 영상의 한 구간을 나타내는 영역
    세그먼트 순서대로 하나의 영상으로 제작가능
    세그먼트 간 Drag & Drop으로 순서 변경 가능

TimeLine

• TimeLine View

  • Timeline : 작성된 세그먼트를 재생되는 시간대 기준으로 표시하는 영역

  • Comment :오퍼레이터가 세그먼트 작성 시 UI Editor > Comment 영역에 작성한 메모를 표시
    Root 경로 선택 시 전체 Comment를 표시, 세그먼트 선택 시 선택된 세그먼트의 Comment를 표시

  • Total Play Time : 해당 템플릿으로 제작된 영상에 예상 재생 시간 표시, 모든 세그먼트들이 순서대로 재생되는 총 시간 표시

  • Common : Common 항목 선택 시 Timeline이 표시되지 않고, Code Editor에서 작성한 사전 정의 항목에 대한 목록을 표시

Step of Making Template

영상을 편집하는데 핵심인 Template을 만드는데 필요한 기본 순서이다. 간편하고 다양한 편집을 하기 위해서는 Template 세부 기능에 대해 잘 파악하고, 다음과 같은 순서로 Template을 만들어 본다.

 Step 1. Template 용어 정립 및 순서도 확인

• Segment Type

  • Play / Pause / Rotation / Play-Rotation

• Camera

  • Start No. / End No.

• Duration

  • Start Time(ms) / End Time(ms)

• Option

  • Speed / Zoom Start(%) / Zoom End(%)

Step 2. 제작할 영상 시나리오 구상

• 전체 흐름에 대한 나열

Ex) ‘타자가 배트를 휘두르는 동작을 세 방향에서 촬영하자’

‘배트를 휘두르며 공을 치는 순간 1초 정지시키자’ ‘’촬영한 영상을 순서대로 재생시키자’

• 시나리오 세부 화면 구체화

Ex) 영상 전체에 대한 시나리오 정리

세 방향에서 촬영한 영상을 순서대로 재생하는 시나리오 구체화

Ex) 각 영상 별 녹화가 필요한 장면에 대한 구체화

카메라 별 5초의 영상 녹화, 준비 → 스윙 → 마무리 동작 순으로 녹화 필요

• 녹화 기준점 선정 예상

Ex) 사람마다 준비, 스윙, 마무리 동작 별 소요되는 시간이 다르므로, 기준이 되는 시간 산정
스윙 동작 중 공 타격 순간을 기준점으로 하여 이전 -2.5초는 준비동작, 이후 +2.5초는 마무리 동작으로 상세구분

• UI Editor 설정 요소 파악 및 상세화

Ex) 구체화된 시나리오, 선정된 기준점을 기준으로 하여 UI Editor에 필요한 요소 상세화

※ Segment2의 Pause Duration이 1000ms이어도 Pause는 정지된 시점이므로 Segment3의 Start Time은 0ms가 되어야 함

• 최종 구상된 시나리오

Step 3. Template 작성 및 확인하기

• Step 2에서 생각한 시나리오에 맞게 Template 작성 시작

[Template 생성]

• Template List > New 버튼 클릭

• Template Name: 템플릿 이름 입력 > Create 버튼 클릭

[UI / Code Editor를 활용하여 Segment 생성]

• 구상했던 시나리오 순서로 Segment 설정 후 Add 반복

※ 위 시나리오 기준 예시

1번 카메라 : 준비동작 > Add 버튼 클릭​

1번 카메라 : 스윙 동작 > Add 버튼 클릭​

1번 카메라 : 마무리 동작 > Add 버튼 클릭​

2번 카메라 : 준비동작 > Add 버튼 클릭​

2번 카메라 : 스윙 동작 > Add 버튼 클릭​

2번 카메라 : 마무리 동작 > Add 버튼 클릭​

3번 카메라 : 준비동작 > Add 버튼 클릭​

3번 카메라 : 스윙 동작 > Add 버튼 클릭​

3번 카메라 : 마무리 동작 > Add 버튼 클릭

[Explorer 및 TimeLine에서 생성된 Segment확인]

[Template List의 Save 클릭하여 Template 저장]