AI와 디자인 시스템으로 UI/UX 혁신

디자인 시스템 구축부터 모바일 UI 화면 설계까지 9년 경력의 UX 디자인 컨설팅 전문가가 단 한 시간 만에 해낸다. 이 과정에서 피그마로 선 하나 그리지 않는다. 인공지능 클로드 디자인을 활용해 과거 2주 이상 걸리고 수백만 원의 비용이 들던 작업을 효율적으로 바꾸는 방법이다.

디자인 프로세스의 대변혁

과거 UX 디자인 작업은 오랜 시간과 많은 비용을 필요로 했다. 디자인 시스템을 수립하고, 컴포넌트를 만들며, 핵심 화면을 그리는 과정에 최소 2주 이상이 소요되었다. 5~6년 차 디자이너의 인건비만 400만 원에서 600만 원에 달했다. 그러나 AI의 등장으로 이러한 디자인 프로세스가 근본적으로 변화한다.

AI를 활용하는 새로운 디자인 방식은 과거와 극명한 대비를 보인다.

항목	기존 방식	AI 활용 방식 (클로드)
소요 시간	최소 2주 이상	1시간 이내 (모바일 화면 7장 기준)
인건비	400만 ~ 600만 원 (5~6년 차 디자이너)	대폭 절감
주요 도구	포토샵, 피그마 (직접 드로잉)	클로드 디자인 (피그마 직접 작업 없음)
핵심 작업	그림 그리는 기술 (시안, 컴포넌트 제작)	문제 진단, 기획, 스타일 정의, 사용자 플로우 설계
결과물	일관성 유지를 위한 수동 시스템 관리	AI가 생성한 일관된 디자인 화면

이제 디자인을 잘하기 위해 피그마 툴 숙련도가 절대적인 요소가 아니다. 기획자나 개발자도 만들고자 하는 것을 명확히 정의하면 고품질의 UI를 직접 만들 수 있다.

AI 시대, UX 디자인의 본질

AI가 디자인 작업을 수행하는 시대에는 사람이 해야 할 일이 더욱 명확해진다. 단순히 “예쁜 화면을 만들어줘”라고 요청한다고 해서 좋은 디자인이 나오지 않는다. 중요한 것은 그림을 그리는 기술이 아니라, 다음의 핵심 요소들을 정의하고 설계하는 능력이다.

• 문제 진단: 어떤 문제를 해결할 것인지 정확하게 파악한다.
• 무엇을 만들 것인가: 서비스나 제품의 핵심 기능과 목표를 명확하게 정의한다.
• 어떤 스타일로 보여줄 것인가: 디자인의 시각적 언어와 톤앤매너를 설정한다.
• 사용자 플로우: 사용자가 서비스를 이용하는 경험의 흐름을 설계한다.

기술적인 기교보다 기획 역량이 중요해진다. 끊김 없이 연결되는 사용자 경험을 기획하는 것이 인간의 본질적인 역할이다. AI 시대가 도래하며 UX 디자인의 본질이 더욱 선명하게 드러난다.

AI와 협업하는 디자인 워크플로우

AI 시대의 효율적인 디자인은 계획과 레퍼런스 활용에 달려 있다. 다음은 AI와 함께 진행하는 디자인 워크플로우 단계이다.

1. PRD (Product Requirements Document) 문서 생성: 서비스 내용, 플로우, 화면 등을 정리한 요구 사항 정의 문서를 준비한다.
2. 디자인 시스템 레퍼런스 탐색: 피그마 커뮤니티 등에서 탄탄한 기존 디자인 시스템을 찾아 참고한다.
3. 디자인 스타일 벤치마킹: 핀터레스트 등에서 원하는 스타일에 대한 시각적 레퍼런스를 탐색한다.
4. 클로드 디자인 활용: 위에서 준비한 디자인 시스템, 서비스 화면, PRD, 요구 사항을 클로드 디자인에 참조시켜 UI를 생성한다.

이 과정을 통해 피그마를 직접 만지지 않고도 모바일 UI를 만들 수 있다.

성공적인 AI 디자인을 위한 프롬프트 원칙

AI와 효율적으로 작업하기 위한 세 가지 프롬프트 원칙은 다음과 같다.

원칙	설명	효과
맥락과 목적 설명	AI에게 작업의 배경과 목표를 먼저 알려준다.	AI가 요청의 의미를 정확히 이해하고 올바른 방향으로 작업한다.
시각 레퍼런스 제공	원하는 방향을 이미지로 구체적으로 보여준다.	AI가 스타일, 색상, 레이아웃 등을 명확하게 파악한다.
한 번에 하나씩 지시	AI에게 한꺼번에 많은 작업을 시키지 않는다.	AI가 각 작업을 집중하여 처리하며 퀄리티를 높인다.

AI는 단순히 ‘딸깍’하는 도구가 아니다. 슈퍼 파워를 지닌 신입사원처럼 명확하고 구체적인 지시가 필요하다.

클로드 디자인 시스템 구축과 커스터마이징

클로드 디자인으로 탄탄한 디자인 시스템을 구축하고 커스터마이징하는 과정은 다음과 같다.

