모드와 레이아웃 선택의 기준

Stitch를 처음 쓸 때 많은 사람이 프롬프트부터 고민합니다. 무슨 문장을 써야 예쁜 화면이 나올지, 어떤 형용사를 넣어야 더 세련되게 보일지부터 붙잡죠. 그런데 실제로는 그보다 앞에 있는 선택이 하나 더 중요합니다. 바로 레이아웃과 모드입니다.

같은 프롬프트라도 Web로 시작하느냐 Mobile로 시작하느냐에 따라 정보의 밀도와 화면의 호흡이 달라집니다. 또 Ideate로 시작하느냐 Flash로 시작하느냐에 따라 Stitch가 문제를 풀어가는 방식 자체가 달라집니다. 최근 Stitch가 단순 생성기가 아니라 아이디어 탐색부터 프로토타입까지 이어지는 AI 네이티브 디자인 캔버스로 진화했다는 점을 생각하면, 이 첫 선택은 더 중요해집니다.¹

한마디로 정리하면 이렇습니다.

좋은 결과는 좋은 프롬프트만으로 나오지 않습니다. 올바른 모드 선택에서 먼저 시작됩니다.

먼저 고르는 두 가지: 레이아웃과 모드

Stitch를 시작할 때 고르는 항목은 겉보기에는 단순합니다. Web 또는 Mobile, 그리고 Ideate, Flash, Thinking, Redesign. 버튼은 몇 개 안 되는데, 여기서 이미 결과의 절반이 갈립니다.

레이아웃은 화면이 살아갈 환경을 정합니다. 넓은 브라우저에서 쓰일지, 손안의 작은 화면에서 쓰일지를 먼저 정하는 것이죠. 반면 모드는 Stitch의 일하는 태도를 정합니다. 문제를 같이 정의할지, 빠르게 초안을 뽑을지, 더 깊게 다듬을지, 아니면 기존 화면을 재해석할지를 고르는 셈입니다.²

이 둘을 섞어 생각하면 판단이 흐려집니다. Web와 Mobile은 크기 선택이고, Ideate와 Flash 같은 것은 작업 방식 선택입니다. 먼저 어디에서 쓰일 화면인지 고르고, 그다음 어떤 방식으로 만들지 고르는 순서가 가장 안전합니다.

Web와 Mobile은 단순한 화면 크기 차이가 아니다

초보자는 종종 이렇게 생각합니다. Web는 크게 나오는 옵션, Mobile은 작게 나오는 옵션. 하지만 실제 차이는 크기보다 과제에 있습니다.

모바일 화면은 대체로 한 번에 하나의 행동에 집중합니다. 가입하기, 주문하기, 예약하기, 메시지 보내기, 오늘 할 일을 체크하기처럼 짧고 명확한 흐름에 강합니다. 손가락으로 누르기 쉬워야 하고, 정보가 너무 넓게 퍼지면 오히려 답답해집니다.

웹 화면은 비교하고 둘러보고 판단하는 데 강합니다. 여러 요금제를 한눈에 비교하거나, 표와 차트를 함께 보거나, 설정 항목을 넓게 펼치거나, 브랜드 메시지를 길게 전달하는 화면은 대체로 웹 쪽이 자연스럽습니다.

같은 서비스라도 시작점은 달라질 수 있습니다. 예를 들어 음식 배달 서비스라면 핵심 사용 행동은 모바일에서 더 자주 일어날 가능성이 큽니다. 반대로 B2B 분석 도구나 어드민 시스템은 웹에서 먼저 설계하는 편이 구조를 잡기 쉽습니다. 제품 이름이 아니라 사용 맥락을 기준으로 골라야 하는 이유가 여기에 있습니다.

Mobile로 시작하면 좋은 경우

모바일로 먼저 가는 것이 유리한 서비스는 대체로 사용자의 집중 시간이 짧고, 행동 단위가 분명합니다. 온보딩, 로그인, 홈 피드, 예약, 결제, 체크리스트, 메신저, 운동 기록, 배달 주문처럼 한 손으로 빠르게 처리되는 흐름이 대표적입니다.

이런 화면을 웹으로 먼저 만들면 보기에는 풍성해 보여도, 막상 모바일로 옮길 때 정보가 너무 많아집니다. 넓은 화면에서 예쁘게 퍼져 있던 카드와 배너가 모바일에서는 길게 늘어지고, 중요한 행동 버튼이 아래로 밀리기 쉽습니다.

