책에 포함된 노트Google Stitch 사용법: 프롬프트부터 프로토타입·코드 연결까지

5. 좋은 결과를 만드는 프롬프트 작성법

2026-04-18Views 72약 11분

좋은 결과를 만드는 프롬프트 작성법

Stitch를 잘 쓰는 사람과 그냥 한 번 눌러 보는 사람의 차이는 생각보다 단순합니다. 바로 프롬프트를 어떻게 쓰느냐입니다. 같은 도구, 같은 시간, 같은 아이디어를 들고 시작해도 프롬프트가 흐리면 결과도 흐립니다. 반대로 목적과 화면 구성이 또렷하면, Stitch는 꽤 그럴듯한 첫 시안을 아주 빠르게 내놓습니다.

Stitch는 자연어와 이미지 입력을 바탕으로 UI를 만들고, 그 결과를 Figma나 프런트엔드 코드로 이어갈 수 있습니다.¹ 그래서 프롬프트는 단순한 요청문이 아니라, 디자인 방향을 정하는 짧은 설계서에 가깝습니다. 이 장에서는 그 설계서를 어떻게 써야 하는지 배웁니다.

좋은 결과를 만드는 프롬프트 작성법

왜 Stitch 실력의 대부분은 프롬프트 실력일까

Stitch는 마술사가 아닙니다. 오히려 아주 성실한 신입 디자이너에 가깝습니다. 당신이 말한 것은 열심히 반영하지만, 말하지 않은 것은 자기 나름대로 추정합니다. 문제는 이 "추정"이 때로는 꽤 엉뚱하다는 데 있습니다.

예를 들어 "깔끔한 대시보드 만들어줘"라고 하면, 대시보드는 만들어 줄 수 있습니다. 하지만 누가 쓰는지, 어떤 정보를 먼저 봐야 하는지, 카드가 중요한지 표가 중요한지, 어두운 분위기인지 밝은 분위기인지 모르니 무난하고 평범한 화면이 나올 가능성이 큽니다. 반대로 "초보 투자자가 오늘 자산 흐름을 한눈에 보는 모바일 대시보드"라고 시작하면, 화면의 우선순위가 갑자기 또렷해집니다.

공식 프롬프트 가이드도 복잡한 앱일수록 처음에는 넓게 시작하고, 이후에는 화면별로 구체화하라고 권합니다. 또한 모호한 표현보다 구체적인 UI 용어, 분위기를 드러내는 형용사, 한 번에 한두 가지 수정이 더 좋은 결과를 만든다고 설명합니다.²

한마디로 정리하면 이렇습니다. Stitch는 많이 아는 도구가 아니라, 잘 설명해 주면 잘 움직이는 도구입니다.

좋은 프롬프트의 기본 원리

좋은 프롬프트는 길어서 좋은 것이 아니라, 필요한 정보가 빠짐없이 들어 있어서 좋습니다. 특히 아래 다섯 가지 원리를 기억해 두면 결과가 눈에 띄게 안정됩니다.

처음에는 넓게 시작하고, 다음부터는 화면 단위로 좁혀 갑니다.²
한 번에 하나의 큰 변화만 요청합니다. 레이아웃, 색상, 컴포넌트 추가를 한꺼번에 섞으면 결과가 흔들리기 쉽습니다.²
"버튼", "메뉴" 같은 막연한 말보다 "primary CTA button", "sticky navigation bar", "card grid"처럼 UI 용어를 씁니다.²³
분위기는 형용사로 잡아 줍니다. 예를 들어 minimal, playful, elegant, professional 같은 단어가 색상, 타이포그래피, 여백 감각에 영향을 줍니다.²
실제 문구, 숫자, 상태 정보를 넣으면 결과가 훨씬 현실적으로 나옵니다. 예를 들어 active tab, placeholder text, 샘플 수치 같은 정보가 좋습니다.³

이 다섯 가지는 마치 요리의 기본 간 맞추기와 비슷합니다. 재료가 비슷해도 간이 맞으면 먹을 만해지고, 간이 틀리면 괜히 모든 게 어색해 보입니다.

가장 많이 쓰는 5단 프롬프트 구조

좋은 결과를 만드는 가장 쉬운 방법은 프롬프트를 일정한 구조로 쓰는 것입니다. 이 책에서는 다음의 5단 구조를 기본 공식으로 사용하겠습니다.

1. 목적

먼저 이 화면이 무슨 일을 하는 화면인지를 한 문장으로 못 박습니다. 홈 화면인지, 로그인 화면인지, 상품 상세 화면인지, 관리자 대시보드인지가 가장 먼저 나와야 합니다.

