드디어 앱을 완성했고 지난 3월 1일 서류 제출까지 완료했다.

지난 프로로타입에서부터 앱을 완성하기까지 꽤 많은 수정과 오류, 오랜 기간이 걸렸다. 앱을 만드는 과정에도 지속적으로 글을 남기고자 했었지만, 시간적 여유도 그렇고 계속 몰아치는 오류와 수정사항으로 인해 글을 남길 수 없었다. 우선 이번 글에서는 앱이 완성되기까지 과정, 그리고 지원서 작성과 제출까지 일을 남겨보고자 한다.

앱을 완성하기까지

앱에서 최초 컨셉이 정해지고 나서 완성되기까지는 꽤나 많은 과정이 필요했다. 삽입 이미지(일러스트), 효과음, 배경음악, 시나리오 완성, 카피라이팅, 실제 개발과 오류 수정 등 정말 많은 난관이 있었다. 사실 2월 28일까지 제출 마감이어서 앱 개발과 함께 포항으로의 이사를 병행하고자 했는데, 앱 개발에 너무 많은 시간이 소비되어서 이사를 아예 하지 못하였다. 마찬가지로 블로그 글 작성도 병행하고자 했지만 실패했다.

삽입할 이미지 만들기

우선 가장 어려운 것은 삽입할 이미지를 만드는 것 이었다. 이전에 스케치 컨셉으로 앱을 만든다고 했지만 내가 그림을 잘 못그린다. 그럼에도 불구하고 스케치 정도면 직접 그릴 수 있겠지 라는 생각에 직접 그리려고도 시도해보고, 지인에게도 부탁해보았지만 원하는 스타일 + 일관성 + 시간 내에 완성 세가지 조건을 모두 만족시키기가 어려웠다.

그래도 괜찮다. 위대하신 AI 선생님께서 계시니…
나는 Gemini를 켜서 원하는 스타일 가이드를 넣고, json 기반의 이미지 생성 프롬프트를 작성해 이미지를 뽑았다.

하지만 결과는 좋지 못했다.

내가 원하던 느낌은 Sketch 느낌, 낙서한 듯한 느낌의 자유로운 형태의 이미지였다. 하지만 Gemini가 생성한 이미지는 조금 더 아이콘 스러운 형태의 이미지가 나왔다. 직접 그린 느낌보다는 thenounproject 같은 곳에서 다운 받은 아이콘 느낌이 많이 났다.

그 다음으로 ChatGPT 에게도 이미지 생성을 요청해보았다. 그리고 결과는 성공적이었다.

챗 지피티는 내가 원하는 느낌으로 그림을 매우 잘 그려주었다. 일부 디테일한 부분에서 수정이 필요한 항목이나, 잘못 생성된 사진들도 있었지만, 대체로 내가 원하는 방향성에 맞게 표현되었다.

ChatGPT로 이미지를 만들때에는 모든 이미지에 대해 한번에 1개의 이미지 생성만 하지 않고, 한번에 9개정도의 일러스트를 한 이미지에 같이 담아 출력하도록 했다. 이렇게 하면 이미지 생성 제한에서 조금 더 여유롭게 이미지를 만들어낼 수 있고, 잘못된 이미지가 섞여 나오더라도 다음 프롬프트에서 섞어서 하면 되기 때문에 효율적이었다.

나는 ChatGPT로 앱에 필요한 모든 이미지를 만들고, 일러스트로 불러와 다듬었다. 그리고 모든 이미지를 다시 svg 의 벡터 이미지로 출력했다.

이미지를 PNG나 JPG가 아닌 벡터로 출력한 이유는, 확대나 깨짐 관련한 이유도 있지만 가장 큰 것은 용량이었다. 고화질의 이미지를 PNG로 출력하게 되면 큰 용량이 필요하지만 SVG 파일은 상대적으로 용량이 적고 안정적이다. 특히 내가 만들고자 하는 이미지들은 모두 흑백의 단순한 선 기반이므로 용량적으로 훨씬 큰 이득이 있다.

그렇게 다는 모든 이미지들을 ChatGPT 와 일러스트레이터의 조합으로 출력했다.

참고로 내 블로그의 메인 로고 아이콘도 여기서 출력한 이미지를 이용했다. 의미나 이유가 있기보다는 그냥 만족스러워서 넣었다.

