iTerm2 설치와 VSCode 터미널 연동

Hemudi | Hemdi·2021년 11월 16일

⚙ 개발환경

목록 보기

1/1

1. iTerm2란?

Mac OS의 공식 터미널 어플리케이션을 대체할 수 있는 가상 터미널 어플리케이션로 기본 터미널보다 다양한 추가 기능을 제공하고 있습니다. 추가 기능을 정리한 공식 사이트에 따르면 화면 분할, 단축키, 검색, 복사 모드, 붙여넣기 히스토리, Growl 알림, 자동완성 등의 기능을 제공하고 있다고 합니다.

하지만 무엇보다도 커스텀해서 예쁘게 꾸며 쓸 수 있다는 점! ^o^)b 야호! 예쁜거 최고!
거기다 그렇게 이쁘게 꾸민 터미널을 VSCode 의 터미널창으로 연동해서 사용할 수 있다고 합니다! 설치하지 않을 이유가 없지요!ㅎㅎ

물론 기본 터미널도 똑같이 zsh, oh my zsh 를 이용하면 똑같이 꾸밀 수 있긴 하지만 예전에 학교 컴퓨터로 실습할때 터미널에서 아무거나 막 건들이다가 식은땀을 흘린 전적이 있어서 가급적이면 기본 터미널은 그냥 손 안대고 순정 상태로 쓰고 있었습니다.

그런와중 코쿼 코코아의 조원분께서 iTerm2에 대해 알려주셨고 너무 졸려서 코딩도 잘 안되는 김에 호다닥 찾아서 적용해봤습니다!

2. 참고한 글

지금부터 정리할 내용은 대부분 다 아래의 글들을 참고해서 적용한 것들입니다. 이 글은 제가 후에 다시 iTerm2과 VSCode를 새로 설치하여 설정할때 보기위해 정리하는 겸 쓰는 글이므로 좀 더 자세하고 다양한 정보를 원한다면 아래의 글들을 보시는 것을 추천합니다!

하지만 다른 글로 넘어가 읽기 귀찮다 하시는 분들은 아래로 뫼시겠습니다! ^-^)/

3. iTerm2 커스텀을 위한 준비

iTerm2는 처음 설치를해서 실행시켜보면 아래와 같이 기본 터미널과 크게 다르지 않아 보입니다.

하지만 몇개의 설정을 하고 나면 아래와 같이 바꿀 수 있습니다!

이렇게 꾸미기 위해서는 아래와 같은 준비물이 필요합니다.

✅ iTerm2 : 가상 터미널 어플리케이션
✅ Homebrew : macOS 용 패키지 관리자
✅ ZSH : 터미널 shell 환경을 위한 도구
✅ Oh My ZSH : zsh 설정 관리를 위한 프레임워크

1. iTerm2

iTerm2의 설치 방법은 간단합니다.

iTerm2 의 공식사이트에 들어가 위의 다운로드 버튼을 눌러 파일을 다운 받으면 됩니다!

2. Homebrew

Homebrew는 공식 사이트에 나와있는 것 처럼 터미널에 저 글을 복사 붙여넣기해서 설치하면 됩니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

설치 완료한 iTerm2를 켜서 복붙해도 설치 가능!

3. ZSH와 Oh My ZSH

ZSH 는 위에서 설치한 homebrew 를 이용해 설치할 수 있습니다. 터미널에 brew 명령어를 이용해 아래와 같이 입력하시면 됩니다.

brew install zsh

zsh가 정상적으로 설치가 되면 이어 아래의 글을 복붙해 Oh My ZSH 를 설치하시면 iTerm2 커스텀을 위한 준비는 끝이납니다.

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

4. Oh My ZSH 테마 변경

가장 기본적인 커스텀으로는 Oh My Zsh의 테마를 변경하는 것입니다. 테마의 종류는 ohmyzsh github wiki : Themes 에서 확인이 가능합니다.

제가 변경하고 싶은 테마는 agnoster 테마로 iTerm2 커스텀 자료들을 살펴보면 제일 많이 나오는 테마로 현재 경로를 화살표 모양으로 눈에 띄게 보여주고 현재 디렉토리에서 Git의 상태를 알려주는 기능이 있습니다. 변경 방법은 아래와 같습니다.

1. .zshrc 열기

vi ~/.zshrc

테마의 설정값을 변경하기 위해 터미널에 위의 명령어를 입력해 .zshrc 파일을 vi 에디터로 엽니다.

2. ZSH_THEME 수정

vi 에디터로 .zshrc 가 열리면 키보드의 i 버튼을 눌러 입력 모드로 변환
조금 내리다보면 나오는 ZSH_THEME 값을 찾아 디폴트값인 robbyrussell 을 지우고 agnoster 로 변경
ESC를 누른 뒤 :wq! 를 입력 후 Enter로 저장하며 종료
source ~/.zshrc 명령어를 입력하여 파일의 변경사항을 적용시키거나 그냥 터미널을 껐다 킵니다.

3. 테마 변경 결과

