인앱브라우저 안내를 간단한 애니메이션으로 처리

오늘은 크게 2가지 일을 했다.

이전 같았으면 하루를 갈아넣어도 힘들었을 일이었는데, 역시 AI에이전트는 강력하다... codex의 도움으로 저녁 야근 시간에 후다닥 마쳤다.

노잼은 불허한다

기존 인앱브라우저 안내문도 상당히 맘에 들었던 게 사실이다. 필요한 내용이 충분히 들어가 있었기 때문이다.

문제는 노잼이란 거다. 노잼은 딱딱하고 딱딱한 건 이용자들이 싫어한다.

그래서 난 최대한 이걸 부드럽게 넘길 수 있는 방법을 연구했고 간단한 애니메이션으로 처리하기로 했다.

그래서 기왕 이렇게 된 거 수리미와 토실이 캐릭터를 또 불러오기로 했다.

수리미가 막아서서 말린 후 자세한 내용을 토실이가 알려주는 식으로 말이다.

대사가 다소 빨리 넘어가서 사람들이 다 미쳐 읽지 못하더라도 마지막 선택 창에서 자세한 설명을 들을 수 있게 해준다면, 문제가 되지 않을 것이다.

그래서 수리미 이미지 1개 토실이 이미지 1개, 메시지 말풍선 1개를 생성하여 삽입했다.

물론, 뭐든 한번에 되진 않았다.

생각과 달리 쉽지 않았던 건 기존 인앱브라우저 안내가 너무 충실하게 잘 작동해줬다는 점이다.

문제는 그 안내가 리다이렉트 형태로 되어 있었고, 선행된 명령이다 보니 새로 짠 코드가 전혀 먹히지 않았다는 거다.

웃긴 건 이런 문제 사태를 정확히 짚어내기까지 꽤 시간이 소요되었다는 점이다.

이게 바이브코딩의 한계다. 내가 최종 상태를 제대로 기록하고, 기억을 했다면 쉽게 넘어갈 문제였지만.. 한번에 여러 작업을 하다 보니 딱 그 부분이 내 기억소실 구간이었고 ㅠㅠ

난 한동안 불필요하게 왜 안되는지 이유를 하나씩 찾아봐야만 했다;;

다행히 염려보단 빨리 찾았고, 빨리 찾은 만큼 곧장 codex를 이용해 적극 조치에 들어갔다.

헌데 웃긴 게 코드를 완성하고 나니 npm run build에서 갑자기 오류가 터진다.

react 문제였고, suspanse를 감싸주지 않는 것들을 다 하나씩 체크해야만 하는 상황이 왔다. 솔직히 전혀 이해가 가지 않았지만...

다행히 codex가 있으니까ㅎ 혼자였다면 명령 내리기도 벅찼겠지만, 다행히 gpt도 있으니까 ㅡ

나와의 대화를 정리해서 codex가 바로 작업할 수 있도록 도와주었다.

이 전체 과정이 쉽지는 않았지만, 그래도 이걸 혼자서 했다면 하루, 이틀로는 엄두가 나지 않았을 게 뻔했다.

인앱브라우저 대응은 모바일 문제라서 테스트과 여간 힘든 게 아니다. 콘솔을 찍어볼 수 있는 것도 아니고 각각 인앱브라우저마다 또 대응이 다르기도 하니;;

현재도 기본 뼈대는 잘 만들었다 생각했는데, 허점이 하나씩 드러나고 있는 중이다. 오늘은 우선 급한대로 틀만 잡고 내일 나머지를 해결해야겠다;;;