태블릿으로 집 컴퓨터에서 개발하기 – VS Code 원격개발환경 구축

얼마 전 태블릿을 하나 구입했다. 회사에서 AI 채팅 용도로 쓰다가, 이걸로 개발도 할 수 있지 않을까 하는 생각이 들었다.

집에는 항상 켜두는 Mac mini가 있다. VS Code와 Python, Git이 설치되어 있고 작업 중인 프로젝트도 그 안에 있다. 태블릿에 같은 환경을 다시 만드는 것보다 집 컴퓨터에 접속해서 쓰는 편이 편할 것 같았다.

그래서 VS Code Remote Tunnels를 연결했다. 지금은 갤럭시탭 A9+에서 브라우저를 열어 Mac mini의 프로젝트를 수정하고 테스트를 실행한다. 처음 연결할 때 알아둬야 할 내용과 사용하면서 불편했던 부분을 정리해본다.

구성 방식

내가 사용한 구성은 다음과 같다. 집에서 개발 작업을 처리할 컴퓨터와 인터넷에 연결된 태블릿이 있으면 된다. 이 글은 Mac을 기준으로 설명하지만, Remote Tunnels는 Windows와 Linux에서도 사용할 수 있다.

  • 집 컴퓨터: Mac mini M4
  • 접속 장치: 갤럭시탭 A9+ 5G
  • 개발 도구: VS Code, Python, Git
  • 연결 방식: VS Code Remote Tunnels
  • 태블릿: Chrome에서 vscode.dev 접속
  • 로그인: GitHub 계정
태블릿의 vscode.dev와 집의 VS Code Server가 Microsoft 터널 서비스로 각각 연결되는 구조

태블릿은 편집 화면을 보여주고 키보드와 마우스 입력을 전달한다. 파일 저장, Python 실행, Git 명령, 테스트는 Mac에서 처리한다. 무거운 작업의 실행 속도는 Mac의 성능에 달려 있고, 태블릿에서는 브라우저 반응 속도와 인터넷 연결 상태가 사용감을 좌우한다.

vscode.dev는 설치 없이 브라우저에서 사용하는 VS Code다. 이것만 열어도 파일을 읽고 간단히 수정할 수 있지만, 웹 환경만으로는 일반적인 터미널이나 Python 실행환경을 사용할 수 없다. 집 컴퓨터의 개발환경까지 쓰려면 Remote Tunnels를 연결해야 한다.

터널 연결

외부에서 집 컴퓨터에 접속한다고 하면 공유기 포트포워딩부터 떠올리기 쉽다. Remote Tunnels에서는 Mac과 태블릿이 모두 Microsoft의 터널 서비스로 나가는 연결을 만든다. 일반적인 가정용 인터넷 환경이라면 이를 위해 공유기에 외부 접속 포트를 열 필요가 없다.

나는 이 점이 마음에 들었다. 별도의 SSH 서버나 공유기 설정 없이, 이미 사용하던 개발환경에 접속할 수 있었다. 다만 외부 터널 서비스를 차단하는 네트워크에서는 연결되지 않을 수 있다. 회사나 기관의 네트워크를 사용할 때는 해당 환경의 이용 정책도 먼저 확인해야 한다.

Mac 설정

먼저 Mac에 VS Code를 설치한다. 터미널에서 code 명령을 사용하려면 VS Code의 명령 팔레트에서 PATH 등록도 해줘야 한다.

  1. VS Code에서 Command + Shift + P를 누른다.
  2. Shell Command: Install 'code' command in PATH를 검색해 실행한다.
  3. 터미널을 새로 열고 아래 명령을 입력한다.
code tunnel

처음 실행하면 서버 라이선스 동의와 계정 로그인 안내가 나온다. 나는 GitHub 계정을 사용했다. Microsoft 계정으로도 인증할 수 있으니, 앞으로 태블릿에서 사용할 계정으로 로그인하면 된다.

인증과 컴퓨터 이름 설정을 마치면 VS Code Server가 실행되고 접속 주소가 표시된다. 아래는 형식만 보여주는 예시다. 실제로 접속할 때는 터미널에 나온 주소를 사용한다.

https://vscode.dev/tunnel/home-mac

이 상태에서 태블릿 연결을 먼저 확인한다. 터미널에서 실행한 code tunnel을 종료하면 터널도 끊기므로, 연결 확인이 끝날 때까지는 실행해둔다.

태블릿 접속

태블릿의 Chrome에서 Mac에 표시된 주소를 연다. 로그인 화면이 나오면 Mac에서 터널을 만든 계정과 같은 계정으로 로그인한다.

