Web IDE

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

플래그: 이 기능의 사용 가능 여부는 기능 플래그로 제어됩니다. 자세한 정보는 이력을 참조하세요.

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

웹 IDE를 원격 개발 환경과 함께 사용하려면 원격 개발을 참조하세요.

웹 IDE에서 GitLab Flavored Markdown 미리 보기를 지원하는 것은 issue 645에서 제안됩니다.

웹 IDE 열기

웹 IDE를 열려면:

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

파일이나 디렉터리에서

파일 또는 디렉터리에서 웹 IDE를 열려면:

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

병합 요청에서

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

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

웹 IDE는 새로운 파일과 수정된 파일을 별도 탭에 열고 변경 내용을 옆으로 표시합니다. 로드 시간을 줄이기 위해 변경된 줄이 가장 많은 10개 파일만 자동으로 엽니다.

왼쪽 탐색기 사이드바에서 모든 새로운 파일이나 수정된 파일은 파일 이름 옆에 병합 요청 아이콘()으로 표시됩니다. 파일 변경 사항을 보려면 파일을 마우스 오른쪽 단추로 클릭한 다음 병합 요청 기본값과 비교를 선택하세요.

파일 열기

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

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

열린 파일 검색

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

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

변경된 파일 목록 보기

웹 IDE에서 수정한 파일 목록을 보려면:

  • 왼쪽 활동 표시줄에서 원격 리포지토리를 선택하거나 Control+Shift+G를 누릅니다.

CHANGES, STAGED CHANGES, MERGE CHANGES가 표시됩니다. 자세한 정보는 VS Code 문서를 참조하세요.

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

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

커밋되지 않은 변경사항이 없는 경우 로컬 히스토리에서 변경사항을 복원할 수 있습니다. 웹 IDE에서 커밋되지 않은 변경사항을 복원하려면:

  1. Shift+Command+P를 누릅니다.
  2. 검색 상자에 Local History: Find Entry to Restore을 입력합니다.
  3. 커밋되지 않은 변경사항을 포함하는 파일을 선택합니다.

파일 업로드

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

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

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

    • 왼쪽 탐색기 사이드바에서 오른쪽 상단에 새 폴더()를 선택합니다.
  3. 디렉터리를 마우스 오른쪽 단추로 클릭한 다음 업로드를 선택합니다.
  4. 업로드할 파일을 선택합니다.

한 번에 여러 파일을 업로드할 수 있습니다. 파일은 업로드되어 자동적으로 리포지토리에 추가됩니다.

브랜치 전환

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

  1. 하단 상태 표시줄에서 왼쪽에 현재 브랜치 이름을 선택합니다.
  2. 새 브랜치를 입력하거나 기존 브랜치를 선택합니다.

브랜치 만들기

웹 IDE에서 현재 브랜치로부터 새로운 브랜치를 만들려면:

  1. 하단 상태 표시줄에서 왼쪽에 현재 브랜치 이름을 선택합니다.
  2. 드롭다운 목록에서 새 브랜치 만들기를 선택합니다.
  3. 새 브랜치 이름을 입력합니다.

리포지토리에 쓰기 권한이 없는 경우 새 브랜치 만들기가 표시되지 않습니다.

변경사항 커밋

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

  1. 왼쪽 활동 표시줄에서 원격 리포지토리를 선택하거나 Control+Shift+G를 누릅니다.
  2. 커밋 메시지를 입력합니다.
  3. 현재 브랜치에 커밋하거나 새 브랜치를 만듭니다.

병합 요청 만들기

웹 IDE에서 병합 요청를 만들려면:

  1. 변경사항을 커밋합니다.
  2. 오른쪽 하단에 나타나는 알림에서 MR 만들기를 선택합니다.

더 많은 정보는 놓친 알림 보기를 참조하세요.

명령 팔레트 사용

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

  1. Shift+Command+P를 누릅니다.
  2. 명령을 입력하거나 선택합니다.

설정 편집

사용자 및 작업 영역 설정을 보고 수정할 수 있도록 설정 편집기를 사용할 수 있습니다. 웹 IDE에서 설정 편집기를 열려면 다음을 선택합니다.

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

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

키보드 바로 가기 편집

모든 사용 가능한 명령에 대한 기본 키 할당을 보고 수정할 수 있도록 키보드 바로 가기 편집기를 사용할 수 있습니다. 웹 IDE에서 키보드 바로 가기 편집기를 열려면 다음을 선택하세요.

  • 상위 메뉴 바에서 파일 > 기본 설정 > 키보드 바로 가기를 선택하거나, 또는 Command+K를 누른 다음 Command+S를 누릅니다.

키보드 바로 가기 편집기에서 다음을 검색할 수 있습니다.

  • 변경하려는 키 할당
  • 추가하거나 제거하려는 명령에 대한 키 할당

