2021.07.13

'인기 급상승' 온라인 IDE '코드샌드박스' 시작하기

Matthew Tyson | InfoWorld
통합 개발 환경(IDE)은 여전히 개발자 툴의 중심이다. 지난 몇 년 동안에는 클라우드 기반 툴의 파도를 타고 온라인 IDE가 두각을 나타냈는데, 특히 코드샌드박스(CodeSandbox)가 온라인 IDE 영역에서 사용량이 늘고 있다.

코드샌드박스는 사용의 용이함, 간편한 기술 지원, 그리고 무료 공개 샌드박스를 포함한 합리적인 가격 구조로 소셜 코딩에서 인기를 높이고 있다. 오픈소스 프로젝트라는 것도 특징이다. 코드샌드박스가 인기 있는 이유와 주요 기능을 살펴보자.
 

코드샌드박스 소개

코드샌드박스의 대표적인 특징은 프론트엔드 자바스크립트 앱의 신속한 가동과 공유다. 코드펜(CodePen)JS피들(JSFiddle)과 비슷하지만 이 둘에 비해 더 큰 목표를 두고 있는 프로젝트다. 자바스크립트 하나를 다루긴 하지만 전체 스택 지원 수준은 클라우드9(Cloud9)와 같은 종합 온라인 IDE와 비교할 만하다.

코드샌드박스에서는 프로젝트를 공유하기가 매우 쉽다. 예를 들어 간단한 정적 HTML 샘플을 살펴보자. 이를 클릭하면 <그림 1>과 같이 브라우저에서 IDE 샌드박스가 열리고 인포월드의 간단한 HTML 인사말과 함께 인포월드 로고가 표시된다.
 
<그림 1> 기본 샌드박스 © IDG

<그림 1>을 보면 프로젝트에 대한 고유한 이름(stoic-shaw-c9u57)이 생성된 것을 볼 수 있다. 이는 프로젝트의 영구적 이름이며 공유와 임베딩에 사용된다. 코드샌드박스의 임베딩 기능은 뛰어나며 미디엄(Medium)과 간단한 아이프레임을 자동으로 지원한다.
 

샌드박스 포크

이제 프로젝트를 포크해서 스타일시트를 추가해 인포월드 로고의 크기 스타일링을 수정해 보자. 오른쪽 위의 포크(Fork) 버튼을 클릭한다. 같은 코드베이스로 프로젝트의 새 고유한 URL이 생성된다.

현재 파일 탐색기가 열려 있는지 확인한다(왼쪽 메뉴 표시줄의 두 번째 아이콘). 파일(Files) 창 헤더에서 디렉터리 추가(Add Directory) 아이콘을 클릭한다. /css 디렉터리를 만든 다음 새 디렉터리에서 파일 추가(Add File) 버튼을 사용해서 index.css 파일을 추가한다. 이제 <예제 1>과 같은 CSS 규칙을 css/index.css 파일에 추가하고, 예제 2와 같이 이 파일을 index.html로 가져올 수 있다.

<예제 1> 스타일 추가
 
#logo {
 width: 90%;
}

<예제 2> 스타일시트 가져오기
 
<link rel="stylesheet" type="text/css" href="css/index.css" />

이 링크에서 실시간으로 변화를 확인할 수 있다.
 

코드샌드박스 템플릿

지금까지 살펴본 간단한 예제는 코드샌드박스의 기능을 보여주는 동시에 코드에 액세스하는 주된 방법도 알려준다. 바로 URL 공유다. 그다음으로 많이 사용되는 방법은 템플릿을 사용해 새 프로젝트를 만드는 방법이다. 이 방법을 자세히 살펴보자.

먼저 오른쪽 상단에서 샌드박스 만들기(Create Sandbox) 버튼을 클릭한다. <그림 2>와 비슷한 대화상자가 표시된다.
 
<그림 2> 샌드박스 만들기 대화상자

대화상자는 사용할 템플릿을 제안한다. 템플릿 찾아보기(Explore Templates)를 선택하면 커뮤니티에서 만든 수천 개에 달하는 더 많은 템플릿을 살펴볼 수 있다. 또한, 프로젝트 가져오기(Import Project) 옵션으로 깃허브에서 템플릿을 가져올 수도 있다. 이 부분에 대해서는 잠시 후에 다루기로 하고, 지금은 샌드박스 만들기 옵션을 사용해 검색 상자에 “Svelte”를 입력한다. 코드샌드박스의 공식 Svelte 템플릿이 표시되면 선택한다.

