와이어프레임 106개를 한눈에 보는 화면 설계 보는 법
화면 설계 예시는 와이어프레임 106개를 스크롤로 볼 수 있어요. 가입하지 않아도 전체가 열려요.
화면마다 생김새와 기능 정의가 같이 있어서, 개발 전에 화면을 눈으로 확인할 수 있어요.
IA로 화면 목록을 정리하고 나면 다음이 궁금해져요. 각 화면이 실제로 어떻게 생겼는지 보고 싶어져요.
그럴 때는 화면 설계 예시를 열어봐요
화면설계는 3단계 메뉴에서 봐요
플랜디 AI 기획 메뉴에서 「3 화면설계」 탭을 눌러요. IA 메뉴와 구성이 같아요.
위에 설명과 「가입하고 화면설계 시작하기」 버튼, 아래에 예시 기획 갤러리가 있어요. 총 17개 자료 중에서 보고 싶은 것을 골라요.
「동네 카페 사전 주문·픽업 앱 화면설계」 예시를 열면 「106개 화면」이라고 적혀 있어요. 아래로 스크롤하면 와이어프레임 카드가 쭉 이어져요.
가입 없이 끝까지 볼 수 있어요
보기 방식을 골라요
화면 위에는 보기 방식 토글이 있어요. 「UI만 보기」와 「UI + 기능정의」 두 가지예요.
| 보기 방식 | 보여주는 것 |
|---|---|
| UI만 보기 | 와이어프레임 화면만 크게 보여요 |
| UI + 기능정의 | 화면 옆에 기능 정의 패널이 함께 보여요 |
처음에는 「UI만 보기」로 전체 흐름을 봐요.
화면이 어떻게 이어지는지 파악한 뒤에 「UI + 기능정의」로 각 화면의 설명을 읽어요. 기능 정의에는 화면의 역할과 동작이 적혀 있어요.
화면 카드를 읽어요
화면 카드는 위에서부터 이렇게 읽어요. 카드 위에는 화면 이름과 해상도가 적혀 있어요.
「공통 레이아웃 — 판매자 (PC)」처럼요. PC 화면은 1920 × 1080, 모바일 화면은 360 × 640처럼 크기가 표시돼요.
와이어프레임은 실제 UI 형태로 그려져 있어요. 사이드바 메뉴, 버튼, 입력창, 체크박스 같은 요소가 자리 잡고 있어요.
뼈대만 보고 흐름을 확인하는 용도예요
색이나 글꼴은 입혀지지 않은 상태예요.
모바일 화면도 같이 있어요. PC와 모바일을 오가며 보면 반응형 흐름이 그려져요.
자주 묻는 질문
왜 색이 안 입혀져 있나요?
와이어프레임은 뼈대를 보는 용도예요. 색과 글꼴은 나중에 입혀요.
뼈대가 먼저 서야 흐름이 보여요. 흐름이 보이면 화면을 고치기 쉬워요.
내 서비스의 화면 설계는 어떻게 만드나요?
예시를 보는 것은 가입 없이 되지만, 직접 만드는 것은 가입이 필요해요.
IA까지 정리된 상태에서 시작하면 화면이 술술 나와요. IA가 화면 설계의 재료예요.
PC와 모바일을 따로 봐야 하나요?
예시에는 두 가지가 함께 있어요. PC 화면과 모바일 화면을 오가며 보면 돼요.
내 서비스도 두 가지를 함께 보면 흐름이 맞아요.
한계
예시로 보는 화면 설계는 참고용이에요. 내 서비스의 화면을 직접 설계하는 것은 가입이 필요해요.
예시를 보면서 「우리 서비스도 이 정도면 되겠다」는 감을 잡는 데 써요.
플랜디는 25년차 기획자가 만든 AI 기획 도구예요. 화면까지 눈에 보이면 기획은 개발에 넘길 준비가 돼요. 넘기기 전에 한 장으로 정리하는 게 남아요.
오늘 내용 정리
- 화면 설계 예시는 와이어프레임 106개를 가입 없이 볼 수 있어요.
- 「UI만 보기」로 흐름을 보고 「UI + 기능정의」로 설명을 읽어요.
- PC와 모바일을 오가며 보면 반응형 흐름이 그려져요.
막혔다면 인터뷰부터
어디서부터 손대야 할지 모르겠다면 플랜디의 AI 인터뷰에서 질문에 답하며 정리해 보세요.
지금은 오픈 기념 이벤트 기간이에요. 2026년 10월 31일 23시 59분까지 이벤트 페이지에서 기획권 3개에 응모할 수 있어요.