키 할당은 키보드 레이아웃에 따라 달라집니다. 키보드 레이아웃을 변경하면 기존 키 할당이 자동으로 업데이트됩니다.

색 테마 변경

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

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

  1. 상위 메뉴 바에서 파일 > 기본 설정 > 테마 > 색 테마를 선택하거나, 또는 Command+K를 누른 다음 Command+T를 누릅니다.
  2. 드롭다운 목록에서 화살표 키로 테마를 미리보기합니다.
  3. 테마를 선택합니다.

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

동기화 설정 구성

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

  1. Shift+Command+P를 누릅니다.
  2. 검색 상자에 Settings Sync: Configure를 입력합니다.
  3. 다음을 위해 확인란을 선택하거나 선택 해제합니다:
    • 설정
    • 키보드 바로 가기
    • 사용자 코드 조각
    • 사용자 작업
    • UI 상태
    • 확장 기능
    • 프로필

이러한 설정은 여러 웹 IDE 인스턴스 간에 자동으로 동기화됩니다. 사용자 프로필을 동기화하거나 설정의 이전 버전으로 되돌릴 수 없습니다.

누락된 알림 보기

웹 IDE에서 작업을 수행할 때 발생하는 알림은 오른쪽 하단에 나타납니다. 놓칠 수 있는 알림을 보려면:

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

대화형 웹 터미널

상태: Beta

웹 IDE에서 원격 개발 서버를 설정하면 대화형 웹 터미널을 사용하여 다음을 수행할 수 있습니다:

  • 서버의 원격 셸에 액세스
  • 서버의 파일 시스템과 원격으로 명령 실행

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

추가 정보는 원격 개발를 참조하세요.

확장 마켓플레이스

제공: GitLab.com
이 기능의 가용성은 기능 플래그로 제어됩니다. 추가 정보는 히스토리를 참조하세요.

사전 요구 사항:

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

확장 마켓플레이스는 GitLab 인스턴스 수준에서 미리 구성되어 있으며 고정된 상태로 https://open-vsx.org/로 설정되어 있습니다. Epic 11770은 이 동작을 변경하기로 제안했습니다.

확장 설치

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

  1. 상위 메뉴 바에서 보기 > 확장을 선택하거나, 또는 Command+Shift+X를 누릅니다.
  2. 검색 상자에 확장 이름을 입력합니다.
  3. 설치하려는 확장을 선택합니다.
  4. 설치를 선택합니다.

확장 제거

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

  1. 상위 메뉴 바에서 보기 > 확장을 선택하거나, 또는 Command+Shift+X를 누릅니다.
  2. 설치된 확장 목록에서 제거하려는 확장을 선택합니다.
  3. 설치를 선택합니다.

관련 주제

문제 해결

웹 IDE를 사용할 때 다음과 같은 문제를 만날 수 있습니다.

입력시 문자 오프셋

웹 IDE에서 입력할 때 4자리 문자 오프셋을 받을 수 있습니다. 해결 방법은 다음과 같습니다:

  1. 상위 메뉴 바에서 파일 > 기본 설정 > 설정을 선택하거나, 또는 Command+,를 누릅니다.
  2. 오른쪽 상단에서 설정 열기 (JSON)을 선택합니다.
  3. settings.json 파일에서 "editor.disableMonospaceOptimizations": true를 추가하거나 "editor.fontFamily" 설정을 수정합니다.

추가 정보는 VS Code issue 80170을 참조하세요.

OAuth 콜백 URL 업데이트

Offering: Self-managed

Prerequisites:

  • 인스턴스에 관리자 액세스 권한이 있어야 합니다.

Web IDE는 인증을 위해 인스턴스 전체적인 OAuth 애플리케이션을 사용합니다. OAuth 콜백 URL이 잘못 구성되어 있으면 Cannot open Web IDE 오류 페이지와 다음 메시지가 표시될 수 있습니다: 

Web IDE에 액세스하는 URL과 구성된 OAuth 콜백 URL이 일치하지 않습니다. 이 문제는 보통 프록시를 사용하는 경우에 발생합니다.

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

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

  1. 왼쪽 사이드바에서 아래쪽으로 이동하여 관리자를 선택합니다.
  2. 애플리케이션을 선택합니다.
  3. GitLab Web IDE를 선택하여 편집을 선택합니다.
  4. OAuth 콜백 URL을 입력합니다. 새 줄로 구분된 여러 개의 URL을 입력할 수 있습니다.

문제 신고

문제를 신고하려면 새 이슈를 생성하여 다음 정보를 포함하십시오:

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

유료 티어를 이용 중이라면 지원팀에 문의하여 도움을 받을 수도 있습니다.