예를 들어 "A mobile onboarding screen"과 "A mobile banking dashboard"는 완전히 다른 우선순위를 가집니다. 전자는 설득과 안내가 핵심이고, 후자는 정보 요약과 빠른 탐색이 핵심입니다.

2. 사용자

다음은 누가 이 화면을 쓰는지를 적습니다. 사용자 정보가 들어가면 화면의 밀도와 말투, 카드의 크기, 버튼의 강조 방식이 달라집니다.

초보 사용자를 위한 화면이라면 친절한 설명, 큰 버튼, 적은 선택지가 어울립니다. 반대로 숙련 사용자를 위한 도구라면 더 많은 정보와 압축된 레이아웃이 자연스럽습니다.

3. 화면 구성

이제 화면에 무엇이 들어가야 하는지 씁니다. 여기서 중요한 것은 "대충 이것저것"이 아니라 배치와 역할이 보이게 적는 것입니다.

예를 들어 "차트 넣기"보다 "상단 요약 카드 아래에 주간 활동을 보여주는 막대 차트"가 훨씬 강합니다. 헤더, 카드, 차트, 리스트, 탭 바, 사이드바처럼 잘 알려진 UI 단어를 쓰면 Stitch가 구조를 더 잘 잡습니다.²³

4. 스타일

화면의 분위기를 정하는 단계입니다. 라이트/다크 테마, 주요 색상, 둥근 모서리 여부, 미니멀한지 화려한지, 차분한지 에너지 있는지를 말해 줍니다. 공식 가이드에서도 형용사가 색상, 글꼴, 이미지 선택에 영향을 준다고 설명합니다.²

스타일은 "예쁘게"라고 쓰는 순간 힘을 잃습니다. "dark, professional, high-contrast, subtle blue accents"처럼 조금 더 구체적으로 말해야 합니다.

5. 제약 조건

마지막은 의외로 가장 중요합니다. 바로 하지 말아야 할 것과 지켜야 할 것입니다.

예를 들어 "avoid clutter", "use only two accent colors", "keep the layout mobile-first", "do not use large hero images" 같은 문장이 여기에 들어갑니다. 좋은 제약은 창의력을 막는 것이 아니라, 결과를 덜 흔들리게 만듭니다.

한 줄 아이디어를 설계형 프롬프트로 바꾸기

이제 실제로 바꿔 봅시다.

짧고 약한 프롬프트는 이런 식입니다.

Make a fitness app screen.

틀린 말은 아닙니다. 하지만 이 문장에는 목적도, 사용자도, 정보 우선순위도, 스타일도 거의 없습니다. 그래서 결과가 무난한 대신 기억에 남지 않을 가능성이 큽니다.

같은 아이디어를 5단 구조로 바꾸면 이렇게 됩니다.

Design a mobile home screen for a fitness tracking app for beginners who want to build a daily exercise habit. Include a top greeting with profile avatar, a large daily progress ring showing steps completed, three summary cards for calories, active minutes, and heart rate, a weekly activity bar chart, and a bottom tab bar with Home, Workouts, Nutrition, and Profile. Use a bright and encouraging style with clean spacing, rounded cards, and vibrant green accents. Keep the layout simple, easy to scan, and not too dense.²³

이 프롬프트가 더 좋은 이유는 분명합니다. 첫째, 홈 화면이라는 목적이 있습니다. 둘째, 초보 사용자라는 맥락이 있습니다. 셋째, 어떤 컴포넌트가 어디쯤 필요한지 보입니다. 넷째, 분위기가 있습니다. 다섯째, 너무 빽빽하지 않게 하라는 제약이 있습니다.

좋은 프롬프트는 AI에게 "뭘 만들지"만 말하지 않습니다. 왜 그렇게 보여야 하는지까지 슬쩍 알려 줍니다.

처음 프롬프트는 넓게, 수정 프롬프트는 좁게

처음부터 모든 것을 완벽하게 쓰려 하면 오히려 프롬프트가 비대해집니다. 공식 가이드가 권하는 방식은 더 현실적입니다. 먼저 넓은 개념이나 핵심 기능으로 시작하고, 그다음 화면별로 정교하게 다듬는 것입니다.²

예를 들어 처음에는 이렇게 시작할 수 있습니다.

A web app for freelance designers to manage clients, proposals, invoices, and project timelines. Minimal and professional.

이렇게 큰 방향을 잡은 뒤, 다음부터는 화면 단위로 들어갑니다.

