디자이너 없이 UI를 생성할 때 발생하는 실제 비용

매주 월요일 아침, 저는 창업자들이 주말 동안 Lovable이나 v0를 사용하여 구축한 결과물을 검토하며 몇 시간을 보냅니다. 그들이 보내온 화면들은 언뜻 보기에는 정말 인상적으로 보일 때가 많습니다. 하지만 제가 이것저것 클릭해 보기 시작하면, 그때 환상이 깨집니다.

AI 디자인 도구들은 본연의 기능에는 충실하게 작동합니다. 하지만 제가 계속해서 목격하는 문제는 일부 창업자들이 화면 렌더링 (Screen Rendering)과 제품 디자인 (Product Design)을 자주 혼동한다는 점입니다. 이 두 가지는 완전히 다른 활동이며, 이 둘을 혼동할 경우 팀에 실제적인 금전적 손실을 초래할 가능성이 매우 높습니다.

바이브 코딩 (Vibe-Coding) 세션이 실제로 진행되는 방식

첫 번째 프롬프트: "물류 관리를 위한 대시보드를 만들어줘." 결과물은 실제로 꽤 괜찮아 보입니다.

두 번째에서 다섯 번째 프롬프트: 레이아웃을 다듬고, 필터를 추가하고, 차트를 조정하며, 더 독특한 외관을 요청합니다.

그다음 여섯 번째에서 열두 번째 프롬프트가 이어집니다: "왜 필터가 테이블 뒤에 숨겨져 있죠? 취소해 주세요. 그리고 테이블을 더 넓게 만들어 주세요." 이 단계에 이르면, 당신은 보통 무언가를 구축하는 것을 멈추고 화재 진압(Firefighting, 문제 해결)을 시작하게 됩니다.

자신의 이전 지시 사항을 쫓느라 수백 개의 토큰 (Tokens)을 소진할 때쯤이면, 세션은 주니어 디자이너가 반나절 만에 해낼 수 있는 결과물과 함께 종료됩니다. 이것이 실제로 실행되는 바이브 코딩 (Vibe Coding)의 모습입니다.

이를 합산해 보겠습니다: Lovable 크레딧 $50–200, 여기에 일반적인 시급 $75–150를 기준으로 한 창업자의 8–12시간의 시간 비용이 추가됩니다. 주니어 디자이너가 약 $100–200에 반나절 만에 제공했을 결과물을 얻기 위해, 실제 비용으로 $600–1,800를 지출한 셈입니다.

돈을 아껴줄 줄 알았던 도구가 결국 더 비싼 경로가 되어버렸습니다.

또한 언급할 가치가 있는 점은, 토큰을 낭비하는 것이 실제로는 망가진 AI 워크플로우 (workflow)의 증상이라는 것입니다. 근본적인 문제는 AI가 인터페이스 아키텍처 (interface architecture)에 대한 장기적인 비전이 없으며, 모든 프롬프트 (prompt)가 로컬 (locally)에서 처리된다는 점입니다. 버튼을 옮겨달라고 요청하면, AI는 버튼을 옮깁니다. 하지만 AI는 그 버튼이 두 열 떨어진 요소와 시각적으로 연결되어 있다는 사실을 알 방법이 없습니다. 한 곳을 고치면 다른 두 곳이 망가집니다. 이것이 바로 악순환입니다.

반면, 디자이너는 화면을 각 요소가 다른 여러 요소와 연결된 살아있는 시스템으로 바라봅니다. 단 하나의 요소를 옮기기 전에도 그들은 질문합니다: '이것이 과연 존재해야 하는가?' 이 질문은 제품 UX (UX)의 기초이며, 화면 단위로 프롬프트를 입력할 때는 결코 던져지지 않는 질문입니다.

데이터 시각화의 격차 (Data Visualization Gap)