코드샌드박스 IDE의 레이아웃은 유연하다. 대부분의 창은 크기를 조절할 수 있고 텍스트 편집기는 분할 보기를 지원한다. 보기(View) 메뉴에는 다양한 레이아웃 옵션을 제공한다. 이를 사용해 원하는 대로 레이아웃을 맞춤 설정할 수 있다. Svelte 템플릿은 완전한 Svelte 앱을 제공하며 롤업(Rollup)이 빌드 툴로 구성돼 있다. package.json 파일을 열면 필요한 모든 항목을 볼 수 있다.
 

종속성

코드샌드박스는 종속성을 탐지하며 파일 브라우저 바로 아래의 종속성 창에서 관리할 수 있다. 시스템은 상당히 스마트해서 외부 종속성, bootstrap.css 그리고 package.json 파일의 종속성도 탐지한다.
 

키 바인딩

이 프로젝트가 열린 상태로 살펴보면 명령의 상당수가 비주얼 스튜디오 코드 규약을 따르고 있음을 알 수 있다. 예를 들어 Ctrl-Shift-p를 누르면 명령 팔레트가 열리고 Ctrl-p를 누르면 파일 파인더가 실행된다. Ctrl-p를 누른 다음 “App”이라고 입력하면 App.svelte가 표시되므로 빠르게 열 수 있다.
 

코드샌드박스 환경

이제 샌드박스 환경을 자세히 알아보자. 이 환경에 따라 코드샌드박스가 프로젝트를 호스팅하는 방법이 결정된다. 새 Svelte 앱에서 왼쪽 메뉴 상단에 있는 샌드박스 정보(Sandbox Info)를 선택하면 “환경: 정적(environment: static)”이라는 메시지가 표시된다. 이는 샌드박스가 JS피들과 같은 간단한 프런트 엔드 애플리케이션으로 실행 중임을 의미한다. 코드샌드박스는 노드(Node) 기반 앱 실행도 지원한다.

Node.js 앱을 실행하면 코드샌드박스는 공식 Node.js 이미지가 있는 도커 컨테이너를 사용한다. Node.js 환경은 package.json의 스크립트와 Node.js 런타임에 대한 액세스 외에 명령줄 터미널에 대한 액세스도 허용한다. 실제 작동하는 모습을 보기 위해 <그림 3>과 같이 공식 Node.js 템플릿을 사용해서 새 샌드박스를 만든다.
 
<그림 3> Node.js 앱 만들기

이제 환경에 “Node”라고 표시되는 것을 볼 수 있다. “Hello world”로 응답하는 간단한 HTTP 모듈이라면 package.json과 index.js 파일이 만들어진다. '서버 구성'에서는 포트 등을 변경할 수 있다(서버 스택처럼 생긴 아이콘).

이제 인터랙티브 터미널을 사용할 수 있다. 오른쪽 하단에서 “얀 시작(yarn start)”이라는 이름의 읽기 전용 출력 터미널을 볼 수 있다. 그 옆에 있는 더하기 아이콘을 클릭하면 명령줄이 열린다. 여기서 ls를 입력해 디렉터리 목록을 볼 수 있다. 앱이 /bin/bash/sandbox에서 실행 중임을 볼 수 있다.
 

깃허브 통합

왼쪽 메뉴에서 깃허브 아이콘을 클릭한 다음 로그인(Sign In)을 클릭하고 깃허브 로그인 정보를 입력한다. 이제 이 샌드박스를 새 리포지토리로 내보내거나 기존 리포지토리에서 새 샌드박스로 가져올 수 있다.

깃허브와의 통합은 버전 제어 중인 작은 애플리케이션을 공유하고 수정하는 데 매우 유용하다. 비공개 깃허브 리포지토리를 사용하려면 프로 계정이 필요하다. 기사 작성 시점을 기준으로 프로 계정 비용은 월 9달러다.
 

명령줄 또는 브라우저 확장에서 가져오기

템플릿을 사용하거나 깃허브에서 가져오기 외에 코드샌드박스의 명령줄 툴을 활용해 로컬 시스템에서 프로젝트를 가져올 수도 있다. 툴은 코드샌드박스 웹사이트에서 다운로드할 수 있다. 또한 브라우저 확장을 추가해 깃허브에서 바로 가져오는 것도 가능하다.
 

Zip으로 내보내기