VS Code 화면이 열리면 Open Folder로 Mac의 프로젝트 폴더를 선택한다. 접속은 됐는데 왼쪽 탐색기에 파일이 보이지 않는다면, 아직 프로젝트 폴더를 열지 않은 상태인지부터 확인하면 된다.

/Users/user/Projects/sample-project

이 경로의 user와 sample-project는 예시다. 본인의 Mac 사용자 이름과 실제 프로젝트 경로로 바꾼다. 여기에서 파일을 수정하면 Mac에 있는 원본 파일이 수정된다. 태블릿에 별도의 복사본을 만드는 방식은 아니다.

터미널과 가상환경

연결이 끝나면 VS Code의 Terminal → New Terminal로 터미널을 연다. pwd를 실행해보면 안드로이드 경로 대신 Mac의 현재 작업 경로가 나온다.

pwd

기존 Python 프로젝트에 가상환경이 있다면 그것도 그대로 사용한다. 예를 들어 프로젝트 구성이 아래와 같다면 태블릿에 Python을 다시 설치할 필요가 없다.

Mac에 있는 sample-project 아래의 가상환경, 소스코드, 테스트, 프로젝트 설정 파일

프로젝트 폴더에서 가상환경을 활성화한 뒤 작업한다. 아래 테스트 명령은 해당 프로젝트에 pytest가 설치되어 있는 경우의 예시다.

cd ~/Projects/sample-project
source .venv/bin/activate
python --version
git status
pytest

source는 현재 터미널에서 프로젝트의 가상환경을 사용하도록 바꾸는 명령이다. 터미널을 새로 열었다면 다시 활성화해야 한다. 이후 파일 수정과 테스트, Git 작업은 Mac에서 직접 작업할 때와 같은 순서로 진행하면 된다.

상시 실행과 절전

연결할 때마다 집에서 터널을 실행해줄 수는 없다. 계속 사용할 생각이라면 Mac에서 터널을 서비스로 등록하는 편이 편하다.

code tunnel service install

서비스를 더 이상 사용하지 않을 때는 아래 명령으로 제거한다. 서비스 등록 후에는 Mac을 재시작한 뒤에도 접속되는지 확인해둔다. 서비스 설치만으로 재부팅 후 로그인이나 잠금 해제까지 자동으로 해결되는 것은 아니다.

code tunnel service uninstall

절전도 확인해야 한다. 화면이 꺼지는 것과 Mac 자체가 잠자기 상태로 들어가는 것은 다르다. 모니터만 꺼져 있어도 작업은 가능하지만, 시스템이 잠들면 원격 연결을 사용할 수 없게 된다.

code tunnel --no-sleep

--no-sleep은 터널 실행 중 컴퓨터가 잠자기 상태로 들어가지 않도록 하는 옵션이다. 이 명령 한 번으로 영구적인 절전 설정이 바뀌는 것은 아니다. 상시 서비스로 운영한다면 macOS의 시스템 설정에서도 절전 정책을 확인한다.

서비스와 절전 관련 옵션은 설치된 버전의 도움말에서도 확인할 수 있다.

code tunnel --help
code tunnel service --help

홈 화면 바로가기

태블릿에서 매번 브라우저를 열고 주소를 찾는 것은 번거롭다. 연결이 잘 되는 것을 확인한 뒤 Chrome 메뉴에서 홈 화면에 추가 또는 앱 설치를 선택하면 아이콘으로 실행할 수 있다. 표시되는 이름은 브라우저 버전에 따라 다를 수 있다.

태블릿 홈 화면 아이콘에서 vscode.dev를 열고 집의 Mac mini 프로젝트로 연결하는 흐름

PWA 형태로 설치되면 주소 표시줄 같은 브라우저 영역이 줄어 화면을 조금 더 넓게 쓸 수 있다. 일반 바로가기와 앱 설치는 동작이 다를 수 있으니, 아이콘을 만든 뒤 실제로 실행해보는 편이 좋다.

바로가기는 vscode.dev 첫 화면보다 터널에 연결된 주소를 기준으로 만드는 편이 편하다. 아이콘으로 열었을 때도 원하는 컴퓨터와 프로젝트가 열리는지 확인한다.

키보드와 확장

코드를 터치만으로 다루기는 불편하다. 블루투스 키보드와 마우스를 연결하면 파일 수정이나 터미널 작업이 훨씬 수월하다. 데스크톱 모드를 지원하는 태블릿이라면 창을 배치할 때도 도움이 된다.

다만 브라우저와 운영체제가 먼저 처리하는 단축키가 있다. Ctrl + W가 편집기 탭 대신 브라우저 탭을 닫거나, 확대·축소 단축키가 기대대로 동작하지 않을 수 있다. 나도 태블릿에서 글자 크기를 조정할 때 불편했다. PWA로 설치해도 모든 단축키 문제가 해결되는 것은 아니다.

