애니메이션 GIF를 만드는 안드로이드 앱을 개발하다...

저는 안드로이드 개발자이기는 하지만 주로 안드로이드용 3D UI Framework를 만드는 일이 주된 업무라 안드로이드 앱의 기본 틀만 갖추어 놓고 OpenGL만 주로 다루다 보니 안드로이드는 잘 모릅니다. 그렇다고 해서 OpenGL도 잘 아는것도 아니지만요... (-.-)a

어쨌든, 안드로이드 개발자임에도 불구하고 제대로 된 안드로이드 앱을 만들어본 적도 없고, 다양한 경험을 해보기 위해서 안드로이드 앱을 한번 만들어 보기로 했습니다. 그냥 재미 삼아 앱에 광고도 실어서 돈도 벌어보고요... 그래서 탄생했습니다... 제가 그동안 스타벅스에서 보낸 수많은 시간들의 결실 입니다...

제가 만든 앱은 그렇게 대단한 것은 아닙니다. 사진을 찍어서 애니메이션 GIF로 만드는 앱 입니다. 개발하기 전에 이런 부류의 앱 시장에 대한 사전조사를 해보지 않아서 어떤 앱들이 나와 있는지 잘 모르겠지만, 제 앱의 특징을 말씀드리자면 애니메이션을 위한 연속된 사진을 찍는데 편의를 제공하고 있습니다. 사진을 찍고 애니메이션을 위한 다음 프레임을 찍을때 이전에 찍었던 사진이 반투명하게 나와 그 사진을 기준 삼아 그 다음 프레임을 편하게 찍으실 수 있습니다. 

이런 앱을 만들게 된 배경은 회사 앞에 아파트를 짓고 있는데, 어느날 아파트 공사 현장을 매일 매일 사진으로 찍어서 나중에 애니메이션으로 만들면 재미있겠다는 생각을 했습니다. 그래서 일단 사진을 찍었습니다. 매일 똑같은 위치에서 같은 각도로 scene을 찍기 위해 옥상 난간에 제가 쉽게 기억할 수 있는 곳에 스마트폰을 놓고 사진을 한장 찍었습니다. 그리고 그 다음날 또 사진을 찍었는데, 생각만큼 그 전날 찍은 사진과 동일한 곳을 찍는것이 쉽지 않았습니다. 그래서 사진을 찍을때 이전에 찍은 사진이 기준이 되어 쉽게 그 다음 프레임을 찍을 수 있었으면 좋겠다고 생각했습니다. 그래서 만들게 된 앱 입니다.

일단 제 앱을 실행하면 다음과 같은 화면이 뜹니다.

시간을 두고 찍은 사진들로 애니메이션 GIF를 만드는 상황을 고려해서 프로젝트의 개념을 사용했습니다. 이 화면은 Project List View 입니다. 따라서 애니메이션 GIF를 만들기 위해서 프로젝트를 생성해야 합니다. 프로젝트는 여러개 생성할 수 있으며, 동시에 여러개를 진행할 수 있습니다. 각 프로젝트를 작업하다가 나와서 이 화면으로 오면 생성해 놓은 프로젝트들을 볼 수 있습니다. Create New Project 버튼을 누르면 팝업창이 떠서 프로젝트이름과 애니메이션 GIF의 orientation(가로/세로)을 설정한 후에 프로젝트를 생성할 수 있도록 해줍니다.

저렇게 저는 일단 예제로 hello라는 프로젝트를 생성했습니다. 프로젝트를 생성해서 중복되는 프로젝트 이름이 없고 유효한 프로젝트 이름이라면 프로젝트가 생성되여 자동으로 생성된 프로젝트로 이동합니다.

이것은 Project View로 프로젝트가 막 생성되었으므로 프로젝트 내에는 아무런 사진이 없습니다. 따라서 애니메이션 GIF에 사용할 프레임을 찍어야겠죠? 프레임을 추가하기 위해서 Add New Frame 버튼을 누릅니다. 그러면 아래의 화면으로 넘어갑니다.

반투명한 하얀색 화살표 보이시죠? 화살표는 어느쪽을 위로 놓고 찍어야 하는지를 알려주고 있습니다. 그리고 프로젝트에 존재하는 사진이 없으므로 새 프레임을 추가하기 위해 사용할 기준이 될 사진이 없으므로 화살표가 나오는 것이기도 합니다.

일단 저는 첫 프레임을 저렇게 사진을 찍었습니다. 사진은 Shoot 버튼을 눌러서 찍습니다. 사진을 찍어서 애니메이션 GIF의 프레임으로 사용할 프레임이 추가 되면 Project View에 아래와 같이 새로 추가된 프레임이 표시 됩니다.

그러면 또 프레임을 추가 해야지 애니메이션을 만들 수 있겠죠? 그래서 또 Add New Frame 버튼을 눌러서 프레임을 추가하는 작업을 진행 합니다.

