Gemini 3.1 Pro로 UI 디자인하기

프롬프트 하나로 랜딩페이지가 나온다면?

AI로 코드를 짜는 건 이제 익숙하죠. 그런데 디자인은 어떨까요?

Google이 최근 출시한 Gemini 3.1은 UI와 웹 디자인 쪽에서 결과물이 꽤 괜찮아요. "빅토리아 시대 느낌이지만 모던하게"같은 추상적인 요구사항을 넣어도 레이아웃, 색상, 애니메이션까지 그럴듯하게 만들어줘요.

직접 테스트하면서 실용적이라고 느꼈던 케이스 위주로 선별했어요.

1. 랜딩페이지를 처음부터 생성하기

픽셀 단위로 레이아웃을 잡는 대신, 원하는 분위기를 설명하면 돼요. Gemini 3.1 Pro가 추상적인 테마를 레이아웃으로 풀어줘요.

프롬프트 샘플

Build a landing page for a personal portfolio for a character
inspired by Emily Brontë's works. The vibe should be moody,
Victorian, but modern: use deep charcoals, serif fonts, and
'wind-swept' motion effects for transitions. Include a section
for 'Poetry' and 'Musings'.

설정

결과

다크 차콜 배경에 세리프 폰트, 바람에 흔들리는 듯한 트랜지션(Transition)까지. "moody, Victorian, but modern"이라는 프롬프트의 의도를 잘 반영했어요. 색상 팔레트나 타이포그래피를 일일이 지정하지 않아도 분위기 키워드만으로 방향을 잡아주는 게 인상적이에요.

2. 스케치에서 코드 프로토타입으로 변환하기

손 스케치나 와이어프레임(Wireframe)을 이미지로 첨부하면, 거기에 비주얼 스타일을 입혀서 코드로 바꿔줘요.

프롬프트와 참조 스케치

아래 스케치를 첨부하고, 1번에서 사용한 비주얼 스타일을 유지하도록 요청했어요.

I've attached the sketch of the future landing page.
Turn this sketch into a landing page for a personal portfolio
for a character inspired by Emily Brontë's works. The vibe
should be moody, Victorian, but modern: use deep charcoals,
serif fonts, and 'wind-swept' motion effects for transitions.

결과

스케치의 레이아웃 구조를 유지하면서 앞에서 정의한 비주얼 스타일을 입혀줘요. 와이어프레임 단계에서 바로 코드 프로토타입으로 넘어갈 수 있으니 초기 검증이 빨라지죠. 기획자가 "대략 이런 느낌"이라고 그린 스케치를 바로 프로토타입으로 만들 수 있다는 게 핵심이에요.

3. 인터랙티브 SVG 애니메이션 만들기

직접 테스트하면서 가장 흥미로웠던 케이스예요. 웹에서 바로 사용할 수 있는 코드 기반 SVG 애니메이션을 만들어줘요. 래스터(Raster) 이미지가 아니라 벡터(Vector)니까 해상도에 상관없이 선명하고요.

프롬프트 샘플

Generate a pure SVG code for an interactive 3D-looking credit card.
When I hover over it, the card should tilt slightly (parallax effect),
and the holographic logo in the corner should shimmer.
Keep the file size under 50kb.

결과

호버(Hover) 시 기울어지는 패럴렉스(Parallax) 효과와 홀로그래픽 로고 반짝임까지 프롬프트 그대로 나와요. 파일 크기 50KB 제한도 지켜줬어요.

4. 데이터 시각화 대시보드 프로토타이핑

JSON 형태의 목(Mock) 데이터를 제공하면 실시간 데이터 피드(Feed)를 시뮬레이션하는 대시보드를 만들어줘요.

프롬프트 샘플

Design a real-time aerospace dashboard for satellite tracking.
Use a dark theme with neon-blue accents. Create a central map
visualization (using D3.js or similar) and three sidebar widgets
for altitude, velocity, and signal strength.
Use mock JSON data to simulate the live feed.

결과

D3.js 기반 맵 시각화에 사이드바 위젯(Widget) 3개(고도, 속도, 신호 강도)까지 한 번에 생성돼요. 다크 테마에 네온 블루 강조색도 깔끔하게 적용됐어요.

5. 로직 다이어그램을 UI로 변환하기

플로차트(Flowchart)나 로직 다이어그램을 업로드하면, 해당 흐름을 따라가는 멀티스텝 폼이나 위자드(Wizard) UI를 만들어줘요.

프롬프트와 다이어그램

아래 모기지 신청 플로차트를 첨부하고, React 위자드 UI로 변환을 요청했어요.

I'm uploading a logic flow for a mortgage application.
Build a multi-step 'Wizard' UI in React that follows this exact
decision tree. Include a progress bar at the top and ensure the
'Next' button is disabled until all required fields on a page
are filled.

결과

다이어그램의 분기 로직을 따라가는 멀티스텝 위자드가 만들어져요. 상단 프로그레스 바(Progress Bar), 필수 필드 미입력 시 Next 버튼 비활성화까지 프롬프트 조건을 그대로 반영했어요.

마무리

TL;DR

• 랜딩페이지 생성: 분위기 키워드만으로 레이아웃부터 트랜지션까지 생성
• 스케치 변환: 손 스케치를 넣으면 비주얼 스타일이 적용된 코드 프로토타입으로 변환
• SVG 애니메이션: 인터랙티브한 코드 기반 SVG를 파일 크기 제한까지 지켜서 생성
• 데이터 대시보드: JSON 목 데이터로 실시간 시각화 대시보드 프로토타이핑
• 로직 변환: 플로차트를 업로드하면 멀티스텝 폼/위자드 UI로 변환

프로토타이핑 단계에서 속도를 높이고 싶다면 Canvas 모드와 함께 시도해보세요.

참고 자료

• Gemini 3 For UI Design — Gemini 3을 UI 디자인에 활용하는 가이드
• Gemini 3 for Web Design — Gemini 3을 웹 디자인에 활용하는 가이드