화면설계 갤러리 — 남의 와이어를 먼저 보고 시작한다
말은 사람마다 다른 화면을 부릅니다. 공개 와이어를 먼저 보고, 내 화면은 로그인 뒤에 엽니다. 샘플 시작은 화면 복사가 아닙니다.
말은 사람마다 다른 화면을 부릅니다. 같은 「중고 앱 만들어 주세요」라도 홈을 그리는 사람과 채팅을 그리는 사람이 갈립니다. 그래서 화면설계는 빈 캔버스부터 열지 않습니다. 공개 와이어를 먼저 봅니다.
열람과 시연은 로그인 없이 됩니다. 「내 화면으로 시작하기」만 로그인이 필요합니다. 샘플의 「내 프로젝트로 시작하기」는 화면을 복사하지 않고, 아이디어 인터뷰 시드만 넣습니다.
이 글은 2026년 9월, 라이브 화면설계 갤러리를 직접 눌러 본 정찰 기록입니다. 홍보 문장을 옮기지 않고, 되는 일과 안 되는 일을 같이 남깁니다.
공개된 서비스 유형 열 가지
갤러리 카드는 IA 만들기와 같은 열 가지입니다. 이름도 한 줄 설명도 같습니다. 차이는 열어 보는 대상이 메뉴 구조가 아니라 화면이라는 점이에요.
| 서비스 유형 | 한 줄 | 공개 열람 |
|---|---|---|
| 중고 거래 앱 | 한 동네에서 중고를 올리고 만나서 사고판다 | 열람하기 |
| 과외 매칭 앱 | 과목·학년·가능 시간에 맞는 선생님을 찾고 수업을 확정한다 | 열람하기 |
| 미용실 예약 앱 | 디자이너의 빈 시간을 보고 컷·펌 예약을 잡는다 | 열람하기 |
| 필라테스 예약 앱 | 센터 수업 시간을 고르고 잔여 횟수로 자리를 잡는다 | 열람하기 |
| 펫시터 매칭 앱 | 날짜와 반려동물 종류로 시터를 고르고 돌봄을 맡긴다 | 열람하기 |
| 병원 예약 앱 | 동네 의원 진료를 고르고 빈 시간에 예약한다 | 열람하기 |
| 동네 배달 앱 | 근처 가게 음식을 시키고 라이더가 집까지 가져온다 | 열람하기 |
| 공유 오피스 예약 앱 | 좌석과 회의실을 시간으로 골라 결제하고 체크인한다 | 열람하기 |
| 출장 청소 앱 | 방문 시간에 집을 청소하고 평수와 범위로 예약한다 | 열람하기 |
| 학원 상담 예약 앱 | 학부모가 상담·체험 시간을 앱에서 고르고 예약한다 | 열람하기 |
카드 이름은 마케팅 카피가 아닙니다. 실제 공개 프로젝트 이름이에요. 내가 연 것은 목록 맨 위의 중고 거래 앱이었습니다.
실사용
버튼을 세 개만 기억하면 됩니다. 열람하기, 시연 시작, 내 화면으로 시작하기. 같은 갤러리에 있어도 권한이 다릅니다.
열람·시연은 로그인 없이
열람하기는 로그인 없이 열립니다. 주소는 /ui-planning/public/ 뒤에 토큰이 붙는 공개 링크입니다. 중고 거래 앱을 열어 보니 헤더에 「6개 화면」, 「읽기 전용」이 있었고, 점 격자 캔버스 위에 화면이 iframe으로 붙어 있었습니다. 홈, 글 목록, 글 상세, 글 올리기, 채팅, 내 글. 각 화면 위에 이름과 360 × 780이 적혀 있어요.
시연 시작은 핫스팟이 있는 프로젝트에만 뜹니다. 내가 연 중고 거래 샘플에는 그 버튼이 없었습니다. 화면은 보이되, 눌러 이동하는 시연까지는 이 샘플의 범위가 아니었습니다. 열람과 시연을 같은 말로 묶지 마세요. 열람은 화면을 보는 일, 시연은 핫스팟을 따라 움직이는 일입니다.
내 화면은 로그인
히어로의 「내 화면으로 시작하기」는 /ui-start/new 로 갑니다. 로그인하지 않으면 로그인 화면으로 떨어지고, 빨간 안내가 뜹니다. 「화면을 시작하려면 로그인해 주세요.」 이 문장은 카피가 아니라 실제 플래시입니다.
로그인한 뒤에는 내 화면설계 프로젝트가 열립니다. 없으면 새 프로젝트를 만듭니다. 아이디어 인터뷰처럼 게스트 쿠키 14일로 편집을 이어 주는 길이 아닙니다. 화면을 그리는 작업은 계정에 붙습니다.
샘플 CTA는 인터뷰 시드
공개 화면 위의 「내 프로젝트로 시작하기」는 화면 복사가 아닙니다. 누르면 기획 인터뷰 시작으로 가고, 참고 템플릿 이름만 시드로 넣습니다. 코드에 적힌 한 줄이 정직합니다. 「화면은 복사되지 않습니다.」
와이어를 가져가 고치려다 이 버튼을 누르면, 인터뷰 화면이 나옵니다. 속은 게 아니라 버튼이 그렇게 생긴 겁니다. 화면을 내 것으로 붙이는 포크가 아니라, 그 유형으로 아이디어를 묻는 입구예요.
나오는 산출물
편집은 로그인 뒤에 합니다. 그때 나오는 것도 화면만이 아닙니다. 순서는 이렇습니다.
- 화면 HTML — 화면 한 장이 HTML 한 장입니다. 사용자 카피에서는 페이지·프레임이라고 쓰지 않습니다.
- 기능정의 — 화면 위에 번호표를 붙이고, 오른쪽에 화면·동작·유효성을 적습니다.
- 개발 패키지 ZIP — 화면 HTML과 기능정의 MD, README가 한 파일로 묶입니다. 운영 코드가 아니라 기획 산출물입니다.
- 공개 링크 — 소유자가 켜면 /ui-planning/public/토큰 주소가 나옵니다. 비로그인 열람 전용이고, 편집은 안 됩니다.
- Figma 경로 — 내보내기 메뉴의 Figma입니다. 캡처 페이지에서 「피그마로 보내기」를 누른 뒤, 피그마 캔버스에 붙여 넣습니다. 컴포넌트 라이브러리가 자동으로 맞춰지지는 않습니다.
ZIP을 열어 바로 배포하는 산출물이 아닙니다. 개발 폴더로 넘기는 기획 묶음이에요. 그 한계를 먼저 말하면, 오해가 줄어듭니다.
되는 것 vs 안 되는 것
- 되는 것. 로그인 없이 열 가지 화면을 열람한다. 핫스팟이 있으면 시연한다. 로그인하면 내 화면을 연다. 화면 HTML, 기능정의, 개발 패키지, 공개 링크, Figma 경로까지 이어진다. 샘플 CTA로 인터뷰를 시작한다.
- 안 되는 것. 로그인 없이 내 화면을 그린다. 샘플 버튼으로 화면을 포크한다. 무료 플랜에서 프로젝트 2개, 화면 21장을 쓴다. 개발 패키지를 운영 서비스로 착각한다. 핫스팟 없는 샘플에서 시연 시작을 찾는다.
무료 플랜은 프로젝트 1개, 화면 20장입니다. 카탈로그 숫자 그대로예요. 스무 장을 넘기면 범위가 아니라 소원 목록입니다. 더 필요하면 플랜을 올리거나, 화면을 빼는 쪽이 맞습니다.
자주 묻는 질문
샘플 화면이 내 프로젝트로 붙나요
붙지 않습니다. 「내 프로젝트로 시작하기」는 인터뷰 시드입니다. 화면 HTML이 복사되지 않습니다. 와이어를 내 캔버스로 가져가고 싶다면, 로그인 뒤 내 화면에서 다시 그리는 쪽이 맞아요. 유형을 참고하는 일과 파일을 가져가는 일을 같은 버튼에 넣지 않은 겁니다.
시연 시작이 안 보여요
핫스팟이 없는 공개 화면에는 버튼이 없습니다. 중고 거래 앱이 그 경우였습니다. iframe 화면은 보이는데 시연만 없는 상태예요. 열람은 됐고, 눌러 이동하는 시연은 그 프로젝트의 범위가 아니었습니다.
지금 화면설계에서 공개 와이어를 먼저 보세요. 아이디어가 한 줄이면 기획 인터뷰로 이어지고, 질문은 아이디어 인터뷰에 정리해 두었습니다. 화면 장수를 줄이려면 MVP 화면 범위 정하는 법을 같이 보면 됩니다. 직접 만들고 싶어지면 상담에서 이어집니다. 이 글은 성공담 모음이 아니라 정찰 기록입니다. 아이디어 한 줄이면 시작됩니다.