성공적으로 ZSH_THEME를 변경하여 터미널을 실행하면 아래와 같이 나오는걸 확인 할 수 있습니다.

그런데 문제가 있습니다. 결과를 확인해보면...엥? 뭔가 변하긴 했는데 예상한 모습과는 다릅니다. 화살표는 어디가고 왠 이상한 물음표가...?

예. 폰트가 깨진겁니다. 이제 다음은 폰트를 변경해야합니다.

5. Font 수정

1. D2 Coding 폰트 설치

폰트는 대부분의 글에서 D2 Coding 글꼴을 추천하고 있었습니다. 그래서 저도 적용을 해보니 폰트도 안깨지고 가독성도 좋았습니다!

D2 Coding 깃헙에 들어가면 압축 파일로 폰트를 다운받을 수 있습니다. 다운 받은 파일 내 폰트 파일을 더블클릭하면 글꼴을 설치할 수 있습니다.

2. iTerm2에 D2 Coding 폰트 적용

폰트 적용은 iTerm2 의 Preferences 창에서 설정 할 수 있습니다.

단축키로 [ cmd + , ] 를 눌러 Preferences 창을 열고 Profiles >> Text 메뉴로 들어가면 하단에 Font 설정창이 있습니다. 검색을 통해 쉽게 원하는 폰트를 찾을 수 있습니다.

참고로 옆의 파란줄친 부분의 설정으로 폰트의 형태, 크기, 자간, 행간도 수정할 수 있습니다!

3. 폰트 수정 후

짜잔! 폰트가 깨지지 않고 정상적으로 보입니다! ^o^)/ 야호

이 정도로 기본적인 테마 변경만해도 편리하고 좋아보입니다. 하지만 여전히 너무 딱딱해보이고 재미없어 보이네요. 그래서 이번엔 iTerm2 의 color Theme를 변경해줬습니다!

6. iTerm2 테마 변경

1. 테마 파일 다운받기

Iterm2-color-schemes 사이트에 들어가면 iTerm2의 여러 컬러 테마들을 확인하고 다운받을 수 있습니다. 다운 받는 방법은 2가지인데요.

1) 원하는 테마들만 골라서 다운받기

Iterm2-color-schemes에서 아래로 마우스 휠을 내리면 여러가지 종류의 테마들을 직접 확인할 수 있습니다. 여러 테마들을 직접 보고 구경하다가 이거다! 싶은 테마를 발견하면 테마의 이름을 클릭!

그러면 이렇게 이게 뭐지 싶은 페이지로 이동을 하는데 아래의 내용은 다 무시하고 위의 링크만 복사하시면 됩니다!

cd Downloads
mkdir themes
curl -LO [복사한 링크]

그런 다음 터미널을 켜서 저같은 경우 Download 폴더에 themes 라는 폴더를 만들어줬습니다. (폴더 위치는 원하시는 곳에 하셔도 괜찮습니다!) 그 뒤 curl -LO 뒤에 좀 전에 복사한 링크를 붙여넣고 엔터를 누르면!

해당 위치에 파일이 다운 됩니다! 이런 식으로 원하는 컬러 파일만 다운받을 수 있고 만약 이게 귀찮으시다면!

2) 파일 전체 다 다운받기

메인에 보이는 저 버튼을 클릭해 모든 테마 파일이 들어있는 압축 파일을 다운받을 수 있습니다! 사이트에서 테마를 고르고 하나하나 다운받기 귀찮으신 분들은 압축 파일을 받아 파일 내 schemes 폴더 안에 있는 테마 파일들을 사용하시면 됩니다.

2. 다운받은 테마 적용하기

다운 받은 테마 파일은 아까 폰트 설정을 한 것과 마찬가지로 [ cmd + , ] 를 눌러 Preferences 창을 열어 적용할 수 있습니다.

Preferences >> Profiles >> ColorPresets 에서 Import를 눌러 조금 전 테마 파일을 저장한 폴더에 접근하여 원하는 파일을 선택하여 등록하면 됩니다.

등록을 하시면 위와 같이 컬러 프리셋에 좀 전에는 없던, 제가 방금 선택한 테마가 추가되어 있을겁니다. 해당 테마를 클릭해 적용하고 만약 적용했는데 터미널에 변화가 없다면 iTerm2를 껐다가 키시면 제대로 적용이 되어 있는걸 확인할 수 있으실겁니다. 이런 식으로 원하는 테마를 적용해 조금 더 예쁘게 꾸밀 수 있습니다!ㅎㅎ

7. 추가 커스텀

솔직히 이 정도만 변경을 해도 처음과는 많이 달라보여 흡족하지만 조금 더 기능을 추가해 커스텀이 가능합니다. 그 중 하나로는 바로 이름을 줄이는 부분인데요.

저 부분...저 부분이 너무 길어서 벌써 화면의 절반을 차지하네요. 저 부분을 아래와 같이 커스텀 할 수 있습니다.

@ 뒤를 없애 길이를 줄이거나, 거기에 더해 원하는 닉네임으로 변경하고 랜덤으로 붙는 이모티콘까지 설정할 수 있습니다.