AI는 주어진 데이터를 읽고 막대 그래프나 선 그래프를 그립니다. AI는 사용자가 그 데이터를 볼 때 어떤 질문을 던지는지, 혹은 어떤 시각화 형식이 실제로 그 특정 질문에 답할 수 있는지에 대해 고민하지 않습니다.

프롬프트는 일반 사용자가 무엇을 필요로 하는지는커녕, 전문가의 머릿속에 있는 아이디어조차 전달하지 못했습니다. 이것이 바로 우리가 사고하는 방식의 핵심적인 차이입니다. AI는 데이터 유형(백분율)을 보고 그에 맞는 시각화 방식을 선택했습니다. 하지만 디자이너는 사용자가 이 데이터를 볼 때 던지는 질문인 "이것이 얼마나 완성되었는가?"를 함께 고려했습니다. AI는 이 질문을 "이것은 무엇으로 구성되어 있는가?"로 해석했습니다.

결과적으로 답변은 서로 다르게 보이며, 서로 다른 문제를 해결하게 됩니다.

비용: 디자이너가 제때 이를 잡아낸다면 $0부터 시작합니다.

우리의 경우, 우리가 직접 잡아냈기 때문에 $0였습니다. 하지만 항상 그런 식으로 흘러가는 것은 아닙니다.

프롬프트와 화면 사이에서 사라지는 것들

AI UI 생성 (AI UI generation)은 빠릅니다. 그 속도 때문에 방금 생성한 화면이 실제로 올바른 문제를 해결하고 있는지에 대한 질문을 쉽게 건너뛰게 만들기도 합니다.

하지만 UI 생성 도구에 프롬프트를 입력하면, 여러분은 제품과 닮은 픽셀(pixels)을 받게 됩니다. 생성형 UI (Generative UI)는 의사결정 과정 자체 없이 의사결정의 결과물만을 제공합니다.

여러분이 얻지 못하는 것은 디자이너가 도구를 열기 전에 일어나는 사고의 계층 (layer of thinking)입니다. 이 계층에는 다음이 포함됩니다:

사용자가 이 화면을 열었을 때 실제로 던지는 질문이 무엇인지 이해하는 것
이 화면이 전후의 흐름 (flow)과 어떻게 연결되는지 매핑 (mapping)하는 것
사용자의 과업 (task)을 위해 핵심적인 역할을 하는 요소가 무엇인지, 그리고 무엇이 단순한 장식인지 식별하는 것
플레이스홀더 (placeholder) 텍스트가 실제 데이터로 대체될 때 레이아웃 (layout)이 어떻게 작동할지 예측하는 것

우리는 AI가 타임라인 인터페이스를 생성한 SaaS UX 프로젝트를 진행한 적이 있습니다. 상단에는 주간 상태 요약이 있고, 그 아래에는 상세 보고서가 있는 구조였습니다. 요약이 먼저 나오고 상세 내용이 뒤따르는 방식은 실제로 논리적으로 들립니다.

하지만 실제 사용자들이 이를 사용했을 때, 그 논리는 무너졌습니다. 사용자는 지난주 지표가 왜 하락했는지 이해하기 위해 화면을 열었습니다. 상단의 상태 요약을 읽고, 상세 내용을 찾기 위해 아래로 스크롤했다가, 요약 내용이 무엇이었는지 놓쳐버려 다시 위로 스크롤하고, 다시 아래로 내려가는 과정을 반복했습니다.

심지어 몇몇 사람들은 정보를 나란히 비교하기 위해 브라우저 탭을 두 개씩 열기 시작했습니다. 이러한 식의 임시방편 (workaround)은 AI가 생성한 인터페이스에서 흔히 나타나는데, 이는 사용자가 도구의 논리에 맞춰 적응할 뿐, 도구가 사용자에게 맞춰지지 않기 때문입니다.

우리가 레이아웃을 재설계하여 주간 상태가 상세 테이블의 컬럼 헤더 (column header) 내부에 위치하도록 했을 때, 인터페이스는 하나의 일관된 도구가 되었고 사용자는 단일 뷰 (single view)에서 실제 질문에 대한 답을 얻을 수 있었습니다.

