이 글은 mac 사용한지 어느 덧 3년 차로 접어든 웹 개발자의 개발환경 세팅 글입니다

📌 준비물

• Mac (글쓴이 intel pro)
• 긴 글을 읽을 인내력
• 편하게 작업하는 걸 선호하는 마음
• 실용성과 디자인을 챙겨가고 싶은 마인드

zsh

zsh란 쉘의 종류 중 하나입니다.
MacOS 의 기본 쉘로 이제는 추가 설치가 필요 없이 터미널을 열게 되면 자동으로 zsh 이 열리게 됩니다.

echo $SHELL 명령어를 통해 현재 사용중인 쉘이 어떤 쉘인지 확인 할 수 있습니다.

iterm2

iterm2란, mac 에서 사용할 수 있는 터미널의 확장 프로그램? 정도로 생각하시면 됩니다. 윈도우에도 명령 프롬포트CMD 와 PowerShell, windows terminal 등 다양한 프로그램이 있듯 mac 의 기본 Terminal.app 보다 편리하고 많은 기능을 제공하는 프로그램입니다.

iterm2 설치

iterm2 공식 다운로드 페이지에 들어가셔서

Stable Releases 를 다운 받아줍니다.

그런 뒤 여느 프로그램처럼 zip 압축을 해제해 응용프로그램으로 옮겨 실행을 시켜주면 설치가 진행이 됩니다.

Comand Line Tool 이 필요한 프로그램을 설치하게 동의해달라고 하면 동의를 해줍시다.

실행을 시켜보면

왼: iterm2
오: terminal

아직 크게 차이가 없습니다. 이제 커스텀을 진행해볼게요!

테마 설정

테마 다운로드

테마 리스트를 방문해서 여러 테마중에 마음에 드는 테마를 설정합니다.
저는 Snazzy 테마를 원래 사용했는데 이번에는 The Hulk 라는 테마를 사용해보도록 하겠습니다!

각자 고르신 테마 페이지로 들어가셔서 우클릭 -> 다른 이름으로 저장을 통해 저장을 해줍니다.

다운로드된 txt 확장자를 지워줍니다.

테마 적용

iTerm2 를 실행시킨 상태에서 cmd + ,를 누르게 되면 설정창이 열리게 됩니다.

Profile > Colors 로 들어가시면

Color presets... 가 있습니다.

import... 를 눌러서 아까 다운로드 받아서 확장자를 변경한 .itermcolors 파일을 선택해줍니다.

뭔가 헐크스럽나요..? 😂

자 이제 몇가지 설정을 조금 더 해주면 약간 더 좋습니다.

상태바 추가

iterm 을 쓴다면 terminal 과 구분되는 가장 큰 외관의 차이입니다.

Profile > Session 로 들어가시면

각자 취향에, 필요한 것들을 골라서 상태바를 구성하시면 됩니다.

상태바의 위치도 변경할 수 있습니다.

Appearance > General > Status bar location

타이틀바의 스타일을 Minimal 로 하는 게 저는 개인적으로 더 보기 좋았습니다.

Appearance > General > Theme

한글 자음 모음 분리 현상 방지

Profile > Text

NFC 로 설정하고 나면 다음과 같은 일이 발생하지 않게 됩니다.

이제 본격적으로 쉘을 설정해봅시다.

oh-my-zsh

brew 를 통해 zsh 를 업데이트 해주고 zsh-completions 도 설치해줍니다.

brew install zsh zsh-completions

설치가 끝난 다음 oh-my-zsh 를 설치해줍니다.

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

설치가 완료되면 쉘 인터페이스가 또 바뀐 것을 볼 수 있습니다.

테마 설치

oh-my-zsh 테마리스트 에 가보시면 다양한 테마들이 있습니다.

별다른 테마를 설치하지 않으면 robbyrussell 이라는 테마로 기본 설정이 되어있습니다.
하지만 다른 다양한 테마들이 많아 다른 걸 설치해서 취향에 맞는 테마를 사용해보시는 걸 추천드립니다.

robbyrussell 테마

인기있는 테마들로는

• agnoster
• pure
• Powerlevel10k
• spaceship

등이 있습니다.

저는 Powerlevel10k, pure, agnoster 모두 사용해봤는데 spaceship 만 안 해봤더라구요
지금 바로 설치해보겠습니다.

spaceship 프롬프트 설정

폰트 설치

spaceship 뿐만 아니라 powerlevel, agnoster 과 같은 프롬프트를 사용하려면 특정 폰트를 설치해서 터미널의 폰트로 설정해주어야 합니다.

poweline fonts 페이지에 가시면 os 별로 설치하는 방법들이 명시가 되어있습니다.
하지만 저희는 Mac OS 이기 때문에 다음 명령어를 통해 설치를 하실 수 있습니다.

# clone
git clone https://github.com/powerline/fonts.git --depth=1
# install
cd fonts
./install.sh
# clean-up a bit
cd ..
rm -rf fonts

폰트 적용

폰트설치가 잘 완료되었으니 iterm 에서 설정까지 마무리해주셔야 폰트깨짐 현상이 일어나지 않습니다.

Profile > Text 에 Font 설정이 있습니다.

검색 기능을 활용해서 powerline 이라고 검색해서 마음에 드시는 폰트를 골라주시면 폰트가 깨지지 않고 프롬프트 설정이 가능해집니다.

---

프롬프트 설치

폰트 설치가 완료되면 이제 프롬프트 설치를 진행합니다.

https://spaceship-prompt.sh/getting-started/
에 들어가시면 명령어가 명시되어 있습니다.

