Go Outside: 온디바이스 Gemma가 작은 미션을 작성하고 휴대폰을 치우라고 알려주는 앱

이 글은 Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass 제출물입니다.

제가 만든 것 (What I Built)

대부분의 앱은 화면에서 몇 분 동안 성공을 측정합니다. 저는 사용자가 앱을 닫았을 때도 승리라고 간주하는 것을 만들고 싶었습니다.

Go Outside는 원 버튼 웹 애플리케이션입니다. '미션 주기(Give me a mission)'를 누르면, 브라우저 내부의 자체 GPU에서 실행되는 Gemma가 날씨, 시간대, 계절에 맞춰 다음 20분, 30분 또는 45분을 위한 하나의 짧은 야외 미션을 작성합니다. 예를 들면 다음과 같습니다:

웅덩이 거울(Puddle Mirrors). 무언가 높은 것(나무, 가로등, 지붕선)을 비추는 웅덩이 세 곳을 찾아보세요. 가장 마음에 드는 것을 하나 고르세요.

그러면 앱은 방해되지 않습니다. 화면은 거의 검게 변하고, 큰 카운트다운과 함께 **휴대폰 치우고 가세요(Phone away. Go.)**라는 메시지를 보여줍니다. 돌아왔을 때, '무엇을 보았나요?(what did you see?)'라는 선택적 질문 하나를 하고, 그 한 줄의 답변을 장치에만 존재하는 작은 필드 저널에 저장합니다.

이 앱은

Go Outside는 너무 오래 스크롤하고 있다는 것을 깨달았을 때를 위한 작은 웹 앱입니다. 버튼 하나를 누르면 Google의 오픈 웨이트 모델인 Gemma가 WebLLM을 통해 브라우저 내에서 실행되어 다음 20분, 30분 또는 45분 동안 수행할 단 하나의 미션을 작성합니다. 이 미션은 사용자의 날씨, 시간대, 계절에 맞춰져 있습니다. 예를 들면 다음과 같습니다:

키가 큰 것(나무, 가로등, 건물 외벽 등)이 비치는 물웅덩이를 세 군데 찾아보세요. 가장 마음에 드는 것을 골라보세요.

그러면 앱은 방해되지 않도록 사라집니다. 화면은 거의 검게 변하고, 커다란 카운트다운과 함께 **휴대폰을 치우고 가세요(Phone away. Go.)**라는 메시지를 보여줍니다. 돌아왔을 때에는 기기에만 저장되는 작은 필드 저널에 무엇을 보았는지 한 줄만 남길 수 있습니다.

...를 위해 만들어졌습니다.

GitHub에서 보기

순수 HTML, CSS 및 ES 모듈로 구성되었습니다. 빌드 단계나 백엔드가 필요 없으며 MIT 라이선스를 따릅니다.

제작 과정 (How I Built It)

브라우저 내의 Gemma. 이 모델은 WebGPU에 모델을 컴파일하는 MLC의 오픈 소스 엔진인 WebLLM (@mlc-ai/[email protected])을 통해 실행됩니다. 기본 설정은 **gemma-2-2b-it-q4f16_1-MLC-1k**입니다: Gemma 2 2B instruct 모델로, 4비트 양자화되었으며 1k 컨텍스트 창을 가지고 있어 단일 짧은 프롬프트에는 충분하며 메모리를 절약합니다. GPU가 16비트 셰이더 지원이 부족할 경우, 앱은 동일 모델의 q4f32 빌드로 전환됩니다.

날씨와 일몰 정보는 무료이며 키가 필요 없고 위치를 선택할 경우에만 사용하는 Open-Meteo에서 가져옵니다. 규칙은 간단하며 조건에 따라 달라집니다: 구체적이고 완료 가능한 과제 하나; 도보로 수행; 위험하지 않은 활동; 사진 촬영이나 앱 사용 금지. 어두울 때는 불이 켜진 거리를 따라 이동합니다. 비가 올 때는 비를 미션의 일부로 만듭니다. 천둥번개가 칠 때는 현관에 머뭅니다. Gemma의 채팅 템플릿에는 시스템 턴(system turn)이 없으므로 모든 것이 하나의 사용자 메시지로 들어갑니다. 모델은 고정된 형식으로 답변합니다:

TITLE: Puddle Mirrors
MISSION: 세 개를 찾아 높은 것을 비추는 물웅덩이를 발견하세요...

