코딩 모르는 7년차 디자이너가 AI랑 게임 만든 이야기

7년 동안 디자이너로 일했어요. 서울에서, 뉴욕에서. 그리고 늦은나이에 군대를 왔어요. 학교에서는 색채이론과 타이포그라피를 배우고 디자인에 관해서 열심히 공부했죠. 여백이 왜 중요한지도, 게슈탈트 심리학이 ui에서 왜 중요한지도 알아요.

다만 코딩은 하나도 몰라요. 포인터가 뭔지, async/await이 왜 존재하는지, npn install이 왜 가끔 안되는지는 진짜 몰라요. 그냥 짐작만 해요.

그런 제가 글로우트리스를 만들었어요. 브라우저에서 돌아가는 테트리스 팬 게임이에요. 그리고 이 블로그도 직접 만들었어요.

바이브코딩이 저에겐 이런 뜻이에요

사람마다 다르게 쓰는 말인데, 저한테는 이런 순서예요.

원하는 게 뭔지 안다 → AI한테 설명한다 → AI가 만든다 → 보고 뭐가 틀렸는지 말한다 → 고친다.

여기서 중요한 게 AI가 노동을 하지만 ‘이게 아닌데‘라고 느끼는건 사람이 판단해요. 특히 디자인부분은 7년 동안 디자인하면서 눈에 박힌 감각이 중요했죠.

바이브코딩이 마법처럼 알아서 다 해주는 건 아니에요. 근데 코딩 몰라서 아무것도 못 하던 때랑은 완전히 달라요. 아트 디렉션이 계속 필요한 엄청 빠른 개발자를 옆에 두고 일하는 느낌이예요.

글로우트리스 색상 시스템

딱 하나의 조건에서 시작했어요. 네온 아케이드 게임처럼 보이면서, 20분 넘게 들여다봐도 안 피곤해야 한다.

첫 번째 프롬프트는 이랬어요.

"배경을 매우 어두운 네이비, 거의 블랙으로 만들어줘. 블럭 네온 글로우 색상은 시안, 마젠타, 노랑, 초록. UI는 SF 영화 어두운 인터페이스처럼 — 깔끔하고, 미니멀하고, 빛나는."

Claude Code가 배경에 #000000을 쓴 CSS와 대략적인 네온 색상을 줬어요. 근데 문제가 있었어요. 순수 블랙은 글로우 효과를 죽여요. 글로우는 완전 블랙이 아니라 어두운 블루-블랙 배경에서 제대로 빛나거든요. 다시 수정해달라고 했어요.

"배경이 너무 밋밋해. 매우 어둡고 채도가 낮은 네이비여야 해 — #04041e 같은 거. 테트리스 블럭의 글로우는 실제로 빛을 내뿜는 것처럼 보여야 해."

두 번째 결과물이 훨씬 가까웠어요. 그리고 제가 즉흥적으로 말한 #04041e가 그냥 실제 프로덕션 값이 됐어요. 가끔은 때려맞추면 되는거더라고요.

타이포그래피 문제

로고 폰트는 Orbitron이에요. 무겁고 기하학적인 SF 서체. 백 미터 밖에서도 “우주 게임”으로 읽혀요. 딱 원했던 거예요.

근데 Orbitron을 본문 크기로 쓰면 잘 못 읽어요. 가독성이 떨어져서 완전히 다른 폰트가 필요했어요.

한국어는 Pretendard. 제가 아는 가장 깔끔한 한국어 산세리프체예요. 영어 본문은 system-ui. 모노스페이스 요소는 JetBrains Mono.

"헤더랑 로고는 Orbitron. 본문이랑 UI는 한국어 Pretendard, 영어 system-ui. 코드 같은 모노스페이스 요소는 JetBrains Mono.”

디스플레이 / 본문 / 모노, 세 폰트 시스템은 학교를 다닐때 ui파트 교수였던 나재휘 교수님께서 가르쳐줬던 표준 패턴이에요. AI도 이 패턴을 알더라고요. 선배들이 잘 닦아 둔 길을 우리가 따라간다고 교수님께서 말씀해주셨는데 AI도 그 길을 잘 걷는 것 같아요.