Design the dashboard screen. Show overdue invoices first, then active projects, then a compact timeline view.

그리고 다시 한 번 더 좁힙니다.

On the dashboard, make the overdue invoices card more prominent with a warning accent color. Keep the rest of the layout unchanged.

이 방식이 좋은 이유는 간단합니다. Stitch는 큰 그림도 볼 수 있지만, 정밀한 수정은 좁은 범위에서 더 잘합니다. 넓게 시작해 방향을 잡고, 좁게 수정해 품질을 올리는 것이 가장 덜 피곤한 루트입니다.

수정은 "재생성"이 아니라 "수술"처럼 해야 한다

많은 사람이 결과가 마음에 안 들면 한 프롬프트 안에 모든 불만을 몰아서 씁니다. 예를 들면 이런 식입니다.

Make it cleaner, move the chart up, use blue, add icons, reduce spacing, and improve the header.

이 문장은 속은 시원하지만 결과는 잘 안 나옵니다. 이유는 너무 많은 변화가 섞여 있기 때문입니다. 공식 가이드도 한 번에 한두 가지 수정에 집중하라고 말합니다.²

수정 프롬프트는 가능하면 다음 순서를 따르세요.

첫째, 대상을 지정합니다. 어느 화면인지, 어느 요소인지 말합니다.

둘째, 무엇을 바꿀지 말합니다.

셋째, 어떻게 바꿀지 말합니다.

넷째, 가능하면 나머지는 유지하라고 적습니다.

예를 들면 이런 식입니다.

On the home screen, add a search bar to the header.²

Change the primary call-to-action button on the login screen to be larger and use the brand's primary blue color.²

Keep the current layout. Replace the bar chart in the portfolio section with a circular pie chart.

Only modify the bottom navigation. Add icons for Home, Explore, Saved, and Profile.

이런 문장은 Stitch에게 "대수술 말고 여기만 손봐"라고 말해 주는 효과가 있습니다.

좋은 프롬프트는 화면보다 사용자 행동을 먼저 본다

프롬프트를 쓸 때 자꾸 카드, 버튼, 차트만 떠오른다면 반은 맞고 반은 아쉽습니다. 더 좋은 프롬프트는 사용자가 이 화면에서 무슨 행동을 해야 하는지를 먼저 생각합니다.

예를 들어 금융 앱 홈 화면의 진짜 목적은 "멋진 카드 배치"가 아닙니다. 사용자가 잔액을 빨리 확인하고, 최근 거래를 보고, 송금을 쉽게 시작하는 것입니다. 이 행동이 보이면 컴포넌트도 자연스럽게 정리됩니다.

그래서 프롬프트를 쓰기 전에 스스로에게 이렇게 물어보면 좋습니다.

사용자가 이 화면에 들어오자마자 가장 먼저 봐야 하는 것은 무엇인가?
이 화면에서 꼭 해야 할 행동은 무엇인가?
한 번에 너무 많은 선택지를 주고 있지는 않은가?
시선 흐름이 위에서 아래로 자연스럽게 이어지는가?

이 질문을 거친 프롬프트는 단순히 보기 좋은 시안이 아니라, 쓸모 있는 시안이 됩니다.

스타일 설명은 추상어보다 시각어가 강하다

"세련되게", "고급스럽게", "예쁘게"는 인간끼리는 통할지 몰라도, AI에게는 꽤 막연한 표현입니다. 대신 눈앞에 장면이 떠오르는 단어를 쓰는 편이 낫습니다.

예를 들어 "고급스럽게" 대신 "elegant serif headings, warm neutral colors, soft spacing, premium editorial feel"처럼 적으면 더 분명합니다. "미래적으로" 대신 "dark background, neon cyan accents, glassy panels, high contrast"처럼 적으면 그림이 잡힙니다.

또한 스타일은 색만 말하는 것이 아닙니다. 타이포그래피, 모서리 둥글기, 여백, 아이콘 분위기, 이미지 톤까지 함께 묶여 있습니다. 공식 가이드 역시 색상, 글꼴, 버튼 모서리, 입력 필드 테두리 같은 세부 스타일을 직접 지시할 수 있다고 설명합니다.²

즉, 스타일 문장은 장식이 아니라 시각적 규칙입니다.

제약 조건이 결과를 더 좋게 만든다

처음 Stitch를 쓰면 괜히 많은 요구를 넣고 싶어집니다. 그런데 정말 좋은 프롬프트는 원하는 것만큼이나 원하지 않는 것도 분명합니다.

