Make Real

Make Real이란?

Make Real(저장소: tldraw/make-real)은 tldraw SDK와 연관된 오픈소스 프로젝트입니다. 핵심 목적은 “UI를 그리고 실제로 만드는” 것을 가능하게 하며, UI를 설계한 것을 앱에서 기능적으로 만드는 스타터와 지원 코드를 제공합니다.

저장소는 2026년 2월 20일 소유자에 의해 아카이브되어 읽기 전용 상태입니다. 페이지에서는 라이브 데모와 프로젝트 버전을 빌드하고 블로그 포스트를 통해 더 알아볼 수 있는 리소스를 안내합니다.

주요 기능

• tldraw SDK로 구축되어 그리기 기반 UI 워크플로의 기반을 제공합니다.
• 스타터 저장소 방식: repo를 클론해 Make Real의 자신만의 버전을 빌드하세요.
• 저장소 README에서 참조하는 데모 경험(makereal.tldraw.com) 포함.
• TypeScript/Next.js 코드베이스로 구성(next.config.js, TypeScript/TS 파일, package.json 존재).
• 코드 품질과 스타일링을 위한 지원 파일 포함(예: ESLint/Prettier 및 Tailwind 설정 파일).

Make Real 사용 방법

1. makereal.tldraw.com의 라이브 데모를 사용해 “UI 그리기와 실제화” 흐름을 이해하세요.
2. GitHub(tldraw/make-real)에서 스타터 저장소를 클론해 자신만의 버전을 빌드하세요.
3. 프로젝트 README와 연결된 리소스(참조 블로그 포스트 포함)를 따라 데모 작동 원리와 적응 방법을 이해하세요.
4. 저장소 페이지에 언급된 연결된 Discord 커뮤니티를 통해 빌드한 것을 공유하세요.

사용 사례

• UI 상호작용 흐름 프로토타이핑: tldraw SDK 기반 프로젝트 접근으로 UI를 시각적으로 설계하고 앱 동작에 연결하세요.
• 커스텀 “UI 캔버스” 앱 빌드: 저장소를 시작점으로 그리기-렌더링 워크플로를 구현하세요.
• 그린 인터페이스가 로직을 구동하는 방식 탐구: 코드 구조를 통해 그리기 환경의 UI 요소가 기능적 앱 동작으로 변환되는 방식을 이해하세요.
• 제품 상호작용 가르치기 또는 문서화: 데모와 기본 프로젝트를 사용해 설계된 UI가 실행 가능한 경험으로 되는 방식을 설명하세요.
• TypeScript/Next.js에서 UI-to-app 파이프라인 실험: 기존 Next.js + TypeScript 설정을 관련 프로토타입 템플릿으로 활용하세요.

자주 묻는 질문

• 이 저장소가 활성 유지보수 중인가요? 아니요. 2026년 2월 20일 소유자에 의해 아카이브되어 읽기 전용입니다.

• 온라인에서 프로젝트를 어디서 시도할 수 있나요? 저장소 페이지에서 makereal.tldraw.com 데모를 안내합니다.

• 자신만의 버전을 빌드하려면 무엇을 클론해야 하나요? 페이지에서 제공된 스타터 repo를 클론해 Make Real의 자신만의 버전을 빌드할 수 있다고 명시합니다.

• 어떤 기술로 구축되었나요? 저장소 내용에 따라 tldraw SDK로 구축되었으며 TypeScript 코드베이스와 Next.js 설정을 사용합니다.

대안

• tldraw로 자신만의 UI 프로토타이핑 설정 빌드: 이 아카이브 repo를 직접 사용하는 대신 tldraw SDK 개념에서 시작해 그린 요소를 앱 동작으로 매핑하세요.
• 일반 프로토타이핑-to-코드 접근 사용: “UI 디자인을 작동 화면으로 전환”이 목표라면 UI 동작 생성/연결에 초점을 맞춘 다른 워크플로를 사용하며 디자인-to-로직 변환은 직접 처리하세요.
• 에디터 기반 UI 시스템 생성: 유사한 “그리기로 구동” 워크플로를 원한다면 이 특정 프로젝트 구조 대신 UI를 편집 가능 상태로 취급하는 대안(예: 상태 기반 UI 빌더)을 고려하세요.
• 다이어그램/캔버스 편집 기반 활성 유지보수 UI 빌더 찾기: 이 repo가 아카이브되었으므로 “캔버스 에디터가 앱 동작을 구동” 카테고리의 최신 도구가 장기 프로젝트에 더 적합할 수 있으며, 정확한 요구사항에 따라 다릅니다.