미리캔버스와 캔바가 한국에서 대중화되었을 때를 기억하시나요? 비슷한 톤의 카드뉴스, 어딘가 익숙한 레이아웃의 결과물들이 한꺼번에 쏟아져 나오던 시기가 있었습니다. 요즘 다시 그 기시감을 느끼고 있어요. 이번에는 미리캔버스가 아니라 클로드 코드, 커서, v0 같은 AI 코딩 도구들이 주인공입니다. 비슷하게 생긴 랜딩페이지와 웹 서비스들이 우후죽순 쏟아지고 있죠.

누구나 코드를 짜고 디자인을 만들 수 있게 된 변화는 분명 반가운 일입니다. 디자인을 업으로 하지 않는 분들이 "이 도구를 어떻게 더 잘 쓸 수 있을까"를 고민하기 시작했다는 것 자체가 흥미로운 흐름이에요. 하지만 디자이너로서 AI를 실무에 쓰다 보면 묘한 감각 차이를 느끼게 됩니다. 어떤 디자인은 놀랄 만큼 잘 만들어내는데, 바로 다음 작업에서는 왜 이걸 이렇게밖에 못 하는지 답답할 때가 있어요.

같은 AI를 쓰고 있는데도 성능의 편차가 크게 느껴지는 이유는 뭘까요?

핵심 원리: AI는 디자인을 '이해'하는 게 아니라, 많이 본 패턴을 재조합한다

이 차이를 이해하려면 AI가 디자인을 만드는 방식을 알아야 합니다.

우리가 흔히 쓰는 AI 코딩 도구들은 대부분 LLM(Large Language Model) 기반입니다. 이 모델들은 방대한 양의 텍스트와 코드를 학습한 뒤, 입력된 맥락에서 다음에 올 가능성이 가장 높은 토큰을 예측하는 방식으로 작동해요. 쉽게 말해, 웹상에 많이 존재하는 코드 패턴일수록 정확하게 재현하고, 드문 패턴일수록 "가장 그럴듯한 평균"에 가까운 결과를 내놓습니다.

그래서 AI에게 쉬운 디자인과 어려운 디자인의 차이는 결국 학습 데이터의 밀도 차이입니다. 이 원리를 이해하면 AI를 훨씬 전략적으로 활용할 수 있어요.

이번 글에서는 AI가 잘하는 디자인과 어려워하는 디자인을 구분해 살펴보고, 실무에서 어떻게 써먹을 수 있을지 이야기해 보겠습니다.

AI가 잘하는 디자인

1) 어드민과 대시보드 UI

AI가 가장 잘 만드는 디자인의 대표 사례입니다. Bootstrap 시절부터 지금의 Tailwind + shadcn/ui 조합까지, 어드민 UI의 구조는 거의 문법처럼 굳어져 있어요. 왼쪽 사이드바, 상단 헤더, 카드형 콘텐츠, 테이블, 필터, 페이지네이션. 이 패턴은 웹상에 코드가 넘칠 정도로 많기 때문에, AI는 새로운 걸 발명할 필요 없이 학습된 걸 조합하기만 해도 바로 쓸 수 있는 수준의 결과를 내놓습니다.

위 이미지는 제가 “어드민 대시보드를 만들어줘” 라고 했을 때 만들어준 결과입니다. 프롬프트에 구체적인 지시를 거의 하지 않았는데도 “어드민 대시보드”라는 한마디만으로 이런 구조가 바로 나와요.

실제로 요즘은 어드민 UI에 디자인 리소스를 거의 쓰지 않는 팀도 늘고 있어요.

2) 초안, 프로토타입, 와이어프레임

정보 구조가 비교적 명확한 서비스라면 더욱 잘 작동합니다. 랜딩 페이지의 섹션 구성, 온보딩 플로우, 설정 화면처럼 정형화된 화면들은 AI가 여러 버전을 빠르게 뽑아내는 데 강점이 있어요.

다만 여기서 중요한 건, AI가 만드는 결과물은 '완성품'이 아니라는 점입니다. AI가 잘하는 건 첫 60~70%의 형태를 빠르게 잡아주는 일이고, 차별화되는 경험과 디테일은 여전히 사람의 영역이에요. 그렇지만 "어떤 방향으로 갈지" 탐색하는 단계에서 이 속도는 압도적입니다.

3) 그래픽 에셋과 비주얼 시안

아이콘, 일러스트, 배경 이미지, 스타일 변형처럼 정답이 하나로 정해져 있지 않은 영역에서도 AI는 강합니다. 이런 작업은 "정확한가"보다 "그럴듯한가"가 더 중요한 경우가 많고, 학습 데이터도 풍부해요. 마케팅용 키 비주얼을 여러 버전으로 뽑거나, 캐릭터, 앱 아이콘 컨셉을 빠르게 탐색할 때 AI는 훌륭한 조력자가 됩니다.

4) 레퍼런스가 있는 작업

기존에 동작하는 제품이나 프로토타입이 있을 때, AI의 성능은 확연히 올라갑니다. 이미 존재하는 앱의 구조를 참고해 비슷한 흐름의 UI를 만드는 일은 AI에게 매우 쉬운 일이에요. 완전히 동일한 경험을 구현하기는 어렵지만, UI 구조나 화면 흐름을 그럴듯하게 구성하는 데에는 큰 도움이 됩니다.

