텍스트만으로 첫 화면 만들기
Stitch를 배우는 가장 빠른 방법은 튜토리얼을 오래 읽는 것이 아니라, 화면 하나를 끝까지 만들어 보는 것입니다. 손을 움직여 보면 금방 감이 옵니다. "아, 이 정도로 구체적으로 말해야 하는구나." "한 번에 너무 많이 바꾸면 흐트러지는구나." "처음 시안은 거칠어도, 두세 번만 손보면 꽤 쓸 만해지는구나." 이런 감각은 직접 만들어 볼 때 가장 빨리 생깁니다.
이번 장에서는 텍스트만으로 첫 화면을 만드는 가장 기본적인 흐름을 익힙니다. Web과 Mobile 레이아웃 중 하나를 고르고, 빠른 텍스트 생성 모드에서 프롬프트를 넣고, 생성된 시안을 보고, 한두 번 수정해 보는 방식입니다. Stitch는 자연어 설명만으로 UI를 만들고, 이후 Figma나 프런트엔드 코드로 이어지는 흐름을 지원하므로, 첫 화면 실습만 제대로 해도 이후 학습 속도가 훨씬 빨라집니다.1
핵심은 거창한 앱 전체를 한 번에 만들려 하지 않는 것입니다. 랜딩 페이지 한 장, 대시보드 한 장, 로그인 화면 한 장, 모바일 앱 홈 화면 한 장. 이 네 종류만 직접 만들어 봐도 Text-to-UI의 기본기는 거의 다 익힐 수 있습니다.
첫 화면 만들기의 가장 짧은 루트
이번 장의 목표는 "예쁜 시안 구경"이 아니라 "한 장을 완성하는 경험"입니다. 그래서 흐름도 최대한 짧게 가져가면 좋습니다.
처음에는 빠른 기본 생성 모드에서 시작하는 편이 좋습니다. 텍스트만으로 빠르게 생성되고, 결과를 비교하고 다시 돌려 보는 속도가 빠르기 때문입니다.2 Web 화면을 만들 거면 Web 레이아웃, 모바일 앱 화면을 만들 거면 Mobile 레이아웃을 먼저 고릅니다. 이 선택만 해도 화면 비율과 정보 밀도가 꽤 달라집니다.
그다음에는 프롬프트를 넣습니다. 여기서 중요한 것은 완벽한 문장을 쓰는 것이 아니라, 화면의 직업을 분명히 하는 것입니다. 이 화면이 사람을 설득하는 화면인지, 정보를 요약하는 화면인지, 로그인을 받는 화면인지, 오늘 해야 할 일을 보여주는 화면인지만 또렷해도 Stitch는 훨씬 안정적으로 움직입니다.
생성 버튼을 누른 뒤에는 감탄보다 관찰이 먼저입니다. 무엇이 잘 나왔는지, 무엇이 엇나갔는지 봐야 합니다. 공식 가이드와 실전 튜토리얼들이 공통으로 강조하는 것도 이것입니다. 처음 결과에서 모든 것을 기대하지 말고, 특정 요소를 확인한 뒤 점진적으로 수정하라는 점입니다.23
처음 실습에서는 아래 순서만 기억하면 충분합니다.
레이아웃 선택: Web 또는 Mobile
화면 목적 한 줄 정리: 랜딩, 대시보드, 로그인, 홈 화면 등
핵심 구성요소 지정: 헤더, 카드, 차트, 입력창, 버튼 등
스타일 지정: 라이트/다크, 미니멀, 둥근 모서리, 포인트 컬러 등
생성 후 한 가지씩 수정: 정렬, 간격, 차트 종류, 버튼 강조 등23
이제 실제로 만들어 봅시다.
예제 1: 텍스트만으로 랜딩 페이지 만들기
랜딩 페이지는 Stitch 입문용으로 아주 좋습니다. 이유는 단순합니다. 섹션이 눈에 잘 보이고, 화면의 목적도 분명하기 때문입니다. 누군가에게 제품을 소개하고, 관심을 끌고, 클릭을 유도하는 화면이니 무엇을 강조해야 하는지도 비교적 명확합니다.
예를 들어 원격 팀을 위한 프로젝트 관리 SaaS의 첫 화면을 만든다고 해봅시다. Web 레이아웃을 고른 뒤, 아래처럼 시작할 수 있습니다.
Design a modern SaaS landing page for a project management tool for remote teams. Include a top navigation bar, a hero section with a bold headline, short subheadline, and primary CTA button, a product screenshot mockup on the right, a 3-column feature section, a testimonial section, and a footer. Use a clean professional style with a light background, blue accent color, generous whitespace, and rounded cards.
이 프롬프트의 장점은 제품 종류, 주요 섹션, 분위기가 모두 보인다는 점입니다. Stitch는 이런 설명을 받아 전체 구조를 꽤 그럴듯하게 잡아 줍니다.4
처음 생성된 결과를 볼 때는 "와, 멋지다"보다 "이 랜딩 페이지가 실제로 사람을 설득할 수 있나?"를 먼저 보세요. 헤드라인이 충분히 크고 눈에 띄는지, CTA 버튼이 묻히지 않는지, 제품 스크린샷이 장식이 아니라 이해를 돕는 역할을 하는지 확인합니다.
처음 시안에서 자주 생기는 문제도 있습니다. 헤드라인이 평범하게 보이거나, CTA가 약하거나, 제품 목업 대신 조금 애매한 이미지가 들어갈 수 있습니다. 이럴 때는 한 번에 다 고치지 말고 하나씩 다듬습니다.3
예를 들어 이렇게 이어갈 수 있습니다.
Make the headline larger and more prominent. Keep the rest of the layout unchanged.
또는 이렇게 바꿀 수도 있습니다.
Replace the right-side image with a browser window mockup showing a team dashboard.
랜딩 페이지 실습에서 꼭 느껴야 할 포인트가 하나 있습니다. 좋은 첫 화면은 정보가 많아서 좋은 것이 아니라, 시선이 자연스럽게 흘러서 좋다는 점입니다. 헤더에서 히어로로, 히어로에서 기능 소개로, 기능 소개에서 CTA로 흐름이 이어지면 이미 절반은 성공입니다.
예제 2: 대시보드 만들기
대시보드는 초보자에게 조금 무서워 보일 수 있습니다. 카드도 많고, 숫자도 많고, 차트도 들어가니까요. 그런데 오히려 그래서 좋은 연습이 됩니다. 화면 안에서 우선순위를 배치하는 감각을 가장 빨리 익힐 수 있기 때문입니다.
대표 예제로는 크립토나 분석 대시보드가 자주 쓰입니다. Stitch 실습 자료에서도 모바일 크립토 대시보드를 예로 들어, 요약 카드, 분포 차트, 트렌딩 목록, 뉴스 섹션, 하단 내비게이션 같은 요소를 하나의 화면에 넣는 방식을 보여 줍니다.2
예를 들어 Mobile 레이아웃에서 다음 프롬프트로 시작할 수 있습니다.
Design a mobile dashboard screen for a cryptocurrency tracking app called CryptoTrack. The screen should have a top navigation bar with the app name on the left and a notification bell on the right. Add a summary card showing total portfolio value and percentage change. Include a pie chart for portfolio distribution, a horizontal scrollable section for trending coins, a two-column grid for top gainers and losers, a line chart for price trends, a news feed section, and a bottom navigation bar. Use a dark theme with rounded corners and modern UI elements.
이 프롬프트는 실전 튜토리얼에서 많이 다루는 구조와 비슷합니다.2 생성 후에는 세 가지를 먼저 봐야 합니다. 요청한 구성요소가 빠지지 않았는지, 정보의 순서가 자연스러운지, 스타일이 일관된지입니다.
실전에서는 이런 일이 자주 생깁니다. 앱 이름을 왼쪽에 두라고 했는데 가운데 정렬될 수 있고, 파이 차트를 원했는데 막대 차트가 나올 수도 있습니다. 이것은 실패가 아니라, 아주 정상적인 첫 결과입니다.2
이럴 때는 짧고 정확하게 다시 말합니다.
Place the app name on the left side of the top navigation bar, not centered.
Use a circular pie chart, not a bar chart, for the portfolio breakdown.
Add icons to the bottom navigation for Home, Portfolio, Market, and Settings.
여기서 중요한 학습 포인트는 "대시보드는 많이 넣는 화면"이 아니라는 점입니다. 대시보드는 사용자가 가장 먼저 봐야 할 것을 가장 먼저 보여주는 화면입니다. 수치가 많다고 좋은 것이 아니라, 우선순위가 선명해야 좋습니다. 총 자산이 핵심이면 그것이 가장 눈에 띄어야 하고, 시세 변화가 핵심이면 차트가 더 앞에 와야 합니다.
즉, 대시보드 실습은 카드나 차트를 만드는 연습이 아니라, 정보에 줄 세우기를 시키는 연습입니다.
예제 3: 로그인 화면 만들기
로그인 화면은 가장 작지만, 의외로 가장 많은 실수를 하기 쉬운 화면입니다. 이유는 간단합니다. 작다고 만만하게 보기 때문입니다. 하지만 로그인 화면은 역할이 아주 명확합니다. 사용자가 망설이지 않고 들어오게 만드는 것. 그 이상도, 그 이하도 아닙니다.
그래서 로그인 화면 실습은 "덜어내는 감각"을 익히기에 좋습니다. 너무 많은 장식, 너무 많은 문구, 너무 많은 선택지는 오히려 방해가 됩니다.
예를 들어 커피 주문 앱의 로그인 화면을 만든다고 해봅시다.
Design a mobile login screen for a coffee ordering app. Include a logo at the top, a welcoming headline, email and password input fields, a primary sign-in button, a secondary button for Sign in with Google, a forgot password link, and a sign-up link at the bottom. Use warm brown colors, soft cream background, rounded input fields, and a cozy modern style.
이 프롬프트는 단순하지만 충분합니다. 화면의 목적이 또렷하고, 필요한 입력 요소와 링크가 빠지지 않았고, 분위기도 분명합니다.3
생성된 결과를 볼 때는 이런 질문이 좋습니다. 첫째, 입력창이 바로 눈에 들어오는가. 둘째, 주요 버튼이 가장 강하게 보이는가. 셋째, 보조 행동은 보이되 방해되지 않는가.
많은 초보자가 여기서 예쁜 일러스트를 크게 넣고 싶어 합니다. 물론 가능하지만, 로그인 화면에서는 종종 본론을 방해합니다. 사용자는 감상하러 온 것이 아니라 들어오러 왔기 때문입니다.
결과가 조금 밋밋하게 느껴진다면 전체를 갈아엎기보다 한 요소만 바꿔 보세요.
Make the primary sign-in button larger and use a deeper coffee brown color.
Keep the layout simple, but add a small coffee cup illustration above the headline.
이렇게 하면 로그인 화면이 얼마나 적은 요소로도 분위기를 만들 수 있는지 감이 옵니다. 그리고 곧 알게 됩니다. 작은 화면일수록 설명보다 위계가 중요하다는 사실을요.
예제 4: 모바일 앱 홈 화면 만들기
모바일 앱 홈 화면은 가장 실전적인 연습입니다. 앱을 열었을 때 사용자가 처음 만나는 화면이기 때문입니다. 여기서는 랜딩 페이지의 설득력, 대시보드의 정보 배치, 로그인 화면의 간결함이 조금씩 다 들어갑니다.
예를 들어 초보 운동 사용자를 위한 피트니스 앱 홈 화면을 만든다고 해보겠습니다.
Design a mobile home screen for a fitness tracking app for beginners. 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 chart, a featured workout card, and a bottom tab bar for Home, Workouts, Progress, and Profile. Use a bright and encouraging style with clean spacing, rounded cards, and green accent colors. Keep the layout simple and easy to scan.
이런 유형의 프롬프트는 홈 화면 실습에 매우 적합합니다. 사용자가 누구인지, 무엇을 보고 싶어 하는지, 어떤 정보가 중요한지가 모두 드러나기 때문입니다.3
생성 후에는 사용자의 첫 3초를 상상해 보세요. 앱을 열자마자 "오늘 얼마나 했는지"를 확인하고 싶은지, "오늘 할 운동"을 보고 싶은지, "전체 주간 흐름"을 보고 싶은지에 따라 상단 배치가 달라져야 합니다.
예를 들어 오늘의 행동 유도가 더 중요하다면 이렇게 바꿀 수 있습니다.
Move the featured workout card higher, directly below the daily progress ring.
반대로 데이터 확인이 중요하다면 이렇게 갈 수 있습니다.
Make the weekly activity chart more compact and keep the summary cards more prominent.
홈 화면 실습에서 꼭 기억할 점은, 홈 화면은 모든 기능의 목록이 아니라는 것입니다. 홈 화면은 사용자를 앱 안으로 부드럽게 밀어 넣는 첫 리듬입니다. 그래서 모든 메뉴를 다 보여주기보다, "지금 가장 해야 할 것"이 선명해야 합니다.
생성된 결과를 읽는 법
초보자는 프롬프트만 열심히 쓰고, 정작 결과를 읽는 법은 놓치기 쉽습니다. 그런데 Stitch 실력은 프롬프트를 쓰는 능력과 결과를 해석하는 능력이 함께 자랄 때 가장 빨리 늡니다.
첫 화면을 만들고 나면 아래 네 가지를 늘 확인해 보세요.
요청한 요소가 실제로 다 들어갔는가
가장 중요한 요소가 시각적으로 가장 먼저 보이는가
화면이 너무 빽빽하거나 너무 허전하지 않은가
스타일이 한 장 안에서 일관되게 유지되는가2
이 네 가지 중 하나라도 어긋나면, 수정 방향이 바로 보입니다. 예를 들어 요소가 빠졌다면 "추가" 문제이고, 중요한 것이 안 보이면 "위계" 문제이고, 너무 답답하면 "간격" 문제이고, 제각각이면 "테마 일관성" 문제입니다.
좋은 실습은 "다시 생성"을 반복하는 것이 아니라, 문제의 종류를 알아채는 연습입니다.
첫 화면을 망치는 흔한 습관
처음 Stitch를 쓸 때 많은 사람이 같은 함정에 빠집니다.
첫 번째는 한 화면에 너무 많은 기능을 넣으려는 습관입니다. 첫 실습인데도 랜딩, 회원가입, 대시보드, 설정까지 한 번에 만들고 싶어집니다. 하지만 그러면 학습 포인트가 흐려집니다. 이번 장에서는 반드시 한 장만 붙잡아야 합니다.
두 번째는 처음 결과가 마음에 안 든다고 전체를 새로 쓰는 습관입니다. 물론 새로 생성할 수도 있지만, 더 빨리 느는 방법은 이미 나온 결과를 읽고 한 요소씩 조정하는 것입니다. Stitch는 점진적 수정에서 강점을 보입니다.13
세 번째는 모든 수정 사항을 한 문장에 몰아넣는 습관입니다. "헤더를 바꾸고, 색을 바꾸고, 차트를 바꾸고, 간격도 줄이고, 버튼도 키워줘." 이런 문장은 속은 시원하지만 결과는 흔들리기 쉽습니다. 공식 프롬프트 가이드가 한 번에 한두 가지 변경에 집중하라고 하는 이유가 여기에 있습니다.3
네 번째는 보기 좋은 화면과 쓰기 좋은 화면을 혼동하는 습관입니다. 랜딩 페이지는 클릭을 유도해야 하고, 로그인 화면은 진입 장벽을 낮춰야 하고, 대시보드는 정보를 빨리 읽히게 해야 합니다. 화면의 직업을 잊는 순간, 예쁜데 어색한 시안이 나옵니다.
한 장을 완성했다면, 그다음에 할 일
첫 화면 하나를 만들었다면 그걸로 끝내지 말고 꼭 두 단계만 더 가 보세요. 이 두 단계에서 실력이 훅 늘어납니다.
첫째, 같은 목적의 화면을 다른 분위기로 다시 만들어 보세요. 예를 들어 같은 랜딩 페이지를 "professional" 대신 "playful", 같은 로그인 화면을 "cozy" 대신 "minimal"로 바꿔 보세요. 그러면 구조와 스타일이 어떻게 분리되는지 보이기 시작합니다.
둘째, 같은 화면을 조금 다른 우선순위로 다시 만들어 보세요. 예를 들어 피트니스 홈 화면에서 진행률 중심 버전과 추천 운동 중심 버전을 각각 만들어 보는 식입니다. 이때 비로소 "UI는 장식이 아니라 우선순위의 시각화"라는 사실이 피부로 이해됩니다.
그리고 여유가 있다면 결과를 Figma로 옮겨 보거나, 코드 출력을 확인해 보는 것도 좋습니다. Stitch는 생성된 디자인을 편집 가능한 디자인 자산이나 프런트엔드 코드로 이어 주는 흐름을 제공하므로, 화면 한 장을 만드는 경험이 실제 작업으로 연결되기 쉽습니다.12
마무리: 가장 좋은 공부법은 한 장을 끝내는 것이다
Text-to-UI는 이론보다 경험이 빨리 쌓이는 분야입니다. 랜딩 페이지 한 장, 대시보드 한 장, 로그인 화면 한 장, 모바일 홈 화면 한 장. 이 네 가지를 직접 만들어 보면, Stitch가 어디에서 강하고 어디에서 비틀거리는지, 어떤 프롬프트가 잘 먹히는지, 어떤 수정 방식이 덜 흔들리는지 몸으로 알게 됩니다.
중요한 것은 처음부터 완벽한 결과를 뽑는 것이 아닙니다. 한 장을 완성하는 습관을 들이는 것입니다. 목적을 정하고, 텍스트로 설명하고, 결과를 읽고, 한 번 더 다듬는 것. 이 리듬만 익히면 Stitch는 갑자기 어렵지 않게 느껴집니다.
그리고 바로 그 지점부터, 화면은 더 이상 "AI가 우연히 만들어 준 그림"이 아니라, 당신이 의도를 갖고 조정할 수 있는 작업물이 됩니다.
참고
1아이디어에서 앱으로: UI를 디자인하는 새로운 방법, Stitch 소개
2Design Mobile App UI with Google Stitch (Step-by-Step Guide)
이 노트는 보도·비평·교육·연구 목적으로 작성되었습니다. 저작권 문의가 있으시면 에서 알려주세요.