효과음과 배경음악

효과음과 배경음악을 찾는 것도 쉽지만은 않았다.

가장 어려운 것은 적절한 효과음을 찾을 수 있는 웹사이트를 찾는 것이었다. ‘효과음’이나 ‘음악’을 무료로 공유하고 다운받을 수 있도록 하는 웹사이트는 많다. 하지만 그곳 중 저작권이 확실하게 보장되는 곳은 많지 않다. 효과음 라이브러리는 대체로 유튜브 영상 제작자들을 위한 사이트들이 많았고 그곳에 있는 효과음들도 유튜브에 더욱 적합한 효과음들이고, 게임이나 현실적인 소리들과는 거리감이 있었다. 무엇보다 저작권이 보장된, 안전한 파일들을 모아놓은게 아니기 때문에 함부로 이용할 수 없었다.

그러던 중 pixabay를 찾게되었다. pixabay는 원래부터 이미지 찾기를 위해 자주 접속하던 서비스인데, 여기서 효과음과 음악 또한 Copyright Free로 공유되고 있다는 것을 알게되었다. 이에 나는 앱에 사용될 모든 효과음들을 Pixabay에 검색해서 찾게 되었다. (학교종소리만 한국저작권위원회의 공유마당 서비스를 이용하였다.)

개발하기

실제 개발 과정은 이전 포스트에서 언급한 것과 유사하게 진행되었다. 차이점이 있다면 이제는 기능 설계와 검증 단계를 넘어서, 실제 앱 프로세스에 맞게 개발을 진행하고, 맵을 만들었다. 그리고 수많은 버그 해결 과정이 있었다.

그림을 그릴 때 배경 스케치를 하고 점차 채색을 하고 디테일을 추가하듯이, 개발을 할 때에도 처음부터 완벽한 개발을 하기보다 하나하나씩 틀을 만들고, 디테일을 맞춰가는 식으로 진행했다.

최종 앱

최종적으로 완성된 앱이다.
최종 앱에서는 단순히 기능 뿐만 아니라, UX적인 부분도 고려하여 앱 프로세스를 만들었다.

온보딩

앱을 처음 켤 때 온보딩 화면에서는 메뉴를 모두 보여주지 않고, Start the Game을 메인 버튼으로 놓아 직관적으로 게임을 먼저 플레이하도록 하였다.

게임 플레이를 누르면 바로 게임으로 넘어가지 않고, 간단하게 어떠한 게임인지 소개하는 화면도 만들었다.

마지막으로 게임 플레이를 누르면 간단한 애니메이션과 대사가 나와 게임 플레이 전 이 상황과 스토리에 몰입할 수 있도록 하였다.

메인 게임

아래는 메인 게임 플레이 화면이다.

상단에는 내가 진행해야할 미션들이 있고, 중앙의 맵에서 캐릭터를 움직여 게임을 플레이할 수 있다.
스트레스 레벨에 따라 화면이 일렁이고 흔들리며 게임 진행이 어려워지게 된다.

스트레스 레벨이 100%를 찍으면 캐릭터는 안정을 취해야 한다.

이 때 팝업창이 뜨며 숫자를 셀 수 있는 화면이 나온다. 여기서는 숫자를 1-10까지 순서대로 눌러 캐릭터가 숫자를 카운팅할 수 있도록 하고 진정시킬 수 있다. 이 팝업 미션을 완료하면 스트레스 레벨이 0%로 리셋된다.

게임을 종료하면 과감각에 대해 배우고 정보를 알 수 있는 메뉴로 접속할 수 있다.

이곳에서는 각 게임에서 있었던 요소들과 그 의미를 통해 과감각에 대해 더 잘 이해하고 알아갈 수 있도록 정보를 제공한다.

게임 플레이 영상

마무리

위의 앱 제작을 마무리하고, 지원서까지 작성을 완료해 Swift Student Challenge 를 submit 하였다.

나 개인으로서는 만족스러운 결과가 나왔다고 생각한다. 하지만 실제 심사위원분들이 보는 관점은 다를 수 있고 지원서의 내용도 합격의 당락에 결과를 미칠 수 있기 때문에 기대는 하지 않으려 한다.

단지, 이 과정에서 내가 경험한 것들, 준비하며 얻은 조언과 배움들 덕분에 그 과정 자체로 뜻깊은 시간이었다.