UI 디자인을 위한 Gemini 3 활용법
*원문 출처를 번역한 글입니다.
제미나이 3(Gemini 3)는 구글이 선보인 최신 SOTA(State-of-the-art) LLM 모델입니다. 이는 단순한 점진적 업데이트를 넘어, '에이전트 중심' 경험으로의 근본적인 전환을 의미합니다. 이 모델은 멀티모달 기능과 장기적인 계획 수립에 최적화되어 있습니다. 다시 말해, 단순히 프롬프트에 더 잘 대답하는 수준을 넘어 다양한 모달리티를 오가며 더 자율적으로 사고하고, 계획하며, 행동할 수 있다는 뜻입니다.
이번 글에서는 UI 디자인 업무에 제미나이 3를 활용하는 5가지 사례를 소개합니다.
1. 와이어프레임 제작
제미나이를 활용하면 짧은 프롬프트만으로도 Low 혹은 Mid 피델리티 수준의 와이어프레임을 만들 수 있습니다. 모델이 순식간에 다양한 레이아웃 시안을 제안해주죠.
예시 프롬프트:
Create 3 alternative wireframes for a responsive landing page
for a fintech savings app. Include hero section, value propositions,
feature cards, user testimonials, and a pricing block. Provide the
layouts in text + simple ASCII diagram format.
핀테크 저축 앱을 위한 반응형 랜딩 페이지 와이어프레임 3가지 안을 만들어줘. 히어로 섹션, 가치 제안(Value Propositions), 기능 카드, 사용자 후기, 그리고 가격 정책 블록을 포함해야 해. 레이아웃은 텍스트와 간단한 ASCII 다이어그램 형식으로 제공해줘.
프롬프트를 입력하면 제미나이가 캔버스에 결과물을 바로 띄워줍니다. 'Open'을 클릭하면 AI가 생성한 상세 내용을 확인할 수 있어요. 잠깐 팁을 드리자면, 저는 시각적인 스케치 대신 ASCII 포맷을 종종 사용합니다. 기본적인 텍스트 기호로만 이루어진 플레인 텍스트라 동료들에게 디자인 구조를 공유하기가 훨씬 간편하기 때문입니다.
제미나이 3를 활용한 와이어프레임 제작2. 디자인 시스템 파운데이션
제미나이에게 디자인 시스템 요소에 대해 요청하고, 향후 구축할 디자인 시스템의 기초를 다질 수 있습니다.
제미나이로 할 수 있는 작업:
디자인 토큰 생성 (컬러, 간격, 타이포그래피)
컴포넌트 구조 제안 (카드 UI, 내비게이션 바, 폼 패턴)
디자인 가이드 문서화
피그마 디자인 시스템을 코드로 된 문서로 변환
예시 프롬프트:
Generate a minimal design system with tokens for color, spacing, typography, and shadows. The brand personality is ‘calm, trustworthy, modern’. Provide HEX, HSL, and token names. Then propose 5 reusable components that match the system.
컬러, 간격, 타이포그래피, 그림자 토큰을 포함한 미니멀한 디자인 시스템을 생성해줘. 브랜드 페르소나는 '차분함, 신뢰감, 모던함'이야. HEX, HSL 코드와 토큰 이름을 함께 제공해줘. 그리고 이 시스템에 어울리는 재사용 가능한 컴포넌트 5가지를 제안해줘.
제미나이는 순식간에 깔끔한 시스템을 만들어줍니다. 이를 탄탄한 레퍼런스 삼아 살을 붙여나가기에 아주 유용합니다.
제미나이 3로 디자인 시스템 요소 생성하기3. UI를 코드로 변환
피그마에 있는 정적인 디자인을 코드로 빠르게 구현하고 싶으신가요? 제미나이 3와 함께라면 가능합니다! 이 작업을 위해서는 UI 시각 자료를 제공해야 합니다. 저는 피그마에서 페이지 디자인을 PNG로 내보낸 뒤 제미나이에 첨부하고, 다음 프롬프트를 입력했습니다.
예시 프롬프트:
Convert this UI screenshot into semantic, responsive HTML + CSS. Use a mobile-first approach, utilize CSS variables for colors, and ensure WCAG AA contrast. Then explain how to integrate it into a React project. (Attach screenshot)
이 UI 스크린샷을 시맨틱(Semantic)하고 반응형인 HTML + CSS로 변환해줘. 모바일 퍼스트 접근 방식을 사용하고, 색상은 CSS 변수를 활용해. WCAG AA 명암비 기준도 준수해야 해. 그리고 이걸 리액트(React) 프로젝트에 어떻게 통합하는지도 설명해줘. (스크린샷 첨부)
결과:
제미나이 3를 통해 피그마 디자인을 코드로 변환디자인을 100% 똑같이 옮긴 것은 아니지만, 상당히 근접합니다. 가장 좋은 점은 제미나이가 소스 코드를 바로 출력해 준다는 것입니다. 'Code' 탭으로 전환해서 코드를 복사하거나 수정하기가 쉽게요.
4. 이미지 생성
제미나이 3를 사용하면 스톡 사진을 대체하거나 컨셉 시각화 작업을 훨씬 빠르게 처리할 수 있습니다.
업데이트된 멀티모달 기능을 통해 가능한 작업:
일관된 스타일의 일러스트레이션 생성
브랜드 톤에 맞춘 3D 목업 제작
디자인 컨셉용 플레이스홀더 이미지 생성
Create 6 consistent-style illustrations for a website onboarding flow. Style: flat minimal, soft color palette, rounded shapes. Themes: sign up, dashboard analytics, data import, notifications, collaboration, subscription upgrade.
웹사이트 온보딩 흐름에 사용할 일관된 스타일의 일러스트레이션 6개를 만들어줘. 스타일: 플랫 미니멀, 부드러운 컬러 팔레트, 둥근 형태. 주제: 회원가입, 대시보드 분석, 데이터 가져오기, 알림, 협업, 구독 업그레이드.
제미나이 3가 생성한 일관된 스타일의 이미지 세트보시는 것처럼 제미나이로 괜찮은 아이콘 세트를 만들었습니다. 일부 아이콘은 내부의 텍스트가 살짝 깨지는 문제가 있지만, 전반적인 이미지는 훌륭합니다. 엔터 키를 누르거나 클릭하면 이미지를 전체 크기로 볼 수 있습니다.
5. 접근성 진단
접근성은 디자인 과정에서 자주 간과되는 부분이지만, 제미나이를 쓰면 아주 쉽게 해결할 수 있습니다.
작업에 활용해 보세요:
색상 명암비 평가
누락된 대체 텍스트(Alt text) 식별
WCAG 규정 준수 여부 확인 제가 랜딩 페이지 디자인을 평가할 때 사용한 프롬프트는 다음과 같습니다:
Perform an accessibility audit of this UI. Check color contrast, touch target sizes, text hierarchy, alt text quality, keyboard navigation, and WCAG 2.2 compliance. Provide fixes with examples. (Attach screenshot)
이 UI에 대해 접근성 진단을 수행해줘. 색상 명암비, 터치 타겟 크기, 텍스트 계층 구조, 대체 텍스트 품질, 키보드 탐색, 그리고 WCAG 2.2 준수 여부를 확인해줘. 개선 방안과 예시도 함께 제공해줘. (스크린샷 첨부)
제미나이 3를 이용한 접근성 진단제미나이가 생성한 리포트입니다. 내용이 알차고 당장 적용 가능한 구체적인 조언들이 담겨 있네요.
제미나이를 활용하는 여러분만의 꿀팁이 있다면 댓글로 공유해 주세요.
원문 출처: https://uxplanet.org/gemini-3-for-ui-design-f3fb44a295a6?gi=fa9ec3b309a4
DEET를 구독하고 커리어 성장을 위한 작은 습관을 시작해 보세요.
