Verdent Docs
핵심 기능

Design Mode

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

Design Mode는 보이는 인터페이스가 있는 새 앱을 만들기 위한 Verdent의 디자인 우선 생성 경로입니다. 아이디어는 글로 있지만 완성된 디자인, 스크린샷, 스타일 가이드, 전체 페이지 계획이 아직 없을 때 사용합니다.

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

Design Mode를 사용할 때

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

  • 풀스택 앱
  • 웹 프런트엔드 또는 랜딩 페이지
  • 모바일 앱
  • 시각적 방향이 아직 정해지지 않은 0에서 1로 만드는 제품 아이디어

사용하지 않아도 되는 경우

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

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

브리프가 이미 충분히 구체적이라면, Verdent는 이를 선택된 방향으로 사용하고 페이지 계획과 빌드 작업으로 바로 진행할 수 있습니다.

Design Mode 작동 방식

제품 설명

만들고 싶은 것, 대상 사용자, 수행해야 할 일, 이미 가지고 있는 분위기나 스타일 참고 자료를 쉬운 말로 설명한 브리프로 시작합니다.

시각적 방향 선택

Verdent가 서로 다른 디자인 방향을 탐색하므로, 코드가 작성되기 전에 모습과 느낌을 선택할 수 있습니다.

페이지 또는 화면 계획

여러 페이지, 풀스택, 또는 더 복잡한 제품의 경우, Verdent가 선택된 방향을 페이지 또는 화면 계획과 쉬운 말로 된 제품 명세로 전환합니다.

승인된 방향에서 빌드

방향이 명확해지면, Verdent가 디자인을 작동하는 앱으로 복원하고 이후 결정이 승인된 디자인과 명세에 맞춰지도록 유지합니다.

미리보기 및 계속 진행

미리보기에서 앱을 검토한 뒤, 필요에 따라 백엔드 작업, 테스트 또는 추가 반복을 이어갑니다.

Verdent Desktop에서 Design Mode 사용 방법

Manager에서 새 제품을 시작할 때 만들고 싶은 앱을 설명합니다. 구체적인 디자인 방향이 아직 없다면 Design Mode를 열고, Verdent가 빌드 전에 시각적 방향을 선택하도록 도와줍니다.

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

  • 제품이 무엇인지
  • 누가 사용할지
  • 사용자가 주로 어떤 일을 하도록 도와야 하는지
  • 이미 필요하다고 알고 있는 페이지, 화면 또는 상태

브리프 예시

랜딩 페이지

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

여러 화면 앱

번아웃에서 회복 중인 사람들을 위한 모바일 우선 습관 추적기를 만듭니다. 온보딩, 일일 체크인, 진행 상황 보기, 설정을 포함하며 부드럽고 촉감 있는 느낌이어야 합니다.

더 좋은 결과를 위한 팁

  • 제품의 대상 사용자를 말합니다.
  • 기능 목록만이 아니라 원하는 느낌을 설명합니다.
  • 알고 있는 페이지나 화면이 있다면 언급합니다.
  • 중요한 참고 자료나 제약이 있다면 초기에 공유합니다.
  • 이미 어울리지 않는다고 알고 있는 것이 있다면 피해야 할 점을 말합니다.
  • 복잡한 제품의 경우 전체 빌드가 계속되기 전에 페이지 목록과 제품 명세를 확인하게 될 수 있습니다.