나는 도구를 쓴 게 아니었다

AI와 2시간 동안 원통을 같이 만든 이야기

나는 AI와 작업할 때마다 대화 기록을 남긴다.

대단한 이유가 있는 건 아니다. 대화가 끝나면 사라지니까. 근데 그 대화 속에 내가 어떻게 문제를 풀었는지, AI에게 뭐라고 말했을 때 잘 됐고 뭐라고 말했을 때 안 됐는지 — 그런 게 다 들어 있다. 결국 대화 자체가 프롬프트고, 프롬프트가 곧 실력이니까. 나중에 다시 읽으면서 스스로 공부가 된다. (그리고 이렇게 공유하면 누군가에게는 인사이트가 되지 않을까 하는 기대도 있다.)

이번 작업의 기록을 다시 읽어봤다.

AI와 주고받은 대화, 내가 던진 명령들, 중간에 깨진 화면들, 그리고 AI가 마지막에 남긴 교훈 같은 것들. 그걸 쭉 읽는데 묘한 기분이 들었다. 이건 그냥 도구를 사용한 게 아니라 누군가와 같이 일한 기록이었다.

내가 "이건 아닌데?"라고 하면 AI가 "그러면 이렇게 해볼까요?"라고 돌아오고, AI가 5번 실패하면 내가 "이거 그냥 키우면 되는 거 아냐?"라고 던지고. 작업이 끝난 뒤에 AI가 정리한 인사이트를 보니까 — "사용자의 시각적 직관이 코드 레벨에서 해결 못한 문제를 풀었다"라고 적혀 있었다. 괜히 좀 뿌듯했다. (솔직히.)

바이브코딩이라는 말을 다들 들어는 봤을 것이다. AI로 세상이 바뀌고 있다는 것도. 근데 막상 "그래서 뭘 어떻게 하라고?"라는 질문 앞에서는 대부분 멈춘다. 어떻게 시작하는지, 뭘 말해야 하는지, 실패하면 어쩌는지. 그 과정은 어디에도 잘 안 나와 있다. 그래서 이걸 한번 보여주려고 한다. 날것 그대로. 나는 디자이너다. 코드를 잘 모른다. (정확히는, 읽을 줄은 알지만 처음부터 쓰지는 못한다.) 그런데 요즘 AI와 함께 모션 아트를 만들고 있다. Canvas, WebGL, 쉐이더 같은 것들을. 코드를 모르는 사람이.

원통 하나를 설명하는 데 5번이 걸렸다

만들고 싶었던 건 이거다. 3D 원통 표면에 알파벳이 매핑되어 회전하는 타이포그래피 모션아트.

머릿속에는 선명하게 보이는데, 이걸 AI에게 설명하는 게 쉽지 않았다.

첫 번째 메시지.

"원형띠가 쓰리디로 연결되어 있다고 생각하자 그리고 그 띠에 알파벳이 맵핑되어 있는 모습이고..."

AI가 리본 형태의 띠를 만들었다. 내가 원한 건 그게 아니었다.

"띠는 리본 형태가 아니라 원통인데 양옆 뚜껑이 막히지 않는 느낌으로 생각하면 된다."

그래도 세로로 서 있는 원통이 나왔다.

"원통을 90도로 눕히면 왼쪽 오른쪽으로 구멍이 생기고... 내가 원한건 원통이 누워 있는 거다."

5번째 메시지에서야 AI가 내가 원하는 형태를 이해했다. 프롬프트 한 줄로 뚝딱? 최소 다섯 줄은 필요했다. 그리고 이건 시작에 불과했다.

"이건 될 수 없는 구조다"

AI가 처음 만든 건 텍스트를 스케일 변환으로 원통처럼 보이게 하는 방식이었다. 얇아졌다 넓어졌다 하는 것뿐이라 입체감이 없었다. 나는 스크린을 보고 바로 말했다.

"이건 될수없는 구조다. 텍스트를 스케일로만 조정해서는 이 모션의 디테일을 살릴수 없다. 진짜로 텍스트가 맵핑되어야한다."