또 다른 유용한 기능은 프로젝트를 Zip 파일로 내보내는 기능이다. 이렇게 하면 빠른 프로토타이핑에 코드샌드박스를 사용하고 이후 앱의 규모가 커지면 이 프로토타입을 전통적인 IDE로 내보낼 수 있다. 이 기능은 파일(File) > 내보내기(Export) 아래에 있다.
 

테스트 실행

코드샌드박스에는 클라이언트 측 앱의 테스트에 대한 지원이 통합돼 있다. 프로젝트가 이를 지원하는 기술 스택으로 구축된 경우 버튼 클릭만으로 간단히 테스트가 실행된다. 서버 측 샌드박스는 테스트를 자동으로 감지하지 않지만 NPM 스크립트를 통해 평상시와 같이 실행할 수 있다. 자동화된 테스트 탭은 브라우저 미리보기 탭 옆에 있다.
 

배포 지원

눈여겨볼 또 하나의 중요한 특징은 배포 플랫폼과의 통합이다. 왼쪽의 로켓 아이콘을 클릭하면 사용 가능한 배포 옵션이 표시된다. 예를 들어 Node.js 템플릿을 버셀(Vercel)에 배포할 수 있다.
 

라이브 협업

마지막으로, 왼쪽 메뉴의 맨 아래에 있는 버튼을 클릭하면 라이브 모드가 활성화된다. 라이브 모드에서 IDE를 공유하고 동시에 편집할 수 있다. 라이브 모드에서는 샌드박스 공유를 위한 링크와, 편집할 수 있는 사람을 제어하는 기능 등 다양한 추가 기능을 사용할 수 있다. 라이브 협업 모드는 멀리 떨어진 다른 개발자와 함께 작업하기 위한 흥미로운 방법이다.

코드샌드박스는 기능과 지원 언어 수 측면에서 이클립스(Eclipse), VS 코드 또는 AWS 클라우드9와 같은 IDE의 비교 상대는 될 수는 없다. 그러나 소규모 프로젝트와 아이디어에 대한 빠른 프로토타이핑, 공유, 협업을 위한 여러 흥미로운 기능을 제공한다. 코드샌드박스가 지금의 인기와 기능을 바탕으로 앞으로 어떻게 발전하고 확장해 나갈지 지켜보는 것도 흥미로울 것이다. editor@itworld.co.kr


2021.07.13

'인기 급상승' 온라인 IDE '코드샌드박스' 시작하기

Matthew Tyson | InfoWorld
통합 개발 환경(IDE)은 여전히 개발자 툴의 중심이다. 지난 몇 년 동안에는 클라우드 기반 툴의 파도를 타고 온라인 IDE가 두각을 나타냈는데, 특히 코드샌드박스(CodeSandbox)가 온라인 IDE 영역에서 사용량이 늘고 있다.

코드샌드박스는 사용의 용이함, 간편한 기술 지원, 그리고 무료 공개 샌드박스를 포함한 합리적인 가격 구조로 소셜 코딩에서 인기를 높이고 있다. 오픈소스 프로젝트라는 것도 특징이다. 코드샌드박스가 인기 있는 이유와 주요 기능을 살펴보자.
 

코드샌드박스 소개

코드샌드박스의 대표적인 특징은 프론트엔드 자바스크립트 앱의 신속한 가동과 공유다. 코드펜(CodePen)JS피들(JSFiddle)과 비슷하지만 이 둘에 비해 더 큰 목표를 두고 있는 프로젝트다. 자바스크립트 하나를 다루긴 하지만 전체 스택 지원 수준은 클라우드9(Cloud9)와 같은 종합 온라인 IDE와 비교할 만하다.

코드샌드박스에서는 프로젝트를 공유하기가 매우 쉽다. 예를 들어 간단한 정적 HTML 샘플을 살펴보자. 이를 클릭하면 <그림 1>과 같이 브라우저에서 IDE 샌드박스가 열리고 인포월드의 간단한 HTML 인사말과 함께 인포월드 로고가 표시된다.
 
<그림 1> 기본 샌드박스 © IDG

<그림 1>을 보면 프로젝트에 대한 고유한 이름(stoic-shaw-c9u57)이 생성된 것을 볼 수 있다. 이는 프로젝트의 영구적 이름이며 공유와 임베딩에 사용된다. 코드샌드박스의 임베딩 기능은 뛰어나며 미디엄(Medium)과 간단한 아이프레임을 자동으로 지원한다.
 

샌드박스 포크

