디자인 컨셉과 레이아웃이 나왔으므로 앱 프로토타입을 만들어야 한다.

왜 실제 앱을 바로 만들지 않고 프로토타입부터 만드느냐? 이것은 사람마다 방식이 갈릴 수도 있겠지만, 나의 경우는 테스트 이미지와 테스트 시안으로 프로토타입을 만들고 그 이후에 디테일한 맵 설정과 디자인, 이미지 교체 등을 진행하고자 한다.

즉 실제 앱이 원하는 프로세스에 맞춰서 진행되는지, 원하는 기능을 구현할 수 있는지, 그리고 궁극적으로 재미있는지를 먼저 점검하고 그 이후에 개선해나가는 방식을 택한 것이다.

개발 환경

나는 우선 Antigravity¹라는 VSC 기반의 AI 코딩 툴을 활용해 개발을 진행했다. Claude Code와 같이 성능이 조금 더 좋은 툴을 쓸 수도 있겠지만 내가 만드는 게임 정도는 코딩 실력이 엄청날 필요는 없다고 느꼈다. 특히, 나는 이미 Google One 계정이 있기 때문에 Antigravity를 통해 개발을 진행하는게 더 이득이었다.

AI와 함께 코딩을 진행하며 제일 중요하게 생각한 것은 규칙이었다. AI가 하고 있는 것을 트래킹하고, 내가 개입한 경우 어떻게 개입했는지 상호 트래킹이 가능해야했다. 또한 코딩 규칙이나 변수명, 기능들을 서로 공유해야했다. 따라서 나는 한개의 공동 마크다운 텍스트 파일을 만들어 이곳에서 모든 규칙을 공유했다.

이 앱은 무엇에 관한 것이고, 어떠한 어떠한 프레임워크와 기반이 들어가야 하며, 제약사항과 꼭 지켜야 하는 사항은 무엇인지. 개발 규칙과 변수명 설정 방법 등은 무엇인지, 그리고 가장 중요한 것은 하단에 개발로그를 무조건 남기도록 해 서로 진행상황과 로그 확인을 가능하도록 했다.

Swift Student Challenge에 출품하는 작품은 앱 플레이그라운드(.swiftpm) 파일이어야 하며 아이패드 혹은 맥에서 구동이 되어야 한다. 따라서 실제 앱의 패키지 파일을 관리하고, 테스트 시뮬레이션을 돌리면서 개발하기 위해서는 Xcode가 거의 반 필수이다. 따라서 나는 Xcode와 Antigravity를 동시에 켜놓고, 두 IDE를 보며 수정을 진행하였다.

앱을 개발하는 단계에서 나는 아카이빙과 개발 로그 기록을 위해 별도의 github 페이지를 만들어 관리했다. Github을 사용할 때의 장점은 이미 개발자분들이라면 모두 아실거라 생각한다. 실시간으로 수정된 코드를 확인하고 변경사항을 기록할 수 있다. 그리고 개발 중 잘못될 경우 이전 버전을 다시 복원시킬 수 있다.

그렇게 AI와 채팅을 주고받으며 완성된 초기 프로토타입이다.

초기 프로토타입

가장 먼저 만든 기능은 얼굴을 인식하고, 입을 벌리는 행위 / 귀를 막는 행위를 인식하는 기능이었다.

개발 테스트 화면에는 내 얼굴이 나오기 때문에 보여줄 수는 없지만, 양 윗입술 아랫입술, 양쪽 귀, 그리고 손바닥을 모두 인식해서 입술이 벌어지는지 여부와 귀 근처에 손바닥이 오는지 여부를 판별할 수 있는 알고리즘을 만들었다.

이 때 한가지 문제점이 발생하였다. 귀에 손을 완전히 밀착시키면 ‘손’인식이 해제된다. 즉, 손이 얼굴에 가려지는 순간 손 인식은 더 이상 작동하지 않아 귀를 덮었는지 아닌지 인식이 불가능했다. 따라서 나는 약간의 트릭을 써서 귀를 막고 있는 것이 on 으로 인식된 상태에서 손 인식이 해제되는 경우 계속하여 막고 있는 것으로 인식하도록 했다. 어차피 귀에서 손을 떼기 위해서는 다시 화면에 손이 보이고 covering-ears가 무조건적으로 해제되기 때문이다.

아래는 메인 화면이다.

우선 앱 로고는 피카소의 Le Chien 작품을 임시로 적용시켰다. 실제 로고로 활용할 계획은 아니지만 앱의 디자인 컨셉을 바탕으로, 현재 레이아웃과 디자인 시안을 보며 진행하고 싶었다.

가장 중요한 게임 화면이다.

상단에는 내가 먹어야 할 미션들이 표시된다. 지금 예시에서는 애플 로고, 물방울, 쇼핑카트를 순서대로 먹어야 한다.

중앙의 화면에서는 내가 이끄는 대로 캐릭터를 리드할 수 있다. 이 때 소리 근처에 다가가게 되면 스트레스 레벨이 상승하게 된다.

좌측 하단에는 내 카메라가 그대로 나타나고, 나는 귀를 막거나 입을 벌리는 행위를 할 수 있다.

위의 초기 기능까지 검증이 완료되고 난 이후, 실제 게임에 더 가까워지도록 계속하여 기능 개선을 진행하였다.

아래는 중간단계 이후의 게임 화면이다.

소리가 나오는 출처는 파형을 기반으로 표시되도록 만들었고, 길 또한 ‘장애물’이 길을 막는 것이 아닌, 정해진 길로만 가야한 방식으로 로직을 수정했다.

여기까지 만들고 난 후 게임을 플레이해본 결과 생각보다 재미있다. 그리고 실제 자폐 스펙트럼 장애를 가지신 분들이 과감각으로 인해 일상생활이 힘든 부분을 괜찮은 수준으로 표현할 수 있겠다는 생각이 들었다.

이제 어느정도 앱 프로토타이이 완성되었다 보고, 실제 앱으로 만들기 위해 디자인 완성도를 추가하고, 기능 디테일을 추가하는 작업을 해야한다.

다음 포스트에서는 실제 앱을 만들어, 앱이 어떻게 작동되는지와 이를 Swift Student Challenge에 출품하기 위해 서류작업을 하는 과정을 공유하고자 한다.

1. Antigravity: Google에서 만든 Visual Studio Code 기반의 AI 코딩 툴, Gemini를 기반으로 AI와 대화하며 코딩을 할 수 있다. ↩︎