AI 디자인의 규칙이 바뀌었다?! Figma 위협하는 구글 Stitch의 업데이트 완벽 해부

📌 스티치 업데이트 분석 및 활용법 (00:00)

🔹 스티치 업데이트에 대한 시장 반응 및 실제 사용 후기

피그마 주가 폭락 헤드라인과 달리, 스티치 업데이트는 AI 시대의 디자인 방식 자체를 변화시킬 잠재력을 가짐. 디자인 시스템 자동화가 핵심이며, 기획자, 디자이너, 개발자가 협업해야 했던 작업을 혼자서도 가능하게 함.

🔹 스티치 활용을 위한 5가지 포인트

• 스티치의 디자인 퍼포먼스 체크
• 리디자인 수준의 일괄 수정 및 픽셀 단위 세밀한 수정
• 새로운 기능 활용: 사용자 예측, 인터랙티브 프로토타이핑 제작
• 일관된 디자인 시스템 문서 생성 및 적용
• 스티치 시안을 클로드 코드, MCP와 연결하여 웹사이트 구현

스티치 활용법에 대한 확실한 이해를 제공하는 것이 목표.

📌 스티치 디자인 퍼포먼스 체크 (01:28)

🔹 스티치 UI 변화 및 제미나이 3.1 Pro 모델 활용

스티치 접속 시 배경 도트 패턴, 커서 따라오는 효과 등 세련된 UI로 변경됨. 제미나이 3.1 Pro 모델을 사용하여 디자인 퀄리티를 체크.

🔹 앱 디자인 생성 및 디자인 시스템 구축

• M모드에서 제미나이 3.1 Pro 모델 선택
• 리디자인 모드, 아이디에이트 모드, 유저 디자인 시스템 기능, 스타트 라이브 모드 등 다양한 기능 존재 (추후 설명 예정)
• 습관 관리 앱 생성 프롬프트 입력

🔹 디자인 시스템 및 앱 스크린 생성 결과

• 프라이머리/세컨더리 컬러, 타이포그래피, UI 컴포넌트 등 체계적인 디자인 시스템 구축
• 메인 화면, 습관 추가 화면, 통계 화면 등 3개의 앱 디자인 생성
• 일관된 톤앤매너, 깔끔한 레이아웃, 적절한 포인트 컬러 적용

🔹 제미나이 3.1 Pro 모델과 스티치 비교

• 순수 제미나이 3.1 Pro 모델은 추가 컨텍스트 필요
• 스티치는 UI 생성에 최적화된 시스템 프롬프트 및 환경 제공
• 피그마 퍼스트 드래프트 기능과 비교 시 스티치가 더 나은 결과

🔹 정교한 싱글 프롬프트 활용

• 시네마틱 랜딩 페이지 빌더 프롬프트 활용 (SNS에서 화제)
• 고급 가구 브랜드 웹사이트 생성 지시 추가

🔹 웹사이트 빌더 프롬프트 작동 방식

• 브랜드 이름, 설립 목적, 디자인 프리셋, 핵심 가치, CTA 버튼 등 핵심 정보 정의 요청
• 다크 모드 기반 럭셔리 컬러 배합 및 폰트 적용
• 깔끔하고 고급스러운 웹사이트 완성

🔹 베리에이션 디자인 및 스마트팜 웹페이지 생성

• 타이포그래피, 컬러 등 일관된 톤앤매너 유지
• 스마트팜 관련 웹페이지 생성 결과 깔끔함
• 일부 컴포넌트 대비 아쉬운 부분 존재 (추후 수정 가능)

스티치는 단순 프롬프트로도 높은 퀄리티 결과물을 생성하며, 정교한 프롬프트 사용 시 웹사이트 완성도 심도 있게 체크 가능.

📌 스티치 업데이트 기능 활용 및 디자인 수정 (06:21)

🔹 프롬프트 기반 텍스트 및 UI 요소 수정

수정 필요한 화면 선택 후 프롬프트로 요청. 영문 텍스트를 한글로 수정.

🔹 수정 결과 및 개선점

• 기존 시안 유지, 수정된 시안 별도 생성
• 영문 텍스트 한글로 변경 완료
• 폰트 변경, 어색한 카피라이팅, 좁은 행간, 불균형한 마진 등 세부적인 문제점 발생

🔹 상세 수정 기능 활용

• 모디파이 메뉴의 수정 기능 활용
• 수정 가능 영역 박스로 표시
• 텍스트 직접 클릭 또는 텍스트 수정 메뉴 활용