우선

git clone https://github.com/spaceship-prompt/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1

그 뒤에

ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"

를 순서대로 입력해주시면 설치는 완료되었습니다.

이제 ~/.zshrc 파일을 수정해서 테마를 적용해주시면 됩니다.

vi ~/.zshrc

ZSH_THEME="spaceship"
이렇게 바꿔주시면 됩니다.

vi 편집기에서 편집을 하기 위해서는
키보드 화살표를 활용해서 편집할 곳으로 이동한 뒤 i 를 입력하면 편집이 가능해집니다.
그런 다음 esc 를 누르고 :wq 를 타이핑하면 저장후 vi 편집기를 종료하게 됩니다.

저장하고 나오면 변경된 내용을 적용시켜야 합니다.

source ~/.zshrc

그런 다음 cmd + q 를 통해 iterm 을 완전히 종료시킨 뒤 다시 켜보시면

🤔 대체 머가 달라진거죠? 그리고 저는 두 줄 처리되는 게 오히려 보기 불편해요!

맞습니다.
저도 이러한 점들이 처음에 불편했다고 생각했는데요. 쓰다보면 적응되니 그냥 사용하세요

spaceship 은 이런 것들에 대한 설정을 유저가 직접 할 수 있다는 점이 좋았습니다.

저는 다음과 같은 설정들을 해주었습니다.

0. 쉘 반응속도 향상
1. 두 줄 처리
2. add empty newline 삭제

다른 설정들 또한 커스텀이 가능합니다. 옵션리스트

.zshrc 파일을 열어 다음과 같이 적어주면 끝납니다.

SPACESHIP_PROMPT_ADD_NEWLINE="false"
SPACESHIP_PROMPT_SEPARATE_LINE="false"
SPACESHIP_PROMPT_ORDER=(user host dir git node exec_time line_sep jobs exit_code char)

ORDER 파트가 직관적이지 않을 수 있어 부연설명을 덧붙이자면

SPACESHIP_PROMPT_ORDER=(
  time          # Time stamps section
  user          # Username section
  dir           # Current directory section
  host          # Hostname section
  git           # Git section (git_branch + git_status)
  hg            # Mercurial section (hg_branch  + hg_status)
  package       # Package version
  gradle        # Gradle section
  maven         # Maven section
  node          # Node.js section
  ruby          # Ruby section
  elixir        # Elixir section
  xcode         # Xcode section
  swift         # Swift section
  golang        # Go section
  php           # PHP section
  rust          # Rust section
  haskell       # Haskell Stack section
  julia         # Julia section
  docker        # Docker section
  aws           # Amazon Web Services section
  gcloud        # Google Cloud Platform section
  venv          # virtualenv section
  conda         # conda virtualenv section
  pyenv         # Pyenv section
  dotnet        # .NET section
  ember         # Ember.js section
  kubectl       # Kubectl context section
  terraform     # Terraform workspace section
  exec_time     # Execution time
  line_sep      # Line break
  battery       # Battery level and status
  vi_mode       # Vi-mode indicator
  jobs          # Background jobs indicator
  exit_code     # Exit code section
  char          # Prompt character
)

얘네를 다 쓸게 아니라면 쓸 것들만 골라서 적어주면 프롬프트가 더 빨리 로드가 된다는 설정입니다.

git 폴더에 들어가서도 어떻게 보이는지 확인해보실 수 있습니다.

플러그인

oh-my-zsh 를 사용하는 많은 이유중 하나인데요
저는 다른 많은 플러그인들 중에서 제가 써보고 제일 좋았던 zsh-syntax-highlighting, zsh-autosuggestions을 추천드립니다.

설치

# zsh-syntax-highlighting
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

# zsh-autosuggestions (23-03-13 수정)
git clone https://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

두 명령어를 터미널을 열어 입력해준 뒤

.zshrc 를 편집해서 plugin 등록을 해주면 됩니다.

플러그인 적용

vi ~/.zshrc

스크롤을 조금 내려보면

plugins=(git)

이렇게 입력되어있는 곳이 있을겁니다. 편집해서 두 플러그인을 추가해주신 뒤 저장하고

source ~/.zshrc

그런 뒤 iterm을 껐다 다시 키면

명령어를 일부만 입력해도 마지막에 입력한 명령어가 자동으로 완성되어 미리 보여집니다. 여기서 오른 화살표를 누르게 되면 자동 돤성됩니다.

그리고 syntax highlighting을 통해 명령어인지 아닌지를 확인해주는 기능도 추가되었습니다.

👾 이 글 작성하면서 헐크 테마 이쁘다,,, 이러고 있었는데 여기서 red color 도 초록색 계열이라 눈에 확 안 띄네요,,,

이게 좋은 점이 만약 프로그램을 설치했을 때 제대로 설치(path 등록이)가 되었는지 확인해보기 쉽습니다.

예를 들어 제가 flutter 를 설치했는데 flutter 라고 쳐보고 notcommand 에러가 떠야 설치가 안 되었구나 하고 파악하는 게 아니라
입력을 했을 때의 하이라이트가 되는지 아닌지만 봐도 알아볼 수 있어서 좋았습니다.

긴 글을 읽어주셔서 감사합니다!

참고자료

https://subicura.com/2017/11/22/mac-os-development-environment-setup.html
https://spaceship-prompt.sh/
https://jamong-icetea.tistory.com/400
https://github.com/powerline/fonts
https://github.com/spaceship-prompt/spaceship-prompt/issues/161#issuecomment-312438922