Onlook: 프런트엔드 디자인을 위한 오픈 소스 커서, React 애플리케이션에서 코드를 디자인하고 게시하세요.

2.1K 00

일반 소개

Onlook은 디자이너와 개발자를 위해 제작된 오픈 소스 디자인 도구로, 사용자가 실행 중인 React 애플리케이션에서 직접 디자인하고 디자인 변경 사항을 코드로 변환할 수 있습니다. 이 도구는 Figma 또는 Webflow와 유사한 직관적인 시각적 편집 환경을 제공하지만 네이티브 조작과 원활한 코드 통합에 중점을 두고 있으며, Onlook은 React 및 TailwindCSS 프레임워크에서 프로젝트의 디자인에서 개발까지의 프로세스를 간소화하도록 설계되었습니다. 새로운 기능을 추가하고 더 많은 프레임워크를 지원하기 위해 지속적으로 업데이트되는 활발한 개발자 커뮤니티가 있습니다.

기능 목록

실시간 디자인 수정브라우저에서 직접 React 앱의 UI를 수정하여 실시간으로 결과를 확인할 수 있습니다.
코드 전환디자인 변경 사항을 적절한 코드로 번역하여 코드 베이스에 직접 푸시합니다.
멀티 프레임워크 지원현재 React와 TailwindCSS가 지원되며, 향후 더 많은 프레임워크로 확장할 계획입니다.
로컬 운영모든 작업은 로컬에서 수행되어 데이터 보안과 개인 정보를 보호합니다.
오픈 소스 커뮤니티풍부한 커뮤니티 지원 및 기여, 지속적인 기능 업데이트 및 개선.

도움말 사용

Onlook 설치

Onlook 다운로드::
- Onlook의 GitHub 페이지를 방문하세요.
- 오른쪽 상단의 '코드' 버튼을 클릭하고 'ZIP 다운로드'를 선택하여 소스 코드를 다운로드하거나 리포지토리를 로컬에 직접 복제합니다:
```
git clone https://github.com/onlook-dev/onlook.git
```
개발 환경 설정::
- Node.js가 설치되어 있는지 확인합니다(안정적인 최신 버전 권장).
- 복제된 디렉토리 또는 압축을 푼 폴더로 이동합니다:
```
cd onlook
```
- 종속성을 설치합니다:
```
npm install
```
- 있는 경우.env.example복사하여 이름을 변경하세요..env를 클릭하고 필요에 따라 API 키를 입력합니다.
Onlook 시작::
- 개발 서버를 실행합니다:
```
npm run dev
```
- 그러면 Onlook이 시작되어 로컬에서 탐색하고 편집할 수 있습니다.

Onlook으로 디자인하기

React 프로젝트 시작하기::
- React 프로젝트가 로컬에서 실행되고 있는지 확인합니다(예:npm start).
구성 항목::
- 의next.config.mjs어쩌면next.config.jsOnlook 플러그인을
```
import path from "path";
const nextConfig = {
experimental: {
swcPlugins: [
["@onlook/nextjs", { projectRoot: path.resolve(".") }]
]
}
};
export default nextConfig;
```
- 다른 프레임워크를 사용하는 경우 구체적인 구성 지침은 Onlook의 설명서를 참조하세요.
Onlook으로 편집하기::
- Onlook 앱을 열면 React 프로젝트가 인식되고 로드됩니다.
- Chrome 개발자 도구에서와 마찬가지로 클릭, 끌어서 놓기를 통해 UI를 편집할 수 있습니다.
- 컨텍스트 메뉴를 사용하여 요소를 선택하여 해당 코드 위치를 보거나 편집합니다.
변경 사항 게시::
- 디자인을 변경한 후 "게시" 버튼을 클릭하면 Onlook에서 풀 리퀘스트를 생성하여 수정된 코드를 GitHub 리포지토리에 푸시합니다.