영감이 사라지기 전에
바로 만들어보세요

만들고 싶은 서비스를 한 줄로 적으면
이어지는 앱 화면들과 디자인 시스템이 같이 도출됩니다.

가벼운 설명 한 줄로

디자인 시스템이 자동으로 만들어지고

AI 티 없이 완성도 높은 흐름이 완성됩니다

How it works

설명 한 줄이 화면 세트가 되기까지

실제 캔버스에서 일어나는 순서 그대로예요. 방향을 묻고, 에이전트가 뼈대를 세워 블록을 하나씩 얹고 그림까지 그린 뒤, 디자인 시스템으로 다듬어요.

Design system

디자인 시스템을 쉽게 업데이트해 보세요

캔버스의 디자인 시스템 패널 그대로예요. 색·스타일·글꼴·글자 크기를 바꾸면 화면 세 장이 같이 바뀝니다.

디자인 시스템모든 플로우

브랜드 컬러

그래픽 스타일

타이포그래피

14pt
AA

형태 및 밀도

16px
홈
테이블콜
내 주변 맛집 검색
지금 줄 서는 곳더보기
연남 화덕피자대기 12팀 · 예상 40분3분 전
성수 마제소바대기 5팀 · 예상 15분방금 전
홈검색찜마이
맛집 상세
성수 화덕 피자이탈리안 · 서울 성동구 성수동영업 중 · 22:00까지
4.8후기 280개
7팀지금 대기
25분예상 대기
대표 메뉴
마르게리타16,000원
웨이팅 시작
웨이팅 알림
웨이팅 알림
내 앞 3팀예상 입장 12분 후
약 12분예상 대기 시간2명인원
입장까지 진행 상황
접수입장
곧 입장 순서입니다. 매장 근처에서 대기해 주세요
가게명성수 화덕 피자
접수 시간오후 6:32
알림 설정
입장 알림 켜기
Features

Draft의 핵심 기능

설명을 화면으로 바꾸고, 만드는 과정을 보여 주고, 쓸수록 내 취향에 가까워져요.

  • 01

    내 선호 디자인 학습

    시안을 더 많이 만들수록 나의 취향을 학습해 더 만족스러운 시안을 받아볼 수 있어요.

  • 02

    Auto Flow

    서비스 설명 한 줄로 이어지는 화면 흐름을 만들어줘요.

    설명 한 줄로 만든 맛집 웨이팅 앱의 메인 서비스 플로우, 이어지는 화면 세 장
  • 03

    추가 인터뷰 기능

    더 완성도 높은 결과물을 위해 방향성을 물어보고 시안에 반영해요.

  • 04

    자체 에이전트 시스템

    AI 모델을 사용해 컴포넌트 배치 및 내용을 실시간으로 생성해요.

  • 05

    AI 이미지 생성

    이미지가 필요한 영역에 화면 맥락에 맞는 사진이나 일러스트를 자동으로 만들어줘요.

  • 06

    디자인 업데이트 채팅

    자연어로 업데이트 요청을 입력하면 분석해 캔버스의 디자인을 수정해줘요.

  • 07

    레퍼런스 클론

    레퍼런스 화면 이미지를 시안에 넣으면 레이아웃을 파악해 내 디자인 시스템에 맞게 컴포넌트로 만들어줘요.

    가져온 일정 화면과, 그 구조를 읽어 다시 만든 화면
Who it's for

이런 분들께 추천드려요

혼자 일하는 프로덕트 디자이너

결이 맞는 화면 시안을 빠르게 뽑아요.

직접 서비스를 만드는 바이브코더

코딩 전에 화면 흐름과 카피를 정리해요.

기획자·PM

글로 쓴 기획을 바로 화면으로 바꿔요.

FAQ

자주 묻는 질문

Draft는 어떤 도구인가요?

만들고 싶은 서비스를 한 줄로 적으면 홈·상세·마이페이지처럼 이어지는 앱 화면 여러 장과, 그 화면에 맞는 디자인 시스템을 함께 만들어 주는 웹 디자인 에디터예요. 만든 화면은 캔버스에서 말로 고치거나 직접 편집할 수 있고, 피그마·HTML·PNG로 내보내 다음 작업으로 바로 이어 갈 수 있어요.

비용이 드나요?

베타 기간에는 모든 기능을 무료로 쓸 수 있어요. 다만 AI 기능에는 한 사람당 하루 사용 한도가 있고, 한도는 매일 자정(한국 시간)에 다시 채워져요. 화면을 직접 고치거나 내보내는 것처럼 AI를 쓰지 않는 작업은 한도와 상관없어요.

디자인을 몰라도 쓸 수 있나요?

네. 설명에 빠진 것(누가 쓰는지, 원하는 분위기, 앱 이름)이 있으면 Draft가 먼저 선택지로 물어봐요. 고르기만 하면 화면 구성과 디자인 시스템이 정해지고, 색·그래픽 스타일·글꼴·글자 크기·모서리는 패널에서 눌러 바꾸면 모든 화면에 함께 반영돼요.

피그마로 가져갈 수 있나요?

네, 플러그인 없이 돼요. 캔버스에서 프레임을 골라 복사한 뒤 피그마에 붙여넣으면 오토 레이아웃이 살아 있는 레이어로 들어가요. 여러 프레임을 한 번에 골라 옮길 수 있고, HTML이나 PNG로 내려받을 수도 있어요.

레퍼런스 이미지를 그대로 따라 그리나요?

아니요. 참고 화면에서는 블록의 종류와 순서 같은 구조만 읽어요. 색·글꼴·카피는 내 디자인 시스템과 서비스 설명을 따르고, 첨부한 이미지는 참고로만 읽을 뿐 캔버스에 그대로 올리지 않아요.

어떤 AI를 쓰나요?

화면 구성과 카피, 레퍼런스 이미지 판독에는 Anthropic의 Claude를, 화면에 들어가는 사진과 일러스트 생성에는 Google의 Gemini를 써요. 어떤 블록을 어떤 순서로 놓을지는 실제 앱 화면 1,300여 장을 분석한 분포를 기준으로 삼아요.

모바일에서도 쓸 수 있나요?

열어 볼 수는 있지만 캔버스는 PC 화면에 맞춰 만들었어요. 화면을 고르고 고치는 작업이 많아서 편집은 PC 브라우저에서 하는 걸 권해요. 설치할 것은 없어요.

첫 화면 세트,
지금 만들어 보세요

설치도 결제도 필요 없어요.