10. 멀티스크린 설계와 클릭 가능한 프로토타입 만들기

Stitch를 처음 쓰면 누구나 한 번쯤 이렇게 생각합니다. 와, 첫 화면 예쁘다. 그런데 제품은 첫 화면만으로 살아 움직이지 않습니다. 사용자는 화면을 감상하러 오는 것이 아니라, 무언가를 하러 옵니다. 가입하고, 찾고, 비교하고, 결제하고, 저장하고, 돌아옵니다. 그래서 멀티스크린 설계의 핵심은 예쁜 장면을 여러 장 만드는 일이 아니라, 사용자가 자연스럽게 다음 행동으로 넘어가게 만드는 것입니다.

이번 장에서는 여러 화면을 하나의 흐름으로 엮는 법, Stitch에서 화면들을 연결해 클릭 가능한 프로토타입으로 만드는 법, 그리고 Play/Preview로 실제 사용 경험을 검증하는 법을 차근차근 살펴보겠습니다. Stitch는 여러 화면을 연결해 인터랙티브 프로토타입으로 바꾸고, 심지어 클릭 뒤에 이어질 다음 화면까지 논리적으로 제안하는 방향으로 발전해 왔습니다.¹²

한 장의 화면보다 중요한 것은 흐름이다

좋은 화면은 보기 편합니다. 좋은 흐름은 다음 행동이 자연스럽습니다.

예를 들어 운동 앱을 만든다고 해 봅시다. 첫 화면이 아무리 멋져도 사용자가 목표를 선택한 뒤 어디로 가야 할지 모르겠다면, 그 디자인은 절반만 성공한 셈입니다. 반대로 시각적으로 아주 화려하지 않더라도,

• 첫 진입에서 무엇을 해야 하는지 바로 보이고

• 다음 단계로 넘어가는 버튼이 분명하며

• 완료 후 어디에 도착하는지가 예상 가능하다면

그 프로토타입은 훨씬 더 강합니다.

멀티스크린 설계는 결국 질문 하나로 요약됩니다. 사용자가 지금 이 화면에서, 다음에 무엇을 하게 될까?

먼저 화면 목록이 아니라 사용자 여정을 잡아라

Stitch에서 화면을 만들기 전에 해야 할 일은 필요한 페이지를 많이 떠올리기가 아닙니다. 먼저 가장 기본적인 사용자 여정, 즉 happy path를 잡아야 합니다. happy path는 사용자가 큰 문제 없이 목표를 달성하는 가장 대표적인 경로를 뜻합니다.

예를 들어 할 일 앱이라면 이런 흐름이 될 수 있습니다.

• 시작 화면

• 회원가입 또는 로그인

• 첫 할 일 추가

• 목록 확인

• 완료 체크

이 순서를 먼저 잡아 두면 각 화면의 역할이 선명해집니다. 반대로 이 단계 없이 화면부터 생성하면, 홈은 있는데 진입이 없고, 설정은 있는데 완료 화면이 없고, 예쁜 카드만 잔뜩 있는데 실제 행동은 이어지지 않는 일이 생깁니다.

여기서 중요한 팁은 처음부터 모든 예외 상황을 설계하지 않는 것입니다. 비밀번호 찾기, 오류 상태, 빈 상태, 권한 거부 같은 장면도 물론 중요합니다. 하지만 첫 프로토타입에서는 우선 가장 대표적인 흐름 하나를 완성하는 편이 더 좋습니다. 그래야 Play로 돌려 봤을 때 어디가 막히는지 빨리 보입니다.

Stitch에서는 "첫 화면"보다 "다음 화면"이 더 중요하다

Stitch는 텍스트 프롬프트로 첫 화면을 만드는 데 강하지만, 멀티스크린 작업에서는 그다음이 더 중요합니다. 첫 화면을 만든 뒤 새 화면을 추가하면서 같은 프로젝트의 디자인 토큰과 스타일을 유지하는 방식이 일관성 관리에 유리합니다.³ 쉽게 말해, 매번 새 프로젝트를 여는 대신 한 프로젝트 안에서 화면을 이어 붙여야 화면끼리 같은 제품처럼 보입니다.