외쪽 사진을 보시면 제 손이 약간 반투명하게 나옵니다. 현재 카메라는 그냥 책상 위에 놓여진 노트만 preview로 보여주고 있으며, 반투명하게 보이는 제 손은 제가 이전에 찍은 사진을 기준으로 찍으라고 반투명으로 표시되고 있는 것입니다. 물론 책상과 노트도 모두 반투명으로 표시되고 있는 상황이지만 카메라 preview에 보이는 책상과 노트의 위치가 일치하기 때문에 쉽게 알아차리지 못하시는 겁니다.(사진 상단에 표시된 시간을 보시면 왼쪽 것이 더 나중이지만 이것은 제가 설명을 돕기 위해 나중에 조작해낸 사진입니다^^). 화면 상단에 보이는 seek bar로 기준으로 삼는 이전 사진의 투명도를 조절하실 수도 있습니다. 오른쪽으로 가면 이전 사진의 더욱 선명해지고, 왼쪽으로 가면 더 투명해져서 흐리게 보입니다. 이전 프레임을 기준으로 다음 프레임을 어떻게 찍을 것인지 다시 손의 위치를 잡고 다시 사진을 찍어 프레임을 추가 했습니다.

사진을 찍어서 프레임을 추가하면 위의 사진과 같이 다시 Project View로 돌아가게 되고 새로 추가된 프레임이 표시 됩니다. 화면 하단에 나오는 버튼들 위에 있는 사진들이 애니메이션 GIF의 프레임으로 사용될 사진들이고, 그 사진들 위에 크게 보이는 사진이 현재 선택된 프레임 입니다. 화면 위쪽에 보시면 Duration이라고 나와 있고 숫자가 나와 있습니다. 이것은 현재 보이는 프레임이 애니메이션 GIF가 생성될 때 사용할 프레임의 지연 시간 입니다. 단위는 ms입니다. Modify 버튼을 눌러 프레임의 지연 시간을 조절 하실 수도 있고, 찍어놓은 프레임이 마음에 들지 않으면 Delete 버튼을 눌러 삭제 할 수도 있습니다. 이제는 프레임이 2장 이상이기 때문에 Create Animated GIF 버튼을 눌러 애니메이션 GIF를 생성할 수 있습니다. 대략적으로 애니메이션이 어떻게 될지 궁금하시다면 화면 아래쪽에 나와 있는 프레임들을 옆으로 스크롤 해 보시면 선택된 프레임이 바뀌면서 큰 이미지가 선택된 프레임으로 바뀌게 되면서 어떤 식으로 애니메이션이 나올지 가늠해 보실 수 있습니다. 

하지만 2장으로 애니메이션 만드는 것은 너무 재미 없잖아요? 그래서 몇장 더 찍었습니다. 그리고 Create Animated GIF 버튼을 누르면 애니메이션 GIF를 생성하는 작업에 들어갑니다.

왼쪽 사진이 애니메이션 GIF가 생성되는 과정이고, 생성하는 과정에서 마음이 바뀌어 중단하고 싶다면 Cancel 버튼을 누르시면 됩니다. 오른쪽 사진은 애니메이션 GIF 생성이 완료되어 생성된 애니메이션 GIF를 보여주고 있는 장면입니다. 당연히 사진은 안드로이드 단말의 화면을 캡쳐한 것이기 때문에 정지해 있죠. 어쨌든, 결과가 마음에 들면 생성된 애니메이션을 안드로이드의 갤러리로 저장하실 수 있습니다. 

뭐 이런식으로 애니메이션 GIF를 제작하실 수 있습니다... 이미지 퀄리티는 GIF라서 구립니다... 하지만 아직까지는 별다른 디코더 없이 파일 하나로만 애니메이션을 표현할 수 있는 방법은 이 방법이 제일 좋다는 결론을 얻었습니다.

아직 마켓에는 올리지 않은 상태인데, 앱의 이름을 정하지 못해서 앱 진입시 보이는 splash screen과 아이콘을 제작하지 못해서 그렇습니다. 아직 부족한 부분도 많고 안드로이드 개발자가 만든 작품 치고는 너무 허접해서 좀 창피하지만 이렇게라도 빨리 뭐라도 해보면서 앱 개발 능력을 키워가야겠다는 생각이 들었습니다. 제발 UI가 구리다는 말씀을 하지 말아주세요... 일단 첫 마일스톤으로 기본 기능에 충실한 앱을 먼저 만들기로 한 것이니까요... 앞으로 UI를 개선하고 추가할 기능도 많습니다...

어쩄든, 이 포스팅의 원래 목적은, 이 앱 이름 공모하는 것입니다... 앱 이름좀 지어주세요...  애니메이션 생성하는 앱이고, 제 앱의 특성을 잘 알릴 수 있는 그런 이름으로요... 마음에 드는 이름 지어준 분께는 선물이나 밥이라도 드리겠습니다...