Google Stitch 프롬프트 작성법 - 프롬프트 한 줄 차이로 결과물이 달라집니다

반응형

 

 

 

혹시 Stitch에서 프롬프트를 입력했는데...

생각했던 것과 전혀 다른 결과가 나와서 당황하신 적 있으신가요?

 

사실 Stitch를 잘 쓰는 데는 비결이 있습니다.

바로 "어떻게 말하느냐" 입니다.

 

오늘은 초보자도 바로 따라 할 수 있는 Stitch 프롬프트 작성법을 알려드릴게요!

 

 

Stitch를 이렇게 생각해보세요

 

Stitch를 잘 쓰려면 먼저 이 한 문장을 기억하세요.

 

"Stitch는 말을 아주 문자 그대로 따르는 주니어 디자이너다"

 

즉, 애매하게 말하면 애매한 결과가 나옵니다.

구체적으로 말할수록 원하는 결과에 가까워집니다.

 

창의성보다 명확성이 항상 앞선다는 걸 꼭 기억해두세요!

 

 

황금 규칙 - 한 번에 한 가지만 바꾸기

 

Stitch를 쓸 때 가장 많이 하는 실수가 바로 이것입니다.

(X) 잘못된 방법:
"헤더에 검색창 추가하고, 버튼 색상 파랑으로 바꾸고,
폰트 세리프로 변경하고, 카드에 그림자 효과도 추가해줘"
 

이렇게 여러 가지를 한꺼번에 요청하면?

Stitch가 전체 화면을 처음부터 다시 만들어버리면서

이미 잘 만들어진 부분까지 다 무너집니다

 

(O) 올바른 방법:
프롬프트 1: "헤더에 검색창을 추가해줘"
프롬프트 2: "로그인 버튼 색상을 파란색으로 바꿔줘"
프롬프트 3: "제목 폰트를 세리프 폰트로 변경해줘"
 

이렇게 하나씩 순서대로 요청하는 게 훨씬 안정적이고 빠릅니다!

 

 

기본 프롬프트 구조 - "줌아웃 → 줌인" 방식

 

전문가들이 가장 많이 쓰는 방식입니다.

처음엔 전체 맥락을 설명하고(줌아웃),

그 다음 원하는 화면 세부 내용을 설명합니다(줌인).

[앱 전체 설명 + 대상 사용자]
[이 화면의 목적 + 레이아웃 구조]
[디자인 스타일 조건]
[기대하는 결과]
 

 

[실제 예시]

"하루 지출을 추적하는 개인 재무 앱의 모바일 홈 화면을 디자인해줘.
대상: 이동 중에 자주 지출을 확인하는 20~30대 직장인.

화면 구성: 오늘 총 지출 금액, 카테고리별 원형 차트,
최근 거래 내역 리스트를 위에서 아래로 배치.

