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

8. 이미지·스케치·URL로 디자인 확장하기

2026-04-18Views 5약 11분

8. 이미지·스케치·URL로 디자인 확장하기

텍스트만으로도 Stitch는 꽤 많은 것을 해냅니다. 하지만 어느 순간부터는 말이 길어집니다. 머릿속에는 분명히 있는데, 설명하려고 하면 자꾸 상단은 이런 느낌, 중간은 저런 구조, 대충 카드가 이렇게 놓이고... 같은 말이 늘어나죠. 바로 그때가 이미지 입력을 꺼낼 타이밍입니다.

Stitch는 원래 텍스트 프롬프트에 강하지만, 이미지나 와이어프레임을 함께 주면 레이아웃 관계와 시각적 힌트를 더 직접적으로 읽어 UI로 바꾸는 데 강점을 보입니다.¹ 쉽게 말해, 말로 설명하기 어려운 디자인은 보여주는 편이 더 빠릅니다.

이번 장에서는 스크린샷, 손그림, 참고 사이트 URL을 이용해 디자인을 확장하는 방법을 배웁니다. 중요한 것은 하나입니다. 그대로 복제하는 것이 아니라, 구조를 읽고 내 목적에 맞게 다시 설계하는 것입니다.

이미지·스케치·URL로 디자인 확장하기

왜 이미지 입력이 생각보다 강력한가

텍스트 프롬프트는 의도를 설명하는 데 좋습니다. 반면 이미지 입력은 배치를 보여주는 데 좋습니다. 이 둘의 역할은 꽤 다릅니다.

예를 들어 차분한 금융 앱 홈 화면이라고 쓰면 Stitch는 분위기를 잘 잡을 수 있습니다. 하지만 상단 요약 카드 아래에 좌우 스크롤 섹션이 있고, 그 밑에는 2열 카드 그리드, 맨 아래에는 작은 요약 차트가 붙는 구조 같은 설명은 길어질수록 오해가 생기기 쉽습니다. 이럴 때 스크린샷이나 손그림 한 장이 있으면 이야기가 훨씬 빨라집니다.

특히 이미지 입력이 유리한 순간은 세 가지입니다.

구조는 이미 떠올랐는데, 이를 깔끔한 디지털 UI로 정리하고 싶을 때
경쟁 서비스나 참고 사례의 레이아웃 리듬을 가져오고 싶을 때
오래된 화면을 더 현대적인 스타일로 리디자인하고 싶을 때

즉, 텍스트는 방향을 주고, 이미지는 증거를 줍니다. Stitch는 이 두 가지를 함께 받을수록 더 덜 헤맵니다.

먼저 정해야 한다: 내가 가져오려는 것은 구조인가, 스타일인가

이미지나 URL을 넣기 전에 가장 먼저 해야 할 일은 무엇을 유지하고 무엇을 바꿀지 정하는 것입니다. 이걸 정하지 않으면 결과가 묘하게 섞입니다. 레이아웃은 참고 사이트 느낌인데 색은 내 브랜드와 안 맞고, 정보 구조는 괜찮은데 톤은 엉뚱하게 튀는 식이죠.

보통 가져오고 싶은 것은 아래 셋 중 하나이거나, 둘의 조합입니다.

구조: 섹션 순서, 카드 배치, 정보 위계, 내비게이션 위치
스타일: 색상, 타이포그래피, 모서리 반경, 그림자, 여백의 리듬
흐름: 로그인 뒤 홈으로 가는 방식, CTA 배치, 사용자가 눈으로 읽는 순서

예를 들어 스크린샷을 참고할 때 레이아웃만 가져오고 브랜드 톤은 바꾸기, URL을 참고할 때 스타일은 가져오되 콘텐츠 구조는 새로 짜기처럼 먼저 선을 그어 두면 훨씬 잘 풀립니다.

스크린샷은 가장 빠른 레이아웃 힌트다

스크린샷은 가장 현실적인 참고 자료입니다. 이미 누군가 잘 정리해 둔 화면의 위계, 간격, 카드 구성, CTA 위치가 한 번에 들어 있기 때문입니다. 최근 튜토리얼들도 경쟁 서비스 화면이나 마음에 드는 랜딩 페이지 스크린샷을 업로드한 뒤, 구조는 유지하되 우리 브랜드에 맞게 다시 만들어 달라는 방식의 리디자인을 매우 효과적인 흐름으로 소개합니다.³

이때 핵심은 스크린샷을 정답으로 주는 것이 아니라 출발점으로 주는 것입니다. 프롬프트도 그에 맞게 써야 합니다. 예를 들어 이런 식이 좋습니다.

