겨울에 버스 창문에 입김을 불어본 적이 있다.
뿌옇게 흐려진 자리에 손가락으로 하트를 그리거나, 이름을 쓰거나, 그냥 바깥이 보이게 동그랗게 닦아놓거나. 몇 초 뒤면 다시 흐려지고, 흐려지면 또 닦는다. 아무 쓸모도 없는 짓인데 그게 그렇게 재밌었다.
그 창문을 멀리 있는 두 사람이 같이 쓰게 만든 웹페이지가 있다. fog, 김과 together, 함께를 붙여 만든 Fogether다.
AI 워크샵 이후 실제로 제품을 만들고 배포한 분들의 이야기를 소개하고 있다. 두 번째 손님은 매치그룹에서 크리에이티브팀에서 디자이너로 일하는 애나님이다. AI워크샵 이후로 인터랙티브 데모를 직접 만들기 시작했고, 혼자 보던 화면을 멀리 있는 두 사람이 함께 쓰는 제품으로 바꾸셨다. 제품을 만든 계기와 과정, AI가 해준 일과 직접 판단한 일을 물었다. 보내주신 답변을 질문과 답으로 정리해본다.
Q. 안녕하세요 애나님. 지금 어떤 일을 하고 계시고, 이번에 만드신 Fogether는 어떤 제품인가요?
매치그룹에서 크리에이티브 스페셜리스트로 일하고 있어요. 어떻게 하면 사람들이 아자르와 비비디 같은 앱에 더 많이 들어오게 할지를 고민하는 일이에요. 하루 종일 사람과 사람을 연결하는 법을 들여다보는 셈이죠.
Fogether는 입김 서린 창문을 멀리 있는 두 사람이 같이 쓰게 만든 웹페이지예요. 둘이 같은 방에 들어오면 한쪽에서 분 입김과 손으로 그린 흔적이 다른 쪽 창문에도 나타나요. 이름은 fog와 together를 붙여 만들었어요.
계속 구경하다가, 직접 만들었다
Q. Fogether를 만들게 된 계기가 궁금해요. 어떤 장면에서 시작하셨어요?
사실 이 컨셉 자체는 제 아이디어가 아니에요. 손 인식으로 화면에 입김을 불어 안개를 만드는 인터랙티브 데모가 한동안 SNS에 계속 돌았거든요. 디자이너들이 바이브 코딩으로 이런 걸 뚝딱 만들어 올리는 걸 보면서, 저는 계속 스크롤만 하고 있었어요. 좋아요를 누르고, 저장해두고, 또 스크롤하고요.
정작 저는 만드는 쪽이 아니라 보는 쪽에 서 있었어요. 다들 만드는 사람이 되어가는데 나는 계속 구경하는 사람이구나, 하는 감각이 조금씩 조급해졌어요. 그러던 참에 회사 AI 데이에서 시영님이 직접 만든 슬랙봇을 바탕으로 Claude Code를 쉽게 시작하는 법을 알려주셨어요. 대단한 결심을 했다기보다, 그 세션이 “지금 아니면 계속 구경만 하겠다”는 마음을 살짝 밀어줬어요.
Q. 세션 이후 실제로 첫 화면은 어떻게 만들기 시작하셨어요?
참고할 데모 코드를 하나 구했어요. 그대로 쓰지는 않고 처음부터 다시 세팅하면서 한 줄씩 이해하고 고쳐나갔어요. 시영님 세션에서 배운 대로 Claude Code에게 “이렇게 되면 좋겠어”라고 대화하듯 설명하면서요.
해보니까 별거 아니었어요. 남들이 하는 걸 나도 할 수 있다는 걸 확인하는 데 걸린 시간이, 그걸 못 할 거라고 생각하며 구경한 시간보다 훨씬 짧았어요.
혼자 보던 거울을 둘이 보는 창문으로 바꿨다
Q. 처음 만드신 화면은 지금의 Fogether와 달랐다고요.
처음 만든 건 혼자 보는 거울이었어요. 웹캠 앞에서 입을 벌리면 화면이 김 서린 유리처럼 흐려지고, 손으로 문지르면 닦이는 것. 만들고 나서 십 분쯤 혼자 하트를 그리며 놀았어요. 기분이 좋아서 주변에 보여줬는데 한 명이 이렇게 말했어요. 어, 이거 일본에 있는 남자친구랑 장거리 하려고 만든 거야? 아니었어요. 진짜로 그럴 생각이 전혀 없었거든요. 근데 듣는 순간 생각했죠.
어, 그거 좋은 생각인데?
남자친구는 일본에 있어요. 영상통화는 하죠. 근데 영상통화는 항상 “지금 시간 괜찮아?”부터 시작해야 하잖아요. 얼굴을 정면으로 마주 보고, 할 말이 있어야 하고, 끊을 타이밍도 잡아야 하고요. 같이 있을 때 좋았던 건 그런 대화가 아니라 아무 말 없이 같은 공간에 있는 거였는데, 그건 어떤 앱으로도 안 되더라고요.
그래서 거울을 창문으로 바꿨어요. 한 명이 보는 게 아니라 두 명이 양쪽에서 같은 유리를 보는 구조로요.
Q. 남자친구분과 처음 같은 창문에 들어왔던 날은 어떠셨어요?
제가 그리는 그림이 그 사람 화면에 실시간으로 나타나는 걸 보고 진짜 신이 났어요. 딱히 무슨 말을 하지 않아도 같은 공간에 있다는 게 느껴졌어요. 영상통화로는 한 번도 느껴본 적 없는 종류의 같이 있음이었거든요.
그리고 쓰면 쓸수록 “이것도 되면 좋겠는데”가 계속 튀어나왔어요. 지금 있는 기능들은 대부분 그렇게 생긴 거예요. 기획서에서 나온 게 아니라 둘이 쓰다가 아쉬워서 생긴 것들.
둘이 쓰다가 기능이 생겼다
Q. 두 분이 같이 쓰면서 처음 아쉬웠던 건 뭐였어요?
“상대가 지금 거기 있나?”였어요.
창문은 열어놨는데 저쪽이 접속했는지, 지금 보고 있는지를 알 수 없더라고요. 그래서 상대의 존재를 화면 위에 띄웠어요. 상대가 들어오면 배지가 “? here together”로 바뀌고, 상대가 숨을 불면 내 유리에도 그 자리에 부드러운 파문이 번져요. 손으로 닦으면 따뜻한 빛 덩어리가 화면 위를 같이 움직이고요. 뭘 그리는지 실시간으로 보이는 거죠.
Q. leave mark는 어떤 아쉬움 때문에 생겼어요?
그다음 아쉬움은 시차였어요.
둘이 동시에 화면 앞에 있는 순간은 생각보다 드물어요. 실시간으로만 되는 창문은 결국 타이밍을 맞춰야 하는 또 하나의 영상통화가 되더라고요. 그래서 흔적, leave mark를 만들었어요. 김을 서리게 하고 뭔가 그린 다음 버튼을 누르면 상대가 없어도 남아요. 결과물만 가는 게 아니라 그리던 마지막 몇 초의 움직임까지 같이 가고요. 라이브 포토처럼요.
Q. 지금 있는 기능 가운데 처음 데모에서 가져온 것과 애나님이 새로 만든 것은 어떻게 나뉘나요?
양손으로 ‘ㄴ’ 자를 만들어 잠깐 들고 있으면 3, 2, 1 뒤 셀카가 찍히는 기능은 원래 데모 코드에 이미 있었어요. 사진은 하단 필름 스트립에 저장되고 두 사람 모두에게 공유돼요.
제가 더한 건 새로운 기능이라기보다 ‘혼자’를 ‘둘’로 만드는 층이었어요. 서로의 존재를 화면에 띄우고, 없을 때도 흔적이 남게 하는 것. 이 프로젝트에서 제가 진짜 만든 건 반짝이는 장치보다 같이 있다는 감각에 가까워요.
기존 데모에서 시작했다는 사실보다 흥미로운 건 무엇을 바꾸셨느냐였다. 손 추적과 셀카 기능은 가져오셨지만, 거기에 멀리 있는 두 사람의 관계를 넣으셨다. 따라 만드는 건 시작일 뿐이다. 같은 기술도 누구의 어떤 장면에 놓느냐에 따라 전혀 다른 제품이 된다.
더한 것보다 지운 게 많았다
Q. 만드시면서 가장 크게 바꾸신 기능은 뭐예요?
만드는 과정은 설계도대로 쌓아 올리는 게 아니라, 일단 만들고 이상하면 바로 지우는 쪽에 가까웠어요. 기억에 남는 건 대부분 지운 것들이에요.
먼저 마이크를 지웠어요. 처음엔 마이크로 “후—” 하는 숨소리를 감지했어요. 근데 옆에서 누가 말만 해도, 주변이 조금만 시끄러워도 화면이 뿌예지더라고요. 그래서 마이크를 아예 없애고 얼굴 인식으로 입이 실제로 벌어졌는지를 보게 바꿨어요.
결과적으로 이게 이 제품에서 제일 중요한 결정이 됐어요. 마이크를 켜는 순간 그 방은 ‘대화하는 방’이 돼버리거든요. 소리가 넘어가지 않는 창문이어야 말 없이 같이 있는 게 가능해져요.
Q. 또 지우신 게 있나요?
주먹 제스처를 지웠어요. 주먹을 쥐면 안개가 한 번에 지워지는 기능이 있었는데, 입김을 불 때 손이 자연스럽게 얼굴 근처로 올라오는 것만으로 자꾸 오작동했어요.
결국 삭제하고, 대신 마지막 입김으로부터 1분쯤 지나면 안개가 저절로 옅어지게 했어요. 진짜 유리에 서린 김이 마르듯이요.
지우고 나니까 오히려 더 그럴듯해졌어요. 기능이 하나 줄었는데 물건은 더 진짜 같아진 거죠.설치 과정도 없앴어요. 앱을 깔라고 하는 순간 그건 부탁이 돼요. “이거 재밌어 보이는데 깔아볼래?”는 상대에게 결심을 요구하잖아요. 그래서 링크 하나면 끝나게 만들었어요. 파일도 index.html 한 장이에요.
통 제품이 발전했다고 하면 기능이 늘어난 모습을 떠올린다. 그런데 Fogether를 Fogether답게 만든 결정은 대부분 지우는 일이었다. 마이크를 지워 말없이 함께 있는 공간을 남겼고, 주먹 제스처를 지워 진짜 김처럼 마르게 했고, 설치를 지워 상대에게 건네는 부담을 줄였다. 무엇을 더할지보다 이 제품이 어떤 경험이어야 하는지가 먼저였다.
AI가 해준 것, 애나님이 선택한 것.
Q. AI의 도움을 가장 크게 받은 부분은 어디였어요?
손과 얼굴 인식을 붙이고, 입장 화면의 움직이는 색 배경을 코드로 짜고, 자잘한 버그를 잡는 일을 잘해줬어요. 저는 코드를 직업으로 쓰는 사람이 아닌데도 혼자였다면 전문가 영역이라고 생각해 시작하지 못했을 것들을 일단 눈앞에서 움직이게 만들어줬어요.
Q. 반대로 끝까지 직접 판단하셔야 했던 건 뭐였어요?
무엇을 남기고 무엇을 지울지, 따뜻하게 갈지 차갑게 갈지, 마이크를 없앨지는 계속 제 몫이었어요. AI는 되게 해주지만 이게 맞는지는 묻지 않아요. 마이크를 지우자는 것도, 거울을 창문으로 바꾸자는 것도 AI가 제안한 게 아니에요.
오히려 AI가 뭐든 빠르게 만들어주니까 “그래서 이게 정말 필요한가?”를 더 자주 물어야 했어요.
Q. 만들면서 가장 오래 막혔던 문제는 뭐였어요?
두 사람을 연결하는 일이었어요. 처음 쓴 방식은 멀리 떨어진 두 사람을 자꾸 서로 다른 방에 넣어서 아예 못 만나게 했어요. 창문을 나눠 쓰는 게 이 제품의 전부인데, 그게 안 되는 거죠.
결국 연결 방식을 통째로 갈아엎어서 방 이름으로 두 기기가 직접 이어지는 구조로 바꿨어요. 이걸 고치는 데 제일 오래 걸렸어요.
Q. AI에게 맡길 수 없어서 직접 확인하신 것도 있었나요?
진짜로 두 기기가 연결되는지는 AI가 확인해줄 수 없었어요. 폰 두 대를 실제로 꺼내 직접 해보는 수밖에 없었어요.
모바일에서는 안개 블러가 아예 동작하지 않기도 했고, 손이 화면 밖에 있어서 핀치 제스처를 쓸 수 없기도 했어요. 그래서 폰에서는 손가락으로 문지르게 바꿨어요. 화면이 깨져 보이는 버그도 실기기에서 발견했는데, 가볍게 만들려고 해상도를 너무 낮춘 게 원인이었어요.
이런 건 AI에게 “확인해봐”라고 시킬 수 없는, 제가 눈으로 봐야 하는 영역이었어요.실시간은 직접 연결하고, 시차는 우편함에 남긴다
내 컴퓨터에서 한 번 움직이는 것과 멀리 있는 두 사람의 폰에서 실제로 작동하는 건 전혀 다른 일이다. 모바일에서 안개가 보이는지, 손가락으로 닦을 수 있는지, 두 기기가 정말 만나는지는 결국 직접 열어봐야 알 수 있었다. AI가 코드를 만들어주는 시간은 짧아졌지만, 제품이 진짜 되는지 확인하는 일까지 사라진 것은 아니다.
Q. 서버 없이 직접 연결되는 것과 상대가 없을 때도 흔적을 남기는 것은 어떻게 함께 작동하나요?
둘 다 접속해 있을 때는 P2P로 직접 이어져요. 라이브 영상은 각자의 기기 안에서만 처리하고, 상대에게는 손의 움직임처럼 제가 보내기로 한 정보만 건너가요.
한 명이 없을 때는 흔적이 방 이름을 기준으로 작은 클라우드 우편함에 잠깐 놓여요. 상대가 나중에 페이지를 열면 그때 배달되고요. 실시간은 직접 연결하고, 시차는 우편함을 쓰는 방식이에요. 상대가 지금 옆에 있든 지구 반대편에서 자고 있든, 언제 열어도 무언가 있는 창문으로 만들고 싶었어요.
자고 있는 사이에도 흔적이 도착한다
Q. 가장 좋아하시는 기능은 뭐예요?
흔적 기능이에요.
자고 일어나서 페이지를 열면 어젯밤 누군가 김을 불어 남겨둔 자국이 그대로 있어요. 어떻게 그려졌는지 마지막 몇 초도 다시 재생되고요.
편지도 아니고 메시지도 아니고, 그냥 거기 있었다는 흔적이에요.
지금의 프로덕트, 앞으로의 프로덕트의 방향은?
Q. 지금 Fogether는 어디까지 만들어진 상태인가요?
링크 하나면 누구나 써볼 수 있는 상태예요. index.html 한 장을 Vercel에 올렸고, 브라우저만 있으면 열려요. 아직 실제 사용자는 저와 남자친구 둘뿐이에요. 그날 처음 창문을 같이 열고 말없이 같은 그림을 보던 순간이 아직도 제일 좋은 추억으로 남아있는 제품이에요.
Q. 다음에는 어떤 방향으로 더 만들어보고 싶으세요?
아직 정하는 중이에요. 장거리 커플을 위한 제품으로 좁힐지, 아니면 멀리 있는 사람과 함께 있는 방법으로 넓게 둘지 고민하고 있어요. 어떻게 하면 더 같은 공간에 있는 것처럼 느끼게 할 수 있을지도요.
사실 이건 제가 회사에서 매일 고민하는 질문과 닮아 있어요. 사람과 사람을 어떻게 연결할까. 다만 여기서는 많은 사람이 아니라 단 한 사람과, 말없이 연결하는 거예요.
Q. 이 제품을 만들기 전과 비교해서 애나님에게 달라진 게 있나요?
이제 “이거 되나?” 싶은 게 생기면 오래 구경하지 않고 일단 열어봐요. 보는 사람에서 만드는 사람으로 넘어가는 문턱이 생각보다 낮은 데 있었더라고요.
무언가 만들어보고 싶다는 분들의 이야기를 듣다 보면 “아직 뭘 만들지 모르겠어요”라는 말을 자주 듣는다. 그런데 처음부터 완성된다. 그런데 처음부터 완성된 방향을 알고 시작하는 경우는 드물다. 애나님도 입김 데모를 따라 만들어본 뒤, 친구의 한마디에서 둘이 쓰는 창문을 발견했고, 직접 사용하면서 필요한 기능을 하나씩 찾아가셨다. 시작하기 전에는 방향이 있어야 움직일 수 있을 것 같지만, 사실 방향은 움직인 뒤에 생긴다. 진짜 어려운 건 처음 열어보는 일이다.
Q. 마지막으로 Fogether를 사용해보실 분들께 설명 부탁드려요. 어떻게 시작하면 될까요?
준비물은 브라우저와 카메라 권한, 그리고 같은 방 이름을 입력해줄 사람 한 명이에요. 크롬을 추천해요.
혼자 먼저 들어가서 놀아도 돼요. 상단 배지를 누르면 초대 링크가 복사되고, 상대가 들어오면 배지가 “? here together”로 바뀌어요. 그때부터 저쪽의 숨과 손이 내 창문에 나타나요.
SNS에서 돌던 손 추적 데모에서 출발했어요. 혼자 보는 거울이었던 걸, 둘이 나눠 쓰는 창문으로 바꿨습니다.
애나님의 글은 여기서 마친다. 처음 시작하기는 어려웠지만 시작하고 나서 시간이 나면 제품 개발에 시간을 쏟는 애나님을 보니 정말 뿌듯했다. 일단 만든 기능에 유저를 정의하고 어떻게 나아가야할지를 스스로 정하며 제품의 엣지를 만드는 애나님을 보며 나도 동기부여를 받아 오늘도 내 프로덕트를 개선해본다.
Fogether는 여기에서 사용해보실 수 있습니다.
https://breath-mirror-beryl.vercel.app/