실제로 SNS 상에 여러 튜토리얼 들은 이미 있는 레퍼런스를 찾아 잘 따라 만들게 한 경우가 많아요. 이미 있는 레퍼런스를 구체적인 요구사항 디렉션과 함께 제공하면 완성도가 높은 결과물을 만들어냅니다.

AI가 어려워하는 디자인

1) 레퍼런스가 없는, 전례 없는 UI

가장 대표적인 사례입니다. 완전히 새로운 메타포나 상호작용을 만들어야 하는 상황에서 AI는 참고할 과거가 없기 때문에 결과가 익숙한 형태로 빠르게 수렴해 버립니다. 전례 없는 UI일수록 결국 사람이 직접 손으로 그리게 되는 이유가 여기에 있어요.

위 이미지는 제가 “visionOS 앱 UI 를 만들어줘” 라고 했을 때 만들어준 결과입니다. 공간 컴퓨팅 UI 같은 경우 시선 추적 + 핀치 제스처 기반의 인터랙션이라 기존 터치/마우스 패러다임과 완전히 다른데요. 평면 모바일 UI에 그림자만 얹은 결과를 뱉어주죠.

2) 모바일의 리치한 인터랙션

모바일 경험은 단순한 레이아웃이 아니라 상태, 제스처들을 하나 하나 겹겹이 거쳐가며 만들어집니다. 드래그, 스와이프, 관성, 가속과 감속, 미세한 애니메이션 같은 요소들은 정적인 화면 한 장으로 표현할 수 없고, 실제 손에 쥐었을 때의 감각이 중요합니다. AI는 한 장의 화면을 그럴듯하게 그리는 데는 능하지만, 연속된 상호작용에서 생기는 리듬과 물리감을 설계하는 데에는 아직 한계가 분명합니다.

3) 기술 제약이 UX를 결정하는 영역

겉보기에는 가능해 보이지만, 구현 단계에서 성능, 지연, 플랫폼 제약 때문에 UX가 망가지는 경우가 있습니다. 실시간 음성이나 비디오, 스트리밍 기반 인터페이스처럼 기술 제약이 디자인을 강하게 규정하는 영역에서는 "이렇게 보이면 좋겠다"와 "이렇게 동작하게 만들 수 있다" 사이의 간극이 커요. AI는 이 간극을 인지하지 못한 채 결과를 내놓는 경우가 많고, 결국 디자이너와 엔지니어가 현실 조건에 맞게 다시 조정해야 합니다.

4) 이미지 레퍼런스의 함정

텍스트 프롬프트는 구조와 의도를 비교적 명확하게 전달할 수 있지만, 이미지는 다릅니다. 이미지를 레퍼런스로 주면 AI는 그 안에서 무엇이 핵심인지 스스로 추측해야 하고, 이 과정에서 정보 위계, 상태, 맥락 같은 디자이너의 의도가 생략되기 쉽습니다. 이미지 레퍼런스가 오히려 결과의 정확도를 떨어뜨리는 경험이 많았어요. 그 때마다 AI 탓을 했는데, 텍스트로 디렉션을 적절하게 했을 때 결과물이 훨씬 더 좋아진 경험을 했습니다.

예를 들어, 위 처럼 이미지를 캡쳐한 뒤 “빨간색 네모로 표시한 부분을 확인해” 라고 하는 것보다 해당 링크를 첨부해서 직접 읽게 하거나 해당 컴포넌트를 Chrome의 인스펙터에서 콕 찝어서 알려주는 게 훨씬 정확했어요. 당연해보이지만 구체적일수록 더욱 정확하게 알아듣고 행동하는 거죠.

경계를 넘나들며 디자인하기

정리하면, AI가 잘하는 디자인과 어려워하는 디자인의 경계는 생각보다 분명합니다.

학습 데이터가 풍부한 표준 UI, 정형화된 구조, 초안과 탐색 단계의 작업에서 AI는 탁월한 속도를 보여줍니다. 반면 레퍼런스가 없거나, 인터랙션과 기술 제약이 본질인 디자인에서는 여전히 사람이 주도해야 해요.

디자이너의 역할은 점점 무엇을 AI에게 맡기고, 무엇을 내 손으로 해결할 것인가를 판단하는 일로 이동하고 있습니다. AI가 잘하는 판을 깔아주고, AI가 어려워하는 지점은 끝까지 직접 해결하는 것. 지금 시점의 디자인은 바로 그 경계 위에서 이루어지고 있다고 생각합니다.

이 글의 내용을 포함해 AI 시대에 프로덕트 디자이너가 어떻게 살아남을지를 정리한 책 《프로덕트 디자이너로 살아남기: 인공지능의 시대, 디자이너의 일》이 현재 예약 판매 중입니다. 디자이너뿐 아니라 디지털 제품을 만드는 모든 분들께 도움이 될 거예요.
👉 보러가기

다음 글에서는 제가 AI를 실무에 어떻게 쓰고 있는지, 어떤 관점에서 AI를 레버리지하는지 사례 중심으로 풀어보겠습니다.