예를 들어 이런 식으로 접근하면 좋습니다.

처음에는 이렇게 요청합니다.

명상 앱의 모바일 온보딩 첫 화면. 차분한 블루 계열, 큰 헤드라인, 시작 버튼 포함.

그다음 두 번째 화면은 이렇게 이어 갑니다.

같은 앱의 목표 선택 화면. 기존 색상과 버튼 스타일 유지. 초보자, 수면, 집중 세 가지 목표 카드 포함.

세 번째 화면은 다시 이렇게 연결합니다.

같은 흐름의 가입 화면. 이전 두 화면과 같은 톤 유지. 이메일, 비밀번호, Google 로그인 버튼 포함.

이렇게 하면 Stitch는 이미 만들어 둔 프로젝트 문맥과 스타일을 참고해 화면 간 시각적 흔들림을 줄일 수 있습니다.³

멀티스크린에서 일관성은 감각이 아니라 구조로 만든다

여러 화면을 만들다 보면 이상한 순간이 옵니다. 분명 같은 앱인데 버튼 모서리 반경은 화면마다 다르고, 카드 그림자는 어떤 곳은 진하고 어떤 곳은 없고, 제목 톤도 조금씩 달라집니다. 이게 바로 멀티스크린 작업에서 가장 흔한 문제인 시각적 표류입니다.

Stitch에서는 프로젝트 수준의 디자인 시스템이나 공통 스타일을 유지하면서 추가 화면을 생성하는 방식이 이 문제를 줄이는 데 도움이 됩니다.³⁴ 또한 여러 화면을 한꺼번에 선택해 같은 수정 요청을 적용하는 방식도 실제로 일관성 유지에 매우 유용합니다.⁴

실전에서는 보통 세 가지를 먼저 묶어 관리하면 좋습니다.

• 색상 체계

• 타이포그래피 위계

• 버튼·카드·입력창 같은 반복 컴포넌트 스타일

예를 들어 로그인, 홈, 상세 화면 세 장을 만든 뒤 세 화면을 함께 선택하고 모든 주요 버튼을 같은 높이와 같은 둥근 모서리로 통일해줘라고 요청하면, 흐름 전체가 한 브랜드처럼 정리됩니다.⁴

멀티스크린에서 중요한 것은 각 화면이 따로 예쁜지가 아닙니다. 서로 옆에 놓았을 때 한 제품처럼 보이는가입니다.

화면을 연결해 클릭 가능한 프로토타입으로 바꾸기

이제 본격적으로 그림을 경험으로 바꿀 차례입니다. Stitch는 여러 화면을 선택해 흐름을 연결하고, 이를 인터랙티브 프로토타입으로 미리 볼 수 있도록 지원합니다.¹² 공식 소개에서도 화면들을 빠르게 stitch해서 클릭 가능한 앱 흐름으로 만든 뒤 Play로 즉시 확인할 수 있다고 설명합니다.²

이 단계의 핵심은 단순합니다.

먼저 흐름에 들어갈 화면들을 캔버스에 모읍니다. 그다음 시작 화면과 다음 화면의 관계를 정합니다. 예를 들어 시작 버튼 클릭 → 목표 선택 화면, 계속하기 클릭 → 가입 화면, 가입 완료 → 홈 화면처럼 연결합니다. 연결이 끝나면 Play 또는 Preview로 실제 사용자가 된 것처럼 눌러 보며 이동을 확인합니다.¹⁵

여기서 중요한 건 애니메이션의 화려함이 아닙니다. 오히려 더 중요한 것은 아래 두 가지입니다.

첫째, 사용자가 눌러야 할 곳이 명확한가. 버튼인지 텍스트인지 카드인지 애매하면 흐름이 끊깁니다.

둘째, 눌렀을 때 도착하는 화면이 기대와 맞는가. 무료로 시작을 눌렀는데 갑자기 복잡한 대시보드가 나오면 사용자는 당황합니다.

프로토타입은 결국 다음 장면의 설득력 테스트입니다.

Play/Preview는 디자인 감상이 아니라 사용성 테스트다

Play 버튼을 누르는 순간부터는 디자이너가 아니라 사용자처럼 생각해야 합니다. 예쁜가?보다 먼저 헷갈리는가?를 봐야 합니다.