그래서 모바일 중심 서비스는 처음부터 화면을 작게 만드는 쪽이 오히려 구조를 더 단단하게 잡아 줍니다. 정보의 우선순위를 먼저 정하게 만들기 때문입니다. 무엇을 위에 올리고, 무엇을 숨기고, 무엇을 탭 안으로 넣을지를 일찍 결정하게 되죠.

모바일을 먼저 고를 때는 이런 질문이 잘 맞습니다. 사용자가 가장 먼저 눌러야 하는 버튼은 무엇인가, 한 화면에 꼭 보여야 하는 정보는 무엇인가, 엄지손가락으로 조작해도 흐름이 끊기지 않는가. 이 질문에 답이 잘 나오는 서비스라면 모바일부터 시작하는 편이 좋습니다.

Web로 시작하면 좋은 경우

웹으로 먼저 가는 것이 유리한 경우는 정보량이 많고, 비교와 탐색이 중요하며, 화면의 가로 공간을 적극적으로 써야 할 때입니다. 랜딩 페이지, 관리자 화면, 데이터 대시보드, 가격 비교 페이지, 복잡한 설정 화면, 표 중심의 업무 툴이 여기에 해당합니다.

이런 화면을 모바일부터 시작하면 의도치 않게 너무 단순해질 수 있습니다. 예를 들어 대시보드는 원래 여러 지표를 함께 봐야 힘이 나는데, 모바일 기준으로 먼저 만들면 차트 하나, 카드 하나씩만 남고 전체 맥락이 사라지기 쉽습니다. 나중에 웹으로 키워도 이미 구조가 단선적으로 굳어져 있어서 다시 손을 많이 보게 됩니다.

웹은 시야가 넓은 대신, 집중이 분산되기 쉽습니다. 그래서 웹 레이아웃을 고를 때는 넓은 공간을 그저 채우는 것이 아니라, 무엇을 동시에 보여줘야 하는지를 먼저 생각해야 합니다. 한눈에 비교해야 하는가, 여러 섹션이 동시에 보여야 하는가, 탐색 메뉴가 상시 노출되어야 하는가. 이런 질문에 예라고 답하게 된다면 웹부터 시작하는 편이 자연스럽습니다.

헷갈릴 때는 핵심 행동이 일어나는 곳을 먼저 고른다

모바일도 필요하고 웹도 필요한 서비스는 아주 많습니다. 이럴 때 둘 다 한 번에 잘 만들려 하면 오히려 둘 다 어중간해집니다.

그럴 때는 가장 중요한 행동이 처음 일어나는 곳을 먼저 고르면 됩니다. 사용자가 서비스를 처음 이해하고 전환되는 곳이 랜딩 페이지라면 웹부터 갑니다. 사용자가 가치를 가장 자주 체감하는 곳이 앱 홈과 주요 액션 화면이라면 모바일부터 갑니다.

쉽게 말해, 브랜드를 설득하는 표면이 먼저냐, 기능을 사용하는 표면이 먼저냐를 보면 됩니다.

모드는 Stitch의 실력 차이가 아니라 사고 방식의 차이다

이제 모드를 보겠습니다. 현재 Stitch는 아이디어 탐색, 빠른 생성, 깊은 정교화, 기존 화면 재해석이라는 서로 다른 출발점을 위해 여러 모드를 나눠 두고 있습니다.¹²

여기서 중요한 건 어떤 모드가 무조건 더 좋다는 생각을 버리는 것입니다. Thinking이 항상 Flash보다 우월한 것이 아니고, Redesign이 더 고급 모드인 것도 아닙니다. 망치를 들고 나사를 조이려는 순간부터 일이 꼬이듯, 모드도 상황에 맞게 써야 합니다.

Ideate는 화면보다 문제를 먼저 다룰 때 쓴다

Ideate는 아직 화면 구조가 머릿속에 없을 때 쓰는 모드입니다. 정확한 카드 개수나 버튼 위치보다, 어떤 문제를 풀고 싶은지와 어떤 감정을 주고 싶은지가 더 선명할 때 잘 맞습니다.¹

예를 들어 이런 상황입니다. 프리랜서 미수금 관리 앱을 만들고 싶은데 어떤 첫 화면이 좋은지 모르겠다, 명상 앱인데 차분하지만 너무 뻔하지 않은 방향을 찾고 싶다, 뉴스레터 사이트를 개편하고 싶은데 무엇을 앞세워야 할지 막막하다. 이런 경우에는 화면을 바로 찍어내는 것보다 방향을 몇 갈래로 벌려 보는 것이 더 중요합니다.