🔹 변형 기능 활용

• 제너레이트 메뉴의 변형 기능 활용
• 시안 수, 변형 범위, 변형 요소 등 디테일 설정 후 일괄 수정 가능

🔹 리디자인 기능 활용

• 원하는 레퍼런스 이미지 업로드 후 리디자인 요청
• 모델 선택에서 리디자인 선택 후 전송

🔹 리디자인 기능 결과

• 레퍼런스 특징 반영된 형태로 기존 디자인 리디자인
• 아직은 아쉬운 퀄리티 (간격, 레이아웃 틀어짐, 과한 컬러, 텍스트 깨짐 등)
• 컨셉 시안 빠르게 확인하는 용도로 활용 권장

🔹 세부적인 UI 컴포넌트 및 픽셀 단위 수정

• 습관 리스트 카드 형태를 트리 구조로 변경 요청
• 각 습관 리스트에 드롭다운 버튼 생성, 하위 체크리스트 추가
• 좌우 마진 불균형 수정 요청

🔹 행간 조절 및 픽셀 단위 수정

• 텍스트 행간(라인하이트)을 폰트 크기 대비 170%로 설정 요청
• 모든 텍스트 행간 넓어지면서 가독성 향상

제미나이 3.1 Pro 모델은 예상보다 좋은 생성 및 수정 능력 보여줌. 자연어로 간편하게 디자인 요소 다듬기 가능.

🔹 반응형 디자인 기능

• 모바일, 태블릿, 데스크탑 등 디바이스별 사이즈 조정 가능
• 마우스 드래그로 화면 크기 조절 시 레이아웃 유연하게 변경

📌 스티치 신규 업데이트 기능 (12:06)

🔹 예측 히트맵 기능

• 제너레이트 메뉴의 예측 히트맵 실행
• 사용자 클릭 예상 영역 시각적으로 표시 (붉은색: 클릭 빈도 높음)
• 아직 완벽하게 정확하진 않지만 참고용으로 활용 가능

🔹 프로토타입 기능

• 여러 디자인 시안 선택 후 인스턴트 프로토타입 클릭
• 실제로 작동하는 앱처럼 제작 가능 (버튼 하나로)
• 클릭 가능 영역 점선 박스 표시, 드롭다운 버튼 UI, 상태값 변경 등 인터랙션 구현
• 코딩 완료된 결과물과 유사한 수준

🔹 프로토타입 기능 활용 예시

• 세습관 추가 버튼 클릭 시 습관 추가 화면 이동
• 수정된 카피 및 서브 문구 확인 가능
• 뒤로 가기 버튼 클릭 시 이전 화면 복귀
• 목표 입력창 텍스트 작성 가능
• 통계 탭 클릭 시 통계 화면 전환
• 스마트팜 웹사이트 프로토타입 결과 더 좋음 (텍스트 색상 변경, 버튼 크기 변경, 카드 틸팅, 애니메이션 등)
• 패럴렉스 스크롤 애니메이션 구현

버튼 하나로 인터랙션 자동 연결, 퀄리티 준수.

📌 디자인 시스템 자동 생성의 중요성 (15:09)

🔹 디자인 시스템의 필요성

• 앱의 일관성 유지, 사용자 경험 및 브랜드 경험 향상
• 디자인 시스템은 제품의 헌법과 같은 역할 (색상, 크기, 폰트, 여백 등 기준 정의)
• 화면 개수가 많아도 전체가 하나처럼 보이게 함
• AI 기반 코딩 시 일관된 디자인 및 토큰 절약 가능

🔹 디자인 시스템 구축의 어려움

• 시니어 디자이너, 개발자 협업 필요 (몇 주 ~ 몇 달 소요)
• 규모 있는 회사만 제대로 구축 가능
• 스티치는 디자인 시스템 자동 생성 기능 제공 (색상, 버튼 스타일, 텍스트 크기 등 일관되게 설정)
• 전문 팀 없이도 제대로 된 기반 구축 가능

스티치는 디자인 시스템 구축 문턱을 낮춤.

🔹 스티치 디자인 시스템 생성 기능 활용법

• 기존 디자인 큰 구조 유지, 시각적 디자인(톤앤매너) 순식간에 변경 가능
• 규칙을 문서로 추출하여 외부 PPT, 코딩 작업 등에 적용 가능
• 고급 가구 브랜드 웹사이트 디자인 시스템 활용 과정 살펴보기

