Web IDE

Tier: Free, Premium, Ultimate Offering: GitLab.com, Self-managed, GitLab Dedicated

이 기능의 사용 가능성은 기능 플래그에 의해 제어됩니다.
자세한 내용은 기록을 참조하세요.

Web IDE는 커밋 스테이징을 가진 고급 편집기입니다.
Web IDE를 사용하여 GitLab UI에서 여러 파일을 직접 변경할 수 있습니다.
보다 기본적인 구현은 Web Editor를 참조하세요.

Web IDE를 원격 개발 환경과 연결하려면 Remote development를 참조하세요.

Web IDE에서 GitLab Flavored Markdown 미리보기를 지원하는 것이 제안되었습니다
문제 645에서.

Web IDE 열기

Web IDE를 열려면:

  1. 왼쪽 사이드바에서 검색 또는 이동을 선택하고 프로젝트를 찾습니다.
  2. . 키보드 단축키를 사용합니다.

파일 또는 디렉토리에서

파일 또는 디렉토리에서 Web IDE를 열려면:

  1. 왼쪽 사이드바에서 검색 또는 이동을 선택하고 프로젝트를 찾습니다.
  2. 파일 또는 디렉토리로 이동합니다.
  3. 편집 > Web IDE에서 열기를 선택합니다.

병합 요청에서

병합 요청에서 Web IDE를 열려면:

  1. 왼쪽 사이드바에서 검색 또는 이동을 선택하고 프로젝트를 찾습니다.
  2. 병합 요청으로 이동합니다.
  3. 오른쪽 상단에서 코드 > Web IDE에서 열기를 선택합니다.

Web IDE는 새 파일과 수정된 파일을 별도의 탭에서 열고 변경 사항을 나란히 표시합니다.
로드 시간 단축을 위해 가장 많은 줄이 변경된 10개 파일만 자동으로 열립니다.

왼쪽 Explorer 사이드바에서 모든 새 파일이나 수정된 파일은 해병 요청 아이콘 ( )으로 파일 이름 옆에 표시됩니다.
파일의 변경 사항을 보려면 파일을 마우스 오른쪽 버튼으로 클릭하고 병합 요청 기준과 비교를 선택합니다.

파일 열기

Web IDE에서 이름으로 파일을 열려면:

  1. Command+P를 누릅니다.
  2. 검색 상자에 파일 이름을 입력합니다.

열린 파일 검색

Web IDE에서 열린 파일을 검색하려면:

  1. Shift+Command+F를 누릅니다.
  2. 검색 상자에 검색어를 입력합니다.

수정된 파일 목록 보기

Web IDE에서 수정된 파일 목록을 보려면:

  • 왼쪽 활동 바에서 소스 제어를 선택하거나
    Control+Shift+G를 누릅니다.

당신의 CHANGES, STAGED CHANGES, MERGE CHANGES가 표시됩니다.
자세한 내용은 VS Code 문서를 참조하세요.

미리 커밋되지 않은 변경 사항 복원

Web IDE에서 수정하는 파일을 수동으로 저장할 필요가 없습니다.
수정된 파일은 자동으로 스테이징되며 커밋할 수 있습니다.
커밋되지 않은 변경 사항은 브라우저의 로컬 저장소에 저장되며,
브라우저 탭을 닫거나 Web IDE를 새로 고침해도 지속됩니다.

커밋되지 않은 변경 사항이 없어진 경우,
로컬 기록에서 변경 사항을 복원할 수 있습니다.
Web IDE에서 커밋되지 않은 변경 사항을 복원하려면:

  1. Shift+Command+P를 누릅니다.

  2. 검색 상자에 Local History: Find Entry to Restore를 입력합니다.

  3. 커밋되지 않은 변경 사항이 있는 파일을 선택합니다.

파일 업로드

Web IDE에서 파일을 업로드하려면:

  1. 왼쪽 활동 표시줄에서 Explorer를 선택하거나,
    Shift+Command+E를 누릅니다.

  2. 파일을 업로드할 디렉토리로 이동합니다.
    새 디렉토리를 만들려면:

    • 왼쪽 Explorer 사이드바의 오른쪽 상단에서
      New Folder ( )를 선택합니다.

  3. 디렉토리를 마우스 오른쪽 버튼으로 클릭하고 Upload를 선택합니다.

  4. 업로드할 파일을 선택합니다.

