💻Project IDX: 구글의 차세대 웹 기반 통합 개발 환경

안녕하세요! 오늘은 다양한 기술 스택과 툴을 효율적으로 관리할 수 있도록 도와주는 구글이 개발한 웹 기반 통합 개발 환경(IDE), Project IDX에 대해 알아보겠습니다. Project IDX는 브라우저에서 바로 실행되며, Google Cloud 상의 안전한 가상 머신(VM)을 활용해 모든 작업을 처리할 수 있습니다. 이를 통해 개발자는 추가적인 설정 없이도 다양한 애플리케이션을 신속하게 빌드하고 배포할 수 있습니다. 이 블로그에서는 Project IDX 개요, 주요 기능, 설치방법에 대해 알아보겠습니다.

💻Project IDX: 구글의 차세대 웹 기반 통합 개발 환경

https://idx.dev/

Project IDX

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

Project IDX 주요 기능

Project IDX는 구글에서 개발한 웹 기반 통합 개발 환경 (IDE)입니다. Project IDX는 개발 환경 설정의 번거로움 없이 다양한 기술 스택으로 애플리케이션을 빌드하고 배포할 수 있도록 지원합니다. 웹 브라우저에서 모든 작업을 수행할 수 있으며, Google Cloud의 사전 구성된 가상 머신에서 실행되어 안정적이고 안전하며 완벽하게 사용자 정의 가능한 개발 환경을 제공합니다. Project IDX는 현재 베타 버전이며, 제한적인 지원과 향후 버전과의 호환성 문제가 발생할 수 있습니다. 따라서 프로덕션 환경에서 사용하기 전에 주의해야 합니다.

 

Project IDX는 개발자의 생산성을 높이고 협업을 촉진하기 위해 다양한 기능을 제공합니다. 주요 기능은 다음과 같습니다.

• 익숙한 환경: Project IDX는 널리 사용되는 오픈소스 에디터인 Code OSS를 기반으로 구축되었으며, Google Cloud에서 실행되는 완전한 가상 머신 (VM)을 제공합니다.
• Gemini AI 통합: IDX에 내장된 Gemini AI는 실시간 코드 제안, AI 기반 코드 채팅, 코드 생성, 언어 번역, 코드 설명, 단위 테스트 작성 등 다양한 기능을 제공합니다. 

Gemini AI 통합화면

• 다양한 템플릿: Angular, Flutter, Next.js, React, Svelte, Vue 등 다양한 프레임워크를 사용하여 새로운 앱을 빠르게 시작할 수 있는 템플릿을 제공합니다.
• GitHub 가져오기: GitHub의 공개 또는 비공개 저장소에서 기존 애플리케이션을 가져와 IDX에서 작업할 수 있습니다.
• Android 및 웹 에뮬레이터: 구글에서 개발한 오픈소스 UI 소프트웨어 개발 키트인 Flutter 앱 개발 및 변경 사항 확인을 위해 Android 및 웹 에뮬레이터가 내장되어 있습니다.
• 작업공간 내 배포: 웹 또는 Flutter 웹 프로젝트를 Firebase Hosting에 직접 배포할 수 있습니다.

Firebase Hosting 배포기능

• 작업 공간 공유 (실험적): 다른 사용자를 작업 공간에 초대하여 문제 해결 세션을 가속화하거나 진행 중인 작업을 시연할 수 있습니다. 로컬 코드, 터미널, 에뮬레이터 등에 대한 완전한 공유 액세스를 제공하지만, 보안 문제에 유의해야 합니다.
• 완전한 VM 작업 공간: IDX 작업 공간은 구성 가능하고 재현 가능하며 일시적이므로 어디서나 깨끗하고 강력한 개발자 설정에서 코딩할 수 있습니다.
• 확장 프로그램: IDX에는 작업 공간을 설정하고 코딩을 시작하는 데 도움이 되는 사전 설치된 확장 프로그램과 OpenVSX에서 사용할 수 있는 다양한 추가 확장 프로그램이 있습니다.

728x90

Project IDX 설치 및 사용방법

Project IDX는 웹 기반 IDE이므로 별도의 설치 과정이 필요하지 않습니다. 웹 브라우저에서 idx.google.com에 접속하여 Google 계정으로 로그인하면 바로 사용할 수 있습니다. 단, 원활한 사용을 위해 몇 가지 설정을 확인해야 합니다.

 

1. 서드 파티 쿠키 활성화: 대부분의 브라우저에서 Project IDX를 사용하려면 서드 파티 쿠키를 활성화해야 합니다. Chrome, Safari, Firefox, Opera, Arc, Brave 등 주요 브라우저에서 서드 파티 쿠키를 활성화하는 방법은 각 브라우저의 도움말을 참조하세요.