확장 프로그램도 실행 위치를 구분해서 봐야 한다. 웹에서 동작하는 확장은 태블릿 브라우저에서, 원격 작업 공간과 연동하는 확장은 Mac 쪽에서 실행될 수 있다.

태블릿 브라우저에서 실행되는 웹 확장과 Mac의 원격 확장 호스트에서 실행되는 개발 확장

내가 설정할 때도 일부 AI 개발 확장이 웹 환경에서 제대로 표시되지 않는 문제가 있었다. 데스크톱 VS Code에서 된다고 브라우저에서도 똑같이 되는 것은 아니었다. 확장이 보이지 않거나 실행되지 않으면 웹 지원 여부와 원격 환경의 설치 상태부터 확인하는 편이 좋다.

보안 설정

공유기 포트를 열지 않아도 된다는 점은 편하지만, 로그인 계정과 접속 장치 관리는 별개다. 이 계정으로 집 컴퓨터의 파일과 터미널에 접근할 수 있으므로 일반 웹서비스 로그인보다 신경 쓸 부분이 많다.

  • GitHub 또는 Microsoft 계정에 MFA를 설정하고, 가능하면 패스키나 FIDO2 보안키를 사용한다.
  • 태블릿에 화면 잠금을 설정하고 공용 장비에는 로그인 상태를 남기지 않는다.
  • Mac과 VS Code를 업데이트하고, 터널을 실행하는 계정에 불필요한 관리자 권한을 주지 않는다.
  • 개발환경에 저장된 API 키와 인증정보도 함께 관리한다.
  • 사용을 중단한 터널은 정리하고, 테스트용 포트 공유가 필요하다면 공개 범위도 확인한다.

현재 컴퓨터의 터널 등록을 해제할 때는 아래 명령을 사용한다. 등록을 해제하면 해당 터널로는 다시 접속할 수 없으므로, 사용을 끝낸 뒤 Mac에서 실행한다. 상시 서비스도 사용하지 않을 생각이라면 앞의 서비스 제거 작업을 함께 진행한다.

code tunnel unregister

원격 데스크톱과 차이

이 구성은 Mac 화면 전체를 태블릿으로 보내는 원격 데스크톱과 다르다. VS Code 화면은 태블릿 브라우저에서 동작하고, 편집과 명령 실행에 필요한 데이터가 원격으로 오간다.

Mac 화면 전체를 조작하는 원격 데스크톱과 브라우저에서 개발 작업을 하는 VS Code Remote Tunnels의 차이

사진 편집이나 일반 데스크톱 프로그램까지 써야 한다면 원격 데스크톱이 더 알맞다. 내가 하려던 일은 코드 수정과 터미널 작업이었으므로 Remote Tunnels로 충분했다.

인터넷을 통한 연결이라 입력과 응답 사이에 지연은 생길 수 있다. 빌드나 테스트가 Mac에서 돌아간다고 해서 네트워크 상태와 무관해지는 것은 아니다. 사용감은 연결 상태에 따라 달라진다.

사용해보니

가장 편한 부분은 개발환경을 한 곳에 유지할 수 있다는 점이다. 태블릿에 도구를 다시 설치하거나 프로젝트 파일을 복사할 필요가 없다. 필요한 장치에서 집 컴퓨터의 같은 프로젝트를 열어 작업하면 된다.

태블릿이나 노트북에서 Mac의 같은 소스코드, Python, Git 환경에 접속해 작업하는 구성

나는 태블릿에서 파일을 수정하고 테스트 결과를 확인하는 용도로 사용하고 있다. 프로젝트의 실행환경이 그대로라 장치를 바꿀 때 환경을 다시 맞추는 일이 줄었다.

물론 작은 화면의 한계는 있다. 파일과 터미널을 여러 개 띄우면 금방 답답해지고, 단축키나 확장 호환성도 데스크톱만큼 편하지 않다. 집 컴퓨터가 꺼져 있거나 인터넷이 끊기면 원격 작업도 멈춘다.

태블릿으로 노트북의 모든 작업을 대신하려고 하면 아쉬운 부분이 많다. 그래도 코드 몇 줄을 고치거나 테스트를 돌리고 진행 상황을 확인하는 용도로는 꽤 쓸 만했다. 이미 집에 켜둘 수 있는 컴퓨터가 있다면 태블릿을 활용하는 방법 하나가 늘어나는 셈이다.

참고 문서

설정 방법은 2026년 9월 기준으로 확인했다. 메뉴 이름이나 확장 프로그램의 지원 범위는 버전에 따라 달라질 수 있다.

관련 글

추천 글