1. 디자인 시스템 레퍼런스 확보: 피그마 커뮤니티에서 iOS 및 iPadOS UI 키트와 같이 검증된 디자인 시스템을 찾아 피그마 파일로 내보낸다.
2. 클로드 디자인 시스템 생성: 클로드 디자인에서 내보낸 피그마 파일을 업로드하여 기본 디자인 시스템을 만든다. 이 과정에서 컬러 세트, 내비게이션, 인풋 박스, 배지, 카드, 버튼, 폰트 등 다양한 컴포넌트가 자동으로 생성된다.
3. 스타일 레퍼런스 탐색: 핀터레스트 등에서 뉴모피즘(Neomorphism), 글래스모피즘(Glassmorphism)과 같이 원하는 스타일의 이미지와 컬러 팔레트를 찾아 저장한다.
4. 디자인 시스템 커스터마이징: 클로드에 레퍼런스 이미지를 첨부하고, 기존 디자인 시스템의 컴포넌트 스타일, 컬러, 이펙트, 섀도우를 해당 이미지 스타일로 변경하도록 지시한다. 폰트가 없는 경우 수동으로 업로드하여 시스템을 완성한다.

이 과정을 거쳐 보편적이지만 원하는 스타일에 맞춘 나만의 디자인 시스템을 완성한다.

PC 서비스의 모바일 UI 전환

커스터마이징된 디자인 시스템을 기반으로 실제 서비스 화면을 디자인한다.

1. PRD 및 레퍼런스 첨부: 완성된 디자인 시스템을 선택하고, PRD 문서 및 실제 운영 중인 PC 서비스 화면 캡처 이미지를 첨부한다.
2. 모바일 UI 디자인 요청: 클로드에 “지금 만들어진 디자인 시스템의 스타일이나 컴포넌트를 정확하게 지켜 모바일용으로 디자인해 줘”라고 지시한다.
3. 피드백 및 수정: 클로드가 생성한 모바일 대시보드 등의 시안을 확인하고 피드백한다. 예를 들어, 하단 탭바 형태의 내비게이션, PC 화면에서 필요한 요소만 추출한 대시보드 구성 등을 지시하여 수정한다.
4. 디자인 시스템 재조정: 초기 시안에서 섀도우가 강하거나 컴포넌트 구분이 어렵다고 판단될 경우, 새로운 레퍼런스 이미지를 첨부해 디자인 시스템 자체를 재조정한다. 이 과정에서 포인트 컬러(원그레이, 뮤티드 세이지)를 추가하고 블랙 컬러를 제외하며, 전체적인 브랜드 컬러는 유지하도록 지시한다. 그러면 컴포넌트 스타일과 컬러가 실시간으로 변경되는 것을 확인한다.

실시간 수정과 확장

수정된 디자인 시스템으로 다시 홈, 대시보드, 문서 생성 등 주요 모바일 화면을 만들도록 클로드에 지시한다.

1. 화면 생성: 클로드가 수정된 디자인 시스템을 적용하여 두 개의 시안 화면을 자동으로 생성한다.
2. 세부 조정: 생성된 화면과 레퍼런스를 비교하며 프로세스 바의 배경 색상과 같이 구분이 필요한 부분에 적절한 배경 색상을 넣어달라고 지시한다. 클로드는 지정된 배경 색상을 적절하게 적용하여 화면을 개선한다.
3. 화면 확장: 이 개선된 디자인 스타일을 나머지 메뉴에도 적용해 달라고 요청한다. 예를 들어, 다섯 개의 추가 화면을 같은 메뉴 단위로 생성하도록 지시한다.

이러한 스텝 바이 스텝 방식으로 퀄리티를 높인다. 최종적으로 일곱 장의 모바일 서비스 화면이 완벽하게 디자인되었다. 이 모든 과정에서 피그마는 한 번도 열지 않았다.

다음 단계, Figma 연동과 바이브 코딩

클로드 디자인으로 완성된 모바일 서비스 화면은 여기서 끝이 아니다. 다음 단계에서는 이 디자인을 바탕으로 실제 구현 작업을 진행한다.

• 클로드 디자인에서 완성된 화면을 피그마로 자동으로 가져온다.
• 피그마에서 디자인 시스템 컴포넌트를 자동으로 등록하고 세부 조정을 진행한다.
• 필요에 따라 스타일이나 텍스트를 수동으로 수정하여 퀄리티를 높인다.
• 피그마 MCP (Model Context Protocol)가 연결된 상태에서 클로드 코드로 프론트엔드 바이브 코딩을 진행한다.

이처럼 클로드와 함께 프로토타입 MVP를 만들어가는 과정은 계속해서 이어진다.

결론

단순 반복 작업은 AI가 빠르게 처리하고, 사람은 지식, 정보, 사용자 경험의 본질에 집중한다. 아이디어에 AI를 더해 사업 계획서, 제안서, 프로토타입까지 만드는 시대가 열린다.

출처

• IDEAiPlus_AI와 함께 문서, 디자인, 개발까지!. (2026-08-30). 요즘 클로드 디자인에 미쳐있는 이유 #티안나는AI디자인 #designsystems #ClaudeDesign. YouTube.