도구별 실전 가이드 · 공식 정보 확인 2026-08-20
onlook 사용법: 무료로 시작하는 가장 현실적인 방법
실행 중인 React 인터페이스의 요소를 선택해 스타일·레이아웃과 코드를 함께 편집하는 React 앱을 화면에서 직접 고치는 AI 우선 시각 디자인 도구입니다. onlook의 첫 실전 과제는 “랜딩 페이지의 영웅 영역 간격과 색을 시각적으로 조정해 코드 반영하기”이며, 이 흐름을 직접 통제할 사람에게 맞습니다.
이럴 때 맞습니다
- “별도 브랜치의 React 랜딩 페이지와 목표 색상·간격 기준” 같은 입력으로 onlook의 핵심 기능을 시험하려는 사람
- 브라우저 결과와 생성된 React·CSS 변경이 같고 다른 섹션의 반응형 레이아웃이 유지되는지 기준으로 onlook 결과를 직접 검수할 수 있는 경우
- Web 환경에서 Apache-2.0 코드를 직접 설치·관리하려는 작업
이럴 때는 멈추세요
- React 앱을 화면에서 직접 고치는 AI 우선 시각 디자인 도구 설치·모델 준비·업데이트를 관리하지 않고 즉시 완성된 서비스를 원하는 경우
- 다음 위험을 사람이 확인할 수 없는 작업: 시각 편집이 기존 디자인 토큰·컴포넌트 규칙을 우회해 중복 스타일과 깨진 반응형 코드를 만드는 문제.
처음 해볼 작업 3가지
React 브랜치와 디자인 토큰을 불러온다
영웅 영역과 수정 가능한 스타일 경계가 시각 화면에 잡힌다.
화면에서 간격과 색을 조정한다
목표 색상·간격이 브라우저와 코드에 동시에 반영된다.
생성 코드와 반응형 결과를 대조한다
중복 스타일 없이 시각 결과와 일치하는 React·CSS diff가 남는다.
무료 조건과 주의점
Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도
Apache-2.0 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도
Apache-2.0 저장소 코드는 상업적으로 사용할 수 있지만, 모델 가중치·입력 자료·생성물·번들 자산의 권리는 각각 따로 확인해야 합니다.
시각 편집이 기존 디자인 토큰·컴포넌트 규칙을 우회해 중복 스타일과 깨진 반응형 코드를 만드는 문제.