Kim Youngjae

Publisher and Developer

안녕하세요. Kim.YJ 입니다.

이번 포스팅은 Mac OS의 공식 터미널 어플리케이션을 대체할 수 있는
가상 터미널 어플리케이션 iTerm2 를 사용법을 알아보면서 커스텀으로 꾸며보고

VSCode 에디터 연동까지 알아보겠습니다.

[ iTerm2 란? ]

https://images.velog.io/images/kyj0206/post/dc4da94c-22ac-4ceb-9b93-89c4726fb126/social-preview.png

Mac OS의 공식 터미널 어플리케이션을 대체할 수 있는 가상 터미널 어플리케이션로 기본 터미널보다 다양한 추가 기능을 제공하고 있습니다.

화면 분할, 단축키, 검색, 복사 모드, 붙여넣기 히스토리, Growl 알림, 자동완성 등의 기능을 제공하고 있습니다.

하지만 무엇보다도 커스텀해서 예쁘게 꾸며 쓸 수 있고,
커스텀한 터미널을 VSCode 의 터미널창으로 연동해서 사용할 수 있기 때문에
많은 개발자분들이 사용하고 있습니다.

저희도 한번 설치부터 커스텀과 더불어 VSCode 연동까지 진행 해 보겠습니다.

[ iTerm2 커스텀 하기 ]

1. iTerm2 설치하기

iTerm 설치 를 위해 아래 림크로 이동하여 설치를 진행해 줍니다.
[ Link : iTerm2 Downloads ]

Stable Releases 버전을 다운받아 줍니다.

https://images.velog.io/images/kyj0206/post/8e65b1fa-7b5e-4725-aa01-8152137020d9/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.31.17.png

다운 받은 iTerm2를 응용프로그램 으로 이동시켜 줍니다.

https://images.velog.io/images/kyj0206/post/f082b6eb-fd41-468b-b3e2-9bbae3358eca/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.39.15.png

iTerm2 초기 화면은 기본 터미널과 크게 다르지 않습니다만, 커스텀을 통해 아래와 같이 바꾸어 보겠습니다.

https://images.velog.io/images/kyj0206/post/f21ffe01-5794-4316-837a-21645c19b47c/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2010.37.15.png

2. oh-my-zsh 설치하기

Mac의 기본 터미널이 원래 bash 유닉스 셸 이었는데 zsh 유닉스 셸로 바뀌었습니다.
그래서 저희는 zsh를 간편하게 사용할 수 있게 도움을 주는 oh-my-zsh 을 설치 해 보겠습니다.

brew 명령어를 이용해 쉽게 설치 할 수 있습니다.
이전 포스팅 에서 Homebrew 와 Git의 설치를 진행 하였기에, 설치가 되어 있다는 조건에서 진행 해 보겠습니다. (설치 필수!!)

모든 준비가 되었다면, 터미널에 아래 명령어만 복사해서 붙여넣기하면 설치가 됩니다.

$ sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)

아래와 같이 설치가 진행 된다면, 정상적으로 설치가 진행되는것 이므로 잠시 기다려 줍니다.

https://images.velog.io/images/kyj0206/post/cbfefbbc-c300-4954-af33-b77c46dead2b/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.02.33.png

잠시후 설치가 완료되고 터미널이 알록달록하게 변한 것을 확인 할 수 있습니다.

3. Theme 커스텀 하기

아래 파일을 수정하여 테마를 변경한다. vi, vim, nano등 편한 에디터로 열어서 수정하면 됩니다.

해당 vi 에서 수정을 하기 위해서는 i를 한번 눌러주면 수정을 할 수 있는 INSERT 모드로 변경이 되는데, INSERT 모드 에서만 수정을 하실수 있으니, 꼭 확인해 주세요.

수정이 끝났으면 ESC를 누른다음 :wq 를 입력하면 수정화면은 벗어날 수 있습니다.
iTrem2를 재시작 해 주면 정상으로 수정적용 됩니다.

vi ~/.zshrc

위의 파일을 열어보면 중간에 아래와 같은 줄이 있다. 원하는 테마를 입력하여 변경합니다.

ZSH_THEME="agnoster"

테마는 아래 링크로 들어가면 여러가지 테마가 있는데
https://iterm2colorschemes.com로 가서 원하는 테마 이름 위에서 마우스 오른쪽 버튼을 클릭하여 링크된 파일 다운로드 버튼을 클릭하여 다운로드 해 줍니다.

다운 받은 위치를 가서 확장자명 .txt를 지워 줍니다.
(ex. 0322 agnoster.txt → 0322 agnoster)

저는 가장 많이 사용하는 agnoster 테마를 이용해서 진행 해 보겠습니다.

https://images.velog.io/images/kyj0206/post/e3163f50-0201-4018-9bcb-8b7eb9c9da0d/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.00.17.png

Term2 앱에서 [ cmd + , ] 를 눌러 환경설정을 열고, Profiles > Colors 탭을 선택 해 줍니다.

https://images.velog.io/images/kyj0206/post/4a9d44e9-d5d0-4dbe-9212-7139544026bb/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.17.23.png

오른쪽 하단에 Color Preset을 눌러 Import 를 클릭하여 위에서 다운받은 itemcolor file을 선택 합니다.

https://images.velog.io/images/kyj0206/post/76a8e0fa-dfd7-4d8b-b89f-a17aee4fe87c/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%2012.17.50.png

