인공지능 AI 바이브 코딩 간접 체험해보기 | 클로드 코드

바이브 코딩으로 첫 화면 만들기

클로드 코드에 처음 요청한 건 검은색 풀스크린 배경에 회색 테두리 원 하나였는데요. “p5.js로 화면을 만들자. 배경은 검정색, 화면 가운데 지름 1 크기의 빈 원, 테두리 회색, 두께 10”이라고 정확한 수치를 넣었어요. 결과는 바로 나왔고, 외부 파일로 저장까지 해줬죠.

여기서 재밌는 게 뭐냐면, AI가 p5.js 문법을 이미 알고 있어서 좌표계 설명을 거의 안 해도 된다는 점이에요. 대신 “화면 전체를 채우도록”처럼 상대적인 표현을 쓰면 AI가 windowWidth, windowHeight를 자동으로 활용해요.

다음으로 원 위아래에 선 두 개를 추가했어요. “x축 가운데, y축 최상단에서 원에 닿을 때까지”라고 시작점과 끝점을 명확히 했더니 위쪽 선이 먼저 생겼고, 아래쪽도 동일하게 요청하니 금방 완성됐어요. 이렇게 한 단계씩 쌓아가면 나중에 복잡한 애니메이션을 만들 때도 어디를 수정해야 할지 파악하기 쉬워요.

움직임과 이즈아웃 효과 구현하기

작은 흰 원이 큰 원을 따라 세 바퀴 반 회전한 뒤 아래 선으로 내려가게 하려면 경로를 아주 구체적으로 설명해야 해요. “첫 번째 라인 시작점 → 끝점 → 큰 원 테두리 3.5바퀴 → 두 번째 라인 아래로” 순서를 번호로 정리해서 요청했어요. 처음에는 속도가 너무 빨라서 “10배 느리게”라고 수정했는데, 이번에는 구간별 속도가 달라서 “두 이동 구간 속도를 같게” 해 달라고 다시 요청했죠.

이즈아웃 효과를 넣을 때는 “이즈 아웃으로 이동”이라고만 하면 AI가 이해를 못 하는 경우가 많아요. 그래서 “빠르게 출발해서 도착지에 가까워질수록 속도를 줄이는 효과”라고 풀어서 설명했더니 제대로 적용됐어요. 나중에 정류장마다 2초 멈추게 하려다 애니메이션이 사라지는 버그가 생겼는데, 콘솔 에러를 그대로 복사해서 보여주니 AI가 즉시 고쳐줬어요.

프로그램 흐름 시각화와 에러 수정

이 애니메이션의 목적은 프로그램 실행 흐름을 보여주는 거였어요. 알록달록한 원들은 각각의 기능, 흰 원은 실행 흐름을 의미하죠. 그래서 각 원 오른쪽에 설명 박스를 추가했는데, “높이는 원 지름과 같게, 너비는 4배, 모서리 반지름은 높이의 0.5배”처럼 치수를 논리적으로 설명했어요. 박스가 조금 왼쪽으로 붙어서 “각 원 반지름만큼 X 좌표를 빼라”고 요청하니 위치가 바로 잡혔어요.

투명도 변화 효과를 넣으면서 또 한 번 문제가 생겼어요. “멈출 때 투명도를 0.25로”라고 했는데 첫 번째 원에서만 효과가 안 먹혔죠. “가장 첫 번째 만나는 원에서는 투명도가 변하지 않는다”고 정확히 증상을 전달하니 이번에는 제대로 수정됐어요.

이렇게 바이브 코딩을 하다 보니 코드 자체를 쓰는 게 아니라 논리를 말로 설명하는 능력이 더 중요해졌다는 걸 느꼈어요. 콘텐츠 제작이나 강의 자료 만들 때도 AI가 애니메이션을 대신 그려주는 시대가 온 거죠.