Use the uploaded screenshot as a layout reference. Keep the overall information hierarchy and section order, but redesign it for a meal-planning app with a softer green palette, larger typography, and friendlier cards.

이 프롬프트가 좋은 이유는 분명합니다. 무엇을 유지할지 말했고, 무엇을 바꿀지도 말했기 때문입니다. Stitch 입장에서도 덜 헷갈립니다.

스크린샷을 쓸 때는 화면을 고르는 기준도 중요합니다. 너무 긴 전체 페이지 캡처보다, 지금 바꾸고 싶은 핵심 화면 한 장이 더 낫습니다. 예를 들어 모바일 홈 화면을 만들고 싶다면 모바일 홈 화면 스크린샷 하나가 가장 좋습니다. 데스크톱 대시보드의 일부만 필요하다면 필요한 영역이 잘 보이게 잘라 주는 편이 더 정확합니다.

그리고 브라우저 주소창, 팝업, 쿠키 배너처럼 본질과 상관없는 요소는 가급적 제거하는 편이 좋습니다. Stitch는 똑똑하지만, 쓸데없는 힌트까지 성실하게 받아들이는 면도 있습니다. AI에게는 친절한 참고 이미지가 최고의 매너입니다.

손그림과 와이어프레임은 못생겨도 괜찮다

손그림을 올릴 때 많은 사람이 괜히 긴장합니다. 선이 삐뚤면 어떡하지, 박스가 예쁘지 않으면 어떡하지 하고요. 그런데 Stitch가 읽는 것은 미술 실력이 아니라 관계입니다. 어떤 영역이 헤더인지, 어디가 이미지 자리인지, 어떤 버튼이 주요 행동인지가 보이면 됩니다.¹

오히려 손그림은 텍스트보다 빠를 때가 많습니다. 메뉴는 위에, 요약 카드는 크게, 리스트는 아래로 길게, 하단 탭은 고정. 이런 건 설명보다 그리는 게 훨씬 빠르니까요.

다만 아무렇게나 그려도 된다는 뜻은 아닙니다. 와이어프레임은 단순할수록 좋지만, 구분은 선명해야 합니다. 실습 가이드들도 선이 깔끔하고 주요 요소의 위치와 크기 구분이 분명할수록 인식이 좋아진다고 설명합니다.²

예를 들어 손그림에는 이런 정도가 보이면 충분합니다.

상단 바와 제목 위치
큰 카드와 작은 카드의 우선순위
버튼과 입력창의 구분
이미지 영역과 텍스트 영역의 대략적 비율

반대로 손그림에 너무 많은 장식과 메모를 욱여넣으면 오히려 AI가 무엇을 구조로 읽어야 할지 헷갈릴 수 있습니다. 와이어프레임의 목표는 예쁘게 그리기가 아니라 헷갈리지 않게 전달하기입니다.

프롬프트도 짧고 분명하면 충분합니다.

Generate a mobile wellness dashboard based on the uploaded wireframe. Keep the layout structure, use a calm beige and olive palette, add rounded cards, and make the primary CTA clear.

여기서도 핵심은 같습니다. 이 그림을 그대로 그려줘가 아니라, 이 구조를 바탕으로 제대로 된 UI로 정리해줘입니다.

URL은 레이아웃보다 스타일을 가져올 때 특히 강하다

스크린샷이 한 장의 화면을 보여주는 방식이라면, URL은 사이트 전체의 시각 언어를 가져오는 방식에 가깝습니다. 최근 가이드들에 따르면 Stitch는 공개된 웹페이지 URL을 바탕으로 색상, 타이포그래피, 간격 규칙, 버튼과 카드 스타일 같은 디자인 토큰을 읽어 새 화면 생성에 활용할 수 있습니다.⁴

이 기능이 특히 좋은 이유는 좋은 사이트를 보면 좋은 건 알겠는데, 뭐가 좋은지 말로 못 풀겠다는 문제를 줄여 주기 때문입니다. 사람은 종종 취향은 알아도 규칙은 설명하지 못합니다. URL 기반 추출은 그 취향을 규칙으로 바꾸는 데 도움을 줍니다.

예를 들어 이런 흐름이 가능합니다.

참고 사이트 URL을 넣고, 그 사이트의 여백과 타이포그래피 리듬을 바탕으로 새 SaaS 랜딩 페이지를 만든다. 혹은 기존 회사 홈페이지 URL을 넣고, 같은 브랜드 감각을 유지한 채 새로운 결제 페이지나 대시보드를 만든다. 이러면 우리 톤과 안 맞는 새 화면이 아니라 기존 브랜드와 이어지는 새 화면을 얻기 쉬워집니다.

