Claude Code와 Nano Banana 2를 활용한 45분 완성 AI 디자인 워크플로

실용적 조언

Claude Code에게 지시할 때 코드가 아닌 디자이너에게 말하듯 구체적인 시각적 설명을 제공하라
이미지 생성 전 레이아웃의 크기를 먼저 검증하여 종횡비 불일치로 인한 크롭 문제를 방지하라

섹션별 상세

Claude Code를 활용해 디자인의 뼈대인 HTML/CSS 구조를 먼저 구축한다. 사용자가 원하는 시각적 요구사항을 자연어로 설명하면 에이전트가 레이아웃, 캐러셀, 랜딩페이지 전체 코드를 생성한다. 코드 기반의 구조를 먼저 잡는 이유는 이미지 생성보다 수정과 반복 작업이 훨씬 빠르기 때문이다.

Google의 Nano Banana 2 모델을 사용하여 UI에 필요한 맞춤형 시각 에셋을 생성한다. Gemini 앱 내 도구를 통해 텍스트가 포함되지 않은 UI 요소, 3D 목업, 투명 배경의 플랫 일러스트레이션을 확보한다. 이 단계에서는 레이아웃의 슬롯 크기에 맞춰 종횡비를 사전에 설정하여 이미지 왜곡을 방지한다.

생성된 시각 에셋을 Claude Code가 작성한 코드 구조에 통합하여 최종 결과물을 완성한다. 각 도구가 잘하는 영역인 코드 작성과 이미지 생성에 집중하게 함으로써 작업 효율을 극대화한다. 실제 적용 사례에서 인스타그램 카드 뉴스, 랜딩페이지, 발표 자료 제작 시간을 45분 내외로 단축했다.

용어 해설

코딩 에이전트(Coding Agent): — 사용자의 자연어 지시를 이해하여 코드를 직접 작성, 수정, 실행하는 자율형 AI 도구이다. 단순한 코드 완성을 넘어 프로젝트 구조 설계부터 디버깅까지 수행하며 개발 생산성을 극대화한다.
UI 에셋(UI Assets): — 웹사이트나 애플리케이션의 사용자 인터페이스를 구성하는 이미지, 아이콘, 버튼 등의 시각적 요소이다. 디자인의 일관성을 유지하고 사용자 경험을 향상시키는 데 필수적인 재료이다.
종횡비(Aspect Ratio): — 이미지나 화면의 가로와 세로 길이 비율을 의미한다. 웹 디자인에서 레이아웃에 맞는 정확한 종횡비의 이미지를 사용하는 것은 시각적 왜곡을 방지하고 구성을 유지하는 데 중요하다.

언급된 도구

Claude Code추천

HTML/CSS 구조 및 UI 레이아웃 자동 생성

Nano Banana 2추천

UI 에셋, 3D 목업 및 일러스트레이션 생성

언급된 리소스

튜토리얼Claude Code & Nano Banana 2 Design Workflow Detailed Guide