그렇게 했는데도 뭔가 좀 더 색다르게 바꾸고 싶다면 아래와 같이 아예 명령어를 입력하는 부분을 이름 아랫줄로 변경할 수 있습니다.

이런 추가 커스텀의 아래의 과정을 따라하시면 됩니다.

1. .zshrc 열기

vi ~/.zshrc

위에서 기본 테마를 변경했을때 사용했던 .zshrc 를 마찬가지로 vi 에디터로 열어줍니다.

2. @ ~ 지우기

prompt_context() {
  if [[ "$USER" != "$DEFAULT_USER" || -n "$SSH_CLIENT" ]]; then
    prompt_segment black default "%(!.%{%F{yellow}%}.)$USER"
  fi
}

.zshrc 의 맨 아래로 쭉쭉 내려 끝에 위의 함수를 추가해줍니다. 그러면 아래와 같이 @뒤의 부분을 제거하고 이름만 출력됩니다.

여기서 더 나아가 원하는 이름으로 설정하고 이모티콘도 붙이고 싶으시다면 아직 .zshrc를 종료하지 마세요!

3. 이름 수정하고 이모티콘 붙이기

prompt_context() {
  # Custom (Random emoji)
  emojis=("⚡️" "🔥" "🐭" "🐳" "🌸" "🦁" "🍳" "🦄" "🌈" "🍻" "🍭" "💡" "🎉" "🍖" "🧁" "🌙")
  RAND_EMOJI_N=$(( $RANDOM % ${#emojis[@]} + 1))
  prompt_segment black default "원하는이름 ${emojis[$RAND_EMOJI_N]} "
}

좀 전에 추가한 함수 아래에 위의 함수를 추가해주세요! 안의 이모티콘들을 원하는 걸로 설정하셔도 되고 그 아래의 원하는이름이라고 써져있는 글자를 지우고 본인의 이름이나 닉네임을 설정해주세요!

그러면 최종적으로 아래와 같이 입력이 되어 있을겁니다.

이제 ESC >> :wq! >> Enter 를 순서대로 눌러 저장한 뒤 iTerm2를 껐다가 키시면?!

짜잔! ^v^) 터미널에 무지개가 떳네요!

입력한 이모티콘들은 터미널창을 새로 킬때마다 랜덤으로 뜹니다!

4. 입력 라인 변경

입력 라인 변경은 agnoster 테마 파일을 수정해서 변경할 수 있습니다.

vi ~/.oh-my-zsh/themes/agnoster.zsh-theme

agnoster 테마 파일을 vi 에디터로 열고 아래와 같이 수정해주세요.

build_prompt() {
  RETVAL=$?
  prompt_status
  prompt_virtualenv
  prompt_context
  prompt_dir
  prompt_git
  prompt_bzr
  prompt_hg
  prompt_newline //이부분을 추가 꼭 순서 지켜서
  prompt_end
}

▶ 출처 : Oh My ZSH+ iTerm2로 터미널을 더 강력하게

build_prompt() 함수를 찾아 hg 와 end 사이에 prompt_newline 을 추가해줍니다. 그리고 그 밖에 맨 아래의 아래의 함수를 복붙해줍니다.

prompt_newline() {
  if [[ -n $CURRENT_BG ]]; then
    echo -n "%{%k%F{$CURRENT_BG}%}$SEGMENT_SEPARATOR
%{%k%F{blue}%}$SEGMENT_SEPARATOR"
  else
    echo -n "%{%k%}"
  fi

  echo -n "%{%f%}"
  CURRENT_BG=''
}

그러면 최종적으로 아래와 같이 입력이 되어 있으실겁니다.

이 파일도 똑같이 ESC >> :wq! >> Enter 를 순서대로 눌러 저장한 뒤 iTerm2를 껐다가 키시면 명령어 입력 라인이 아래로 내려가있는걸 확인하실 수 있습니다! ^o^)/

5. 그 외

[1] zsh-syntax-highlighting : 명령어 하이라이트

brew install zsh-syntax-highlighting
vi ~/.zshrc

// zshrc 파일 하단에 추가하여 터미널을 열때마다 실행되게 설정
source /opt/homebrew/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

// 만약 highlighters directory not found 가 뜨면
// .zshrc 파일에 아래의 글을 추가
export ZSH_HIGHLIGHT_HIGHLIGHTERS_DIR=/opt/homebrew/share/zsh-syntax-highlighting/highlighters

[2] 상태바 추가

Preferences >> Profiles >> Session 에서 아래와 같은 iTerm2의 상태바를 추가 가능

8. VSCode 터미널 연동

이제 예쁘게 꾸민 터미널을 VSCode에도 적용시켜볼 차례입니다!

방법은 간단합니다! 단축키 Cmd + , 를 누르시거나 왼쪽 하단의 톱니바퀴를 클릭해 Settings 창으로 가서 Terminal 설정을 변경해줍니다. 파란색으로 체크되어 있는 부분에 iTerm.app 을 입력해주시고 새 터미널 창을 켜보시면 바로 적용이 되어있는걸 확인하실 수 있습니다.