먼저 디자인: 만들기 전에 디자인 고르기
핵심 요약프로젝트 페이지에서 먼저 디자인을 켜고 만들기를 누르세요. 1분 안에 아이디어를 담은 완성본 같은 첫 화면 세 개가 각기 다른 스타일로, 데스크톱과 휴대폰 크기로 나타납니다. 더 불러오거나, 변형안을 보거나, 색상·모서리·글꼴을 세부 조정하거나, 말로 조정을 요청하세요. 마음에 드는 화면에서 만들기를 누르면 앱 전체가 그 디자인을 따릅니다.
디자인을 짐작으로 정한 첫 빌드는 처음부터 다시 만들게 되는 경우가 가장 많습니다. 먼저 디자인은 앱을 만들기 전에 아이디어를 담은 완성된 첫 화면 여러 개를 보여 줍니다. 빠른 AI 모델 여러 개가 동시에 그립니다. 마음에 드는 화면을 고르면 그 디자인으로 앱 전체를 만듭니다. 색상, 글꼴, 모서리, 사진을 배치하는 방식까지 모두 따릅니다.
먼저 디자인은 어떻게 사용하나요?
섹션 제목: “먼저 디자인은 어떻게 사용하나요?”-
프로젝트 페이지의 프롬프트 입력란에 앱을 설명하세요.
-
먼저 디자인을 켜세요. 버튼이 주황색으로 바뀌고, 입력란 테두리와 만들기 버튼도 주황색이 됩니다. 입력란 아래 안내에는 “Enter 디자인하기”가 표시됩니다.
-
만들기를 누르세요. 먼저 디자인 창이 열립니다. 아직 아무것도 만들어지지 않았습니다.
-
화면이 나타나는 것을 지켜보세요. 가장 먼저 완성된 화면이 가운데 크게 표시되고, 나머지는 아래 썸네일에 채워집니다. 썸네일을 클릭하면 그 화면이 크게 표시됩니다.
-
마음에 드는 화면이 있으면 앱 이름이 붙은 (앱 이름) 만들기 버튼을 누르세요. 그 디자인으로 프로젝트가 만들어지고 첫 빌드가 시작됩니다.
화면에 보이는 것은 무엇인가요?
섹션 제목: “화면에 보이는 것은 무엇인가요?”- 맨 위에는 요청 내용과 시계가 있습니다. 화면을 그리는 동안은 초가 표시되고, 끝나면 만들 준비 완료가 표시됩니다.
- 가운데 큰 화면에는 화면 하나가 크게 보입니다. 각 화면은 와이어프레임이 아니라 내가 쓴 말을 그대로 담은 완성된 페이지입니다. 사람들이 찾아와 둘러보고, 예약하고, 구매하는 ‘사이트’는 랜딩 페이지로 그리고, 업무를 처리하려고 여는 ‘도구’는 실제 같은 내용으로 가득 찬 주 작업 화면으로 그립니다.
- 썸네일에는 모든 화면이 제품 이름, 스타일(예: “부드러운 파스텔”, “절제된 고급스러움”, “스위스 미니멀”)과 함께 표시되고, “3개 준비됨 · 0개 그리는 중” 같은 개수도 보입니다. 화면이 보이기 시작하면 다 그려지기 전이라도 고를 수 있습니다.
- 데스크톱 / 휴대폰을 바꾸면 같은 페이지를 컴퓨터 너비나 휴대폰 틀 안에서 볼 수 있습니다. 모든 화면은 두 크기 모두에서 작동하도록 그려집니다.
첫 화면이 나타나기 전에는 가운데에 진행 상황을 알려 주는 짧은 안내가 표시됩니다. 예: “요청 내용 읽는 중”, “아직 앱을 만든 것은 아닙니다. 현재는 디자인만 보여 줍니다.” 사이트에 사진이 필요하면 MonstarX가 사진 몇 장을 한 번만 그리고, 모든 화면이 같은 사진을 사용합니다.
다른 디자인도 더 볼 수 있나요?
섹션 제목: “다른 디자인도 더 볼 수 있나요?”- 3개 더 불러오기를 누르면 다른 스타일의 디자인 방향 세 개가 더 나타납니다(처음 화면을 보는 동안 미리 그려 둡니다). 최대 9개까지 볼 수 있습니다.
- 변형안 5개 보기를 누르면 가운데 화면을 다섯 가지로 바꿔 그립니다. 같은 제품, 같은 문구, 같은 섹션을 “유리”, “잉크”, “밤”, “에디토리얼”, “시그널” 다섯 가지 새 스타일로 보여 줍니다. 변형안은 새 묶음으로 열리며, 첫 썸네일은 원본입니다. 묶음 사이는 맨 위 화살표로 이동하세요. 변형안은 한 세션에 세 번까지 요청할 수 있습니다.
화면은 어떻게 바꾸나요?
섹션 제목: “화면은 어떻게 바꾸나요?”세부 조정: AI 없이 바로 적용됩니다. 가운데 화면 옆 패널에서 페이지 전체를 한 번에 바꿉니다.
- 주요 색상: 화면의 원래 색상부터 시작하는 견본 아홉 개, 또는 원하는 색상을 직접 고를 수 있습니다.
- 모서리: 각진, 살짝 둥근, 둥근.
- 타이포그래피: 글꼴 조합 열 가지.
썸네일도 함께 바뀌고, 빌드에도 세부 조정한 내용이 반영됩니다. 세부 조정 초기화를 누르면 원래대로 돌아갑니다.
조정: “더 따뜻하게”, “더 어둡게”, “우리 브랜드의 초록색 #2F6B4F 사용”처럼 바꾸고 싶은 점을 말로 적고 조정을 누르세요. 선택한 화면이 요청을 반영해 다시 그려지고, 원래 화면 옆에 요청 내용이 설명으로 붙은 채 놓입니다. 조정은 한 세션에 여섯 번까지 할 수 있습니다.
만들기를 누르면 어떻게 되나요?
섹션 제목: “만들기를 누르면 어떻게 되나요?”MonstarX가 선택한 화면의 이름으로 프로젝트를 만들고, 첨부 파일을 올리고, 그 화면(데스크톱과 휴대폰 크기)을 프로젝트의 디자인으로 저장한 뒤 첫 빌드를 시작합니다. MonstarX는 이 디자인을 따라 앱을 만듭니다.
- 디자인(색상, 글꼴, 모서리, 밝은 테마 또는 어두운 테마)이 앱의 모든 페이지에 적용됩니다.
- 샘플이 보여 주는 페이지(사이트의 홈페이지 또는 도구의 주 화면)는 샘플의 레이아웃과 순서를 따르며, MonstarX는 만드는 동안 결과물을 샘플과 비교합니다.
- 페이지와 기능은 여전히 내 설명에서 나옵니다. 샘플은 페이지 하나만 보여 주지만, 앱에는 요청한 모든 것이 들어갑니다.
- 샘플 속 사진은 앱의 이미지로 그대로 쓰입니다.
대화의 첫 메시지에는 이름, 스타일, 색상이 담긴 먼저 디자인 칩이 붙습니다. 클릭하면 선택한 화면을 데스크톱과 휴대폰 너비로 크게 볼 수 있습니다.
건너뛰거나 닫을 수 있나요?
섹션 제목: “건너뛰거나 닫을 수 있나요?”- 건너뛰고 지금 만들기를 누르면 디자인을 고르지 않고 만듭니다. 먼저 디자인을 끈 것과 같습니다.
- 창을 닫으면(×, Esc 또는 창 바깥 클릭) 먼저 확인을 요청합니다: “‘먼저 디자인’을 닫을까요? 이 세션의 모든 디자인, 변형안 및 조정 사항이 사라집니다.” 설명과 파일은 프롬프트 입력란에 그대로 남습니다.
- 같은 설명으로 페이지를 새로고침하면 같은 화면이 다시 나타나고, 아직 다 그리지 못한 화면만 새로 그립니다.
키보드: ←와 → 또는 1~9로 화면 사이를 이동하고, Enter로 만듭니다.
먼저 디자인도 크레딧을 쓰나요?
섹션 제목: “먼저 디자인도 크레딧을 쓰나요?”네. 화면을 그리는 것도 AI 작업이므로 다른 요청처럼 요금제 사용량에서 차감됩니다. 사용량에는 앱에 없음 아래에 “먼저 디자인”으로 표시됩니다. 이때 쓰는 모델은 내가 고르는 것이 아니므로 프리미엄 모델 한도에서는 차감되지 않습니다. 변형안을 모두 본 세션은 처음 세 개 중에서 고른 세션보다 사용량이 많습니다. 요금제에 남은 사용량이 없으면 창에서 화면을 그릴 수 없습니다.
자주 묻는 질문
섹션 제목: “자주 묻는 질문”샘플이 앱에 들어갈 페이지를 결정하나요?
아니요. 샘플은 디자인과, 샘플이 보여 주는 페이지 하나의 레이아웃을 결정합니다. 페이지와 기능은 내 설명에서 나오고, 둘이 다를 때는 언제나 설명이 우선합니다.
로고나 마음에 드는 사이트의 스크린샷을 첨부해도 되나요?
네. 요청에 첨부한 이미지(최대 세 장)는 디자인 모델에 전달되고, 모델은 그 이미지에서 색상과 분위기를 가져옵니다.
먼저 디자인 버튼이 왜 안 보이나요?
먼저 디자인은 로그인한 상태의 프로젝트 페이지 프롬프트 입력란에만 있고, 홈페이지에는 없습니다. 글 없이 문서만 첨부한 요청은 평소처럼 바로 만들어지니, 디자인의 바탕이 될 문장을 한 줄 적으세요.
앱을 만든 뒤에 디자인을 바꿀 수 있나요?
네. 대화에서 요청하거나(예: “버튼을 둥글게 하고 초록색을 더 진하게 바꿔 주세요”) 편집 모드를 사용하세요.
화면을 열어도 안전한가요?
네. 모든 화면은 표시하기 전에 정리됩니다. 스크립트와 외부 콘텐츠를 제거하므로 화면은 보여 주는 기능만 합니다.