도구별 실전 가이드 · 공식 정보 확인 2026-08-20

airship MIT 오픈소스 조건과 시작 절차

작성: gentive · 편집·검수 책임: 신유빈 · 지원 환경: Windows, macOS, Linux, CLI, Web · 페이지 갱신: · 운영·편집 기준

실행 중인 웹 앱을 반응형 캔버스에 띄우고 요소를 선택해 Claude Code·Codex·OpenCode가 원본 소스를 수정하게 한다.

실행 중인 웹 앱을 반응형 캔버스에 띄우고 요소를 선택해 Claude Code·Codex·OpenCode가 원본 소스를 수정하게 한다. airship의 첫 실전 과제는 “로컬 데모 페이지의 모바일 버튼 여백만 시각적으로 조정한다”이며, 이 흐름을 직접 통제할 사람에게 맞습니다.

이럴 때 맞습니다

  • “이 결제 버튼은 375px 화면에서 좌우 여백을 16px로 맞춰 줘” 같은 입력으로 airship의 핵심 기능을 시험하려는 사람
  • 선택한 요소의 실제 소스 한 곳만 변경되고 데스크톱 프레임과 모바일 프레임에서 diff를 되돌릴 수 있다. 기준으로 airship 결과를 직접 검수할 수 있는 경우
  • Windows·macOS·Linux·CLI·Web 환경에서 MIT 코드를 직접 설치·관리하려는 작업

이럴 때는 멈추세요

  • 개발 서버 앞단에서 동작하는 에이전트 연동 비주얼 UI 편집 CLI 설치·모델 준비·업데이트를 관리하지 않고 즉시 완성된 서비스를 원하는 경우
  • 다음 위험을 사람이 확인할 수 없는 작업: 기본 모드는 에이전트가 프로젝트 밖 파일과 네트워크에도 접근할 수 있으므로 첫 실행은 Git 저장소에서 `--safe`와 작은 수정 범위를 사용해야 한다.

참고 시작점

팩트시트 · 작업 근거 확인 필요: 아래 문구는 공식 제품 사실을 정리한 참고 시작점이며, 성공 결과를 보장하는 검증 절차가 아닙니다.

로컬 앱을 반응형 캔버스에 연결

개발 서버가 데스크톱·모바일 프레임에서 동시에 열린다.

참고 시작점: `npx @airshiplabs/cli --target 3000`으로 로컬 앱을 연결하고 두 프레임을 보여 달라. 작업 중 “responsive frames” 항목을 실제 UI 또는 로그에서 식별해 달라.

  1. 대상 저장소에서 개발 서버를 3000번 포트로 연다.
  2. Airship CLI를 --target 3000으로 실행한다.
  3. 데스크톱과 모바일 프레임에서 같은 페이지가 반응하는지 본다.

모바일 버튼을 DOM에서 지정

선택한 결제 버튼과 실제 소스 위치가 연결된다.

참고 시작점: 375px 프레임의 결제 버튼을 선택하고 DOM·파일·줄 정보를 표시해 달라.

  1. 모바일 프레임을 375px로 맞춘다.
  2. 캔버스에서 결제 버튼을 직접 선택한다.
  3. DOM inspector가 가리키는 파일과 줄을 기록한다.

--safe 수정과 양쪽 프레임 비교

좌우 16px 여백만 바뀌며 desktop 레이아웃은 유지된다.

참고 시작점: --safe 모드에서 선택 요소의 모바일 여백만 16px로 고치고 diff를 보여 달라. “Claude Code”·“Codex”가 공식 기능명과 같은 표기로 노출되는지 확인해 달라.

  1. 에이전트에 선택 요소와 여백 속성만 허용한다.
  2. 생성된 소스 diff에서 다른 파일 변경을 찾는다.
  3. 두 프레임을 새로고침하고 변경을 되돌릴 수 있는지 확인한다.

무료 조건과 주의점

MIT 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 외부 제품 연동의 계정 조건은 공식 README에서 재확인 필요

MIT 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 외부 제품 연동의 계정 조건은 공식 README에서 재확인 필요

MIT 저장소 코드는 상업적으로 사용할 수 있지만, 모델 가중치·입력 자료·생성물·번들 자산의 권리는 각각 따로 확인해야 합니다.

기본 모드는 에이전트가 프로젝트 밖 파일과 네트워크에도 접근할 수 있으므로 첫 실행은 Git 저장소에서 `--safe`와 작은 수정 범위를 사용해야 한다.

직접 대안과 비교

  • onlook — Onlook도 실행 중인 웹 UI 요소를 시각적으로 선택해 실제 프런트엔드 소스를 수정한다.

공식 근거와 확인일

airship 가이드의 주장별 공식 출처
확인 항목확인한 내용공식 출처·확인일
제품 정보실행 중인 웹 앱을 반응형 캔버스에 띄우고 요소를 선택해 Claude Code·Codex·OpenCode가 원본 소스를 수정하게 한다.airship 공식 사이트
무료 조건MIT 오픈소스 소프트웨어는 횟수 제한 없이 실행 가능. 연결한 모델 API·서버·GPU 비용은 별도. 외부 제품 연동의 계정 조건은 공식 README에서 재확인 필요공식 무료 정책·요금 안내
공식 코드 라이선스오픈소스 코드의 사용·수정·재배포 조건공식 코드 라이선스
공식 제품 페이지실행 중인 웹 앱을 반응형 캔버스에 띄우고 요소를 선택해 Claude Code·Codex·OpenCode가 원본 소스를 수정하게 한다.공식 제품 페이지