웹용 IDE 활용을 위한 Code Server 구성

컴퓨터/IT작업기록

lu

luasenvy (luasenvy)

개요

최근 카페에서 작업을 하거나 자주 회의실을 오가는 상황이 많아져서 하던 작업을 계속 이어나가고 싶은 경우가 많이 생겼다. 경량화 랩톱을 사용해도 기본적인 부피가 있어 불편하고 작업이 길어지면 충전기 같은 주변기기가 필요해져 점점 불편함이 커졌다. 그렇다고 휴대성이 높은 기기는 대부분 원하는 운영체제로 변경하기가 힘들거나 변경하더라도 IDE를 원활하게 구동할 정도의 사양이 되지 않거나 하는 경우가 대다수였다.

Github이나 Gitlab 같은 서비스를 사용하다 보면 웹 브라우저에서 작동하는 고수준의 에디터가 내장되어 있는 것을 볼 수 있는데 이 경험을 토대로 웹용 IDE가 있는지 조사하여 VSCode와 거의 동일한_{(호환까지 가능한)} Code Server를 찾게 되어 환경을 구성하기로 하였다.

Code Server는 웹 브라우저에서 VSCode와 동일한 UX 환경을 제공한다. VSCode와 동일한 플러그인을 활용할 수 있고 단축키나 기타 작업환경들이 모두 호환된다. 크롬 사파리 등 최신 브라우저에서 작동하며 브라우저만 실행할 수 있으면 기기의 제한 없이 사용할 수 있다. 화면크기에 따른 불편함이 있을지언정 내가 작업하던 환경 그대로 자유롭게 사용할 수 있다.

목표 구성도

.                            ┌──  iPad Safari ───┐
Source ─ Code Server ─ Browser ─ Linux Chrome ─ Same UX
   └───────────────      VS Code ───┘ 

소스는 Git 저장소를 통하여 관리하고 로컬에 다운로드하여 작업하는 방식 또는 sftp, liveshare와 같은 VSCode 플러그인을 활용하는 방식으로 활용할 수도 있다. 소스를 어떻게 관리하든지 모든 작업내역은 git으로 관리할 생각이다. 환경이 바뀔때마다 git pull 명령을 통해 동기화를 해야 하지만 vscode에서 제공하는 클릭 한 번으로 Pull 작업이 가능하기 때문에 그렇게 귀찮지도 않다.

서버 프로그램은 설치용 스크립트가 제공되어 매우 쉽게 설치할 수 있다. 또한 공식 문서도 잘 작성되어 있어서 학습에 큰 장벽이 있진 않았다.

사용후기

웹 브라우저를 통하여 VSCode의 UX를 그대로 활용할 수 있다는 점이 아주 편리하다. 필요한 의존성을 바로 설치하거나 운영환경으로 접속하여 관리하는 등 내장 터미널 패널을 통하여 리눅스 머신을 쉽게 사용할 수 있다는 것도 아주 큰 장점이다. 작업 도중 다른 앱을 실행시켜 접속하는 번거로운 작업도 불필요하고 웹 브라우저 내에서 제공되는 기능만으로 쉽고 간편하게 작업할 수 있다. 애플 기기를 사용하고 있기 때문에 장점이 더 크게 느껴지기도 한다.

그러나 단점 또한 존재하는데 우선 개인용 서버가 있어야 한다. 어디에서든지 접속하여 사용하려면 공개망을 통하여 접속할 수 있도록 해야 하므로 서버 설정이나 보안등을 학습해야 하기 때문에 비교적 높은 학습장벽이 존재한다. 웹 브라우저만 되면 사용할 수 있다는 높은 접근성은 분명 장점이지만 기기 자체에 대한 한계 또한 존재한다.

보편적인 스마트폰의 경우 VSCode의 기능을 활용하기에는 너무 작은 스크린이며 정상적인 작업이 불가능하다. 닭 잡는데 소 잡는 칼 쓰는 격으로 생각보다 더 불편한데 디버그를 위해 스크롤을 이리저리 돌려가며 머리속에 코드를 적재해야하는 불편함이 생기기 때문이다. 어느정도 면적이 되는 스크린을 사용해야 작업 피로도를 낮출 수 있다.

