개발환경 구축

Windows 에서 Oh my posh 사용 (터미널 예쁘게 사용하기)

뒷골목프로그래머 2022. 6. 3. 17:51
반응형

안녕하세요.

글쓰는 개발자입니다.

 

 좋은 글꼴과 Code highlighting 등 개발자들의 개발 편의를 증진 시키는 많은 플러그인들이 존재합니다. 이런 것들이 없었다면, 우리는 Notepad에 코드를 작성하고 눈이 아픈 것을 참아가며 개발을 진행했을 겁니다.

 현대의 개발자들은 당연하게도 IDE를 설치하고 취향에 따라 원하는 Theme를 설치하여 사용하곤 하는데요. 개인적으로는 예쁘게 꾸민 상태에서 개발을 하는 것이 훨씬 즐겁고 보기도 편합니다. 개인용도로 사용하는 Macbook의 경우 Oh my ZSH를 설치하여 terminal을 사용 중이지만 회사에서는 Windows PC를 사용 중이라 terminal UI가 상당히 불편하게 느껴졌습니다.

 그래서 저는 Oh my posh를 설치하여 mac에서와 같이 terminal UI를 변경시켜 사용했는데요. 본 포스팅에서 방법을 소개드리고자합니다.

 이 포스트를 끝까지 따라하시면, 여러분은 Windows Powershell 에서 아래와 같은 UI로 사용하실 수 있습니다.

windows powershell Oh my Posh 적용 모습

 

목차

1. Oh my posh 설치 / Theme 선택

2. Theme 선택

3. Nerd Font 글꼴 설치

4. powershell Font setting

5. VS Code Powershell 설정 (Powershell 7 의 경우)

 

1. Oh my posh 설치 / Theme 선택

 먼저, Powershell을 관리자 권한으로 실행 시킵니다. 그리고 아래 명령어를 입력하여 Oh-my-posh를 설치합니다.

winget install oh-my-posh
oh-my-posh get shell

 

2. Theme 선택

 ohmyposh docs의 theme 탭에서 원하는 theme를 확인 합니다.

저는 Atomic Theme를 선택하여 적용하였습니다.
https://ohmyposh.dev/docs/themes

 

Themes | Oh My Posh

Oh My Posh comes with many themes included out-of-the-box. Below are some screenshots of the more common themes.

ohmyposh.dev

 

1) 설정 Notepad 열기

 먼저 선택한 Theme 관련 정보를 Notepad에 입력해야 합니다. notepad $PROFILE 명령어 실행시 에러 팝업이 나타나는 경우에는 아래 코드에서 경로 지정 관련 명령어를 먼저 실행한 후 다시 시도 하시면 됩니다.

notepad $PROFILE

# Error 팝업이 나타날 시 아래 명령문 먼저 실행
New-Item -Path $PROFILE -Type File -Force

2) Notepad에 선택한 Theme 정보 입력

   저는 앞서, Atomic Them를 선택했다고 말씀 드렸는데요. Atomic Theme 적용을 위해서 해당 Theme의 Github에 저장된 json 파일을 불러와 PROFILE이 저장된 Notepad에 입력해야 합니다.

atomic.omp.json

 입력 내용의 형태는 아래와 같습니다. 저는 atomic.omp.json을 [자신이 선택한 Theme의 json 파일] 부분에 넣어 줄 것입니다.

oh-my-posh init pwsh --config ‘https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/[자신이 선택한 Theme의 json 파일]’ | Invoke-Expression

 아래 문구를 열려있는 Notepad에 입력 후 저장하고 닫습니다.

oh-my-posh init pwsh --config ‘https://raw.githubusercontent.com/JanDeDobbeleer/oh-my-posh/main/themes/atomic.omp.json’ | Invoke-Expression

 

3) Atomic Theme 적용 결과 확인

 이제 Atomic Theme가 적용 완료 되었습니다. 하지만, 예시로 본 것과는 조금 다르게 약간 깨져있는데요. 이것은 글꼴 때문에 발생한 문제입니다. 따라서 우리는 Nerd Font를 설치하고, 이 것을 Powershell에 적용하겠습니다.

적용된 Theme

 

2. Nerd Font 글꼴 설치

 아래 URL에 접속하여 원하는 Font를 다운로드하고 Windows에 설치해주세요. 저는 Nerd Font 사이트에서 Caskaydia Cove Nerd Font를 선택해서 설치 했습니다.

https://www.nerdfonts.com/font-downloads

 

Nerd Fonts - Iconic font aggregator, glyphs/icons collection, & fonts patcher

Iconic font aggregator, collection, & patcher: 3,600+ glyph/icons, 40+ patched fonts: Hack, Source Code Pro, more. Popular glyph collections: Font Awesome, Octicons, Material Design Icons, and more

www.nerdfonts.com

 

3. powershell Font setting

 설치한 Font를 Powershell에 적용해보겠습니다.

1) Powershell을 열고, Ctrl + Shift + , 를 눌러 settings.json 파일을 열어줍니다.

2) "font" > "face" 에 자신이 설치한 Font 명을 입력한 후 저장을 눌러줍니다.

3) 완전히 적용된 모습을 확인합니다.

 

4. VS Code Powershell 설정 (Powershell 7 의 경우)

  저는 VS Code를 사용하여 개발합니다. 그리고 Powershell 또한 7 버전으로 업데이트 하여 사용 중입니다. 저 처럼 Powershell 7을 사용하시는 분들은 VS Code의 settings.json을 아래와 같이 수정하시어 VS Code에서도 Oh my posh를 사용하시기 바라겠습니다.

 settings.json의 많은 세팅 중에서 windows PowerShell 부분을 아래와 같이 수정하시고 깨지는 현상을 방지하기 위해 설치해 두었던 Nerd Font를 terminal의 fontefamily로 설정합니다.

 그리고 VS Code를 재시작하면 Oh-my-posh를 VS Code에서도 사용하실 수 있습니다.

{
  ...

	"terminal.integrated.profiles.windows": {
	    ...
	    "Windows PowerShell": {
	        "path": "C:\\Program Files\\PowerShell\\7\\pwsh.exe"
	    }
			...
	},
	"terminal.integrated.fontFamily": "CaskaydiaCove NF”
  ...
}

 

반응형