성남 아동수당 가맹점 지도 회고록

작업 내용

성남시 아동수당의 경우 성남시 안에서 가맹점에 한해서 사용할 수 있습니다. 그리고 가맹점이 어디에 있는지 알려주는 사이트를 신한카드에서 제공하고 있었습니다. 하지만 이는 너무 불친절했습니다. 확인하고자하는 지역구와 업종을 선택하면 그 결과가 나오는 형식이었습니다.

저 또한 한명의 사용자로서 사용해보면서 느낀점은 사용자에게 제공하고자 하는 정보가 가맹점의 리스트의 정보라고 한다면 이는 현재의 리스트화 된 UX 보다는 지도의 형식으로 한눈에 사용자가 어디서 사용할 수 있는지 알 수 있다면 더 좋은 경험을 제공해 줄 수 있을것이라고 생각했습니다. 그래서 이를 지도로 포팅하는 작업을 해보았습니다.

만들고 최종 퍼블리싱하기까지 총 2주의 시간이 걸렸습니다. 아무것도 모르고 개발한것 치고는 빠른 결과물을 얻어서 기분이 좋았습니다.

개발 관점에서의 특이점

해당 사이트는 저는 검수와 퍼블리싱만 진행하였고 실제적인 코딩은 Cursor가 모두 진행하였습니다. 요즘 잘 알려져있는 바이브 코딩을 통해서 진행해보았습니다. 아래는 바이브 코딩을 진행했던 하나의 예시입니다.

그렇게 아래와 같은 사이트를 만들 수 있게 되었습니다.

https://snbabymap.sabarada.xyz/

느낀점

바이브 코딩을 진행하면서 AI 발전이 많이 발전했고 이제는 나의 개발에도 영향을 미칠 수 있다고 느낄 수 있는 계기가 되었습니다. 특히 요즘은 회사일을 하면서도 AI를 사용하여 코딩하는것과 아닌것에 생산성 차이를 느끼고 있는 상황이었습니다. 그런데 이번에 잘 모르는 웹 프로젝트를 할 때 더욱이 많은 도움을 받고 빠르게 개발할 수 있었다고 생각합니다.

저는 이번에 별도의 프롬프트 엔지니어링을 진행하지는 않았습니다. AI와 채팅을 이어가면서 생성과 수정, 그리고 검수하면서 revert를 반복하는 과정을 거쳤습니다. 좋은 best practice를 알게 되고 이를 토대로 한다면 더 좋은 결과를 얻을 수 있을거라 생각하고 그렇게 해보려고 하고 있습니다.

하지만 잘못된 코드나 원하지 않은 스펙을 스스로 추가한 경우도 있습니다. 따라서 이러한 부분을 잘 검수 할 수 있도록 무작정 막기는 것이 아니라 시나리오를 잘 세우고, 명확하게 Context를 전달하고 또한 스스로 만들어진 결과물을 검증할 수 있어야더 좋은 결과물을 얻을 수 있다고 느꼈습니다.