Ideate를 잘 쓰면 Stitch가 디자이너처럼 먼저 질문을 던져 줍니다. 사용자의 목표가 무엇인지, 전환 포인트가 어디인지, 제품이 어떤 분위기를 가져야 하는지부터 정리하게 도와주는 식입니다. 그래서 머릿속이 아직 안개 낀 상태라면 Ideate가 좋습니다.

반대로 이미 필요한 섹션과 구성 요소가 또렷한데도 Ideate부터 들어가면, 오히려 우회로를 도는 느낌이 날 수 있습니다. 방향 탐색이 필요한지, 실행이 필요한지를 먼저 구분하세요.

Flash는 가장 자주 쓰게 되는 작업용 모드다

Flash는 속도가 필요한 순간의 기본 선택입니다. 빠르게 초안을 만들고, 여러 방향을 비교하고, 큰 구조를 잡을 때 가장 유용합니다.²

처음 한두 장의 화면을 뽑아 볼 때, 홈 화면 구조를 여러 버전으로 흔들어 보고 싶을 때, 같은 요구사항으로 웹과 모바일 느낌을 빠르게 비교하고 싶을 때 Flash가 특히 편합니다. 생각보다 결과가 꽤 괜찮게 나오는 경우도 많고, 무엇보다 반복 속도가 빨라서 작업 리듬을 살려 줍니다.

Flash의 핵심 장점은 완벽함이 아니라 회전율입니다. 빨리 보고, 빨리 버리고, 빨리 고치기 좋습니다. 그래서 첫 초안, 첫 비교, 첫 변형 생성은 대개 Flash로 시작하는 편이 효율적입니다.

다만 Flash에 너무 많은 기대를 걸면 아쉬울 수 있습니다. 복잡한 사용자 흐름, 섬세한 위계, 간격의 정교함까지 한 번에 잡아내는 데는 한계가 있습니다. 이때는 Flash가 못하는 것이 아니라, Flash의 역할이 아닌 것입니다.

Thinking은 구조가 잡힌 뒤 완성도를 끌어올릴 때 강하다

Thinking은 더 오래 생각하고 더 깊게 정리하는 모드에 가깝습니다. 복잡한 요구사항을 다루거나, 화면의 위계와 간격, 타이포그래피 같은 완성도를 끌어올리고 싶을 때 유리합니다.²

실무에서는 보통 이런 순간에 Thinking이 빛납니다. Flash로는 계속 비슷비슷하게 나오는 복잡한 대시보드, 여러 상태를 고려해야 하는 온보딩 흐름, 공공 서비스나 금융 화면처럼 정보 구조가 꼼꼼해야 하는 경우입니다. 겉으로는 같은 카드와 버튼이어도, 어떤 것이 먼저 읽히고 무엇이 덜 중요해 보여야 하는지의 차이가 생깁니다.

Thinking을 쓸 때 흔한 실수는 시작부터 모든 것을 이 모드에 맡기는 것입니다. 그러면 속도가 떨어지고, 사소한 방향 탐색에도 시간이 많이 듭니다. Thinking은 아이디어를 찾는 망치가 아니라, 구조를 다듬는 줄자에 가깝습니다. 개념이 잡힌 뒤에 쓰면 훨씬 빛납니다.

한 문장으로 요약하면 이렇습니다. Flash가 초안의 엔진이라면, Thinking은 마감의 손입니다.

Redesign은 없는 것을 만드는 모드가 아니라, 있는 것을 다시 읽는 모드다

Redesign은 이미 시각 자료가 있을 때 강합니다. 기존 서비스의 스크린샷, 오래된 레거시 화면, 손그림 스케치, 참고하고 싶은 구조가 분명한 UI를 바탕으로 새 방향을 만들고 싶을 때 쓰는 모드입니다.²³

이 모드의 장점은 말로 길게 설명하기 어려운 구조를 시각 맥락으로 바로 넘길 수 있다는 점입니다. 오래된 사내 시스템 화면을 현대적으로 바꾸고 싶다, 경쟁 서비스의 정보 구조는 참고하되 우리 톤으로 재해석하고 싶다, 화이트보드에 그린 와이어프레임을 실제 UI 느낌으로 올리고 싶다. 이런 작업에서 Redesign은 매우 실용적입니다.

