바이브 코딩, 요새들 많이 많이들 하고 계신가요?
코딩 AI에게 ㅇㅇ 만들어줘 하면 2~3분 후에 결과물이 뚝딱 나오는 점은 분명 매력적입니다.
MVP 프로토타입을 만드는 것에 대해서는 정말 최고의 방법이라고 말씀드리고 싶습니다.
하지만 바이브 코딩에는 ‘밝은 면’만 있는 것은 아닙니다.
하나 예를 들어 볼께요.
어느 시골에 무인으로 운영하는 라면가게집이 있다고 칩시다.
옛날 한국의 솔직한 사람들만 살던 시절, 사람들은 현금을 내고 정당한 자신의 몫만을 챙겨서 라면을 끓여먹고 가게를 나섭니다. 어쩔때는 ‘잘 먹고 가요~’라는 쪽지를 남길 수도 있겠지요.
이런 순수한 사람들만 사는 세상이라면 바이브 코딩은 사실 별 문제가 없습니다.
근데 요새 세상이 삭막해서 다들 순수하고 정직하기만 한가요?
어떤 이들은 돈을 안내고 먹고 가는 무전 취식을 하기도 합니다.
어떤 이들은 통에 부수고 들어있는 현금을 빼내어가기도 합니다.
실제로 AI자율주행 택시가 돌아다니며 택시기사들의 일자리를 뺏자 어떤 한 기사는 분풀이로 AI택시 카메라 앞에 정지 표시판을 부착해 놓았다고 합니다. 그러면 AI택시가 주행을 못하거든요. 물론 영업방해로 처벌받을 수 있는 행위이긴 합니다.
단순 취미용 또는 교실에서 학습용으로 AI 콘텐츠를 만들고 활용하는 것은 좋다고 볼 수 있으나,
현금이나 보상, 성적 평가 등이 얽히게 되면 분명 부정행위를 하는 사람들이 있습니다.
이러한 부정행위를 방어하도록 코딩하는 것은 원리를 알아야 하는데, 문제는 AI 로 바이브코딩만을 한 경우 방어 코딩이 되었는지 안 되었는지 전혀 알수가 없는 것이지요.
오늘은 AI로 간단한 코딩을 하고 안전한지 진단하는 시간을 가져보겠습니다.
AI 코딩 에이전트 Antigravity 를 실행하여 폴더를 하나 열도록 하겠습니다.
앱을 켜놓으면 1초에 1포인트가 올라가는 아주 단순한 방치형 앱을 만들겠습니다.
그리고 이 앱은 파이어 베이스에 인증을 연동해서 포인트를 저장하는 기능을 추가하겠습니다.
앱을 켜놓으면 1초에 1포인트가 올라가는 웹앱을 만들어줘. 포인트는 파이어베이스에 연동하여 저장하도록 해줘. 요새 많이 사용하는 node.js + react 로 만들어줘,.만드는 과정과 세팅과정을 보여드리는건 생략하겠습니다. 오늘의 집중할 부분은 취약점이니까요.
아래와 같이 1초에 1포인트가 올라가고 있네요.
새로 고침하면 마지막 저장된 포인트부터 다시 카운트가 시작됩니다.
단순 취미용이라면 모르겠지만 이렇게 모은 포인트로 보상 높은 경품을 준다면
아마도 분명 해킹이 들어올겁니다.
지금 이 결과물이 방어코딩이 되어 있는지 아주 기본 체크를 하도록 하겠습니다.
우선 브라우저를 2개 띄워 볼까요?
아마도 십중 팔구는 양쪽 브라우저에서 1포인트씩 집계가 되어 포인트가 2배 빨리 오를 겁니다.
만약 브라우저를 10개 띄운다면 포인트가 10배 빨리 모르겠지요.
이건 해킹도 아니고 그냥 프로그램 오류 수준입니다.
다음으로 F12 키는 개발자도구라고 해서 개발할 때 편의성을 제공하는 도구인데요.
너무나도 쉬운 방법으로 해킹을 할 수 있습니다.
F12키를 누르시면 브라우저 우측에 이런 화면이 나옵니다.
보통 Network 탭을 통해 해킹을 시도할 수 있지만 firebase는 wss 웹소켓을 사용하기 때문에 기본적으로 이 부분은 안전합니다.
1) Element 탭을 선택 후, 2) 선택 아이콘, 3) 변화하는 숫자를 선택하면 숫자 표시 엘리먼트의 CLASS값이나 ID값이 표시되는데요.
아래 숫자 카운트 코드에서 CLASS값입니다. CLASS를 사용할 경우도 있고 ID를 사용할수도 있는데 여기서는 CLASS를 사용하도록 만들어 졌네요.
<h1 class=”points-display“>1,551</h1>
보통 리액트 앱은 App.jsx 에 코드가 들어 있습니다.
Sources 탭에서 해당 항목 선택 후 검색해보면 이와 같이 코드가 보일텐데요.
여기서 실제 정체는 안에 있는 points 입니다.
<h1 className="points-display">
{points.toLocaleString()}
</h1>다시 points 로 검색을 하면,
중간에 이런 부분이 보입니다. 이름만 딱 봐도 어떤 기능일지 개발자라면 대부분 압니다.
setPoints(data.points || 0);다시 setPoints 를 검색하면 핵심코드가 나오는데요.
개발자인 제가 보기는 그냥 한눈에 딱 봐도 너무 정직하고 허술한 코드입니다.
syncToFirebase 행에 브레이크 포인트를 걸면 실행이 딱 멈추는데요.
위 코드에서 syncToFirebase 를 이용해 포인트를 저장하도록 기능이 되어 있습니다.
콘솔 탭에서 syncToFirebase(1000000); 을 입력한 다음,
리액트는 가상 DOM을 통해 데이터를 다시 복원하는 기능이 있습니다.
그러니 복원을 못하게 그냥 브라우저를 닫아버리면 됩니다.
그리고 다시 브라우저를 열면..! 변경된 포인트를 확인할 수 있지요.
이 정도는 사실 해킹 수준도 아닙니다.
개발자가 코드의 기본 흐름 정도만 알면 되는 부분인데요.
자연어로 짠 순수한 바이브 코딩은 이용자가 이해하기 쉽게 코드를 작성해주지만 해커도 이해하기 쉽게 작성해 줍니다.
AI가 사실 너무 순진하기 때문인데요.
특별히 프롬프트로 지시하지 않는한
‘이해하기 쉽고 친절한 코드’를 짜주지, 결코 ‘이해하기 어렵고 보안에 좋은 코드’를 짜주지 않습니다.
아무쪼록 이런 취약점들을 알고 바이브 코딩의 범위에 대해 적용해 나가시는 부분을 감안하셔야 합니다.
참고로 기본적으로 이런 앱을 짠다면 아래 규칙을 지켜야 합니다.
이 때 비로소 백앤드 분야의 진가가 빛납니다.
- 실제 보상은 보이지 않는 해커가 손댈수 없는 ‘백앤드’단에서 지급합니다.
- 멀티 브라우저에 대한 예외 처리를 합니다. 웹브라우저의 시계에 의존하지 말고 백앤드 서버의 시계에 의존합니다.
바이브 코딩의 어두운 면, 개념에 대해 이해가 되셨을까요?
아무쪼록 방어 기술로 본인의 코드를 진단하는 보안 용도로만 시도해 보시길 바랍니다.
세상에 완벽한 보안이란 없습니다.
아무리 철통같은 방화벽을 세우더라도 언젠가는 뜷리게 마련이지요.
그만큼 이 세상은 불완전합니다. 견고한 건물도 언젠가는 폐허가 되고 전쟁 소식으로 늘 사람들은 불안합니다.
이럴 때 우리를 지켜주시는 분이 있으니 바로 전능하신 하나님이십니다.
여호와께서 집을 세우지 아니하시면 세우는 자의 수고가 헛되며 여호와께서 성을 지키지 아니하시면 파숫군의 경성함이 허사로다 – 시편 127:1 –
주 예수 그리스도를 믿는 성도들은 이 땅에서의 삶이 다하고 저 천국에 입성하게 되고 그 곳은 더 이상 슬픔 없는 기쁨의 땅, 평화의 땅이 될 것이라 믿습니다. 주 예수 그리스도를 믿으세요!