Stitch의 프로토타입과 반응형 미리보기는 흐름을 빠르게 확인하고, 모바일·태블릿·웹 같은 여러 맥락에서 같은 경험이 유지되는지 살펴보는 데 유용합니다.⁵ 어떤 경우에는 QR로 실제 휴대폰에서 확인하는 흐름도 가능해, 손가락으로 눌렀을 때의 감각을 더 현실적으로 볼 수 있습니다.⁵

Preview를 볼 때는 다음 질문을 스스로에게 던져 보세요.

• 첫 화면에서 해야 할 행동이 3초 안에 보이는가

• 뒤로 가거나 건너뛰는 길이 필요한데 빠져 있지는 않은가

• 다음 화면으로 넘어갈 이유가 충분히 보이는가

• 같은 흐름 안에서 말투와 시각 톤이 갑자기 바뀌지 않는가

• 완료 후 사용자가 길을 잃지 않는가

이 다섯 가지만 점검해도 어색한 흐름이 꽤 많이 잡힙니다.

자동으로 다음 화면을 만들게 할 때의 요령

Stitch는 클릭 뒤에 이어질 논리적인 다음 화면을 생성하는 방향으로도 발전했습니다.¹² 이 기능은 정말 편리합니다. 하지만 편리하다고 해서 항상 맡겨 두면 안 됩니다. 자동 생성은 속도를 올려 주지만, 제품의 의도까지 대신 책임져 주지는 않기 때문입니다.

잘 쓰는 방법은 이렇습니다. 먼저 현재 화면의 목적을 분명하게 만든 뒤 다음 화면 생성을 요청하세요. 예를 들어 로그인 화면이 있다면, 단순히 다음 화면 만들어줘보다 로그인 후 처음 도착하는 홈 화면. 신규 사용자가 바로 첫 작업을 추가할 수 있어야 함처럼 행동 목표를 붙이는 편이 좋습니다.

그러면 이어지는 화면이 단순 장식이 아니라 흐름상 필요한 역할을 가진 채 생성될 가능성이 커집니다.

실전 예시: 5화면짜리 앱 흐름 만들기

작은 예시로 독서 기록 앱을 만들어 보겠습니다. 목표는 처음 방문한 사용자가 첫 기록을 남기는 것입니다.

첫 번째 화면은 환영 화면입니다. 앱의 성격을 소개하고 시작하기 버튼이 보입니다.

두 번째 화면은 회원가입입니다. 이메일 가입과 소셜 로그인을 제공합니다.

세 번째 화면은 관심 장르 선택입니다. 이 화면의 목적은 개인화의 시작을 만드는 것입니다.

네 번째 화면은 홈입니다. 추천 책 카드와 첫 기록 남기기 CTA가 중심에 있습니다.

다섯 번째 화면은 기록 작성 화면입니다. 책 제목, 별점, 한 줄 감상을 입력할 수 있습니다.

이제 다섯 화면을 연결합니다. 환영에서 가입으로, 가입에서 장르 선택으로, 장르 선택에서 홈으로, 홈에서 기록 작성으로 이어집니다. 그리고 Play를 눌러 실제로 눌러 봅니다.

이때 자주 발견되는 문제는 이런 것들입니다.

환영 화면은 예쁜데 왜 가입해야 하는지 이유가 약할 수 있습니다. 장르 선택은 재미있지만 나중에 하기가 없어서 답답할 수 있습니다. 홈 화면은 정보가 많지만 첫 행동 버튼이 묻힐 수 있습니다. 기록 작성 화면은 입력창은 있는데 저장 후 어디로 가는지 빠져 있을 수 있습니다.

이런 문제는 정적인 화면만 볼 때보다 클릭해 볼 때 훨씬 빨리 드러납니다. 그래서 프로토타입은 단순 발표 자료가 아니라, 흐름의 허점을 잡는 도구입니다.

좋은 프로토타입은 "모든 화면이 있는 것"이 아니라 "비는 곳이 없는 것"이다

초보자는 보통 화면 수를 늘리는 데 집중합니다. 하지만 실제로는 화면 수보다 전환의 구멍이 더 중요합니다.