🔹 디자인 시스템 수동 설정 및 라이브 모드 활용

• 테마 모드, 컬러 팔레트, 폰트 스타일, 컴포넌트 모서리 공유(레디어스) 값 등 세밀하게 조정 가능
• 음성 기반 라이브 모드 기능 활용하여 디자인 시스템 수정

🔹 라이브 모드 활용 예시

• 자연 친화적인 컨셉의 고급 가구 브랜드 컨셉으로 수정 요청
• 다크 모드 -> 따뜻하고 밝은 색상으로 변경 요청
• 프라이머리/세컨더리 컬러, 헤딩 폰트(세리프 서체) 등 변경
• 새로운 디자인 시스템 웹사이트 화면에 전체 적용

🔹 기존 디자인 시안에 디자인 시스템 적용

• 베이스 시안 선택 후 디자인 시스템 설정 옵션에서 원하는 디자인 시스템 선택
• 웹사이트 기존 구성 유지, 컬러, 폰트, 분위기 완벽하게 변경

🔹 디자인 시스템 문서 추출 및 활용

• 디자인 시스템 설정창에서 디자인.md 탭 열기
• 마크다운 형식으로 정리된 가이드라인 문서 (컬러 시스템, 타이포그래피 규칙, 레이어링 원칙, UI 컴포넌트 스펙 등)
• 마크다운 텍스트 복사 후 재미나이에서 생성한 AI 교육 시장 분석 보고서 프레젠테이션 슬라이드에 적용 요청

🔹 디자인 시스템 적용 결과

• 기존 어두운 슬라이드가 자연 친화적이고 따뜻한 컨셉으로 변환
• 지정된 컬러 팔레트, 폰트 슬라이드 전반에 일관되게 적용
• 보고서 핵심 내용 훼손 없이 유지

디자인 시스템 문서를 활용하여 웹사이트, 프레젠테이션 등 다양한 매체에서 일관된 브랜드 아이덴티티 확립 가능.

🔹 PRD 문서 생성 및 활용

• 아이디에이트 모드 선택 후 해결하고 싶은 문제 작성
• 디자인 방향 추천 후 선택
• 프로덕트 오버뷰, 스크린 구성, 키플로우, 컬러 팔레트, 타이포그래피, 디자인 토큰 등 상세 정보 포함된 PRD 문서 생성
• PRD 기반으로 디자인 생성 요청 시 웹사이트 디자인 완성
• PRD 문서는 아이디에이트 모드 외 다른 모드에서도 활용 가능

📌 MCP 연결 및 코드 구현 (23:55)

🔹 MCP (AI-외부 툴 연결 프로토콜) 활용

• 스티치를 클로드 코드와 연결하여 디자인에서 실제 동작하는 코드 추출
• MCP 연결 및 스티치 시안 코드로 구현, 쉐이더 효과 적용

🔹 MCP 설정 및 API 키 발급

• 원하는 시안 선택 후 내보내기 -> MCP 항목 선택
• API 키 발급 (유출 주의)
• 클라이언트 (클로드 코드 데스크탑 또는 VS 코드) 선택

🔹 클로드 코드 데스크탑 설정

• 로컬 폴더 지정
• 스티치 MCP 서버 연결 요청
• 클로드 코드 재시작

🔹 코드 구현 및 웹사이트 미리보기

• 스티치에서 프롬프트 복사 후 클로드 코드에 붙여넣기
• 로컬 폴더에 웹사이트 스크린샷 이미지, HTML 코드 파일 생성
• 클로드 코드에서 웹사이트 미리보기 요청

🔹 쉐이더 효과 추가

• 20 퍼스트 다브 (UI 컴포넌트 모음 사이트)에서 쉐이더 효과 선택
• 클로드 코드에서 히어로 섹션 지정 후 쉐이더 코드 구현 요청
• 미세 조정 및 모달 창 이벤트 구현

🔹 최종 결과 확인

• 로컬 호스트 환경에서 웹사이트 렌더링 확인
• 히어로 섹션 백그라운드에 쉐이더 효과 적용
• 호버 상태 트랜지션 애니메이션 정상 동작
• CTA 버튼 클릭 시 모달 창 부드럽게 나타남
• 각 섹션 레이아웃 깨짐 없이 깔끔하게 구현

MCP 연결을 통해 스티치 디자인을 실제 웹사이트로 구현하고 쉐이더 효과까지 적용 가능.