화면 흐름과 와이어프레임 먼저 잡기
디자인 없이 바로 만들면 화면은 생겨도 사용자가 어디서 무엇을 해야 하는지 흐려집니다.
먼저 이것만 이해하면 됩니다
한 번에 외우지 말고, 표시된 흐름대로 읽고 바로 아래 프롬프트와 실습으로 넘어가세요.
디자인은 색보다 흐름이 먼저입니다
초보자가 디자인을 생각하면 색상, 그림자, 폰트부터 떠올리기 쉽습니다. 하지만 앱을 만들기 전 디자인에서 더 중요한 것은 사용자가 어떤 화면을 보고, 무엇을 누르고, 다음에 어디로 가는지입니다.
와이어프레임은 대략적인 박스 그림입니다. 완성된 시안이 아니어도 괜찮습니다. 제목 영역, 입력칸, 버튼, 결과 목록처럼 화면의 자리를 정해두면 AI에게 훨씬 구체적으로 요청할 수 있습니다.
첫 화면은 사용자의 첫 행동을 안내해야 합니다
첫 화면에는 사용자가 바로 해야 할 일이 보여야 합니다. 공부 기록 앱이라면 '오늘 공부한 내용을 기록하세요'와 입력칸, 저장 버튼이 먼저 보여야 합니다. 설명이 길고 버튼이 숨겨져 있으면 사용자는 시작하지 못합니다.
AI에게 화면을 요청할 때도 첫 행동을 말해주세요. '첫 화면에서 사용자가 바로 메모를 입력하고 저장할 수 있게 해줘'라고 쓰면, AI가 장식보다 사용 흐름을 중심에 두기 쉬워집니다.
컴포넌트는 반복되는 작은 조각입니다
카드, 버튼, 입력칸, 목록 항목처럼 반복되는 화면 조각을 컴포넌트라고 생각하면 됩니다. 처음부터 어려운 구조를 외울 필요는 없습니다. 같은 모양이 반복되면 하나의 조각으로 볼 수 있다는 감각이면 충분합니다.
이 감각이 있으면 AI에게도 '기록 카드 컴포넌트를 만들고, 제목과 날짜와 완료 버튼을 넣어줘'처럼 말할 수 있습니다. 디자인 흐름은 개발을 쉽게 만드는 준비운동입니다.
디자인은 화면 흐름부터 잡습니다
공부 기록 앱의 첫 화면, 입력 화면, 결과 화면을 먼저 나누면 AI에게 화면을 훨씬 정확히 요청할 수 있습니다.
- 01 첫 화면
사용자가 바로 무엇을 해야 하는지 보입니다.
첫 행동을 정합니다 - 02 입력 화면
기록할 내용과 저장 버튼 위치를 정합니다.
입력 위치를 잡습니다 - 03 결과 화면
저장된 기록이 어디에 보일지 정합니다.
결과 위치를 정합니다 - 04 화면 이동
사용자가 누르는 순서를 짧게 연결합니다.
핵심 정리
디자인 준비는 예쁜 색을 고르는 일이 아니라 화면의 순서와 정보 배치를 정하는 일입니다. 와이어프레임은 대략적인 박스와 흐름만으로도 충분합니다.
ChatGPT에게 이렇게 시키기
그대로 복사한 뒤, ChatGPT 입력창에 붙여넣고 내 상황에 맞는 단어만 바꾸세요.
ChatGPT는 질문을 입력하면 답을 주는 AI 채팅 서비스입니다. chatgpt.com 열기
- 현재 상황 만드는 것, 파일, 지금 막힌 점을 먼저 씁니다.
- 원하는 결과 AI가 끝내야 할 일을 한 가지로 좁힙니다.
- 확인 기준 완료 후 확인 방법과 바꾸면 안 되는 것을 붙입니다.
복사한 뒤 ChatGPT 입력창에 붙여넣으세요. Claude를 써도 되지만 처음엔 ChatGPT 하나로 따라오세요.
- 버튼을 누릅니다.
- ChatGPT 입력창에 붙여넣습니다.
- 내 상황에 맞게 단어만 바꿉니다.
나는 바이브코딩을 준비하는 초보자이고, 지금 "화면 흐름과 와이어프레임 먼저 잡기" 단계를 배우는 중입니다. 내 목표는 작은 웹앱을 무리 없이 만들기 위해 디자인 없이 바로 만들면 화면은 생겨도 사용자가 어디서 무엇을 해야 하는지 흐려집니다.
내 앱의 첫 화면, 입력 화면, 결과 화면을 텍스트 와이어프레임으로 그려줘. 각 화면에서 사용자가 눌러야 할 버튼도 표시해줘. 답변은 초보자가 바로 따라 할 수 있게 1단계부터 순서대로 써주세요. 어려운 용어가 나오면 괄호 안에 짧게 풀어서 설명해주세요.
한 번에 너무 많은 기능을 제안하지 말고, 이번 단계에서 꼭 필요한 것과 나중에 해도 되는 것을 나눠주세요. 코드나 명령어가 필요하다면 어디에 붙여 넣는지, 어떤 파일을 봐야 하는지도 함께 알려주세요.
마지막에는 내가 직접 확인할 체크리스트를 만들어주세요. 특히 첫 화면에서 사용자가 할 일을 하나로 보이게 합니다., 화면 이동 순서를 3단계 이하로 적습니다., 입력, 버튼, 결과 영역을 구분합니다. 항목을 기준으로 결과가 맞는지 판단할 수 있게 해주세요.
내가 확인할 것
AI가 만든 결과를 그대로 믿지 말고, 아래 항목을 직접 보고 맞는지 확인하세요.
- 첫 화면에서 사용자가 할 일을 하나로 보이게 합니다.
- 화면 이동 순서를 3단계 이하로 적습니다.
- 입력, 버튼, 결과 영역을 구분합니다.
실습
종이에 세 개의 박스만 그려 첫 화면, 입력 화면, 결과 화면을 표시해보세요.
- 첫 화면에 사용자가 바로 볼 문장을 적습니다.
- 입력해야 하는 칸과 누를 버튼을 적습니다.
- 결과가 어디에 보일지 박스로 표시합니다.
예시: 첫 화면에는 `오늘의 공부를 기록하세요`가 보입니다. 입력 화면에는 내용 입력칸과 저장 버튼이 있습니다. 결과 화면에는 저장된 기록 목록이 보입니다.
- 첫 화면: `오늘의 공부를 기록하세요` 제목, 공부 내용 입력칸, 저장 버튼
- 목록 영역: 날짜, 공부 내용, 완료 체크가 보이는 기록 카드
- 빈 상태: 기록이 없을 때 `오늘 첫 기록을 남겨보세요` 문구 표시
- 첫 화면: 여행 이름, 준비물 입력칸, 추가 버튼
- 목록 영역: 준비물 이름, 체크박스, 삭제 버튼
- 진행 표시: `12개 중 8개 준비 완료`처럼 현재 상태 표시
- 첫 화면: 회의 제목 입력칸, 메모 입력칸, 저장 버튼
- 목록 영역: 회의 제목, 날짜, 할 일 개수
- 상세 영역: 저장된 메모 내용과 할 일 목록
이번 단계 결과물
공통 예제인 공부 기록 앱 기준으로, 다음 단계에 가져갈 내용을 남깁니다.
- 공부 기록 앱 첫 화면: 제목, 공부 내용 입력칸, 저장 버튼
- 공부 기록 앱 목록 영역: 날짜, 내용, 삭제 버튼이 있는 기록 카드
- 공부 기록 앱 빈 상태: `오늘 첫 기록을 남겨보세요` 문구
답을 고른 뒤 `퀴즈 확인`을 눌러주세요. 이전에 통과했다면 선택했던 답과 점수가 그대로 복원됩니다.