여러 파일을 한 번에 업로드할 수 있습니다.
파일이 업로드되며 자동으로 저장소에 추가됩니다.

브랜치 전환

Web IDE는 기본적으로 현재 브랜치를 사용합니다.
Web IDE에서 브랜치를 전환하려면:

  1. 하단 상태 표시줄의 왼쪽에서 현재 브랜치 이름을 선택합니다.

  2. 기존 브랜치를 입력하거나 선택합니다.

브랜치 생성

Web IDE에서 현재 브랜치에서 브랜치를 생성하려면:

  1. 하단 상태 표시줄의 왼쪽에서 현재 브랜치 이름을 선택합니다.

  2. 드롭다운 목록에서 Create new branch를 선택합니다.

  3. 새 브랜치 이름을 입력합니다.

저장소에 대한 쓰기 권한이 없는 경우, Create new branch가 보이지 않습니다.

변경 사항 커밋

Web IDE에서 변경 사항을 커밋하려면:

  1. 왼쪽 활동 표시줄에서 Source Control을 선택하거나,
    Control+Shift+G를 누릅니다.

  2. 커밋 메시지를 입력합니다.

  3. 현재 브랜치로 커밋하거나 새 브랜치를 생성합니다.

병합 요청 생성

Web IDE에서 병합 요청을 생성하려면:

  1. 변경 사항을 커밋합니다.

  2. 오른쪽 하단에 나타나는 알림에서 Create MR을 선택합니다.

자세한 내용은 알림 보기를 참조하세요.

명령 팔레트 사용

명령 팔레트를 사용하여 많은 명령에 접근할 수 있습니다.
Web IDE에서 명령 팔레트를 열고 명령을 실행하려면:

  1. Shift+Command+P를 누릅니다.

  2. 명령을 입력하거나 선택합니다.

설정 편집

설정 편집기를 사용하여 사용자 및 작업 공간 설정을 보고 수정할 수 있습니다.
Web IDE에서 설정 편집기를 열려면:

  • 상단 메뉴 바에서 File > Preferences > Settings를 선택하거나,
    Command+,를 누릅니다.

설정 편집기에서 수정하려는 설정을 검색할 수 있습니다.

키보드 단축키 편집

키보드 단축키 편집기를 사용하여 모든 사용 가능한 명령의 기본 키 바인딩을 보고 수정할 수 있습니다.
Web IDE에서 키보드 단축키 편집기를 열려면:

  • 상단 메뉴 바에서 File > Preferences > Keyboard Shortcuts를 선택하거나,
    Command+K를 누른 후 Command+S를 누릅니다.

키보드 단축키 편집기에서 다음을 검색할 수 있습니다:

  • 변경하려는 키 바인딩
  • 키 바인딩을 추가 또는 제거하려는 명령

키 바인딩은 사용자의 키보드 레이아웃에 따라 다릅니다.
키보드 레이아웃을 변경하면 기존 키 바인딩이 자동으로 업데이트됩니다.

색상 테마 변경

Web IDE에서 다양한 색상 테마 중에서 선택할 수 있습니다.
기본 테마는 GitLab Dark입니다.

Web IDE에서 색상 테마를 변경하려면:

  1. 상단 메뉴 바에서 File > Preferences > Theme > Color Theme를 선택하거나, Command+K를 누른 다음 Command+T를 눌러주세요.
  2. 드롭다운 목록에서 화살표 키로 테마 미리보기를 합니다.
  3. 테마를 선택하세요.

활성 색상 테마는 사용자 설정에 저장됩니다.

동기화 설정 구성

Web IDE에서 동기화 설정을 구성하려면:

  1. Shift+Command+P를 누릅니다.
  2. 검색 상자에 Settings Sync: Configure를 입력합니다.
  3. 다음 항목에 대해 체크박스를 선택하거나 선택 해제합니다:
    • Settings
    • Keyboard shortcuts
    • User snippets
    • User tasks
    • UI state
    • Extensions
    • Profiles

이 설정은 여러 Web IDE 인스턴스에서 자동으로 동기화됩니다.
사용자 프로필을 동기화하거나 이전 버전의 동기화된 설정으로 돌아갈 수는 없습니다.

놓친 알림 보기