예를 들어 이런 상황을 조심해야 합니다.

• 가입은 되는데 가입 완료 후 도착 화면이 없음

• 상품 상세는 있는데 장바구니로 가는 연결이 약함

• 필터 화면은 있는데 적용 후 결과 화면이 무엇인지 불분명함

• 완료 화면은 있는데 다시 메인 흐름으로 돌아갈 길이 없음

이런 빈틈은 화면 한 장씩 볼 때는 잘 안 보입니다. 하지만 Play로 누르다 보면 금방 들킵니다. 그래서 프로토타입 검증은 몇 장 만들었는가가 아니라, 어디서 끊기는가를 보는 일입니다.

멀티스크린 설계에서 자주 하는 실수

첫 화면에 너무 많은 걸 넣는 실수

첫 화면 하나로 모든 것을 설명하려 하면 다음 화면이 설 자리가 없어집니다. 결과적으로 흐름이 아니라 포스터가 됩니다.

화면마다 다른 앱처럼 만드는 실수

새 프롬프트를 매번 완전히 새로 쓰면 스타일이 흔들리기 쉽습니다. 같은 프로젝트 안에서 이어 만들고, 필요하면 여러 화면을 묶어 공통 수정을 적용하세요.³⁴

연결은 했지만 행동 이유를 만들지 않는 실수

버튼이 있다고 흐름이 생기지는 않습니다. 사용자가 왜 눌러야 하는지가 보여야 합니다. CTA는 문장과 위치 둘 다 중요합니다.

Preview를 너무 늦게 보는 실수

화면이 충분히 쌓인 뒤에야 Play를 누르면, 잘못된 흐름이 커진 상태에서 발견됩니다. 세 장만 나와도 바로 눌러 보세요. 빨리 볼수록 수정 비용이 적습니다.²

프로토타입 검증은 팀 대화도 바꾼다

클릭 가능한 흐름이 생기면 피드백의 질도 달라집니다. 뭔가 어색해요 같은 추상적인 말 대신, 가입 뒤 바로 홈으로 가니까 개인화 동기가 약하네요처럼 더 구체적인 대화가 가능해집니다. 이게 프로토타입의 숨은 장점입니다. 팀이 화면을 따로따로 평가하지 않고, 사용자 여정 전체를 같이 보게 된다는 점입니다.

특히 창업자, PM, 개발자와 함께 볼 때 효과가 큽니다. 정적인 시안에서는 각자 다른 장면을 머릿속에 그리지만, Play를 누르면 모두가 같은 흐름을 보게 됩니다. 논쟁이 줄어드는 대신, 개선 포인트가 더 정확해집니다.

마무리: 예쁜 화면을 잇는 것이 아니라, 자연스러운 행동을 잇는 것이다

멀티스크린 설계의 핵심은 생각보다 단순합니다. 화면을 많이 만드는 것이 아니라, 사용자의 다음 행동을 끊기지 않게 만드는 것입니다.

Stitch는 이 과정을 꽤 빠르게 만들어 줍니다. 한 프로젝트 안에서 여러 화면을 만들고, 공통 스타일을 유지하고, 화면들을 연결한 뒤, Play/Preview로 직접 눌러 보며 사용자 흐름을 검증할 수 있습니다.¹²³⁵ 하지만 도구가 빨라졌다고 해서 원칙까지 자동으로 생기지는 않습니다. 여전히 중요한 것은 이 화면 다음에 무엇이 와야 자연스러운가를 계속 묻는 일입니다.

기억하세요. 사용자는 당신의 UI를 감상하지 않습니다. 그 안을 지나갑니다. 그래서 좋은 프로토타입은 예쁜 장면 모음이 아니라, 자연스럽게 이어지는 경험입니다.

참고

¹Google Stitch Complete Guide: Vibe Design, Voice Canvas & Free AI UI Tool (2026)  NxCode

²Introducing "vibe design" with Stitch

³How to Use Google Stitch to Build a Website Design System in Minutes

⁴I Designed a Multi-Screen App in Google Stitch: Here's My Entire Process - Medium

⁵Google Stitch AI Design Tool Pipeline  Complete Guide