이제 프로젝트를 포크해서 스타일시트를 추가해 인포월드 로고의 크기 스타일링을 수정해 보자. 오른쪽 위의 포크(Fork) 버튼을 클릭한다. 같은 코드베이스로 프로젝트의 새 고유한 URL이 생성된다.

현재 파일 탐색기가 열려 있는지 확인한다(왼쪽 메뉴 표시줄의 두 번째 아이콘). 파일(Files) 창 헤더에서 디렉터리 추가(Add Directory) 아이콘을 클릭한다. /css 디렉터리를 만든 다음 새 디렉터리에서 파일 추가(Add File) 버튼을 사용해서 index.css 파일을 추가한다. 이제 <예제 1>과 같은 CSS 규칙을 css/index.css 파일에 추가하고, 예제 2와 같이 이 파일을 index.html로 가져올 수 있다.

<예제 1> 스타일 추가
 
#logo {
 width: 90%;
}

<예제 2> 스타일시트 가져오기
 
<link rel="stylesheet" type="text/css" href="css/index.css" />

이 링크에서 실시간으로 변화를 확인할 수 있다.
 

코드샌드박스 템플릿

지금까지 살펴본 간단한 예제는 코드샌드박스의 기능을 보여주는 동시에 코드에 액세스하는 주된 방법도 알려준다. 바로 URL 공유다. 그다음으로 많이 사용되는 방법은 템플릿을 사용해 새 프로젝트를 만드는 방법이다. 이 방법을 자세히 살펴보자.

먼저 오른쪽 상단에서 샌드박스 만들기(Create Sandbox) 버튼을 클릭한다. <그림 2>와 비슷한 대화상자가 표시된다.
 
<그림 2> 샌드박스 만들기 대화상자

대화상자는 사용할 템플릿을 제안한다. 템플릿 찾아보기(Explore Templates)를 선택하면 커뮤니티에서 만든 수천 개에 달하는 더 많은 템플릿을 살펴볼 수 있다. 또한, 프로젝트 가져오기(Import Project) 옵션으로 깃허브에서 템플릿을 가져올 수도 있다. 이 부분에 대해서는 잠시 후에 다루기로 하고, 지금은 샌드박스 만들기 옵션을 사용해 검색 상자에 “Svelte”를 입력한다. 코드샌드박스의 공식 Svelte 템플릿이 표시되면 선택한다.

코드샌드박스 IDE의 레이아웃은 유연하다. 대부분의 창은 크기를 조절할 수 있고 텍스트 편집기는 분할 보기를 지원한다. 보기(View) 메뉴에는 다양한 레이아웃 옵션을 제공한다. 이를 사용해 원하는 대로 레이아웃을 맞춤 설정할 수 있다. Svelte 템플릿은 완전한 Svelte 앱을 제공하며 롤업(Rollup)이 빌드 툴로 구성돼 있다. package.json 파일을 열면 필요한 모든 항목을 볼 수 있다.
 

종속성

코드샌드박스는 종속성을 탐지하며 파일 브라우저 바로 아래의 종속성 창에서 관리할 수 있다. 시스템은 상당히 스마트해서 외부 종속성, bootstrap.css 그리고 package.json 파일의 종속성도 탐지한다.
 

키 바인딩

이 프로젝트가 열린 상태로 살펴보면 명령의 상당수가 비주얼 스튜디오 코드 규약을 따르고 있음을 알 수 있다. 예를 들어 Ctrl-Shift-p를 누르면 명령 팔레트가 열리고 Ctrl-p를 누르면 파일 파인더가 실행된다. Ctrl-p를 누른 다음 “App”이라고 입력하면 App.svelte가 표시되므로 빠르게 열 수 있다.
 

코드샌드박스 환경

이제 샌드박스 환경을 자세히 알아보자. 이 환경에 따라 코드샌드박스가 프로젝트를 호스팅하는 방법이 결정된다. 새 Svelte 앱에서 왼쪽 메뉴 상단에 있는 샌드박스 정보(Sandbox Info)를 선택하면 “환경: 정적(environment: static)”이라는 메시지가 표시된다. 이는 샌드박스가 JS피들과 같은 간단한 프런트 엔드 애플리케이션으로 실행 중임을 의미한다. 코드샌드박스는 노드(Node) 기반 앱 실행도 지원한다.

Node.js 앱을 실행하면 코드샌드박스는 공식 Node.js 이미지가 있는 도커 컨테이너를 사용한다. Node.js 환경은 package.json의 스크립트와 Node.js 런타임에 대한 액세스 외에 명령줄 터미널에 대한 액세스도 허용한다. 실제 작동하는 모습을 보기 위해 <그림 3>과 같이 공식 Node.js 템플릿을 사용해서 새 샌드박스를 만든다.
 
