Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
이 글은 사용자가 위치와 분위기를 입력하면 오픈 웨이트 AI 모델을 활용하여 맞춤형 '터치 그래스 빙고' 웹 애플리케이션을 만드는 과정을 소개합니다. 이 앱은 브라우저에서 실행되며, 사용자에게 실제로 밖에 나가 활동하도록 유도하는 것이 핵심입니다. 개발 과정에서는 Llama 3.2 1B Instruct와 WebLLM을 사용하여 백엔드 없이 순수 HTML 파일로 구현했습니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기이 글은 Hacktoberfest 오픈소스 AI 챌린지 주차 1: 터치 그래스 (Touch Grass)에 제출하는 내용입니다.
터치 그래스 빙고(Touch Grass Bingo)는 작은 웹 애플리케이션입니다. 사용자가 자신의 도시나 지역을 입력하고, 가용 시간(15분에서 2시간 사이)과 분위기(산책하기 좋은 차분한 느낌, 사진 사냥, 길거리 음식 및 사람들, 자연 및 야생동물 등)를 선택합니다. 그러면 오픈 웨이트 AI 모델이 사용자만을 위한 5x5 빙고 카드를 작성해 줍니다: "길거리 개 발견", "사찰 종소리 듣기", "꽃 찾기" 등이 있습니다.
그 후 휴대폰을 주머니에 넣고 나가서 칸들을 체크하며 돌아다니면 됩니다. 가운데 칸은 무료입니다. 한 줄을 완성하면 BINGO를 얻게 됩니다.
아이디어는 간단합니다. 이 앱이 하루 중 가장 짧은 순간의 일부가 되어야 합니다. 사용자가 30초 동안만 열어보고, 그리고 떠나는 것입니다.
실시간 앱: https://sanny1921.github.io/touch-grass-bingo/
Start screen of Touch Grass Bingo
A real card generated on my Android phone
두 번째 스크린샷은 실제 카드이며, 제가 직접 안드로이드 폰의 Chrome에서 생성한 것입니다. 모형이 아닙니다.
https://github.com/Sanny1921/touch-grass-bingo
처음으로 "나의 카드 생성하기" 버튼을 누르면 브라우저가 모델을 다운로드합니다 (약 700MB). 그 후에는 기기에 캐시됩니다. 그 이후부터는 모든 것이 휴대폰에서 이루어집니다.
이것을 하룻밤 사이에 만들었고, 첫 번째 버전은 제 휴대폰에서 작동하지 않았습니다.
v1: 모델에게 24개의 문자열로 구성된 JSON 배열을 반환하도록 요청했습니다. 휴대폰에서는 모델 로딩 자체는 잘 되었지만, 계속해서 깨진(broken) JSON만 반환했습니다. 3번 재시도 후 앱은 포기하고 내장 시작 카드(built-in starter card)를 보여주었습니다. 결과적으로 AI를 사용하지 않는 "AI 앱"을 갖게 된 것입니다.
v2: 저는 1B 모델이 엄격한 JSON 처리에 취약하다는 것을 깨달았습니다. 계약 조건을 단순 번호 목록("1. 길거리 개 발견")으로 변경하고 관대한 파서(forgiving parser)를 작성했습니다. 이 파서는 번호 매기기 스타일, 글머리 기호, 마크다운(markdown), 중복 항목을 무시하며 불필요한 줄은 삭제합니다. 또한 더 큰 모델인 Qwen2.5 1.5B도 시도해 보았습니다. 하지만 그것은 1GB 다운로드였고, 제 와이파이 환경에서 캐시 오류로 계속 실패했습니다. 교훈: 휴대폰에서는 모델 크기 자체가 제품의 일부입니다.
v3: 저는 이미 휴대폰에 다운로드되어 있던 Llama 3.2 1B로 돌아가서 번호 목록 방식을 유지했습니다. 또한 복구 단계(salvage step)를 추가했습니다. 이 앱은 3번의 시도 중 가장 좋은 결과를 유지하며, 모델이 최소 14개의 좋은 사각형을 제공하면 나머지 부분은 시작 목록에서 채우고 모든 것을 버리지 않습니다. 저는 또한 모델 다운로드를 위한 재시도 기능과 눈에 보이는 진행률 백분율(progress percentage)을 추가했습니다.
그것이 작동했습니다. 위의 스크린샷의 카드는 제 휴대폰의 모델에서 나온 것입니다.
솔직한 한계: 1B 모델은 단순하고 일반적인 사각형("꽃 찾기"와 같은)을 작성합니다. 이것은 여행 가이드가 아닙니다. 더 큰 모델이라면 더 날카롭고 지역적인 카드들을 작성할 것이며, 그것이 제가 시간이 더 있다면 가장 먼저 바꿀 부분입니다.
이 프로젝트는 파트너 도구를 사용하지 않습니다. WebLLM으로 브라우저에서 실행되는 오픈 웨이트 모델(Llama 3.2)이기 때문에, 저는 종합 상을 목표로 참가합니다.
읽어주셔서 감사합니다. 이제 나가서 풀밭에 좀 접촉하세요.