4. 폰트 설치하기

계속 진행하면 테마는 적용되는데 글씨가 깨진다. 아래 링크를 눌러서 폰트를 다운받고 설치합니다.

폰트 UbuntuMono DownLoade
(다른서체로 진행해도 됩니다.)

다운로드한 파일을 실행합니다.

Term2 앱에서 [ cmd + , ] 를 눌러 환경설정을 열고, Profiles > Text > Font > 다운로드한 폰트 선택

위와 같이 설정하면, 깨짐이 없이 정상적으로 보여집니다.

https://images.velog.io/images/kyj0206/post/898874cd-05f8-4e62-ac7d-aefefd3d158c/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.58.52.png

5. New Line 적용하기

터미널의 명령어가 길어지다 보면 화면을 벗어나는 경우가 있습니다.
이러한 경우 터미널 입력어를 new line으로 입력함으로 불편을 해소할 수 있습니다.

https://images.velog.io/images/kyj0206/post/beacd51d-ad11-4a30-9516-24fc3edcb1e6/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.35.36.png

agnoster 테마를 설치한 기준으로 쉘에 아래의 명령어를 입력해줍니다.

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

아래쪽으로 보면, build_prompt()를 볼 수 있습니다.
그리고 prompt_newline을 prompt_hg와 promt_end사이에 넣어줍니다.

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

코드 제일 하단에 아래 코드를 넣어줍니다.

https://images.velog.io/images/kyj0206/post/cf5df860-fe71-4705-9a9f-5d65fe79ecd5/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.13.36.png

정상 수정하고 iTerm2를 재시작해주면 정상 적용되어 집니다.

6. Syntax Highlight 적용하기

syntax highlight는 사용 가능한 명령어들에 highlight를 넣어주는 기능입니다.

iTerm2에 다음과 같은 명령어를 입력합니다.

vi ~/.zshrc

아래 코드를 제일아래 부분에 추가로 넣어줍니다.

source /usr/local/share/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh

정상 수정하고 iTerm2를 재시작해주면 정상 적용되어 집니다.

https://images.velog.io/images/kyj0206/post/5c7322f5-1b23-4f7f-a7dd-4dc78663126b/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%202.59.22.png

7. iTerm2 명령어 자동완성 적용하기

터미널에 다음 내용을 순서대로 입력 해줍니다.

git clone https://github.com/zsh-users/zsh-autosuggestions
~/.zsh/zsh-autosuggestions vi ~/.zshrc

~/.zshrc 열어 아래 코드를 복사하고 맨아래 공간에 붙여 넣어줍니다.

~/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh

저장 하고 터미널을 재시작 하면 자동완성이 적용되어 있습니다.

https://images.velog.io/images/kyj0206/post/e20f26a2-a660-4604-b228-e829e4f015cb/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.04.52.png

8. 쉘에 이모티콘 적용하기

iTerm2에 다음과 같은 명령어를 입력합니다.

vi ~/.zshrc

아래 코드를 제일아래 부분에 추가로 넣어줍니다.

prompt_context() {
  # Custom (Random emoji)
  emojis=("🦄" "🌈" "🍭")
  RAND_EMOJI_N=$(( $RANDOM % ${#emojis[@]} + 1))
  prompt_segment black default "Superman ${emojis[$RAND_EMOJI_N]} "}

이렇게 하면 터미널을 킬때마다 랜덤으로 위의 작성된 이모티콘이 적용됩니다.
${emojis[$RAND_EMOJI_N]} 부분을 자신이 원하는 이모지로 바꾸어 사용해 보세요.

[ iTerm2 와 VSCode 연동 ]

이제 커스텀한 iTerm2을 VSCode에도 적용시켜볼 차례입니다!

VSCode 애디터를 켜고 단축키 Cmd + , 를 누르시거나 왼쪽 하단의 톱니바퀴를 클릭해 Settings 창으로 가서 Terminal 설정을 변경해줍니다.

OsxExeec 에 iTerm.app 을 입력해주시고 새 터미널 창을 켜보시면 바로 적용이 되어있는걸 확인하실 수 있습니다.

https://images.velog.io/images/kyj0206/post/1a3cfd3b-37be-4084-95e7-4790d6f86d36/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.27.20.png

다만 VSCode 에서도 마찬가지로 폰트가 깨지는 이유로 폰트 또한 설정해줘야합니다.

폰트 설정은 설정 창에서 Text Editor » Font » Font Family 에 맨 앞에 아까 전 다운 받은 폰트를 적용해 주세요.

https://images.velog.io/images/kyj0206/post/5427658b-dcf2-42c6-a8c9-a5830ecff819/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.43.22.png

최종적으로 적용을 하였다면, VSCode를 다시 꺼주고 켜주시면 아래와 같이
정상 적용되어 있는 것을 확인하실수 있습니다.

https://images.velog.io/images/kyj0206/post/96930fb3-f9ca-44a5-b147-b63919ad2568/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-03-22%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.40.51.png



지금까지 iTerm2 설치와 커스텀, VSCode 터미널 연동 까지 진행해 보았습니다.

기본 터미널 보다 다양한 편의성이 있는,
iTerm2 를 이용하여 앞으로도 멋진 개발자 되시길 응원합니다.

다음 포스팅은 더 유익한 정보로 찾아뵙겠습니다.
감사합니다!

참고