이 한 마디가 전환점이었다. AI는 접근법을 완전히 바꿔서 오프스크린 캔버스에 텍스트를 렌더한 뒤 가로로 슬라이싱해서 실린더 곡면에 매핑하는 방식으로 전환했다. Canvas 2D만으로 3D를 구현하는 꽤 복잡한 방법이었는데, 나는 그 코드를 한 줄도 쓰지 않았다. 대신 "이건 아니다"라고 말했을 뿐이다.

버그 퍼레이드

여기서부터가 진짜다. 구조를 바꾸고 나니 문제가 줄줄이 나왔다. 뒷면이 안 칠해진다.

"원통 뒷면의 색상이 칠해지지 않은것, 그리고 투명도, 그리고 뒷면의 색상 떨림을 해결 해보자" 그라데이션을 넣었더니 더 어색하다.

"원형띠에 그라데이션 삭제해라 더 어색하다. 컬러만 깔끔하게 적용" 한 줄이면 충분했다. 삭제해라. 더 어색하다. 디자이너에게 필요한 건 "왜 안 되는지"를 설명하는 게 아니라 "이건 아니다"라고 단호하게 말하는 거다.

색상 경계가 떨린다.

앞면 블루, 뒷면 오렌지로 바꿨더니 이번에는 경계선에서 색이 깜빡거렸다. 내가 카메라 렌즈에 비유해서 방향을 잡아줬다. "카메라는 밀리수가 작으면 광각이라서 큰 밀리수로 변경해야 왜곡이 없다." 원근값을 800에서 1600으로 올리고, 색상 경계에 sigmoid 블렌드를 적용했더니 떨림이 사라졌다.

이 과정만 해도 메시지가 10개는 넘게 오갔다.

AI가 5번 실패한 문제를 내가 풀었다

가장 기억에 남는 순간이다. 텍스트가 실린더 경계와 맞지 않는 문제가 있었다. 글자 위아래로 여백이 생기는 거다. 사소해 보이지만 이게 안 맞으면 "원통에 글자가 붙어있다"는 느낌이 안 난다.

AI는 이걸 해결하려고 5가지를 시도했다.

arcSpan 조절 — 부분적 효과

centerAngle 오프셋 — 효과 없음

화면 좌표 yShift — 더 이상해짐

폰트 메트릭스 API — 미미한 효과

각종 수치 튜닝 — 변화 없음

전부 실패했다. AI가 코드 레벨에서 파고들수록 오히려 멀어지고 있었다. 나는 스크린을 보면서 생각했다. 글자가 작아서 여백이 생기는 거 아닌가? 그래서 한마디 했다. "내생각에는 알파벳 회전 반경 사이즈를 아예 키우면 해결 될꺼 같은데 어때?"

됐다.

AI가 코드의 구조 안에서 해결하려고 했던 문제를, 나는 화면을 보고 "이거 그냥 키우면 되는 거 아닌가?"라고 직감한 거다. 그리고 바로 다음에 스크린샷을 다시 보니까 클립 패스 영역이 문제라는 것도 보였다.

"사진을 보면 클립패스의 문제다! 클립 패스 영역을 살짝 늘려 주면 해결될꺼 같은데?"

이것도 맞았다.

코드를 모르는 사람이 코드의 문제를 풀었다. 이상하게 들릴 수 있지만 사실은 단순하다. AI는 코드를 보고, 나는 결과물을 본다. 관점이 다르니까 보이는 게 다르다.

5도, 20도, 0도, 아 이 축이 아닌데

원통을 기울이고 싶었다. 살짝 기울어진 느낌.

"엑스축을 5도 고정으로 수정"

별로다. 더 기울여볼까.

"20도로 수정"

이상하다. 원래대로.

"0도로 다시 수정"

잠깐. 이거 X축이 아닌 거 같은데.

"내가 원한 회전은 시각적으로 오른쪽으로 기울었다는 느낌인데 엑스축이 아닌거 같다."

Z축으로 바꿨더니 원하는 느낌이 나왔다.

4개 메시지, 2분. 시도하고, 아니면 버리고, 다시 시도한다. 이게 바이브코딩의 실제 속도다. "5도 해봐 — 아 아니다 — 20도 — 이것도 아니다 — 원래대로 — 아 축이 다르구나." 빠르게 실패하고 빠르게 방향을 바꾸는 것. 결과적으로 맞는 답을 찾기까지 2분밖에 안 걸렸지만, 그 2분 안에 실패가 3번 있었다.

