Lecture
02
Google Mixboard · Stitch · AI Studio
Google Mixboard · Stitch · AI Studio
기본 사용과 활용
아이디어 → UI 시안 → 랜딩 빌딩 실습
image Mixboard
web Stitch
auto_awesome AI Studio
Slide
02
오늘 강의 한 줄 요약
"3가지 도구로 기획→디자인→빌딩 흐름을 실습합니다."
Slide
03
강의 목표
1. Mixboard
콘셉트 보드 제작
바로가기 arrow_outward
2. Stitch
랜딩/상세 UI 시안 제작
(웹·모바일)
3. AI Studio
랜딩 페이지 빌딩
나노바나나 프로 사용법
Slide
04
대상
- check_circle 기획자·마케터·1인 사업자·초급 디자이너/개발자
- check_circle 아이디어를 빠르게 시각화하고 UI 초안을 만들고 싶은 분
Slide
05
준비물
- Google 계정
- 노트북
- 실습 소재: 제작 하고 싶은 랜딩 페이지 주제 1개.
Slide
06
전체 진행 (권장 3시간)
10분
오리엔테이션
45분
Mixboard
60분
Stitch
50분
AI Studio
Slide
07
오리엔테이션 (10분)
오늘의 결과물 정의
- 콘셉트 보드 1개
- UI 시안 2종 (모바일/웹)
- 빌딩된 랜딩 페이지 초안 1개
실습 주제/소재 확정 및 작업 순서 공유
Slide
08
image
Mixboard 파트 소개 (45분)
explore
역할
AI 기반 무드보드(콘셉트 보드) 도구로,
텍스트 프롬프트 한 줄로 이미지·색상·텍스트를 자동 생성해
아이디어를 시각화
flag
목표
브랜드/캠페인 콘셉트 보드 1개 완성
Slide
09
Mixboard 핵심 기능
-
1
텍스트로 콘셉트 생성
키워드 → 무드/소재/스타일 -
2
이미지 생성/편집, 레퍼런스 가져오기
-
3
보드 구성
카테고리, 비교 보드, A/B 콘셉트
keyboard 단축키
Ctrl(Cmd)
+ 휠
보드 확대/축소
Space
+ 드래그
화면 이동
Shift
+ 드래그/클릭
다중 선택
Slide
11
web
Stitch 파트 소개 (60분)
edit_square
역할
AI 기반 UI 디자인 도구로, 텍스트 설명이나 스케치만으로
웹/앱 UI를 자동 생성하고 프론트엔드 코드를
출력
devices
목표
랜딩/상세/예약/문의 중
1개 화면을 웹+모바일로 제작
Slide
12
Stitch 핵심 기능
-
1
화면 구성 작성
텍스트 프롬프트로 UI 생성 -
2
레이아웃 변형
2~3개안 비교, 반응형 대응 -
3
내보내기/공유
디자인 툴/코드 연결
keyboard 단축키
Ctrl(Cmd)
+ 휠
확대/축소
Space
+ 드래그
화면 이동
Shift
+ 드래그/클릭
다중 선택
Slide
13
Stitch 실습 2 (UI 만들기)
Slide
14
auto_awesome
AI Studio 파트 소개 (50분)
build
역할
Google의 최신 AI 모델(Gemini)을 테스트하고 프로토타입을 만드는 무료 플랫폼
rocket_launch
목표
Stitch 시안을 바탕으로 랜딩 빌딩
+ 나노바나나 프로 사용법
Slide
15
AI Studio 핵심 내용
1. 랜딩 페이지 빌딩
Stitch에서 제작한 구성 반영 및 초안 구현
2. 나노바나나프로 기본 사용법
3. API 키 개념과 적용 포인트
4. API 키 등록 (실습 포함)
Slide
17
assignment_add
과제 (적용 미션)
1. 동일 콘셉트로 다른 타깃 2개 버전 만들기
2. UI 시안 2종 기반으로...
- 랜딩페이지 + 쇼핑몰 상세페이지 (PC/모바일) 제작
- FAQ/응대 스크립트까지 완성