르방 급여 반응형 하드웨어 인터랙션 구현 대표 이미지

르방 급여 반응형 하드웨어 인터랙션 구현

리드스위치와 로드셀 입력을 연결해 르방 급여 상태에 따라 캐릭터가 반응하고 성장하는 인터랙션을 구현했다.

작업일
2026.08.24–2026.09.06
디자인 분야
브랜딩인터랙션·모션
용도
코드·프로토타입영상·모션
사용 도구
IllustratorClaude · Sonnet 5
작성자
배수빈

작업 배경

사워도우 스타터 컴패니언 브랜드 MTOTO의 팀 프로젝트에서 Arduino 기반 하드웨어 인터랙션 구현을 담당했다. 르방 용기의 뚜껑 상태와 급여에 따른 무게 변화를 감지해 화면 속 캐릭터의 상태와 성장 애니메이션으로 연결했다.

작업 단계

평상시 화면과 뚜껑 감지

ClaudeIllustrator

평상시에는 MTOTO의 기본 애니메이션을 표시하고, 리드스위치로 뚜껑이 열리는 시점을 감지해 급여 인터랙션으로 전환했다. Freenove ESP32-WROVER CAM, ST7735S 1.8" TFT, 리드스위치, 자석, Arduino IDE 2.3.8, Adafruit GFX, Adafruit ST7735을 사용했다.

이제 리드 스위치 먼저 인풋으로 하고 빈 공간에 뚜껑 열 때마다 그 사방에서 튀어나오는 모션이 나오게 매핑하고 싶어 평소에는 터덜 터덜 걸어다니게 하고 회로 연결 방법부터 알려줘 버튼을 뺄꺼야. 연결 방법이랑 회로 알려줘
평상시 화면과 뚜껑 감지 단계 이미지

캐릭터 등장과 급여 대기

Claude

뚜껑이 열리면 MTOTO가 천장 또는 바닥에서 랜덤하게 등장하고 Hi!, <3, I'm Mtoto 중 하나로 인사하도록 구성했다. 이후 hungry 말풍선과 파스텔 스프링클을 표시하며 급여 대기 상태로 전환했다.

기본 -> 므토토랑 친구들이 줄지어서
중간 중간 랜덤하게 thirsty 가 뜸 터덜 터덜 (밥 달라는 뜻) -> 이 때 밥 줌
기본이 스위치 닫은 상태 에서 리드 스위치 열면 상단 / 좌우 랜덤한 위치에서 튀어 나오면서 hi! -> 다시 기본 화면 이렇게 구성했으면 좋겠고 리드 스위치랑 무게 센서 연결할껀데

일단 1. 르방용기 올려놓았을 때 기본 무게가 있잖아 -> 이건 밥 준걸로 인식하면 안돼 뭐가 그람수가 추가 된걸 감지하고 뭐가 추가 됐을 때 알-중간 아기 -> 성인으로 자라게 나와야하고 이때 흔들림 살짝만 더 극적으로 팡! 하고 나오게 2. 기본 화면에서 믹싱볼이랑 그릇이랑 지금 겹쳐있어 믹싱볼만 나오게 하고 믹실볼에 흰 색 물결 가로 무늬 한줄 추가해줘 3. 뚜껑 닫았다 열 때 나오는 그냥 말풍선 이상하면 없애고 새롭게 흰색 동그라미 + 주황 얇은 테두리 + 그 동그라미 안에 텍스트로 Hi! , <3, I'm Mtoto 이렇게 랜덤으로 뜨게 해줘 I'm Mtoto 는 두줄 중앙정렬이겠지 4.그리고 다시 세마리 나오는 기본 화면 코드 다시 짜줘

와 훨씬 좋은데 전반적으로 옅게 연청록으로 바닥에 늦게 언덕을 깔고 그 위에 믹싱볼이 올라간 느낌 ? 그리고 그 믹싱볼 안에 부글 거리는 반죽도 넣어봐 그 위를 므토토랑 친구들이 걸어다니는 느낌 근데 피곤한 므토토 말풍선은 그냥 없애고 걸어다닐 때 바닥 먼지만 추가해줘 얘 걸어다닐 때 하늘에서 여러 색깔 파스텔 톤의 스프링클러가 뿌려지게 해줘 슈가 스프링쿨러 그리고 리드 열었을 때 말풍선이 인사할 때 므토토를 가려 인사할 때 나오는 므토토는 위에서 나오는데 랜덤하게 바닥이랑 천장에서 나오게 해줘 그리고 인사하는애는 피곤한 애가 아니라 기본 므토토야 픽셀 다시 필요하면 말해 전반적으로 느낌 좋아 다시 짜줘

무게 변화 감지와 자동 보정

Claude

로드셀 1kg, HX711 앰프, Freenove ESP32-WROVER CAM, HX711 (Bogdan Necula)을 사용하여 뚜껑을 연 뒤 사용자가 손을 뗀 시점의 무게를 기준선으로 설정하고 이후 증가량을 raw 카운트로 감지했다. 부팅 후 3초 동안 센서 노이즈를 측정해 무게 판정 임계값을 자동 보정했다.

일단 로드셀 연결 다 했고 무게 센서가 됐다는 가정하에 캐릭터 무게 센서가 측정되면 성장하는걸 보여주고 캐릭터 크기 더 키워줘 위에서 튀어나오는 애도 쿠키처럼 해줘 약간 초코칩 쿠키도 좋아

작은 구슬 무게를 감지 못하는거같아 거의 숟가락으로 그릇을 눌러야지 반응이 와 알 크기는 줄여도 돼

이 코드로 최종 인터렉션 성공했었는데 (자갈 3-4개로 무게 인식함 ) 맥북에서 뺏다가 다시 하니깐 자갈을 진짜 진짜 많이 넣어야지만 알 성장 화면이 떠 . .
무게 변화 감지와 자동 보정 단계 이미지

회고

성과와 한계

뚜껑 개폐와 르방 급여에 따른 무게 변화를 두 종류의 센서 입력으로 감지해 하나의 캐릭터 인터랙션으로 연결했다.

시행착오와 개선점

사용자가 용기에 손을 대는 과정에서 발생하는 무게 변화를 줄이기 위해 뚜껑을 연 뒤 손을 뗀 시점을 기준선으로 설정했다. 센서 노이즈에 대응하기 위해 부팅 시 3초 동안 노이즈를 측정하고 임계값을 자동 보정하도록 구성했다.

적합한 활용 맥락

물리적인 용기 조작과 무게 변화를 화면 속 캐릭터 상태 변화에 연결하는 인터랙티브 제품 프로토타입에 활용할 수 있다.

댓글

0개

작성자 정보를 확인하고 있습니다.