Dessn으로 실제 프런트엔드에서 UI 프로토타입 만들기

Dessn은 무엇을 하는 도구인가요?

Dessn은 제품의 프런트엔드 사본을 캔버스에서 실행하는 AI UI 디자인 도구입니다. 예를 들어 결제 내역 화면에서 필터를 찾기 어렵다는 피드백을 받았다면, 지금 서비스에서 쓰는 화면을 복제하고 기존 필터 컴포넌트의 위치를 바꿔 볼 수 있습니다. 제품 담당자는 화면을 클릭해 흐름을 살펴보고, 개발자는 그 화면에 해당하는 코드 변경을 확인할 수 있습니다.

기존 화면으로 클릭 가능한 프로토타입 만들기

승인된 GitHub나 GitLab 저장소를 연결하고 기준 브랜치를 선택합니다. 모노레포라면 빌드할 앱이나 하위 디렉터리를 지정합니다. Library가 준비되면 작업할 화면을 열고 프레임을 복제합니다. 예를 들어 기존 버튼과 입력창을 유지한 채 필터 적용과 초기화 버튼을 한곳에 배치해 달라고 요청할 수 있습니다.

Play 모드에서 필터를 적용하고 해제합니다. 결과가 없거나 요청이 실패했을 때 화면이 어떻게 보이는지도 확인합니다. 비교할 버전을 공유해 팀의 의견을 받으세요. 비공개 패키지나 특수한 빌드 과정이 있는 프로젝트는 개발자의 도움이 필요할 수 있습니다. 저장소 연결 안내

처음에는 서버 로직이 바뀌지 않는 작은 흐름으로 시작하면 편합니다. 같은 필터를 썼는지, 선택한 조건이 어떻게 표시되는지처럼 화면에서 확인할 수 있는 항목을 정해 두세요.

디자인 시스템과 어긋나는 화면 찾기

여러 페이지를 나란히 놓고 버튼의 유형, 간격, 글꼴 설정이 다른 곳을 표시해 달라고 할 수 있습니다. 이전 컴포넌트를 바꿀 때는 복제한 화면에서 먼저 적용해 보고, 데이터가 없을 때나 오류가 났을 때도 새 컴포넌트가 잘 보이는지 확인합니다. 디자인 시스템 이전 가이드

프로토타입의 변경 코드를 개발팀에 전달하기

공식 로컬 코딩 에이전트 워크플로에서는 변경분을 패치, 커밋 또는 번들로 가져올 수 있습니다. Pro에는 Claude Code, Codex, Cursor용 MCP 연결이 포함됩니다. 개발팀은 변경 파일을 검토하고 자체 프로젝트에서 테스트한 뒤 합칠 수 있습니다. MCP 설치 안내

저장소 권한과 미리보기 데이터

Dessn은 승인된 저장소에 읽기 권한을 요청하고 격리된 클라우드 환경에서 프런트엔드 사본을 빌드합니다. 미리보기는 로그인과 서비스 응답을 모의 처리할 수 있습니다. 회사는 고객의 코드, 프롬프트, 출력물을 모델 학습에 사용하지 않는다고 밝힙니다. Dessn 개인정보 처리방침

Dessn 자주 묻는 질문

Dessn을 무료로 써 볼 수 있나요?

네. 2026년 11월 6일 기준 Free에는 월 20크레딧이 표시됩니다. Pro는 편집자 1인당 월 $30이며 월 100크레딧과 추가 구매 옵션을 제공합니다. Enterprise는 별도 견적입니다. 디자인 에이전트를 실행하면 크레딧을 사용합니다. 결제 통화와 세금은 구매 화면에서 확인하세요. Dessn 요금 안내

프로토타입에서 변경 코드를 가져올 수 있나요?

로컬 코딩 에이전트를 사용해 선택한 프레임의 변경을 패치 등으로 가져온 다음 적용 전에 검토할 수 있습니다.

기존 디자인 시스템의 컴포넌트를 쓸 수 있나요?

네. 연결한 프런트엔드에서 가져온 화면을 복제하고, 제품이 이미 쓰는 버튼이나 입력창을 바탕으로 바꿔 볼 수 있습니다.