다만 URL은 아무 사이트에나 잘 통하지는 않습니다. 공개 접근이 가능한 페이지가 좋고, 로그인 벽이나 무거운 오버레이, 자바스크립트로 복잡하게 뒤늦게 로딩되는 화면은 추출 품질이 떨어질 수 있습니다.⁴ 그래서 첫 시도는 깔끔한 마케팅 페이지나 잘 정리된 소개 페이지로 하는 편이 안전합니다.

리디자인의 포인트는 복제가 아니라 번역이다

이미지나 URL을 넣기 시작하면 누구나 한 번쯤 유혹을 느낍니다. 이거 거의 그대로 만들 수 있겠는데? 하고요. 하지만 실무적으로도, 윤리적으로도 더 좋은 접근은 복제가 아니라 번역입니다.

좋은 리디자인은 보통 이렇게 움직입니다. 원본의 장점을 읽고, 내 서비스 문맥으로 옮기고, 브랜드와 사용자에 맞게 다시 조정합니다. 예를 들어 원본에서 가져와야 할 것은 넉넉한 여백, CTA가 먼저 보이는 위계, 카드 간 균형일 수 있습니다. 반면 바꿔야 할 것은 카피, 색상, 이미지, 아이콘, 산업 문맥, 사용자 기대치입니다.

한마디로 말하면, 픽셀을 베끼지 말고 원리를 훔쳐야 합니다. 물론 여기서 말하는 훔친다는 표현은 농담이고, 실제로는 원리를 배운다에 가깝습니다.

이 관점을 가지면 프롬프트도 훨씬 좋아집니다. 이 사이트와 똑같이 만들어줘보다 이 사이트의 넓은 여백과 미니멀한 카드 구조를 참고하되, 교육 서비스용으로 더 친근하고 읽기 쉽게 바꿔줘가 훨씬 결과도 좋고 안전합니다.

리디자인 프롬프트는 세 문장 구조로 쓰면 편하다

이미지든 URL이든 리디자인 프롬프트는 아래 구조로 쓰면 안정적입니다.

첫 문장에서는 무엇을 참고할지 말합니다. 둘째 문장에서는 무엇을 유지하고 무엇을 바꿀지 정합니다. 셋째 문장에서는 최종 목적과 분위기를 못 박습니다.

예를 들면 이렇게 쓸 수 있습니다.

Keep the overall layout rhythm from the reference, but redesign the screen for a family budget app with clearer charts and warmer colors.
Use the uploaded screenshot as structural inspiration only. Replace the visual style with a modern editorial look and stronger mobile readability.
Extract the design language from the referenced website, then apply it to a developer tool landing page with darker surfaces and sharper information hierarchy.

이 구조의 장점은 Stitch가 참고 대상을 어디까지 따라야 하는지 이해하기 쉽다는 점입니다. 참고 자료가 강할수록 오히려 제약 문장이 더 중요해집니다.

URL 기반 리디자인에서는 테마 충돌을 먼저 의심하자

URL에서 디자인 시스템을 가져오면 꽤 그럴듯한 결과가 나올 때가 많습니다. 하지만 가끔은 묘하게 어색한 장면도 생깁니다. 예를 들어 참고 사이트는 밝은 카드 스타일인데, 내 원래 프롬프트는 다크 테마여서 둘이 섞이는 경우입니다. 그러면 카드만 환하고 배경은 어두운, 일종의 낮과 밤이 한 화면에 동시에 출근한 결과가 나올 수 있습니다.

이럴 때는 당황해서 처음부터 다시 만들기보다, 충돌 지점을 정확히 말해 주는 편이 낫습니다. 실제 활용 사례에서도 가져온 디자인 시스템과 기존 테마가 섞일 때 자연어로 전체를 라이트 모드로 통일해 달라, 원본의 배경 대신 새 브랜드의 다크 톤을 유지하라고 수정해 안정화하는 흐름이 소개됩니다.⁵

즉, URL 리디자인은 한 번에 끝내는 작업이라기보다 추출 → 적용 → 충돌 정리의 세 단계로 보는 편이 현실적입니다.

실전 흐름: 참고 사이트를 우리 첫 화면으로 바꾸는 법

가장 쉬운 예를 하나 들어 보겠습니다. 당신이 반려동물 건강관리 앱의 모바일 홈 화면을 만들고 싶다고 해봅시다. 그런데 텍스트로만 설명하니 자꾸 평범한 결과가 나옵니다. 이럴 때는 먼저 참고할 대상을 고릅니다. 카드 정리가 마음에 드는 피트니스 앱 스크린샷이든, 여백과 타이포그래피가 마음에 드는 웹사이트 URL이든 괜찮습니다.