예를 들어 이런 제약은 매우 유용합니다.

use only one primary accent color
avoid overly decorative illustrations
keep text easy to read for first-time users
do not make the screen feel crowded
prioritize content above the fold

이런 문장이 있으면 Stitch는 덜 과장하고, 덜 산만하게, 더 목적에 맞는 결과를 내놓습니다. 제약 조건은 브레이크가 아니라 핸들입니다.

실제 문구와 상태를 넣으면 화면이 살아난다

프롬프트에 "제목", "버튼", "차트"만 쓰면 결과가 골격 수준에 머무르기 쉽습니다. 반면 실제 문구와 상태를 넣으면 화면이 갑자기 살아납니다.

예를 들어 다음 두 문장을 비교해 봅시다.

Add a search bar.

Add a search bar with the placeholder text "Search workouts, trainers, or plans".³

둘째 문장이 훨씬 낫습니다. 검색창이 어떤 역할을 하는지 즉시 보이기 때문입니다. 마찬가지로 "active Home tab", "toggle switch turned on", "show 8,432 of 10,000 steps"처럼 상태와 샘플 데이터를 적어 주면 Stitch가 더 현실적인 화면을 만들 가능성이 높습니다.³

특히 대시보드, 금융, 분석, 커머스 화면에서는 숫자와 실제 라벨이 큰 힘을 발휘합니다. 그래프가 단순 장식이 아니라 정보처럼 보이기 시작하기 때문입니다.

자주 실패하는 프롬프트 패턴

실패하는 프롬프트에는 몇 가지 전형적인 습관이 있습니다.

첫 번째는 너무 추상적인 요청입니다. "모던하게", "좋게", "깔끔하게"만 반복하면 Stitch는 무난한 평균값으로 도망갑니다.

두 번째는 한 번에 너무 많은 수정입니다. 헤더 수정, 색상 변경, 컴포넌트 추가, 이미지 교체를 한 문장에 몰아넣으면 결과의 안정성이 떨어집니다.²

세 번째는 레이아웃 설명이 없는 스타일 중심 프롬프트입니다. 분위기만 있고 구조가 없으면 예쁜데 애매한 화면이 나오기 쉽습니다.

네 번째는 스타일 설명이 없는 기능 중심 프롬프트입니다. 필요한 요소는 다 들어갔는데, 결과가 문서처럼 딱딱해질 수 있습니다.

다섯 번째는 제약이 없는 프롬프트입니다. AI는 빈칸을 채우는 데 능하지만, 그 빈칸이 많을수록 당신의 취향과 멀어질 확률도 커집니다.

좋은 프롬프트는 결국 이 다섯 가지 실수를 줄이는 작업이라고 봐도 됩니다.

바로 써먹는 프롬프트 템플릿

아래 템플릿은 거의 모든 Stitch 작업의 출발점으로 쓸 수 있습니다. 예시는 붙여 넣기 쉽도록 영어로 적었습니다.

기본 생성 템플릿

Design a [mobile/web] [screen type] for [product or app name].
This screen is for [target user] who wants to [main goal].
Include [key section 1], [key section 2], [key section 3], and [navigation pattern].
Use a [style adjectives] style with [theme], [accent color], [typography mood], and [component style].
Keep the layout [density/priority rule] and avoid [things to avoid].

수정 템플릿

On the [specific screen or section], change [target element].
Make it [specific change] and use [style/detail].
Keep the rest of the layout unchanged.

홈 화면용 예시

Design a mobile home screen for a meal planning app called DailyDish.
This screen is for busy office workers who want to decide today's meals quickly.
Include a top greeting, a featured meal card, a horizontal category filter, a weekly meal plan preview, a grocery shortcut button, and a bottom tab bar.
Use a warm, friendly, clean style with soft orange accents, rounded cards, and easy-to-read typography.
Keep the screen simple and scannable, and avoid cluttered layouts or overly bright colors.

대시보드용 예시

Design a web analytics dashboard for a small e-commerce team.
This screen is for marketing managers who need to check performance at a glance.
Include a top summary row with revenue, conversion rate, and average order value, a sales trend line chart, a traffic source donut chart, a top products table, and a date filter in the header.
Use a professional, minimal style with a light background, blue accents, subtle borders, and compact cards.
Keep the hierarchy clear and prioritize the most important metrics above the fold.

이 템플릿의 장점은 문장이 화려하지 않아도 된다는 점입니다. 필요한 칸만 채워도 이미 훨씬 나은 프롬프트가 됩니다.