<그림 3> Node.js 앱 만들기

이제 환경에 “Node”라고 표시되는 것을 볼 수 있다. “Hello world”로 응답하는 간단한 HTTP 모듈이라면 package.json과 index.js 파일이 만들어진다. '서버 구성'에서는 포트 등을 변경할 수 있다(서버 스택처럼 생긴 아이콘).

이제 인터랙티브 터미널을 사용할 수 있다. 오른쪽 하단에서 “얀 시작(yarn start)”이라는 이름의 읽기 전용 출력 터미널을 볼 수 있다. 그 옆에 있는 더하기 아이콘을 클릭하면 명령줄이 열린다. 여기서 ls를 입력해 디렉터리 목록을 볼 수 있다. 앱이 /bin/bash/sandbox에서 실행 중임을 볼 수 있다.
 

깃허브 통합

왼쪽 메뉴에서 깃허브 아이콘을 클릭한 다음 로그인(Sign In)을 클릭하고 깃허브 로그인 정보를 입력한다. 이제 이 샌드박스를 새 리포지토리로 내보내거나 기존 리포지토리에서 새 샌드박스로 가져올 수 있다.

깃허브와의 통합은 버전 제어 중인 작은 애플리케이션을 공유하고 수정하는 데 매우 유용하다. 비공개 깃허브 리포지토리를 사용하려면 프로 계정이 필요하다. 기사 작성 시점을 기준으로 프로 계정 비용은 월 9달러다.
 

명령줄 또는 브라우저 확장에서 가져오기

템플릿을 사용하거나 깃허브에서 가져오기 외에 코드샌드박스의 명령줄 툴을 활용해 로컬 시스템에서 프로젝트를 가져올 수도 있다. 툴은 코드샌드박스 웹사이트에서 다운로드할 수 있다. 또한 브라우저 확장을 추가해 깃허브에서 바로 가져오는 것도 가능하다.
 

Zip으로 내보내기

또 다른 유용한 기능은 프로젝트를 Zip 파일로 내보내는 기능이다. 이렇게 하면 빠른 프로토타이핑에 코드샌드박스를 사용하고 이후 앱의 규모가 커지면 이 프로토타입을 전통적인 IDE로 내보낼 수 있다. 이 기능은 파일(File) > 내보내기(Export) 아래에 있다.
 

테스트 실행

코드샌드박스에는 클라이언트 측 앱의 테스트에 대한 지원이 통합돼 있다. 프로젝트가 이를 지원하는 기술 스택으로 구축된 경우 버튼 클릭만으로 간단히 테스트가 실행된다. 서버 측 샌드박스는 테스트를 자동으로 감지하지 않지만 NPM 스크립트를 통해 평상시와 같이 실행할 수 있다. 자동화된 테스트 탭은 브라우저 미리보기 탭 옆에 있다.
 

배포 지원

눈여겨볼 또 하나의 중요한 특징은 배포 플랫폼과의 통합이다. 왼쪽의 로켓 아이콘을 클릭하면 사용 가능한 배포 옵션이 표시된다. 예를 들어 Node.js 템플릿을 버셀(Vercel)에 배포할 수 있다.
 

라이브 협업

마지막으로, 왼쪽 메뉴의 맨 아래에 있는 버튼을 클릭하면 라이브 모드가 활성화된다. 라이브 모드에서 IDE를 공유하고 동시에 편집할 수 있다. 라이브 모드에서는 샌드박스 공유를 위한 링크와, 편집할 수 있는 사람을 제어하는 기능 등 다양한 추가 기능을 사용할 수 있다. 라이브 협업 모드는 멀리 떨어진 다른 개발자와 함께 작업하기 위한 흥미로운 방법이다.

코드샌드박스는 기능과 지원 언어 수 측면에서 이클립스(Eclipse), VS 코드 또는 AWS 클라우드9와 같은 IDE의 비교 상대는 될 수는 없다. 그러나 소규모 프로젝트와 아이디어에 대한 빠른 프로토타이핑, 공유, 협업을 위한 여러 흥미로운 기능을 제공한다. 코드샌드박스가 지금의 인기와 기능을 바탕으로 앞으로 어떻게 발전하고 확장해 나갈지 지켜보는 것도 흥미로울 것이다. editor@itworld.co.kr


X