다만 이름 때문에 오해하기 쉽습니다. Redesign은 단순 복제가 아닙니다. 있는 것을 베끼는 것이 아니라, 읽어들여 다시 설계하는 흐름에 가깝습니다. 그래서 참고 화면을 넣을 때도 내가 유지하고 싶은 것은 무엇인지, 바꾸고 싶은 것은 무엇인지 분명하게 말해 주는 편이 좋습니다.

가장 실전적인 선택 순서

막상 작업할 때는 이렇게 고르면 덜 헤맵니다.

• 문제는 분명한데 화면 방향이 막막하다면 Ideate

• 구조를 빨리 잡고 여러 안을 비교하고 싶다면 Flash

• 방향은 잡혔고 완성도를 더 끌어올리고 싶다면 Thinking

• 스크린샷, 스케치, 기존 UI를 바탕으로 다시 만들고 싶다면 Redesign

그리고 그 앞에는 항상 Web인지 Mobile인지부터 결정합니다. 즉, 기기 맥락을 먼저 정하고, 작업 방식을 나중에 정하는 순서입니다.

많이 하는 실수 네 가지

모드 선택에서 초보자가 자주 헤매는 장면도 꽤 비슷합니다.

첫째, 아무 생각 없이 Thinking부터 고르는 경우입니다. 왠지 더 고급스러워 보여서 그런데, 방향 탐색 단계에서는 오히려 답답할 수 있습니다.

둘째, 이미 참고 화면이 있는데도 끝까지 텍스트로만 설명하려는 경우입니다. 이런 때는 Redesign이 훨씬 빠르고 정확합니다.

셋째, 모바일 앱을 만들면서 웹부터 시작하는 경우입니다. 화면이 넓으면 멋있어 보여도, 실제 핵심 행동이 모바일에서 일어난다면 구조 판단이 늦어집니다.

넷째, 서비스 방향이 정리되지 않았는데 Flash로 계속 밀어붙이는 경우입니다. 이럴 때는 더 많은 생성이 답이 아니라, Ideate로 질문을 다시 세우는 것이 답일 수 있습니다.

이 네 가지를 피하는 것만으로도 결과 품질이 꽤 달라집니다. Stitch는 똑똑하지만, 사용자가 잘못된 출발점을 주면 그 상태로 성실하게 달려가 버리기 때문입니다.

추천 작업 리듬은 따로 있다

실제로는 한 모드만 고집하기보다 이어서 쓰는 편이 훨씬 좋습니다.

가장 무난한 흐름은 Ideate → Flash → Thinking입니다. 먼저 방향을 넓게 잡고, 그다음 빠르게 여러 초안을 만들고, 마지막에 정교하게 다듬는 흐름입니다.² 반면 기존 화면이 있다면 Redesign → Flash 또는 Thinking으로 가는 편이 자연스럽습니다. 먼저 현재 구조를 새롭게 해석하고, 이후 속도 중심으로 확장할지 완성도 중심으로 다듬을지를 고르는 식입니다.

이 리듬을 익히면 모드가 경쟁 관계가 아니라 협업 관계로 보이기 시작합니다. 누가 더 좋은가가 아니라, 누가 어느 순간에 더 적합한가가 보이기 때문입니다.

결국 모드 선택은 프롬프트보다 앞선 설계다

이 챕터의 핵심은 단순합니다.

프롬프트는 무엇을 말할지의 문제이고, 모드와 레이아웃은 어디서부터 말할지의 문제입니다.

출발점을 잘못 잡으면 프롬프트를 아무리 잘 써도 엇나갈 수 있습니다. 반대로 출발점이 맞으면, 조금 투박한 설명이어도 Stitch는 꽤 그럴듯한 방향으로 달려갑니다. 그래서 Stitch를 잘 쓰는 사람은 프롬프트 장인이라기보다, 상황에 맞는 시작점을 고르는 사람에 가깝습니다.

다음 챕터에서는 바로 그다음 단계, 즉 좋은 결과를 만드는 프롬프트 작성법을 다룹니다. 하지만 그 프롬프트가 빛나려면 먼저 기억해야 합니다.

어떤 문장을 쓰느냐보다 먼저, 어떤 모드에서 시작하느냐가 중요합니다.

참고

¹Introducing vibe design with Stitch

²ScriptByAI의 Google Stitch 모드와 기능 정리

³아이디어에서 앱으로: UI를 디자인하는 새로운 방법, Stitch 소개