스타일: 다크 테마, 녹색 강조색(#22C55E), 둥근 카드 UI,
깔끔한 산세리프 폰트.

목표: 한눈에 지출 현황을 파악할 수 있는 모던한 금융 앱 느낌."
 

처음엔 어색하게 느껴질 수 있지만,

이 구조에 익숙해지면 결과물 품질이 확 달라집니다!

 

 

분위기(바이브) 설정하기

 

Stitch는 형용사에 아주 민감하게 반응합니다.

분위기를 잘 설명할수록 전체 색상, 폰트, 레이아웃 스타일이 달라져요.

"활기차고 격려가 되는 피트니스 앱"
→ 에너지 넘치는 색상, 굵은 폰트, 역동적인 구성

"미니멀하고 집중력을 높이는 명상 앱"
→ 차분한 색조, 여백 강조, 부드러운 타이포그래피
 

그리고 이 방법도 정말 효과적입니다.

잘 알려진 앱을 직접 레퍼런스로 언급하기!

"Stripe처럼 프리미엄하고 미니멀한 스타일로"
"애플 헬스앱처럼 깔끔하고 차분한 느낌으로"
"Notion처럼 심플하고 개발자 친화적인 다크 테마로"
 

 

 

수정할 때는 대상을 정확히 짚어주기

 

뭔가 고칠 때 그냥 "바꿔줘" 라고 하면 Stitch가 헷갈립니다.

어디에 있는 무엇을 바꾸는지 정확히 알려줘야 합니다.

(X) "배경색 바꿔줘"
(O) "랜딩 페이지 히어로 섹션의 배경색을 다크 네이비(#0F172A)로 변경해줘"

(X) "이미지 바꿔줘"
(O) "팀 페이지에서 'Dr. Carter' 이미지의 가운 색상을 검정으로 바꿔줘"
 

 

 

크레딧 절약 꿀팁 - Direct Edit 활용하기

 

Stitch는 사용할 수 있는 크레딧(생성 횟수)이 정해져 있어요.

메인 프롬프트창에서 수정을 요청하면 크레딧이 소모됩니다.

 

그런데 이 방법을 쓰면 크레딧을 하나도 쓰지 않고 수정할 수 있습니다!

 

수정하고 싶은 영역을 먼저 클릭 → 그 상태에서 수정 내용 입력

 

이게 바로 Direct Edit 기능입니다.

전체를 다시 만드는 게 아니라 해당 부분만 고쳐주기 때문에

크레딧 소모가 없고, 결과도 훨씬 안정적입니다!

 

 

검증된 프롬프트 예시 모음

 

바로 복사해서 써볼 수 있는 프롬프트입니다.

 

- 모바일 커피 주문 앱 홈 화면

"간단하고 미니멀한 커피 주문 앱의 모바일 홈 화면을 디자인해줘.
다크 테마, 둥근 카드, 깔끔하고 모던한 폰트를 사용해서
따뜻하고 포근한 느낌을 줘."
 
 

 

- 웹 관리자 대시보드

"창고 관리 직원용 데스크탑 대시보드를 만들어줘.
명확성과 기능성 최우선, 소프트한 파란색 계열 색상,
강인한 타이포그래피 사용."
 

 

- 로그인 페이지

"중앙 정렬된 폼이 있는 깔끔하고 신뢰감 있는 로그인 페이지.
배경 화이트, 폼 카드 소프트 그레이, 버튼과 링크는 딥 블루.
모서리는 부드럽게 둥글고, 카드에 은은한 그림자 추가."
 

 

 

이것만큼은 피하세요!

 

마지막으로 초보자들이 자주 하는 실수를 정리해 드릴게요.

 

1) 너무 긴 프롬프트 (5000자 이상)

→ Stitch가 일부 컴포넌트를 빠뜨립니다. 짧게 시작하세요!

 

2) 여러 변경 사항을 한 프롬프트에 묶기

→ 레이아웃 전체가 재생성되면서 기존 작업이 날아갑니다.

 

3) 잘 된 화면 스크린샷 안 찍어두기

→ 예상치 못하게 초기화될 수 있습니다. 좋은 결과 나오면 바로 저장!

 

4) 처음부터 Thinking 모드 사용

→ Thinking 모드는 크레딧을 더 많이 씁니다.

처음엔 Ideate → Flash → 완성 단계에서 Thinking 순서로!

 

 

마무리하며...

 

Stitch는 잘 쓸수록 진짜 강력한 도구입니다.

 

처음엔 프롬프트 쓰는 게 어색하고 결과가 마음에 안 들 수도 있어요.

하지만 오늘 알려드린 방법들을 하나씩 적용해보면

금방 원하는 결과를 뚝딱 만들어낼 수 있을 거예요!

 

가장 중요한 것 딱 하나만 기억하세요.

 

"한 번에 한 가지만, 구체적으로!"

 

지금 바로 [stitch.withgoogle.com] 에서 무료로 도전해보세요.

 

Stitch - Design with AI

Stitch generates UIs for mobile and web applications, making design ideation fast and easy.

stitch.withgoogle.com

 

 

 

 

#GoogleStitch #구글스티치 #프롬프트작성법 #바이브디자인 #VibeDesign #AI디자인툴 #UI디자인 #무료디자인 #앱디자인 #프롬프트팁 #초보자가이드 #Gemini #구글AI

 

 

 

반응형
TAGS.

Comments