이것이 바로 AI UX 디자인이 놓치는 부분입니다. 프롬프트(prompt) 상에서는 레이아웃이 논리적으로 보였지만, 실제 사용자 세션(user session)을 통해서만 그것이 실제로 어떻게 작동하는지가 드러났습니다.

다행히 우리는 이 문제를 디자인 단계에서 발견했으며, 시간당 $50–80의 비용으로 약 4시간의 재작업(rework)이 소요되었습니다.

만약 동일한 레이아웃이 개발 단계에 먼저 도달했다면, 백엔드 구조 재편(backend restructuring)에 2~3일이 소요되었을 것이며, 이는 청구서에 $800–2,000가 추가됨을 의미합니다.

AI는 브랜드 일관성(Brand Consistency)도 무너뜨릴 수 있습니다

제품 회사를 운영하는 창업자인 나의 고객 한 명이 두 번의 중요한 영업 미팅을 위해 출장을 가고 있었습니다. 첫 번째 미팅을 위한 발표 자료는 준비되어 있었습니다. 두 번째 미팅을 위해 그는 비행기 안에서 Claude를 열어 50장의 슬라이드를 생성했습니다.

거의 모든 슬라이드가 다음과 같은 모습이었습니다:

그가 착륙한 후 디자이너에게 보여주었을 때, 그들은 슬라이드 한 장 한 장을 검토했고 거의 모든 슬라이드에서 동일한 문제가 발견되었습니다. 마치 템플릿 라이브러리에서 가져온 일반적인 기업용 발표 자료처럼 보였다는 점입니다. 색상, 글꼴(font), 시각적 구조(visual structure)가 제품의 브랜드와 아무런 연결 고리가 없었습니다. 미팅룸에 있는 사람은 이것이 웹사이트, 제품 UI, 또는 이전 미팅에서 사용된 자료와 동일한 회사에서 나온 것이라는 사실을 알 방법이 전혀 없었을 것입니다.

우리는 두 번째 미팅 전에 발표 자료 전체를 다시 만들었습니다. 우리가 새로 고안한 디자인은 다음과 같습니다:

결과적으로 고객은 그 출장에서 새로운 파트너를 확보했습니다. 세련되고 브랜드에 맞는 발표 자료가 결과물을 더 좋게 만들었는지에 대해서는 확실히 말할 수 없습니다. 하지만 우리는 시각적 일관성(visual consistency)이 하는 역할을 알고 있습니다. 그것은 신뢰를 구축합니다. 회사의 자료들이 응집력 있게 보일 때, 사람들은 그 회사가 무엇을 하고 있는지 정확히 알고 있다고 가정합니다.

AI는 제품의 시각적 개성(visual personality), 톤(tone), 사용자의 기대치, 또는 사용자들이 수백 번이나 보아왔던 특정 폰트와 색상에 대해 전혀 알지 못했습니다. 인터페이스 일관성(Interface consistency)은 보통 모든 접점(touchpoint)을 통해 점진적으로 구축되지만, AI는 매번 제로(zero) 상태에서 시작합니다.

시각적 친숙함은 UX(사용자 경험) 분야에서 잘 알려진 인지 패턴인 단순 노출 효과(mere-exposure effect) 때문에 신뢰를 구축합니다. 즉, 사람들은 자신이 인지하는 것을 신뢰합니다. 기능은 올바르게 작동하지만 시각적으로 이질적으로 보이는 인터페이스는 사용자가 느끼지만 설명할 수는 없는 불편함을 유발합니다. 이것은 오늘날 AI UX에서 가장 간과되고 있는 문제 중 하나입니다.

투자 문제