작은 모델에게는 안전장치가 필요합니다. 2B 모델은 짧고 생생한 지침을 잘 작성하지만 항상 형식을 따르지는 않습니다. 파서(parser)는 마크다운과 인용 부호를 제거하고, 누락된 레이블에 대처하며, 문장 경계에서 긴 답변을 자르고, 너무 짧은 것은 거부합니다. 잘못된 답변이 오면 한 번 재시도합니다. 그것마저 실패하거나 모델 로드가 불가능하면, 앱은 동일한 플래그(날/밤, 습함/건조함, 추움, 더움, 바람)로 필터링된 22개의 수작업 미션 중 하나를 사용합니다. 여러분은 항상 무언가를 가지고 문을 나섭니다.

다운로드 용량 존중. 약 1.5GB가 예고 없이 도착해서는 안 되므로, 첫 번째 미션은 먼저 물어보고 대신 수작업 미션을 제공합니다. 그 후에는 WebLLM이 가중치를 캐시 스토리지(Cache Storage)에 보관하고 서비스 워커(service worker)가 앱과 고정된 WebLLM 번들을 캐싱합니다. 첫 실행 후에는 비행기 모드에서도 작동합니다.

자리 비움 화면은 틱(ticks)을 세는 대신 종료 시간을 저장하므로, 휴대폰 잠금이나 탭을 닫아도 카운트다운이 정확하게 유지됩니다.

테스트. 헤드리스 테스트 환경에는 GPU가 없으므로, 자동화된 테스트는 나머지 부분을 다룹니다: 날씨, 프롬프트 및 답변 파싱에 대한 단위 테스트(unit tests); no-WebGPU 흐름을 통해 실제 페이지를 jsdom으로 실행하는 테스트; 모델 로드 실패 시의 대체 테스트(fallback test); 그리고 제가 호출하는 함수와 Gemma 모델 ID가 존재하는 정확한 고정 WebLLM 번들에 대한 확인입니다.

왜 오픈 이노베이션이 중요할까요?

이 프로젝트를 위해 오픈 웨이트(open weights)는 제가 원하는 방식으로 작동할 수 있을지 결정했습니다.

• 사용하는 장소에서 실행됩니다. 공원이나 트레일은 신호가 자주 끊깁니다. 오픈 웨이트는 기기 자체에 탑재되어 오프라인으로 실행될 수 있습니다. 폐쇄형 API(closed API)는 사용자가 연결이 없기를 바라는 바로 그 순간에 반드시 연결을 필요로 합니다.
• 전송할 것이 없습니다. 대략적인 위치, 습관, 일지 같은 정보가 모델 제공업체로 전송되지 않습니다. 왜냐하면 그런 곳 자체가 없기 때문입니다. 미션 중 유일한 네트워크 호출은 좌표를 약 10km 단위로 반올림한 선택적 날씨 요청뿐입니다.
• 실행 비용이 들지 않습니다. API 키도, 요청당 청구액도, 서버도 필요하지 않으므로, 무료 작은 앱이 계속 무료로 유지될 수 있습니다.
• 모든 레이어를 보고 교체할 수 있습니다. WebLLM은 오픈 소스이며, 컴파일된 Gemma 빌드는 공개되어 있고, Gemma 2 2B와 Gemma 3 1B 간 전환은 한 줄의 설정 변경으로 가능합니다. 만약 다음 달에 더 나은 작은 오픈 모델이 나온다면, 이 앱도 그것을 사용할 수 있습니다.

솔직한 주의사항 하나: Gemma는 Google의 Gemma 이용 약관(Gemma Terms of Use) 하에 오픈 웨이트이며, OSI 승인 라이선스는 아닙니다. 이 앱에서 중요했던 것은 이를 다운로드하여 로컬에서 실행하고 서버 없이 사용자에게 배포할 수 있는 능력이었고, 오픈 웨이트가 이 모든 것을 가능하게 합니다.

수상 부문

Gemma의 최적 활용: Gemma는 이 앱의 핵심입니다. Gemma 2 2B(또는 더 가벼운 설정에서의 Gemma 3 1B)는 WebLLM과 WebGPU를 통해 사용자 브라우저에서 완전히 실행되며, 실시간 날씨, 빛, 계절, 장소를 하나의 구체적인 야외 미션으로 변환합니다. 서버도 API도 필요 없으며, 첫 실행 후에는 오프라인에서도 작동합니다.

AI 도움으로 제작: AI 어시스턴트가 코드, 테스트 및 이 게시물의 초안 작성에 도움을 주었습니다.