실행 중인 웹 애플리케이션의 사용자 인터페이스(UI)를 마치 디자인 툴 피그마(Figma)처럼 시각적으로 편집하고, 그 변경 사항이 즉시 소스 코드에 반영되는 새로운 개발 도구 '에어십(Airship)'이 등장했습니다. 에어십은 개발 서버 앞에 위치하여 별도의 디자인 목업(mockup)을 만들거나 디자인 툴과 코드 사이를 오갈 필요 없이, 개발자가 앱 내에서 직접 UI 요소를 선택하고 변경 사항을 AI 에이전트에게 지시하면 코드를 자동으로 업데이트해주는 혁신적인 워크플로우를 제공합니다.
에어십은 CLI(Command Line Interface) 형태로 제공되며, 기존 개발 환경에 플러그인이나 추가적인 의존성을 설치할 필요 없이 `npx @airshiplabs/cli --target [포트번호]` 명령어로 쉽게 실행할 수 있습니다. 바이트(Vite), 넥스트(Next), 레일즈(Rails) 등 HTTP를 통해 HTML을 제공하는 모든 개발 서버와 호환됩니다. 특히 클로드 코드(Claude Code), 코덱스(Codex), 오픈코드(OpenCode)와 같은 다양한 AI 코딩 에이전트와 연동되어, 개발자가 선호하는 에이전트를 지정해 UI 변경을 위한 코드 작성을 맡길 수 있습니다. 에어십은 실행 중인 앱의 특정 UI 요소를 클릭하면 해당 요소가 정의된 파일과 코드 라인을 자동으로 식별하며, 변경 지시 후 생성된 코드 차이(diff)를 확인하고 마음에 들지 않으면 되돌릴 수도 있습니다.
이러한 접근 방식은 디자인과 개발 간의 간극을 획기적으로 줄여줍니다. 기존에는 디자이너가 피그마 같은 툴에서 UI를 디자인하고, 개발자가 이를 코드로 구현하는 과정에서 많은 시간과 노력이 소요되었으며, 디자인 변경 시마다 동기화 문제가 발생했습니다. 에어십은 이 과정을 단일 환경으로 통합하여 개발자가 실시간으로 UI를 수정하고 그 결과를 즉시 코드에 반영할 수 있게 함으로써, 프로토타이핑 및 반복 작업의 속도를 비약적으로 향상시킬 수 있습니다. 또한, 모바일과 데스크톱 화면을 나란히 두고 동시에 편집할 수 있어 반응형 웹 개발에도 큰 이점을 제공하며, 모든 작업이 로컬 머신에서 이루어져 보안 및 개인 정보 보호 측면에서도 강점을 가집니다. 이는 개발 생산성 향상뿐만 아니라, 디자이너와 개발자 간의 협업 방식에도 긍정적인 변화를 가져올 잠재력을 지니고 있습니다.