인스타그램 AR 제작 툴,
Spark AR 살펴보기
설치부터 기본 인터페이스 소개까지
안녕하세요, AR 페이스 필터 전문 제작 스튜디오 위에이알(WE-AR)입니다.
인스타그램에서 사용할 수 있는 페이스 필터를 제작하려면 Spark AR이라는 프로그램을 사용해야합니다. Spark AR은 페이스북이 제작한 AR 콘텐츠 제작 전용 툴로서, 초보자도 쉽게 간단한 프로젝트를 제작할 수 있도록 설계되었습니다. 다른 프로그램을 사용하는 것보다 Spark AR을 활용해 AR콘텐츠를 제작하는 것이 가장 쉽습니다.
아래의 내용을 확인하고, 개인 계정에 필터를 설치해보세요!
이해하기 어려운 부분이나 궁금하신 점이 있으시다면, official@we-ar.kr 메일로 문의주세요 :)
설치하기
페이스북의 Spark AR 공식 웹사이트에 접속해 프로그램을 다운로드 받습니다.
아래의 기본 사양을 확인하고, 사용 중인 디바이스에서도 구동하는 데 문제 없는지 확인해보세요. 최근 구매하신 컴퓨터라면 거의 문제 없다고 보셔도 좋습니다!
로그인
Spark AR 설치 후 처음 실행하면, 페이스북 로그인을 요구합니다. 페이스북과 인스타그램에 게재하기 위해서는 페이스북 아이디가 연동되어야하기 때문입니다.
업로드하기 위해 사용하는 Spark AR Hub 웹사이트도 반드시 페이스북 계정이 있어야 사용할 수 있습니다.
SPARK AR 프로그램 실행 시 등장하는 페이스북 로그인 화면새 프로젝트 만들기
로그인을 완료하면 아래와 같은 화면이 등장합니다. 페이스북이 제공하는 탬플릿 프로젝트를 선택하거나, 비어있는 새로운 프로젝트(Create New)를 만들 수도 있습니다.
다양한 탬플릿 프로젝트를 확인할 수 있는 '새로운 프로젝트' 메뉴Learn(학습하기)를 누르면 다양한 페이스 필터 제작 기법들을 학습할 수 있습니다. 현재 영어로만 제공하고 있는 점이 아쉽습니다.
학습하기 메뉴'Recent Project(최근 프로젝트)'를 누르면, 가장 최근에 작업했던 프로젝트들이 나옵니다. 프로젝트 파일의 위치를 다른 폴더로 옮기거나하면, 파일 디렉토리가 변경되기 때문에 Recent Project에서 확인할 수 없으니 주의하세요!
기본 인터페이스
본격적으로 필터를 제작하기에 앞서, 기본적인 개발 환경에 대해 이해할 필요가 있습니다. 기존에 Blender, C4D 등의 3D 디자인 환경이나, Unity 와 같은 게임 개발에 익숙한 분이라면 한눈에 이해할 수 있을 겁니다.
위에 언급한 프로그램들을 듣도보도 못한 초보자이시더라도, 겁낼 필요 없습니다. 정말 쉽습니다!
크게 세 가지 영역과 작업 순서를 기억하면 됩니다.
'에셋 페널'에 사용하고 싶은 파일을 컴퓨터에서 불러온다.
'씬 패널'에 에셋 페널에 있는 파일을 가져온다.
'인스펙터'에서 씬 패널의 오브젝트들의 값을 조정하여 원하는 형태로 변경한다.
아래에서 각 영역 별 역할과 기능에 대해 알아보겠습니다.
The Viewport(뷰포트)
뷰포트는 제작 중인 프로젝트를 가상의 3D 환경에서 확인할 수 있는 공간입니다. 전체 화면에서 가운데에 가장 크게 위치해 있으며, 상단의 Mainipulator(;조작 버튼)를 클릭하면 오브젝트(object ; 물체)의 위치 및 사이즈를 조절하거나, 회전시킬 수도 있습니다.
또한, 좌측의 메뉴에서 오브젝트를 선택하면, 뷰포트에 파란색 선으로 선택된 오브젝트가 표시됩니다. 다양한 오브젝트가 나열되어 있을 때, 하나씩 클릭해보면 뷰포트에 표시되는 것으로 어떤 오브젝트인지 쉽게 구분할 수 있습니다.
The Simulator(시뮬레이터)
시뮬레이터는 스마트폰이나 아이패드 등의 디바이스에서 확인할 수 있는 화면을 가상으로 보여주는 영역입니다. 제작 중인 필터가 어떤 형태로 보이는지 실시간으로 확인할 수 있습니다.
우측 상단에는 시뮬레이터 옵션이 있습니다. 다른 기기로 전환하거나, 시뮬레이터 클릭했을 액션을 변경할 수도 있습니다. 후면카메라로 전환하는 설정도 있어 필터를 제작하며 상황에 맞게 활용할 수 있어야합니다.
The Scene panel (씬 패널)
씬 패널은 뷰포트에 오브젝트를 배치하기 위해 거쳐야하는 공간입니다. 뷰포트에는 오브젝트를 직접 배치할 수 없고, 반드시 씬 패널에 올려놓아야합니다.
Add Object를 클릭해 다양한 오브젝트를 배치할 수 있으며, 3D 오브젝트의 경우에는 Aseets 영역에 직접 드래그 앤 드랍하여 배치할 수도 있습니다.
씬 패널에서는 오프젝트의 상하위구조(Hierarchy)가 중요합니다. 의도하지 않은 곳에 배치되지 않도록 순서를 잘 맞춰서 배치해야합니다.
The Assets panel (에셋 페널)
에셋 패널은 제작에 사용할 다양한 디자인 소스들을 나열하는 공간입니다. 이 곳에 파일을 불러온다고 하여 바로 필터에 배치되는 것은 아닙니다.
크게 Material, Texture 로 구분되며, 3D 오브젝트나 애니메이션 툴들을 불러올 수도 있습니다. 다양한 파일들을 에셋 패널에서 관리하며, 제작에 사용하지 않는 파일을 삭제해 프로젝트 파일의 용량을 줄일 수 있습니다.
불러올 때마다 파일 이름을 잘 정리해둔다면, 복잡한 필터를 제작할 때 헷갈리는 일을 방지할 수 있습니다.
The Inspector(인스펙터)
인스펙터는 씬 패널의 오브젝트들이나, 에셋 패널의 파일들의 속성을 조정하는 영역입니다.
인스펙터는 크게 레이어(Layer), 표시 여부(Visible), 변형(Transformations), 머테리얼(Material)의 총 4개 영역으로 구분됩니다.
예를 들어 씬 패널의 오브젝트를 클릭하면 위치, 사이즈, 회전 값 등을 조절할 수 있습니다. 에셋 패널의 Material을 클릭하면, Material 속성을 조절해 원하는 형태의 물체로 표현할 수도 있습니다.
일부 속성값에는 화살표 표시가 있습니다. 이를 클릭하면 Patch 를 생성해 다른 값들과 연결하여 좀 더 디테일한 조정이 가능하게 만들 수 있습니다.
Toobar
툴바는 다양한 툴이 배치된 영역입니다. 가장 많이 사용하는 버튼만 표시하였습니다.
영상 선택 - 시뮬레이터 영상을 선택함
영상 재생 - 시뮬레이터 영상이 재생됨
프로젝트 리프레시 - 전체 프로젝트를 새로고침하여 초기 상태로 되돌림
테스트 링크 보내기 - 실제 인스타그램 앱에서 테스트할 수 있는 링크를 추출함
파일 추출하기 - Spark AR Hub에 업로드할 프로젝트 파일을 추출함
The Patch Editor & Console
패치 에디터는 역동적인 필터를 제작하기 위해서 반드시 거쳐야할 영역입니다. 간단하더라도 움직이는 필터를 만들기 위해서는 반드시 Patch Editor를 거쳐야합니다.
콘솔 영역은 코딩 스크립트를 활용하지 않는다면 사용하지 않아도 되는 영역입니다.
마무리
이상으로 페이스 필터를 제작하는 환경, Spark AR의 기본 기능들을 살펴보았습니다. 앞으로도 Spark AR에서 AR 콘텐츠를 더 쉽게 제작하기 위한 다양한 팁들을 소개해드리도록 하겠습니다.
제작과 관련하여 궁금하신 점이 있다면, official@we-ar.kr로 문의주세요!
지금까지 AR 페이스 필터 전문 제작 스튜디오 위에이알이었습니다 :)
위 글은 페이스북의 공식 문서를 참고해 작성되었습니다. (링크)
더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)
AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)
텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)
