오늘은 별것 아닌 줄 알았던 버튼 하나 때문에 한참을 헤맸다.
모바일 거래내역 화면에는 날짜를 고르는 탭이 두 개 있다. “일별” 탭과 “기간” 탭. 일별 탭에서는 날짜 칸을 톡 누르면 달력이 바로 열린다. 그런데 기간 탭으로 넘어가서 시작일이나 종료일 칸을 누르면… 아무 반응이 없다. 몇 번을 다시 눌러봐도 마찬가지였다.
처음엔 그냥 “오늘 폰이 이상한가” 싶었다. 화면을 껐다 켜도 보고, 새로고침도 해봤다. 그래도 똑같았다. 같은 화면, 같은 종류의 날짜 칸인데 왜 한쪽만 먹통인 건지 도무지 감이 안 왔다.
비개발자 입장에서는 여기서부터 머리가 아파진다. “날짜 선택 버튼”이라고 하면 그냥 하나의 기능처럼 보이는데, 알고 보니 화면 안에 똑같이 생긴 버튼이 사실은 전혀 다른 방식으로 만들어져 있을 수도 있다는 걸 이번에 처음 체감했다.
AI에게 두 탭의 코드를 같이 봐달라고 했다. 금방 답이 나왔는데, 둘이 진짜로 다른 방식이었다.
일별 탭은 칸을 누르면 코드가 직접 “달력 열어줘”라고 명령을 내리는 방식이었다. 반면 기간 탭은 눈에 안 보이는 투명한 입력 칸을 날짜 표시 위에 그냥 겹쳐 놓고, “사용자가 거기를 직접 누르면 브라우저가 알아서 열어주겠지”라고 기대하는 방식이었다. PC 브라우저에서는 이 방식도 잘 작동하는 경우가 많다고 한다. 그런데 내가 쓰는 환경, 그러니까 모바일 화면에서는 이 투명 입력 칸이 터치를 제대로 못 받는 경우가 있었던 모양이다.
처음엔 “그럼 그냥 투명 칸 크기를 더 키우면 해결되는 거 아니야?” 하고 단순하게 생각했다. 그런데 AI가 설명해준 걸 들어보니, 문제는 크기가 아니라 애초에 “보이지 않는 입력창을 사용자가 직접 찾아서 눌러주길 바라는” 구조 자체였다. 일별 탭처럼 아예 버튼을 누르면 코드가 달력을 열어주라고 명령하는 방식으로 바꿔야 확실하다고 했다.
그래서 기간 탭의 날짜 칸도 일별 탭과 똑같은 방식으로 바꾸는 수정을 들어갔다. 그런데 여기서 또 한 번 헤맸다. 수정한 코드를 타입 검사기로 돌렸더니 에러가 떴다. “이 버튼에는 클릭 기능이 없다”는 식의 오류였는데, 내용만 보면 뭔 소린지 전혀 이해가 안 갔다. 분명 버튼처럼 보이는 걸 눌러서 쓰려고 만든 코드인데 “클릭 기능이 없다”니.
AI 설명을 들어보니, 타입 검사기가 보기엔 “이 자리에 버튼이 있을 수도 있고 없을 수도 있다”는 식으로 코드를 짜놓으면, 안전하게 따지느라 “없을 수도 있는 애한테 함부로 클릭하라고 하면 안 된다”고 막아버린다고 했다. 사람 눈에는 뻔히 버튼이 있는데, 기계 입장에서는 “확실하다고 증명되지 않으면 일단 의심한다”는 식이었다. 그래서 “진짜로 그 기능이 있는지 확인하고 나서 눌러라”는 식으로 한 단계를 더 추가해서야 검사를 통과했다.
여기서 배운 게 하나 있다. 나는 지금까지 “타입 검사 통과 = 코드가 맞다는 뜻”이라고만 생각했는데, 사실은 “기계가 봤을 때 의심할 여지가 없어야 통과한다”는 뜻에 더 가까웠다. 사람이 보기엔 당연한 것도, 기계 입장에서 조건이 애매하면 일단 막고 본다.
고친 다음에는 전체 빌드까지 한 번 더 돌려서 다른 화면이 깨지지 않았는지 확인했다. 다행히 빌드도 무사히 통과했고, 그제서야 커밋하고 배포했다. 배포가 끝나고 실제 폰에서 기간 탭 날짜 칸을 눌러보니, 이제는 바로 달력이 열렸다.
돌이켜보면 오늘 겪은 일은 사실 작은 버그였다. 하지만 “같은 화면에 있는 비슷해 보이는 버튼도 속을 들여다보면 완전히 다른 방식으로 만들어져 있을 수 있다”는 걸 직접 겪고 나니 확실히 다르게 느껴졌다. 앞으로는 “버튼 하나가 안 눌린다”는 이야기를 들으면, 바로 “크기를 키워볼까” 같은 단순한 해결책부터 떠올리는 대신, “이 버튼은 대체 어떤 방식으로 동작하도록 만들어졌을까”부터 AI에게 같이 물어보게 될 것 같다.
비개발자 김부장의 바이브코딩 도전기는 오늘도 작은 버튼 하나에서 이렇게 또 하나를 배우고 지나간다.
#바이브코딩 #비개발자개발기 #AI협업 #모바일UI버그 #김부장