주변기기 또한 이 한계점으로 인해 단점으로 작용한다. 터치 스크린 방식의 키보드 입력기가 물 흐르듯이 자연스럽게 사용할 수 있는 이른바 피지컬로 극복할 수 있는 사람이라면 예외이다. 그러나 대부분의 경우는 그렇지 않을 것이다. 정확도를 극도로 높인다 하더라도 펑션키와 방향키, delete, insert, home, end와 같은 특수키들이 절실해지는 시점이 다가오게 되어있다. 당장 스크린 키패드에 없는 ctrl만 생각해봐도 복사 붙여넣기가 피곤해진다. 무선 키보드가 필수 아닌 필수가 되어버린다.

마우스는 또 어떠한가? 터치 스크린을 통하여 정확하고 복잡한 작업을 하기에는 무리가 있다. 클릭처럼 간단한 동작은 탭 이벤트로 호환될 수 있지만 우클릭, 휠, 휠 클릭 등 대체 제스쳐를 만들거나 외우기는 쉽지 않은 여정이 될 것이다. 당장 클릭 드래그만 해도 터치 스크린에서는 더블탭 드래그가 더 정확하게 작동한다. 마찬가지로 결국에는 무선 마우스 또한 아쉬운 상황이 다가오게 된다.

결국 랩탑에 올인원으로 붙어있는 하드웨어를 분리한 형태가 되어버렸지만 그렇다 하더라도 랩탑 + 어뎁터 + 마우스 세트를 들고다니는 것 보다는 부피가 줄어 휴대성이 크게 향상 되었다. 또한, 세계 공통인 랩탑의 멍청한 키배열을 사용할 필요 없이 손에 익은 배열의 무선 키보드를 사용할 수 있다는 것도 좋은 점으로 생각한다. 물론 태블릿 PC나 무선 키보드는 제품에 따라 무게나 부피가 천차만별이기에 가장 적합한 것으로 선택하는 것이 가장 중요한 점이라 할 수 있겠다.

가장 좋았던 점은 웹 브라우저만 있다면 터미널을 통하여 편집기와 연결된 Linux 머신을 사용할 수 있다는 점이다. 필요한 언어든 라이브러리든 의존성이든 접속한 브라우저의 터미널은 설치해둔 code-server의 터미널이므로 원하는 환경을 직접 구성하여 작업을 이어나갈 수 있다. 또한, 스마트폰으로 언제 어디에서든지 사소한 오타 정도는 바로 처리할 수 있고 내장 터미널을 통해 빌드도 할 수 있다는 점은 좋았다.

물론 이 장단점은 오로지 나의 기준이며 올드한 방식의 개발에 익숙한 육체에 갇혀버린 꼰대의 외침일 수도 있다. 또한 장시간 작업을 하는 기준으로 책정되었기 때문에 단점이 더 부각되어 설명에 편향이 있음을 인정한다.

결론

반년 정도 사용해 보면서 재미있게 시도해 봤고 또 나름 잘 활용도 했다고 평가한다. 그러나 이 환경으로 어떤 결과물을 만들어내기는 쉽지 않다는 것이 지금의 생각이다. 장시간 집중하여 결과물을 내기 위한 작업을 한다면 어찌 되었든 브라우저 같은 대안책이 아닌 윈도우 매니저에서 IDE를 직접 실행하는 메인 환경에 있을 확률이 더 높기 때문이다.

카페나 회의실에서 잠깐 보기 위해 code-server를 활용하는 것은 배보다 배꼽이 더 큰 작업일 수 있으며 생각보다 그렇게 효율적이진 못하다. 회의시간이 매우 길고 빈도가 높다면 고려해볼만 하겠다만 오히려 그 시간에 커피나 인간관계에 더 집중하거나 회의에 더 집중하는 것이 좋다고 생각한다.