인스타그램 필터 개발자 주의사항
개발 삽질을 줄여주는 5가지 Tips!
개요
안녕하세요, 인스타그램 AR 필터 스튜디오 위에이알(WE-AR)의 개발자 딘입니다.
Spark AR을 사용하다보면 예상하지 못했던 이슈를 만나게 됩니다.
오늘은 제가 위에이알에서 필터를 개발하며 만났던 이슈에 대하여 전해드리겠습니다.
이 글을 읽는 개발자분께서는 부디 저처럼 삽질하지 않으시길 바랍니다!
---
1. 에셋, 스크립트 교체 시 프로젝트에 반영이 안 되는 이슈
보통 위 이미지 처럼 .arproj파일을 더블클릭 하여 프로젝트를 엽니다.
작업 중 에셋, 스크립트가 교체될 때 프로젝트에 바로 반영이 안되는 이슈가 생깁니다.
이런 현상을 사전에 방지하기 위해서는 Spark AR앱 홈 화면에서 Open 버튼으로 프로젝트를 열면 됩니다.
2. arprojbk 파일 (여러명 협업 시 유의!)
프로젝트를 수정하고 저장을 하지 않았을 때, arpojbk 파일이 생성됩니다.
이 상태에서 다른 PC로 파일 공유를 하면 안됩니다.
온전한 프로젝트 파일을 공유하려면,
반드시 저장(Save)하고 arprojbk 파일이 사라진 걸 확인 후에 파일을 공유할 수 있습니다.
3. Capabilities 체크
프로젝트를 다른 PC로 옮겨 확인할 때 Capabilities의 일부 옵션이 꺼지는 경우가 빈번히 발생합니다.
프로젝트 파일을 옮긴 뒤에는 위 사진처럼 Instruction, Tap Gesture 등을 꼭 확인해주세요!
4. Time 모듈의 불안정함
위 Time.setInterval 블럭 안의 함수 호출이 Instagram 앱에서 일정하게 호출됩니다.
앱을 홈버튼을 통해 바탕화면으로 나가면 setInterval함수 호출이 누적되고, 다시 Instagram앱으로 들어오면 누적된 setInterval함수들이 한번에 호출되는 버그가 있습니다.
현재로서는 Spark AR 스크립트에서 앱 Out 이벤트를 받을 수 없기 때문에 수정이 불가한 점 참고하세요!
5. TypeScript를 지원하지만. Webpack을 이용해 따로 빌드하자
현재 스크립팅 기능을 제공하고는 있지만, npm에 등록된 모듈을 사용할 수 없습니다.
Webpack을 사용하면 npm 모듈을 대부분 사용할 수 있습니다.
cf. npm 모듈을 사용해 개발하면 좋은 점
- 예시 1. matter.js의 Rigid body animation을 필터에 바로 활용!
- 예시 2. gl matrix를 활용해 편리하고, 효율적인 수학 연산
⟹ 자세한 사항은 다음 글에서 살펴보세요 ! to be continue!
지금까지 Spark AR을 이용해 인스타그램 필터를 만들때 알고있어야할 주의사항에 대해서 설명해보았습니다.
더 많은 AR필터 사례들이 궁금하다면? 위에이알 포트폴리오(클릭)
AR필터 사용법부터 카테고리, 사용 데이터, 광고 세팅 등 모든 것을 알고 싶다면? AR필터백서(클릭)
텍스트 말고 따스한 휴먼의 목소리로 자세히 설명 듣고 싶다면? 문의하기(클릭)
현재 WE-AR에서 인스타그램 필터 개발자를 모집하고있습니다.
여기에 채용 공고가 있으니 많은 지원 부탁드립니다.