원통 하나가 완성, 이제 복붙.

"각도가 살짝 다르고 알파벳 순서가 다르게 나오는 링을 서로 겹치지 않고 가까이 붙어있게 하나 더 생성"

"띠를 3개로 늘려줘"

"4개로 추가"

간격 조정하고, 각각 다른 속도로 회전하고, Z축 틸트도 독립적으로 흔들리게 하고. 7개 메시지로 1개짜리 링이 4개짜리 독립 애니메이션 시스템이 되었다.

60개의 대화, 2시간, 원통 하나

최종적으로 주고받은 메시지는 60개. 실제 작업 시간은 약 2시간.

2시간이다. 코드를 한 줄도 직접 쓰지 않고, Canvas 2D로 3D 원통 투영을 구현하고, 4개의 독립 링이 각자 다른 속도와 각도로 회전하는 타이포그래피 모션아트를 만드는 데 2시간. 이건 솔직히 놀라운 숫자다. 하지만 "프롬프트 한 줄로 뚝딱"과는 거리가 멀다.

60개 메시지 안에는 AI의 접근을 거부하고 다시 시작한 것도 있고, 한 줄짜리 명확한 방향 제시도 있고, AI가 못 푼 문제를 직관으로 푼 것도 있고, 빠르게 시도하고 빠르게 버린 것도 있었다.

이게 바이브코딩의 진짜 모습이다. 한 줄의 마법이 아니라, 60번의 대화다.

그래서, 뭘 해야 하나

사람들이 궁금한 건 결국 이거일 것이다. "나도 할 수 있나?" 할 수 있다. 코드를 몰라도 된다. 진짜로. 나도 모른다. 하지만 뭘 만들고 싶은지는 알아야 한다. 그리고 결과물을 보고 "이건 아니다"라고 말할 수 있어야 한다. AI가 5번 시도해서 5번 실패할 때, "아 그럼 이렇게 하면?"이라고 다른 관점을 던질 수 있어야 한다.

결국 AI와의 협업에서 가장 중요한 건 코딩 실력이 아니라 눈이다. 결과물을 보는 눈. 이상한 걸 이상하다고 느끼는 감각. 원하는 게 뭔지 아는 확신. 20년 동안 디자인을 해오면서 쌓아온 그 눈이, 코드를 모르는 대신 작동하고 있었던 거다. (아마도.) 작업이 끝나고 AI가 정리한 기록을 읽어봤다. 거기 이런 말이 적혀 있었다.

"사용자의 시각적 직관이 코드 레벨에서 해결 못한 문제를 풀었다."

"빠르게 시도하고 빠르게 버리는 것이 핵심이었다."

"한 줄 명령의 힘 — 짧지만 명확한 방향 제시가 반복적인 코드 수정보다 효과적이었다."

솔직히 대견했다. 같이 일한 동료가 작업 끝나고 회고록을 쓴 느낌이랄까. AI가 나한테 배운 점을 정리하고, 다음에는 더 잘하겠다고 적어둔 거다. 이런 태도가 나한테는 동료처럼 느껴졌다. 코드를 대신 써주는 도구가 아니라, 같이 고민하고 같이 배우는 사이. 도구한테 대견하다는 감정을 느낄 일은 없으니까. 그날 아침, AI와 나는 원통을 2시간 동안 굴렸다. AI가 코드를 쓰고, 내가 "아닌데?"라고 말하고, AI가 고치고, 내가 또 "아닌데?"라고 말하고. 그걸 60번 반복했더니 꽤 괜찮은 게 하나 나왔다. 이게 그렇게 대단한 일인지는 모르겠다. 하지만 적어도 이건 확실하다. 프롬프트 한 줄로 뚝딱 만들어지는 세상은 아직 안 왔다. 대신, 끈질기게 대화하면 혼자서는 절대 못 만들 것을 만들 수 있는 세상은 이미 와 있다. 이 글에 사용된 이미지들은 개발 과정에서 실제로 AI에게 공유했던 스크린샷입니다. 버그 투성이의 날것 그대로.

https://sabum.kr/03_playground/lab_cylinder_typ