Web IDE에서 작업을 수행할 때 알림이 오른쪽 하단에 나타납니다.
놓친 알림을 보려면:

  1. 하단 상태 표시줄의 오른쪽에서 알림 목록을 보려면 종 모양 아이콘 ( )을 선택합니다.
  2. 보고 싶은 알림을 선택합니다.

대화형 웹 터미널

Status: Beta

Web IDE에서 원격 개발 서버를 설정할 때 대화형 웹 터미널을 사용하여:

  • 서버에서 원격 셸에 접근합니다.
  • 서버의 파일 시스템과 상호 작용하고 원격으로 명령을 실행합니다.

대화형 웹 터미널을 사용하여 러너와 상호작용할 수는 없습니다.
그러나 터미널을 사용하여 종속성을 설치하고 코드를 컴파일 및 디버그할 수 있습니다.

자세한 내용은 Remote development를 참조하세요.

확장 마켓플레이스

Offering: GitLab.com

이 기능의 가용성은 기능 플래그에 의해 제어됩니다.
자세한 내용은 이력을 참조하세요.

사전 요구 사항:

Web IDE에서 VS Code 확장을 다운로드하고 실행하기 위해 확장 마켓플레이스를 사용할 수 있습니다.

확장 마켓플레이스는 GitLab 인스턴스 수준에서 사전 구성되며
https://open-vsx.org/로 하드코딩되어 있습니다.
Epic 11770는 이 동작을 변경할 것을 제안합니다.

확장 설치

Web IDE에서 확장을 설치하려면:

  1. 상단 메뉴 바에서 보기 > 확장을 선택하거나 Command+Shift+X 키를 누릅니다.

  2. 검색 상자에 확장 이름을 입력합니다.

  3. 설치할 확장을 선택합니다.

  4. 설치를 선택합니다.

확장 제거

Web IDE에서 확장을 제거하려면:

  1. 상단 메뉴 바에서 보기 > 확장을 선택하거나 Command+Shift+X 키를 누릅니다.

  2. 설치된 확장 목록에서 제거할 확장을 선택합니다.

  3. 제거를 선택합니다.

관련 주제

문제 해결

Web IDE에서 작업할 때 다음과 같은 문제를 만날 수 있습니다.

입력 시 문자 오프셋

Web IDE에서 입력할 때, 4자 오프셋이 발생할 수 있습니다.

우회 방법:

  1. 상단 메뉴 바에서 파일 > 기본 설정 > 설정을 선택하거나 Command+, 키를 누릅니다.

  2. 오른쪽 상단 코너에서 설정 열기 (JSON)을 선택합니다.

  3. settings.json 파일에 "editor.disableMonospaceOptimizations": true를 추가하거나 "editor.fontFamily" 설정을 수정합니다.

자세한 정보는 VS Code issue 80170를 참조하세요.

OAuth 콜백 URL 업데이트

Offering: Self-managed

전제 조건:

  • 인스턴스에 대한 관리자 접근 권한이 있어야 합니다.

Web IDE는 인증을 위해 인스턴스 전체에서 사용 가능한 OAuth 애플리케이션을 사용합니다.

OAuth 콜백 URL이 잘못 설정된 경우, 다음 메시지와 함께 Cannot open Web IDE 오류 페이지를 만날 수 있습니다:

Web IDE에 액세스하는 데 사용하는 URL와 구성된 OAuth 콜백 URL이 일치하지 않습니다. 이 문제는 프록시를 사용할 때 자주 발생합니다.

이 문제를 해결하려면, GitLab 인스턴스에 액세스하는 데 사용되는 URL과 일치하도록 OAuth 콜백 URL을 업데이트해야 합니다.

OAuth 콜백 URL을 업데이트하려면:

  1. 왼쪽 사이드바 하단에서 관리자를 선택합니다.

  2. 애플리케이션을 선택합니다.

  3. GitLab Web IDE에 대해 편집을 선택합니다.

  4. OAuth 콜백 URL을 입력합니다. 여러 URL을 새 줄로 구분하여 입력할 수 있습니다.

문제 보고

문제를 보고하려면, 새 이슈 생성 시 다음 정보를 포함하세요:

  • 오류 메시지
  • 전체 오류 세부 정보
  • 문제가 발생하는 빈도
  • 문제를 재현하는 단계

유료 요금제를 사용하는 경우, 지원 팀에 문의하여 도움을 받을 수도 있습니다.