김재현Hammer Turtle
프로젝트 목록

허기부기

친구끼리 쓰는 데스크톱 픽셀 펫 메신저

배경 및 목표

친구들과 메신저 대화보다 가볍게 “지금 뭐 하는지”를 주고받고 싶었으나, 기존 메신저는 대화창 중심이라 그런 신호를 주고받기 어려웠음.

→ 화면 아래 투명 오버레이에서 친구마다 픽셀 캐릭터가 걸어 다니며 접속·졸음·잠 상태와 말풍선을 보여 주는 데스크톱 앱을 직접 개발. 아이템 던지기 · 피하기 · 쓰다듬기 · 먹이 주기 같은 장난을 실시간으로 주고받고 캐릭터와 아이템은 친구가 직접 그려 올릴 수 있게 함. Mac·Windows 혼재 환경, 운영 비용 0원을 목표로 설계.

역할

전 과정 주도 (1인 풀스택 개발: 설계 · DB 스키마 · RLS · 실시간 프로토콜 · 서버 함수 · 데스크톱 앱 · 웹 · 배포 · 소개 페이지)

주요 업무 및 성과

① 투명 오버레이 위의 실시간 캐릭터 메신저

  • 오버레이와 실시간 Electron 투명·클릭 통과 창에 canvas로 캐릭터를 그리고 게임·영상 같은 전체화면 앱이 뜨면 자동으로 비켜남. Supabase Realtime 채널 하나에서 상태는 Presence, 장난은 Broadcast로 나눠 DB 저장 없이 주고받고, 던지기 속도는 화면 대비 비율로 보내 해상도가 달라도 궤적이 같음.
  • 캐릭터 생활과 콘텐츠 먹으면 커지고 배부르면 응가, 오래 굶으면 꼬르륵·홀쭉해지는 상태 순환과 밟기·하이파이브 같은 캐릭터끼리의 상호작용을 넣어 말 없이도 서로를 챙기게 함. 캐릭터·아이템은 DB 행 + Storage 스프라이트로 정의해 친구가 앱 안에서 직접 그려 올리면 바로 반영되고, 할로윈 같은 시즌 테마도 앱 배포 없이 DB JSON(groups.theme)과 스프라이트로만 켜고 끔. 파서가 모르는 칸은 건너뛰게 만들어 업데이트하지 않은 옛 버전도 그대로 동작.
  • 폰 웹 대화와 같이 듣기 데스크톱 대화 기록 화면(4가지 테마)을 브라우저에서 그대로 띄워 낙서 쪽지까지 쓰고 펼쳐 보게 하고, 이름이 불리거나 내 말에 답장이 오면 서버 함수가 웹 푸시를 보냄. 그룹이 같은 곡을 같은 순간에 듣도록 재생 위치를 맞추고 지금 부르는 줄을 따라가는 가사와 좋아요 인기곡을 붙임.

② 중간에서 엿볼 수 없는 대화

  • 채팅 잠금 말·사진·링크 카드·낙서 쪽지를 그룹 키(AES-GCM)로 잠가 보내고 그룹 키는 서버 공개 키(HPKE)로 봉해 전달. SSL 프록시 같은 네트워크 검사에도 내용이 보이지 않음.
  • 링크 미리보기 받는 사람 기기가 남의 서버에 직접 요청해 IP가 드러나지 않도록 서버 함수가 대신 받아 옴. 사설망 주소는 막고 리다이렉트마다 다시 검사해 SSRF를 차단.
  • 접근 제어 초대코드 입장은 security definer RPC로만 열고 테이블·Storage·Realtime 모두 RLS로 같은 그룹 멤버만 접근.

③ 혼자서도 굴러가는 검증·배포·성능

  • 두 앱을 띄워 CDP로 조작하는 e2e 135개 시나리오와 단위 테스트 498개로, 친구 둘이 필요한 상호작용도 혼자 회귀 검증.
  • 성능 대화 기록의 움직이는 그림 수천 개가 각자 애니메이션을 돌려 GPU를 붙잡고 오버레이까지 버벅이던 문제를, 화면에 보이는 것만 공용 루프 하나로 그리게 바꿔 해결.
  • 태그 push 한 번으로 Mac·Windows 설치 파일 빌드와 릴리스 노트 공개까지 자동화.

결과

① 친구 그룹에서 운영 중, v1.32.1까지 릴리스. Supabase 무료 플랜 + GitHub Releases로 운영 비용 0원.

② 설치부터 캐릭터 제작 가이드까지 친구가 혼자 설치하고 직접 그린 캐릭터로 노는 흐름을 전부 자체 개발.

회고

메신저의 핵심이 “메시지”가 아니라 “옆에 있다는 느낌”이라는 걸 만들면서 알았다. 대화창 대신 캐릭터 상태와 장난을 앞에 두었더니 오히려 더 자주 말을 걸게 되었다. 또 상대가 있어야만 확인되는 기능일수록 자동화된 e2e가 없으면 개발 속도가 친구의 시간에 묶인다는 걸 체감했고 테스트를 “혼자 일하기 위한 동료”로 다루게 되었다.