지도와 스크롤이 충돌하다 —
모바일 바텀시트를 세 번 만든 이유

세 줄짜리 요청에서 시작됐다

Pet-Pass는 지도 위에 매장을 표시하는 서비스입니다. 모바일에서 지도를 꽉 채워 보여주면서도, 매장 목록을 같이 보여줘야 했습니다. 그래서 바텀시트가 필요했습니다. 화면 아래에서 올라오는, 드래그로 크기를 조절할 수 있는 그 패널 말이죠.

AI에게 전달한 요청은 간단했습니다.

제가 당연하다고 생각한 것들을 하나도 말하지 않았습니다. 그냥 "바텀시트"라는 단어만 던졌습니다.

첫 번째 바텀시트 — 결과는 그럴싸했다

AI(Antigravity)는 성실하게 바텀시트를 만들었습니다. 화면 아래에서 올라오고, 드래그로 높이가 조절됐습니다. 처음 봤을 때는 "됐다"고 생각했습니다.

데스크탑에서만 테스트했으니까요...

지도가 내 손가락을 먹었다

실제 핸드폰으로 열었을 때 바로 이상함을 느꼈습니다. 매장 목록을 위로 올리려고 손가락을 대면, 리스트가 스크롤되는 게 아니라 지도가 움직였습니다. 터치 이벤트가 바텀시트를 통과해서 뒤에 있는 지도까지 전달되고 있었습니다.

이건 모바일 지도 서비스에서 흔히 겪는 문제더라고요. 지도 라이브러리는 터치 이벤트를 전부 자기 것으로 가져가려고 하고, 그 위에 뭔가를 올려두면 이벤트가 뒤섞입니다.

세 번의 시도가 이어지는 동안 저는 계속 같은 방식으로 요청했습니다. "아직도 최상단에서 내려오지 않아." AI는 매번 새로운 코드를 짰고, 매번 다른 지점에서 막혔습니다.

두 번째, 세 번째

나중에야 왜 반복됐는지 알게 됐습니다. 기술적인 문제가 아니었거든요. AI가 해결해야 할 문제의 기준이 없었던 거죠...

사람 입장에서는 "핸들로만 조절하는 것"이 너무 당연해서 말할 생각을 못 했습니다. 스마트폰을 쓰는 사람이라면 누구나 저 긴 막대기를 잡고 위아래로 당기는 게 뭘 하는 건지 알잖아요. 앱을 쓰다 보면 자연스럽게 체득하는 UI 언어니까요.

하지만 AI에게 그 언어는 당연하지 않았습니다. 명시적으로 전달되지 않은 것은 존재하지 않는 것이나 마찬가지였거든요. 그래서 AI는 바텀시트 전체를 드래그 가능하게 만들었고, 그게 리스트 스크롤을 죽이는 원인이 됐습니다.

당연하지 않다

UI 인터랙션만의 이야기가 아니더라고요. 기획에서 개발자에게 넘기는 기능 명세, 디자이너가 개발자에게 전달하는 시안, 팀원 간에 오가는 모든 커뮤니케이션이 마찬가지입니다. 제가 머릿속에 그리는 것과 상대방이 이해하는 것 사이의 간격은, 생각보다 훨씬 큰 것 같아요.

AI와 일하면서 이걸 특히 선명하게 느꼈습니다. 사람과 소통할 때는 맥락과 경험이 빈틈을 메워주는데, AI에게는 그 메우는 장치가 없습니다. 제가 말하지 않은 것은 정말로 없는 게 되더라고요.

그래서 지금은 AI에게 기능을 요청할 때 "어떻게 동작해야 하는지"까지 함께 적습니다. 당연해 보이는 것도 전부. 번거로워 보여도, 세 번 다시 만드는 것보다는 훨씬 빠른 듯...