그다음에는 속으로 이렇게 정리합니다. 구조는 참고하되, 분위기는 더 따뜻해야 한다. CTA는 더 분명해야 한다. 정보는 반려동물 건강 문맥에 맞아야 한다. 이 정리가 끝나면 프롬프트가 쉬워집니다.

Redesign this reference for a pet wellness app. Keep the clean card-based hierarchy, but use softer colors, friendly iconography, and emphasize daily care actions like feeding, walking, and checkups.

첫 결과가 나오면 거기서 끝내지 말고 바로 점검합니다. 상단 요약 카드가 충분히 중요해 보이는지, 하단 액션이 실제로 누르고 싶게 보이는지, 이미지와 아이콘이 너무 차갑지는 않은지 확인합니다. 그다음에는 작은 수정으로 들어갑니다. Make the daily checkup CTA more prominent. Use more rounded cards and warmer illustration tones. 이런 식으로요.

여기서 중요한 것은, 참고 자료가 디자인의 운전대를 완전히 잡게 두지 않는 것입니다. 운전은 여전히 내가 해야 합니다. 참고 자료는 내비게이션일 뿐입니다.

자주 생기는 어긋남은 미리 알고 가는 편이 낫다

이미지 기반 생성은 편하지만, 몇 가지 흔한 어긋남이 있습니다.

첫째, 스케치 구조는 잘 따라갔는데 아이콘이나 텍스트가 비어 있거나 플레이스홀더처럼 보일 수 있습니다. 실습 예시들에서도 전체 구조는 잘 옮겨오되 일부 아이콘과 레이블은 비어 있거나 어색하게 나오는 경우가 자주 언급됩니다.²

둘째, 참고 스크린샷의 분위기를 너무 세게 따라가면 내 서비스의 브랜드 톤이 약해질 수 있습니다. 이때는 Use the reference for layout only 같은 문장을 넣어 제동을 걸어야 합니다.

셋째, 모바일 참고 자료로 웹 화면을 만들거나, 반대로 웹 참고 자료로 모바일 화면을 만들면 정보 밀도가 어색해질 수 있습니다. 가능하면 같은 디바이스 범주의 참고 자료를 쓰는 편이 안전합니다.

넷째, 오래된 사이트를 URL로 넣었더니 내용 구조까지 낡은 방식으로 따라올 수 있습니다. 이럴 때는 keep the content categories but modernize the interaction and spacing처럼 현대화 요구를 함께 넣어야 합니다.

즉, 이미지 입력은 만능 치트키가 아니라 강력한 단서입니다. 단서가 강한 만큼, 방향을 잡아 주는 문장도 함께 강해야 합니다.

리디자인 작업에서는 속도만큼 중요한 것이 안전성입니다. 특히 경쟁 서비스 스크린샷이나 공개 사이트 URL을 활용할 때는 어디까지 참고이고 어디부터 복제인지 감각이 필요합니다.

일부 가이드에서도 Stitch 결과물은 상업적으로 활용할 수 있지만, AI 생성 특성상 기존 디자인과 유사성이 생길 수 있으므로 상용 프로젝트에서는 독창성과 법적 문제를 한 번 더 검토하는 편이 바람직하다고 권합니다.⁶ 이 조언은 괜히 붙은 안전문구가 아닙니다. 실제 실무에서는 로고, 고유 일러스트, 브랜드 카피, 독특한 시각 자산까지 비슷해지면 곤란해집니다.

그래서 원칙은 단순합니다. 구조와 원리는 배우되, 브랜드 자산과 표현은 직접 가져가야 합니다. 가장 안전한 방법은 참고 자료를 하나만 맹신하지 않는 것입니다. 한 자료에서는 구조를 배우고, 다른 자료에서는 톤을 배우고, 최종 카피와 이미지와 색상 체계는 내 프로젝트에 맞게 다시 세우는 편이 좋습니다.

이렇게 해야 결과물이 어디서 본 것 같은 화면이 아니라 참고를 잘 소화한 우리 화면이 됩니다.

마무리: 설명이 길어질수록, 보여줄 차례다

이번 장의 핵심은 간단합니다. 텍스트 프롬프트가 막히기 시작하면, 그건 Stitch가 멍청해서가 아니라 입력 방식이 바뀔 타이밍일 수 있습니다.

스크린샷은 레이아웃을 빠르게 가져오는 데 좋고, 손그림은 머릿속 구조를 제일 빨리 꺼내는 데 좋고, URL은 스타일 언어와 디자인 시스템을 옮겨오는 데 좋습니다. 그리고 이 셋을 잘 쓸수록 당신은 더 이상 설명만 하는 사람이 아니라 보여주면서 설계하는 사람이 됩니다.

기억해 두면 좋겠습니다. 말로 한참 설명해야 하는 디자인이라면, 아마 그림 한 장이 더 빠릅니다.