크롬 브라우저 서드 파티 쿠키 허용 설정

2. 작업 공간 생성:

• 템플릿 사용: Project IDX는 다양한 템플릿을 제공합니다. 템플릿을 사용하여 작업 공간을 생성하면 기본 파일 및 코드가 포함된 사전 로드된 환경에서 시작할 수 있습니다. Angular, Flutter, Next.js, React, Svelte, Vue 등 인기 있는 프레임워크와 AI 및 ML API를 위한 템플릿이 준비되어 있으며, 빈 작업 공간 템플릿도 사용할 수 있습니다.

Project IDX 템플릿 선택화면

3. Git 저장소 가져오기: GitHub, GitLab, Bitbucket에서 호스팅 되는 기존 저장소를 가져와 작업 공간을 생성할 수도 있습니다. 비공개 저장소의 경우 각 공급자에 대한 인증이 필요합니다.

4. 작업 공간 구성:

• .idx/dev.nix 파일: 각 작업 공간의 환경 구성은 코드 저장소의 .idx/dev.nix 파일에 정의됩니다. 이 파일을 사용하여 설치된 패키지, 환경 변수, 코드 OSS 확장 프로그램 등을 관리할 수 있습니다.
• 구성 적용: .dev.nix 파일을 수정한 후에는 환경을 다시 빌드해야 변경 사항이 적용됩니다.
• 환경 빌드 오류: 구성 파일에 오류가 있으면 환경이 빌드되지 않을 수 있습니다. 이 경우 IDX는 복구 환경을 시작하는 옵션을 제공합니다. 복구 환경에서 dev.nix 파일을 수정하고 환경을 다시 빌드할 수 있습니다.

Project IDX는 웹 브라우저에서 바로 애플리케이션을 테스트할 수 있는 환경을 제공합니다.

*앱 미리보기: IDX는 웹 미리보기 (Chrome)와 Android 에뮬레이터 (Flutter 작업 공간에서)를 제공하여 앱을 완벽하게 테스트할 수 있도록 지원합니다.

*미리보기 새로고침:

• 자동 핫 리로드: 코드를 변경하고 저장하면 자동으로 핫 리로드가 실행되어 페이지 새로 고침이나 앱 다시 시작 없이 변경 사항이 반영됩니다.
• 수동 전체 새로 고침: 페이지 새로 고침 (웹 앱) 또는 앱 다시 시작 (에뮬레이터)을 통해 변경 사항을 적용합니다.
• 수동 하드 재시작: IDX의 미리보기 시스템과 앱의 웹 서버를 다시 시작합니다.

*자동 저장 및 핫 리로드 구성:

• 자동 저장: 기본적으로 IDX는 입력을 중지하면 1초 후에 작업을 자동으로 저장하고 핫 리로드를 트리거합니다. 자동 저장 지연 시간은 설정에서 변경할 수 있으며, 자동 저장 기능을 비활성화할 수도 있습니다.

 

마치며

Project IDX는 웹 기반 IDE의 익숙한 환경과 강력한 기능을 통해 개발자는 어디서나 애플리케이션을 빌드하고 배포할 수 있습니다. Google의 최신 AI 기술인 Gemini와의 통합은 개발 생산성을 한 단계 더 끌어올립니다. 아직 베타 버전이지만 Project IDX는 웹 개발의 미래를 엿볼 수 있는 흥미로운 플랫폼입니다.

 

Project IDX를 사용해 본 느낌은 다음과 같습니다.

• Rebuild 시 멈춰있거나 Gemini의 답변이 느린 경우가 자주 있다.
• 기존 비주얼 스튜디오 코드(VSC)와 유사한 인터페이스로 친숙하다
• 다른 AI기반 도구보다 환경설정(패키지 설치, dev.idx와 shell.nix 설정 등)이 복잡하다.

 

오늘은 구글의 최신 웹 기반 IDE, Project IDX에 대해 알아보았습니다. 일반 사용자와 개발자의 구분이 점점 없어지는 요즘 시대에 Project IDX는 아직 일반 사용자가 다루기 까다롭고, 개발자의 전문영역에 더 가까운 솔루션으로 보입니다. 저는 그럼 다음 시간에 더 유익한 정보를 가지고 다시 찾아뵙겠습니다. 감사합니다. 

 

https://fornewchallenge.tistory.com/

 

 

2024.09.04 - [AI 도구] - 💻AI 코드 에디터 Cursor 사용법 & 고품질 웹페이지 10분 완성 가이드

💻AI 코드 에디터 Cursor 사용법 & 고품질 웹페이지 10분 완성 가이드