안드로이드 공부를 하면서 증강현실 앱을 만들어보고 싶어졌습니다. 그래서 다른 블로그와 각종 예제를 찾아서 헤매면서 겨우겨우 하나 만들어봤는데요. 거의 그냥 따라 만든 수준이고 형편없는 어플이지만 이 예제를 발판으로 앞으로 증강현실 공부를 계속해볼 생각입니다.
그리고 이 글은 그 과정을 기록해서 나중에 참고하기 위함이니 많이 부족해도 이해하시고요. 그 과정을 모두 정리하려니 꽤 긴 글이 될 거 같아서 예제 1로 제목을 정해봤습니다. 아래 영상처럼 별 볼일 없는 예제이지만 시작이 중요한 거잖아요?^^
예제에서의 증강현실은 제 컴퓨터 앞 키보드 위에서 이루어지다 보니 좀 한정적이긴 한데요. 핸드폰에 설치된 앱을 실행해서 키보드 위를 비추면 저 녀석이 나타나도록 해봤습니다. 당연히 다른 곳에서는 등장하지 않죠. 딱 저위치에만 가면 나타나는 겁니다. 애니메이션 캐릭터라서 움직임도 줄 수 있지만 일단 저 녀석이 원하는 위치에 나타나는데 목적을 두고 만들었고요. 애니메이션 등은 나중에 추가해볼 생각입니다.
역시 다시 봐도 엉성하네요. ㅎㅎ 여하튼 제가 원하는 위치에서 저 녁석이 나타나기는 하니까 그 과정을 정리해보기로 하고요. 이걸 만들어보기 위해서는 준비 과정이 좀 필요합니다.^^
1. 이 앱은 Unity3D 프로그램으로 만들었습니다. 당연히 컴퓨터에 설치를 하셔야겠죠?
2. 그리고 안드로이드 앱으로 만들기 위해서 컴퓨터에 안드로이드 SDK가 있어야 합니다. 저는 Android Studio를 설치하면서 함께 받아놨네요.
그럼 유니티를 실행해서 새로운 프로젝트를 생성해서 하나씩 만들어보겠습니다.
▲ 현재 제가 사용하고 있는 Unity는 위 그림에도 표시가 되어 있듯이 2017.3fo3 Personal (64bit)인데요. 홈페이지에서 그냥 받아서 사용할 수 있는 녀석입니다. [File] 버튼을 누르고 [New Project...]를 눌러서 새로운 프로젝트를 생성할게요.
▲ 이 증강현실은 Vuforia라는 곳에서 제공을 해주는데요. 조금 불편해도 아래 홈페이지로 이동해서 로그인하고 몇 가지 설정을 한 후 증강현실을 적용할 파일을 가져와야 합니다. 파일이란 앞에 영상에서 보셨던 [키보드] 사진 같은 것입니다.
키보드를 사진으로 찍어서 등록을 하면 그곳에 카메라가 갈 때 캐릭터가 나타나는 형식이에요. 아직 무슨 말인지 몰라도 하나씩 따라 해보셔요. 일단 아래 홈페이지로 이동할게요.
▲ 이런 홈페이지가 보이시죠? [Downloads]를 선택합니다.
▲ 그리고 SDK가 선택된 상태에서 그림에서 표시한 Download Unity Extension(legacy)를 선택해서 내려받습니다. (이 홈페이지에 또 와야 하니까 창 닫지 마세요.^^)
▲ 이 녀석이죠? Uniyt가 실행되고 있는 상태에서 이걸 더블클릭하면....
▲ 갑자기 Unity가 열리면서 이와 같이 Package를 Import 할 수 있는 창이 나타납니다. 오른쪽 아래 표시한 버튼을 클릭해서 Import 할게요.
▲ Import 하는 중간에 이런 창이 뜨죠? 자동으로 스크립트 등을 업그레이드 해준다는 내용 같은데 저는 그냥 [No Thanks] 선택하고 진행을 했습니다.
▲ 그렇게 추가된 패키지 중에서 그림에서 표시한 두 개를 끌어다가 Hierarchy에 놓으면...
▲이렇게 세팅이 되는데요. 뭐가 뭔지 하나도 모르겠죠? 아래쪽은 왜 이리 까만지....;; 현재 아무것도 추가되지 않았고 카메라의 위치가 설정되지 않아서 그런 거니까 일단 여기까지 만들어놓은 상태에서 이제 캐릭터가 나타날 사물을 등록을 해야하는데요. 앞에서 보셨듯이 저는 앉아서 바로 테스트를 해볼 수 있게 키보드를 사진으로 찍어서 만들었거든요.
여러분도 참고해서 컴퓨터 앞에 있는 물건 아무거나 사진으로 찍어서 만들어보셔요.
▲ 이렇게 키보드 사진을 찍어서 준비를 하고 다시 Vuforia 홈페이지로 갈게요. 창 안닫으셨죠?
▲ 이번에는 Develop 메뉴를 선택하시고요. Target Manaer를 선택한 후 Add Database 버튼을 클릭합니다. 지금 과정은 준비한 사진을 유니티에서 사용할 수 있도록 만드는 과정입니다.
▲ Add Database 버튼을 누르면 이와 같은 화면이 나타나는데 적당한 이름을 입력하고 [Device] Type에 체크한 후 [Create] 버튼을 클릭합니다.
▲ 이렇게 데이터베이스가 만들어졌죠? 이제 타겟을 설정해줄 건데요. keyboard라는 데이터베이스 이름을 클릭합니다.
▲ 그리고 [Add Target] 버튼을 클릭하시고요.
▲ 타겟을 설정하는 화면이 열리면 그림처럼 [single Image]를 선택하고 [Browse...] 버튼을 눌러서 준비한 사진을 첨부합니다. 그리고 저는 Width는 일단 1000으로 설정을 하고 Add 버튼을 눌러서 타겟을 만들었는데요. 이 크기의 개념은 아직 잘 모르겠더라고요. 작게도 해보고 크게도 해봐서 만들어봤는데 이 사이즈로 만드니까 제대로 실행이 되는 거 같아서 임의대로 설정한 건데 이 부분은 좀 더 테스트해보고 결과를 따로 정리를 해야 할거 같으니 참고하시고요. 유니티 안에서도 이 크기는 조절할 수 있으니 대충 만들고 넘어갈게요.
Type도 지금은 이미지를 선택해서 진행하지만 나중에 Cuboid, Cylinder, 3D Object 등도 만들어서 적용해보고 결과를 정리할게요.
▲ 여하튼 그렇게 만들어진 Taget을 선택하고 [Download Database] 버튼을 눌러서 내려받습니다. 이 홈페이지 한 번 더 와야 됩니다. 아직 닫지 마세요.^^;
▲ 아까 받은 파일과 똑같은 형식의 Taget 파일이 내려받아졌죠? 똑같이 더블클릭해서 실행을 합니다.
▲ 그러면 역시 Unity에 Import 할 수 있는 창이 나타나는데요. [Import] 버튼을 눌러서 추가를 합니다.
▲ 다음으로는 ImageTarget를 선택한 후 오른쪽 Insperctor 창을 보면 Database와 ImageTarget가 Empty로 되어 있는 걸 확인할 수 있는데요. 좀 전에 만든 Database와 타겟을 각각 선택해줍니다.
▲ 이렇게 Database와 ImageTarget을 선택해주면 되고요. 그 아래 Width가 1000으로 되어 있죠? 이건 여기서 바꾸면 바로 적용이 되니까 상황에 따라서 크기를 조절해보셔요.
▲ 이렇게 화면에 추가가 됩니다. 그런데 혹시 여기서 화면에 추가가 안되고 그냥 하얗게 표시되고 있는 경우도 있죠? 그럴 때는 아래와 같이 설정을 변경해주면 되고요. Game 화면이 여전히 까맣게 보인다면 Hierarchyd에서 ARCamera를 선택한 후 그 위치와 각도를 움직여서 자리를 잡아주면 됩니다.
▲ 키보드 모양이 안 보이고 하얗게 보이는 부분을 해결하기 위해서는 Hierarchy에서 해당 이미지 타겟 폴더를 선택하면 준비한 이미지가 들어있을 거예요. 이미지를 선택한 후 오른쪽 Inspector에서 Texture Type를 Sprite(2D and UI)로 변경해주시면 하얗게 표시되던 부분에 준비한 이미지가 나타날 겁니다.
이제 Vuforia 홈페이지 한 번만 더 갈게요. 이걸 사용하기 위해서는 Development Key가 있어야 되거든요.
▲ Develop 메뉴에서 이번에는 License Manager를 선택하고요. [Get Development Key] 버튼을 선택합니다.
▲ Add a free Development License Key 화면이 나타나는데 App Name은 대충 아무거나 입력하시고요. 아래쪽 By checking this box,.....에 체크를 한 후 [Confirm] 버튼을 클릭합니다.
▲ 이렇게 말도 안 되게 긴 [License Key]가 보이는데요. 모두 선택한 후 복사해서 그대로 유니티로 가져가야 합니다. 일단 복사하시고 유니티로 이동합니다.
▲ Hierarchy에서 ARCamera를 선택해보세요. 오른쪽에 [Open Vuforia configuration] 버튼이 보이죠? 클릭하면....
▲ 이렇게 App License Key를 입력할 수 있는 창이 나타납니다. 여기에 붙여넣기 하시고요. Datasets 아래에 Load testAR Database와 Activate 보이시죠? 그거 꼭 체크하셔야 합니다. 이제 화면에 표시할 3D 캐릭터를 가져와서 추가를 할게요.
▲ 유니티에서 제공해주는 3D 캐릭터를 가져올 건데요. [Assets > Import Package > Characters]를 순서대로 선택하면...
▲ 캐릭터 패키지를 추가할 수 있습니다. 역시 [Import] 버튼을 눌러서 가져올게요.
▲ 저는 Assets에서 [ThirdPersonController]를 끌어다가 Hierarchy에 넣었습니다.
▲ 그리고 캐릭터를 선택한 상태에서 적당한 위치와 크기를 설정해줬는데요. 준비한 이미지에 적당히 맞춰서 넣으면 됩니다.
▲ 대충 이 정도 크기로 설정을 해봤는데요. 실제로 스마트폰 화면에 나타나는 크기가 저 사이즈가 되는 것 같더라고요. 키보드가 저 정도 크기로 보일 때 캐릭터의 크기도 저 정도로 보인다는 의미인데 이걸 너무 크게 하면 이 녀석이 앱 실행과 동시에 나타나서는 사라지지를 않더라고요. ㅎㅎ 또 너무 작으면 잘 안 보이니 이점 참고하셨다가 만약 화면에서 이 녀석이 사라지지 않는다면 그 크기를 조금씩 줄여보세요.
이렇게 화면에 타나나 게 될 녀석까지 추가를 해봤으니 이제 카메라 위치를 잡아줄게요. 무슨 말이냐면.... 스마트폰으로 비추는 물건(키보드)가 어떤 위치에 있을 때 캐릭터가 생기도록 할 건지 설정하는 건데요. 이 부분은 제 경험을 바탕으로 작성하는 거라서 정확한지는 모르겠지만 다른 방향에서는 나타나지 않더라고요.^^
▲ 현재는 이 정도 거리(아래쪽 화면)에서 비추면 캐릭터가 생기도록 설정을 한 상태입니다. 그런데 좀 더 멀리에서 카메라로 비출 때... 또는 가까이에서 비출 때 나타나도록 설정을 할 수 있다는 의미입니다. 그건 ARCamer를 움직여서 위치를 잡아주면 되는데요.
▲ Hierarchy에서 ARCamera를 선택하고 Scene에서 카메라의 위치를 잡으면서 아래쪽 Game에서 거리를 확인을 하시면 됩니다. 즉 Game에서 보이는 위치에 스마트폰이 갔을 때 저 캐릭터가 나타난다고 생각하시면 되시는데요. 앞에서도 잠깐 언급했듯이 이 부분은 초보인 제가 몇 번 테스트해보고 내린 결론이라서 정확한 건지는 잘 모르겠으니 참고만 하시고요.
여기까지 하셨다면 정말 고생하셨을 겁니다. 한 번에 다 정리하는 것도 만만치 않을 거 같으니 오늘은 여기서 일단 마무리하고 다음 글에서는 이 프로젝트를 안드로이드 스마트폰에서 설치할 수 있는 APK 파일로 만들고 직접 스마트폰에 설치해서 실행하는 과정을 정리하도록 할게요. 별일 없으면 내일 정리를 할 거예요.^^ 수고하셨습니다.