라이트 모드는 나중에 추가됐는데 기본값이 됐어요

원래 글로우트리스는 어두워요. 브랜드 전체가 어두운 배경 위 글로우를 중심으로 만들어졌거든요. 블로그도 처음엔 어두웠어요.

근데 낮에 폰으로 봤을 때 읽기가 좀 불편했어요. 우리 브랜드디자인은 살리면서 낮에도 잘 읽혔으면 했어요.

“글로우트리스 블로그는 디폴트 라이트모드, 다크모드는 옵션으로. 톤은 완전 테크블로그 느낌으로.”

라이트 모드에서는 글로우 색상이 #2563eb 파란색으로 바뀌어요. 어두운 배경 없어도 자신감 있고 테크처럼 보이는 색이에요. 점 그리드 배경은 Vercel 웹사이트에서 영감 받았어요. 뭔가 인프라를 표현한 것 같고 “노드 하나하나가 정보인” 느낌이 마음에 들어요.

다크 모드는 원래의 #00c8ff 시안과 어두운 네이비 그대로에요.

프롬포트로 안 된 것들

항상 직접 고쳐야 하는 게 있어요.

간격. AI가 만든 CSS 간격은 항상 너무 좁거나 너무 넓어요. 로고 자간은 거의 항상 좁히고, 섹션 구분선 주변 여백을 늘리고, 카드 패딩은 줄여요. 몇 년 동안 디자인 들여다보면서 눈에 박힌 기준이 있거든요. 이를 시각적 보정이라고 해요.

타이포그래피 스케일. 기본 제안은 수학적으로는 맞는데 눈으로 보면 밋밋해요. 헤딩 크기는 항상 키우고 본문은 약간 줄여서 레벨 간 대비를 높여요.

색상 관계. AI는 단일 색상은 맞추는데, 여러 색이 동시에 상호작용하는 건 종종 그 디테일들을 놓쳐요. 라이트/다크 모드에서 활성 버튼 텍스트 색상 반전 — 이건 두 번 말해야 알아먹더라고요.

마이크로인터랙션. 기본 호버 상태는 항상 너무 미묘하거나 너무 과해요. 저는 0.15s ease, 스케일 트랜지션 없음. 반응 빠르고 자신감 있는 호버! 업계 선배들이 쓰던 방식이고, 저도 직접 쓰던 방식이에요.

결국

모든 결정에는 제 생각이 있고 의견이 있어요. 클로드와 작업한다는 건, 그 의견들을 말로 표현하고 즉시 화면에서 보는 이점이 있어요. 뭔가 이상할 때 저는 그냥 고쳐달라고 했고 틀리면 또 말했어요.

색상을 마음에 안들게 만들었을 때:

"배경을 매우 어두운 네이비, 거의 블랙으로 만들어줘."

나온 결과를 봤을 때:

"배경이 너무 밋밋해. 매우 어둡고 채도가 낮은 네이비여야 해 — #04041e 같은 거."

폰트가 맞지 않을 때:

"헤더와 로고: Orbitron. 본문과 UI: 한국어는 Pretendard, 영어는 system-ui. 카테고리 태그 같은 모노스페이스 요소: JetBrains Mono."

전체 컨셉트를 바꿔야 할 때:

"글로우트리스 블로그는 디폴트가 라이트모드, 그리고 다크모드가 옵션, 선택할수있게해줘. 그리고 톤은 완전 테크블로그느낌으로."

저는 클로드에게 말로만 명령 하지만, 작업 속도는 정말 전례가 없는 수준이네요.

클로드는 빨라요. 근데 당신이 뭘 원하는지 모르면 그냥 작동하는 무언가를 만들어줄 뿐이에요. 훌륭하게 나올수도 망할 수도 있고..

여러분들 손에 달려있어요.