AI가 못 그리는 것

서비스에 로고가 필요했다.

코드를 AI에게 시켰으니, 로고도 AI에게 시키면 되지 않을까. Gemini에 프롬프트를 넣었다. "StackTube라는 SaaS 제품의 로고를 만들어줘. 유튜브 플레이 버튼과 지식 레이어를 결합한 형태로."

결과가 나왔다. 나쁘지 않아 보였다. 깔끔하고, 색감도 괜찮고, "SaaS 로고"라고 하면 고개를 끄덕일 만한 형태.

하지만 뭔가 걸렸다. 정확히 뭐가 걸리는지 설명하기 어려웠다.

프롬프트를 바꿔서 3개를 더 만들었다. 방향을 바꿔가면서. 추상 모노그램, 파이프라인 은유, 레터마크 치환. 총 6개가 모였다. 관제탑에 보내면서 물었다. "시니어 로고 디자이너 입장에서 의견을 줘."

관제탑의 답은 내가 기대한 것과 달랐다.

"핵심 문제는 방향성이 아니라 도구의 한계입니다."

AI 이미지 생성기는 "로고처럼 보이는 이미지"를 만들 뿐이라고 했다. 실제 로고에 필요한 것들 — 글자 간격, 웨이트 차이, 픽셀 단위 정렬, 벡터 출력 — 이 중 어느 것도 제어할 수 없다고. 그래서 6개 전부 "어딘가 이상한데 뭐가 이상한지 모르겠는" 어정쩡한 느낌이 나는 것이라고.

이건 예상 밖이었다.

코드를 만들 때 AI는 놀라울 정도로 정확했다. 파일을 만들고, 실행하고, 에러를 고치고. 하지만 로고를 만들 때는 그 정확함이 작동하지 않았다. 코드는 "맞다/틀리다"가 있다. 로고에는 없다. 대신 "좋다/어색하다"가 있고, 이 판단은 픽셀 단위의 세밀한 제어에서 온다.

관제탑이 대안을 제시했다. SVG 코드로 직접 만들자고. AI 이미지 생성과 달리, SVG는 코드이므로 글자 하나, 도형 하나를 정확히 제어할 수 있다고. 코드를 몰라도 상관없다 — 관제탑이 SVG를 쓰고 나는 결과를 보면서 조정하면 된다.

여기서부터는 익숙한 패턴이 돌아왔다. 관제탑+빌더 워크플로우. "이 글자 간격을 좀 더 넓혀줘." "삼각형이 T의 세로획을 대체하는 느낌이어야 하는데, 지금은 얹혀져 있어." "BETA 배지를 오른쪽 위에 붙여줘."

그리고 색상에서 또 한 번 전환이 있었다.

처음에 AI가 제안한 색은 teal(청록색)이었다. SaaS 로고에서 흔히 쓰는 색이다. 깔끔하고 기술적인 인상. 하지만 내가 실제 사이트 스크린샷을 보내자, 관제탑이 말했다. "사이트가 따뜻한 크림/베이지 톤인데, teal은 안 어울립니다. 사이트의 CTA 버튼 색상인 amber(호박색)로 맞추는 게 맞아요."

스크린샷을 보내기 전까지 AI는 "SaaS는 보통 이런 색을 씁니다"라는 일반론으로 판단했다. 실제 사이트를 보고 나서야 "이 사이트에는 이 색이 맞습니다"로 바뀌었다.

EP.08에서 배운 것과 같은 패턴이었다. AI는 내가 준 맥락 안에서만 판단한다. 사이트 스크린샷이라는 맥락이 추가되자 진단이 달라졌다. 결제 에러 때는 claude.md를 보여줘서 전제를 교정했고, 로고 때는 스크린샷을 보여줘서 전제를 교정했다. 형태는 다르지만 원리는 같다.

최종 로고는 워드마크 형태가 됐다. "Stack"은 볼드, "ube"는 미디엄 웨이트. 대문자 T의 세로획이 플레이 삼각형으로 치환된, 작지만 의도가 있는 디자인. 색상은 amber. 사이트의 따뜻한 톤과 자연스럽게 어울렸다.

처음에 만든 6개를 전부 버렸다. 하지만 그 6개를 만들면서 "이건 아닌데"라는 감각이 쌓였고, 그 감각이 최종 방향을 잡는 데 필요했다. 버린 것들이 없었으면 맞는 것을 알아볼 수 없었을 것이다.

AI에게 코드를 시키는 것과 AI에게 디자인을 시키는 것. 같은 프롬프트 → 결과 → 수정 순환인데, 작동하는 방식이 다르다. 코드는 AI가 혼자서도 "맞는지 틀리는지" 확인할 수 있다. 테스트를 돌리면 된다. 하지만 디자인은 AI가 "좋은지 어색한지" 스스로 판단할 수 없다. 그 판단은 사람의 눈에서만 나온다.

그래서 바이브코딩으로 서비스를 만드는 사람에게, 디자인은 코드보다 오히려 더 많은 개입이 필요한 영역이다. 코드는 AI에게 "알아서 해"라고 시킬 수 있는 영역이 넓다. 디자인은 내가 보고, 느끼고, "이건 아니야"라고 말해야 하는 영역이 넓다.

만들 줄 몰라도 볼 줄은 안다. 그리고 볼 줄 아는 것이, 이 경우에는 만들 줄 아는 것보다 중요했다.

---

🔧 이 에피소드의 기술 용어 해설

SVG (Scalable Vector Graphics) 이미지를 코드로 표현하는 형식. 일반 이미지(JPG, PNG)는 픽셀 점들의 모음이라 확대하면 깨지지만, SVG는 수학적 도형으로 이루어져 있어 아무리 확대해도 선명하다. 로고에 적합한 형식.

워드마크 (Wordmark) 텍스트 자체가 로고인 형태. 별도의 심볼이나 아이콘 없이, 브랜드명의 글꼴·색상·배치만으로 로고를 구성한다. Google, FedEx, Coca-Cola가 대표적인 워드마크 로고.

벡터 (Vector) 이미지를 점과 선의 수학적 관계로 표현하는 방식. 반대말은 래스터(Raster, 픽셀 기반). 벡터는 크기를 자유롭게 바꿔도 품질이 유지되므로 로고, 아이콘, 인쇄물에 사용한다.

커닝 (Kerning) 글자와 글자 사이의 간격을 조절하는 것. 같은 폰트라도 특정 글자 조합(예: AV, To)에서는 시각적으로 간격이 불균일하게 보이는데, 이걸 수동으로 조정하는 작업. AI 이미지 생성기는 이 조정을 할 수 없다.

파비콘 (Favicon) 브라우저 탭에 표시되는 작은 아이콘. 보통 16×16 또는 32×32 픽셀. 로고를 이 크기로 축소해도 알아볼 수 있어야 하므로, 로고 디자인 시 파비콘용 단순화 버전도 함께 만든다.