일부 창업자들은 초기 디자인 투자를 건너뛰고 나중에 예산이 더 확보되었을 때 추가할 계획을 세우기도 합니다. 하지만 비용은 사라지지 않습니다. 단지 수정하기가 더 어려운 단계로 옮겨질 뿐입니다.

이미 개발 중인 '분위기 중심(vibe-coded)' 인터페이스를 재작업한다는 것은, 라이브 시스템에 들어가 모든 구성 요소가 무엇에 의존하고 있는지 파악하고, 제품이 구동되는 동안 구조를 변경해야 함을 의미합니다. 이는 처음부터 깔끔하게 구축하는 것과는 차원이 다른 작업이며, AI 인터페이스 디자인 프로젝트에서 반복적으로 나타나는 패턴입니다. 또한 AI가 생성한 레이아웃 결정 사항들을 풀어내는 데 소비되는 엔지니어링 시간은 제품 예산에서 가장 비용이 많이 드는 시간 중 하나가 될 수 있습니다.

컴퓨터가 등장하기 전, 회계사들은 모든 업무를 수작업으로 처리했습니다. 컴퓨터가 등장했을 때 그들이 사라지지는 않았습니다. 그들은 더 빨라졌을 뿐입니다. UX 디자이너들도 현재 동일한 지점에 서 있습니다. AI는 계산기입니다. 무엇을, 왜 계산해야 하는지에 대한 판단은 여전히 사람으로부터 나와야 합니다.

그리고 이것이 AI 제품 디자인 도구들이 아직 메우지 못한 간극입니다. 계산기는 더 빨라졌지만, 판단은 여전히 사람의 몫입니다.

개발 전에 디자인에 투입되는 예산은 투자입니다. 하지만 개발 후에 투입되는 동일한 예산은 수리비입니다. 그리고 이 순서는 모든 AI 개발 워크플로우(workflow)에서 대개 동일하게 나타납니다.

디자인 프로세스에서 AI가 진정으로 속해야 할 곳

AI는 디자인 작업에서 여전히 실질적인 역할을 수행합니다. AI는 한 가지 특정한 일, 즉 명확한 사양(specification)을 빠르게 실행하는 데 탁월합니다. 예를 들어:

디자이너가 컴포넌트(component)에 대해 다섯 가지의 서로 다른 레이아웃(layout) 방향을 탐색해야 할 때, AI는 몇 분 안에 이러한 시작점들을 만들어낼 수 있습니다. 디자이너는 이를 선택하고, 조정하고, 결정합니다. 이것은 진정으로 더 빠른 작업 방식입니다.
AI는 또한 콘텐츠 변형(content variants), 확립된 컴포넌트 패턴(component pattern)의 반복(iterations), 버튼 및 레이블(label)을 위한 마이크로카피(microcopy)와 같은 반복적인 UI 작업을 처리합니다. 창의적인 결정이 이미 내려진 상태라면, AI는 훌륭한 제작 도구(production tool)가 됩니다.
창업자들에게 AI는 디자이너가 참여하기 전에 거친 아이디어를 시각화하는 데 유용합니다. 이런 방식으로 사용될 때, AI 프로토타이핑(prototyping)은 디자인 작업을 대체하지 않으면서 브리핑(briefing) 대화 시간을 단축해 줍니다. 모호한 개념을 손으로 가리키며 "이것보다는 저것에 가깝게"라고 말할 수 있는 무언가로 바꾸는 것은 브리핑 대화를 훨씬 짧게 만듭니다.
데이터 시각화(Data visualization): AI에게 데이터 세트(dataset)를 차트로 그려달라고 요청하면, AI는 데이터 유형에 따라 형식을 선택합니다. 백분율은 파이 차트(pie chart)로, 추세는 선 그래프(line graph)로 나타냅니다.

이미 AI 도구를 사용하고 있다면 취해야 할 실질적인 접근 방식

AI가 당신의 프로세스 일부라면, 다음과 같은 방법으로 이러한 실수들로 인해 발생하는 값비싼 비용을 피할 수 있습니다: