[Visual Studio Code] 확장 프로그램 background 사용법
오늘도 비쥬얼 스튜디오 코드를 켜면 항상 똑같은 검은 화면만이 당신을 맞이해준다. 지겹다고 느껴지지 않는가? 그렇다면 단조롭기만 한 검은 화면을 원하는 배경화면으로 바꿔보자. 확장 프로그램 'background'만 있다면 가능하다!!
background란 무엇인가?
백그라운드(Background)라는 Visual Studio Code(VSCode) 확장 프로그램은 개발자의 코드 작성 환경을 더욱 개인화하고 즐겁게 만들어주는 획기적인 툴이다. 이 확장 기능을 통해 사용자는 VSCode의 배경에 이미지를 삽입할 수 있으며, 이를 통해 보다 개성 있고 독창적인 코딩 환경을 구성할 수 있다. 개발 작업에 집중해야 하는 긴 시간 동안, 사용자가 선호하는 이미지나 사진을 배경으로 설정함으로써 작업의 피로도를 줄이고, 창의력과 생산성을 향상할 수 있다.
주요 특징
- 단순히 이미지 삽입만 할 수도 있고, 풀사이즈 배경화면을 적용할 수도 있다.
- 원하는 사진으로 커스터마이징이 가능하다.
설치 방법
확장탭에 들어가서 'background'이라고 검색한 뒤 가장 상단에 뜬 확장 프로그램을 눌러준다. 들어가준 뒤에 바로 설치해 주면 된다.
성공적으로 설치가 되었다면 코드창이 다음과 같이 바뀌어 있을 것이다. 왠 이상한 캐릭터가 갑자기 생겨서 이상하다고 느낄 수 있는데 이게 정상적으로 설치되었다는 표시이다. 어차피 곧 우리가 원하는 사진으로 바꿀 것이니 무시하도록 하자..
자 이제 Ctrl + Shift + P 를 눌러 명령어 검색칸을 띄워 준 뒤에 open user settings(json)을 검색해서 클릭해 준다.
누르게 되면 settings.json 파일이 열릴 텐데 그곳에서 커스터마이징을 해줘야 한다.
이미지 삽입 방법
먼저 풀스크린이 아닌 이미지 하나를 삽입하는 방법을 알려주겠다. 예시를 보여주면서 설명해 주겠다.
이 코드는 커스터마이징을 위해 내가 작성한 코드이다. 이 정도 코드면 충분하다. 이제 이 코드들의 쓰임에 대해 설명하겠다.
background.customImages : 이 코드를 통해 원하는 이미지를 삽입할 수 있다. 대괄호 안에 이미지의 저장 위치 또는 이미지 주소를 입력해 주면 된다. 입력 시에 큰따옴표로 묶어서 문자열로 인식되게끔 해야 하고, 여러 이미지를 입력하고 싶은 경우 위의 코드처럼 콜론(,)으로 구분해 주면 된다. 이미지의 저장 위치를 입력 시에는 위 코드처럼 file:/// 뒤에 이미지가 저장되어 있는 곳의 위치를 써주면 된다.
background.style : 이 코드를 통해 위치, 크기, 투명도 등의 이미지의 여러 속성들을 제어할 수 있다. 뒤에 설명한 코드들인 background-position, background-size, opacity 등은 이곳 안에 작성해줘야 한다.
background-position : 이미지의 위치를 지정한다. 이때 css 속성 object-position이 사용되므로 본인이 이에 대해 잘 모른다면 검색을 하거나 아래 링크를 참고하길 바란다.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
object-position - CSS: Cascading Style Sheets | MDN
The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.
developer.mozilla.org
background-size : 이미지의 크기를 지정한다. 이때도 css 속성 background-size가 사용된다. 이것 또한 잘 모르면 검색이나 아래 링크를 참고하면 된다.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
background-size - CSS: Cascading Style Sheets | MDN
The background-size CSS property sets the size of the element's background image. The image can be left to its natural size, stretched, or constrained to fit the available space.
developer.mozilla.org
opacity : 이미지의 투명도를 지정한다. 0 ~ 1의 숫자를 입력해 주면 된다.
이외에도
background.useFront : 이미지가 코드와 같은 요소들의 앞에 위치할지를 결정하는 코드이다. 기본값은 true이며, false로 변경 시에 여러 요소들의 뒤에 가려지면서 이미지가 삽입된다.
background.enabled : background 확장 프로그램의 활성화를 결정할 수 있다. 기본값은 true이며, false로 변경시에 삽입되었던 이미지가 보이지 않게 된다.
커스터 마이징이 끝났으면 Ctrl + S를 눌러 settings.json 파일을 저장해 준다. 그러면 이처럼 오른쪽 하단에 알림이 뜰 텐데 Restart vscode 버튼을 눌러 재시작을 해준다. 만약 이외의 경고 알람이 뜬다면 x버튼 옆의 설정 버튼을 눌러 다음부턴 뜨지 않게 하기를 눌러준다.
짠! 성공적으로 적용된 모습이다. 단조로웠던 코딩창이 한결 나아진 느낌이다. 이 작은 변화가 긴 작업 시간 동안 당신에게 큰 행복과 만족감을 줄지도 모른다.ㅋㅋ 독특하고 개인화된 작업 공간에서 코드를 작성하면서 즐거움을 느껴볼 수 있길 바라면서 풀스크린 배경화면을 적용하는 방법은 다음 글에 작성하도록 하겠다.