# Design Mode (/ko/docs/verdent-cloud/create/design-mode)

> 텍스트 브리프로 먼저 시각적 방향을 정한 다음, 승인된 방향을 바탕으로 작동하는 앱을 만듭니다.



Design Mode은 눈에 보이는 인터페이스가 있는 새 앱을 만들 때 사용하는 Verdent Cloud의 디자인 우선 제작 경로입니다. 아이디어는 글로 설명할 수 있지만, 완성된 디자인, 스크린샷, 스타일 가이드, 전체 페이지 플랜이 아직 없을 때 사용합니다.

바로 코드 작성으로 넘어가는 대신, Design Mode은 먼저 제품의 모습과 느낌을 결정하도록 도와주고, 승인된 방향을 작동하는 앱으로 전환합니다.

## Design Mode을 사용할 때 [#design-mode을-사용할-때]

텍스트 브리프에서 새 제품 UI를 만들고 싶을 때 Design Mode을 사용합니다. 예를 들면 다음과 같습니다.

* 풀스택 앱
* 웹 프런트엔드 또는 랜딩 페이지
* 모바일 앱
* 여러 화면으로 구성된 게임 또는 인터랙티브 경험
* 시각적 방향이 아직 정해지지 않은 0-to-1 제품 아이디어

## 건너뛸 때 [#건너뛸-때]

다음과 같은 경우에는 Design Mode을 건너뜁니다.

* 기본 폼이나 아주 작은 토이 앱처럼 단순한 단일 화면 유틸리티인 경우
* 구체적인 스타일 방향, 팔레트, 타입 시스템, 페이지 또는 화면 목록이 포함된 완성된 디자인 브리프가 이미 있는 경우
* 그대로 따라야 할 디자인 파일, 목업, 스크린샷, 스타일 가이드가 이미 있는 경우
* 디자인 단계를 명시적으로 건너뛰고 바로 코드로 진행하고 싶은 경우

<Note>
  브리프가 이미 충분히 구체적이라면, Verdent Cloud은 이를 선택된 방향으로 사용하고 페이지 플래닝과 빌드 작업으로 바로 이동할 수 있습니다.
</Note>

## Design Mode의 작동 방식 [#design-mode의-작동-방식]

<Steps>
  <Step title="제품 설명하기">
    만들고 싶은 것, 대상 사용자, 수행해야 할 일, 이미 알고 있는 분위기나 스타일 레퍼런스를 평이한 언어의 브리프로 시작합니다.
  </Step>

  <Step title="시각적 방향 선택하기">
    Verdent Cloud은 서로 다른 디자인 방향을 탐색해, 코드가 작성되기 전에 모습과 느낌을 선택할 수 있게 해줍니다.
  </Step>

  <Step title="페이지 또는 화면 플래닝하기">
    여러 페이지, 풀스택, 또는 더 복잡한 제품의 경우, Verdent Cloud은 선택한 방향을 페이지 또는 화면 플랜과 평이한 언어의 제품 사양으로 전환합니다.
  </Step>

  <Step title="승인된 방향에서 빌드하기">
    방향이 명확해지면, Verdent Cloud은 디자인을 작동하는 앱으로 복원하고 이후의 결정이 승인된 디자인과 사양에 맞춰지도록 유지합니다.
  </Step>

  <Step title="미리보기와 계속 진행">
    미리보기에서 앱을 검토한 다음, 필요에 따라 백엔드 작업, 테스트, 분석, 배포를 계속합니다.
  </Step>
</Steps>

## Verdent Cloud에서 Design Mode 사용하기 [#verdent-cloud에서-design-mode-사용하기]

Cloud 생성 플로에서 템플릿을 선택하는 대신 만들고 싶은 앱을 설명합니다. 아직 구체적인 디자인 방향이 없다면, Verdent Cloud은 빌드하기 전에 방향을 선택하도록 돕기 위해 Design Mode을 사용할 수 있습니다.

브리프는 간단하게 유지해도 되지만, 디자인 결정을 이끌 수 있을 만큼은 구체적으로 작성합니다.

* 제품이 무엇인지
* 누가 사용할 것인지
* 사용자가 수행하도록 도와야 할 주요 작업
* 이미 필요하다고 알고 있는 페이지, 화면, 상태
* 에디토리얼, 장난스러운, 기능적인, 프리미엄, 미니멀, 대담한 등 원하는 톤이나 스타일 레퍼런스
* 일반적인 그라데이션, 스톡 이미지처럼 보이는 이미지, 특정 시각 스타일 등 원하지 않는 것

## 예시 브리프 [#예시-브리프]

<CardGroup cols="2">
  <Card title="랜딩 페이지">
    프리랜서를 위한 개인 금융 앱의 랜딩 페이지를 만듭니다. 차분하고 신뢰감 있으며 에디토리얼한 느낌이어야 하고, hero, 기능 섹션, 가격, FAQ가 포함되어야 합니다.
  </Card>

  <Card title="다중 화면 앱">
    번아웃에서 회복 중인 사람들을 위한 모바일 우선 습관 트래커를 만듭니다. 온보딩, 일일 체크인, 진행 상황 보기, 설정을 포함하고, 부드럽고 촉각적인 느낌이어야 합니다.
  </Card>
</CardGroup>

## 더 좋은 결과를 위한 팁 [#더-좋은-결과를-위한-팁]

* 제품의 대상 사용자를 말합니다.
* 기능 목록만 나열하지 말고 원하는 느낌을 설명합니다.
* 알고 있는 페이지나 화면이 있다면 언급합니다.
* 중요한 레퍼런스나 제약이 있다면 초기에 공유합니다.
* 이미 어울리지 않는다고 알고 있는 것이 있다면 피해야 할 점을 말합니다.
* 복잡한 제품의 경우 전체 빌드를 계속하기 전에 페이지 목록과 제품 사양을 확인할 것으로 예상하세요.