도구별 실전 가이드 · 공식 정보 확인 2026-08-20
onlook Apache-2.0 오픈소스 조건과 시작 절차
작성: gentive · 편집·검수 책임: 신유빈 · 지원 환경: Web · 페이지 갱신: · 운영·편집 기준
실행 중인 React 인터페이스의 요소를 선택해 스타일·레이아웃과 코드를 함께 편집하는 React 앱을 화면에서 직접 고치는 AI 우선 시각 디자인 도구입니다.
실행 중인 React 인터페이스의 요소를 선택해 스타일·레이아웃과 코드를 함께 편집하는 React 앱을 화면에서 직접 고치는 AI 우선 시각 디자인 도구입니다. onlook의 첫 실전 과제는 “랜딩 페이지의 영웅 영역 간격과 색을 시각적으로 조정해 코드 반영하기”이며, 이 흐름을 직접 통제할 사람에게 맞습니다.
이럴 때 맞습니다
- “별도 브랜치의 React 랜딩 페이지와 목표 색상·간격 기준” 같은 입력으로 onlook의 핵심 기능을 시험하려는 사람
- 브라우저 결과와 생성된 React·CSS 변경이 같고 다른 섹션의 반응형 레이아웃이 유지되는지 기준으로 onlook 결과를 직접 검수할 수 있는 경우
- Web 환경에서 Apache-2.0 코드를 직접 설치·관리하려는 작업
이럴 때는 멈추세요
- React 앱을 화면에서 직접 고치는 AI 우선 시각 디자인 도구 설치·모델 준비·업데이트를 관리하지 않고 즉시 완성된 서비스를 원하는 경우
- 다음 위험을 사람이 확인할 수 없는 작업: 시각 편집이 기존 디자인 토큰·컴포넌트 규칙을 우회해 중복 스타일과 깨진 반응형 코드를 만드는 문제.
참고 시작점
팩트시트 · 작업 근거 확인 필요: 아래 문구는 공식 제품 사실을 정리한 참고 시작점이며, 성공 결과를 보장하는 검증 절차가 아닙니다.
React 브랜치와 디자인 토큰을 불러온다
영웅 영역과 수정 가능한 스타일 경계가 시각 화면에 잡힌다.
참고 시작점: 이 React 랜딩 페이지의 hero만 선택하고 기존 색·간격 토큰을 보여 줘.
- Onlook에 별도 branch의 실행 중인 React app을 연결한다.
- visual editor에서 hero component와 하위 요소를 선택한다.
- Tailwind·CSS variable·design token의 기존 값을 변경 기준으로 기록한다.
화면에서 간격과 색을 조정한다
목표 색상·간격이 브라우저와 코드에 동시에 반영된다.
참고 시작점: hero의 상하 간격을 토큰 단계로 줄이고 배경색은 기존 팔레트 안에서 바꿔 줘.
- Onlook canvas에서 hero padding을 기존 spacing scale 값으로 바꾼다.
- 색상은 새 hex를 만들지 않고 design system token을 선택한다.
- desktop·tablet·mobile preview에서 제목 줄바꿈과 CTA 배치를 확인한다.
생성 코드와 반응형 결과를 대조한다
중복 스타일 없이 시각 결과와 일치하는 React·CSS diff가 남는다.
참고 시작점: 시각 변경과 생성된 React·CSS diff를 비교하고 기존 토큰을 우회한 값을 찾아 줘.
- git diff에서 inline style·중복 class·하드코딩 색을 확인한다.
- 브라우저 스크린샷과 코드 실행 결과가 같은지 세 viewport에서 비교한다.
- 다른 섹션의 layout regression을 테스트한 뒤 별도 브랜치 diff만 검토에 올린다.
무료 조건과 주의점
Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도
Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도
Apache-2.0 저장소 코드는 상업적으로 사용할 수 있지만, 모델 가중치·입력 자료·생성물·번들 자산의 권리는 각각 따로 확인해야 합니다.
시각 편집이 기존 디자인 토큰·컴포넌트 규칙을 우회해 중복 스타일과 깨진 반응형 코드를 만드는 문제.
공식 근거와 확인일
| 확인 항목 | 확인한 내용 | 공식 출처·확인일 |
|---|---|---|
| 제품 정보 | 실행 중인 React 인터페이스의 요소를 선택해 스타일·레이아웃과 코드를 함께 편집하는 React 앱을 화면에서 직접 고치는 AI 우선 시각 디자인 도구입니다. | onlook 공식 사이트 |
| 무료 조건 | Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도 | 공식 무료 정책·요금 안내 |
| 공식 코드 라이선스 | 오픈소스 코드의 사용·수정·재배포 조건 | 공식 코드 라이선스 |
| 공식 제품 페이지 | 실행 중인 React 인터페이스의 요소를 선택해 스타일·레이아웃과 코드를 함께 편집하는 React 앱을 화면에서 직접 고치는 AI 우선 시각 디자인 도구입니다. | 공식 제품 페이지 |