내가 지금 쓰는 개발 도구 세팅 공개 - VSCode, 터미널, 맥 환경

개발 환경 세팅 공개 ⏱ 읽는 시간 약 10분

VSCode, 터미널, 맥 환경, 그리고 일상 앱까지 — 이유 있는 세팅만 남기고 전부 쳐냈다

개발 환경 세팅 글을 쓰고 싶다는 생각을 꽤 오래 했다. 근데 매번 미뤘다. "내 세팅이 정답은 아닌데"라는 생각 때문이었다. 그러다가 마음을 바꿨다. 정답이 아니니까 오히려 솔직하게 쓸 수 있겠다고.

이 글에 있는 것들은 전부 "한 번 써봤다가 버렸거나", "지금도 매일 쓰는 것들"이다. 유명해서 쓰는 게 아니라 실제로 내 작업 속도를 올려줬기 때문에 남아있는 것들이다. Next.js 위주로 개발하는 프론트엔드 개발자 기준이라는 것도 미리 밝혀둔다.

내가 지금 쓰는 개발 도구 세팅 공개

3년

세팅을 갈아치운
기간

23개

현재 설치된
VSCode 익스텐션

47개

설치했다가
지운 익스텐션

macOS

현재 메인
개발 환경

VSCode 세팅 — 테마와 폰트부터

에디터는 VSCode를 쓴다. JetBrains 계열을 써봤고, Neovim도 몇 달 시도했다. Neovim은 솔직히 멋있어서 시작했는데, 실제 작업 속도가 오히려 떨어져서 돌아왔다. VSCode가 Next.js 생태계 도구들과의 궁합이 제일 자연스럽다는 결론이다.

🎨

테마 — Tokyo Night

enkia.tokyo-night

무료

One Dark, Dracula, Catppuccin 다 써봤다. 지금 2년째 Tokyo Night에서 안 벗어나고 있다. 눈이 덜 피로하고, 특히 TypeScript 코드에서 타입 색상과 값 색상이 명확하게 구분되는 게 장점이다. Storm(어두운 버전)과 기본 버전 두 개가 있는데, 나는 기본 버전을 쓴다. 낮에 밝은 사무실에서는 Storm이 더 잘 보인다.

✍️

폰트 — Pretendard + JetBrains Mono

터미널용 / 에디터용 분리

무료

에디터 폰트는 JetBrains Mono, 사이즈 14px, 줄 간격 1.6. 리거처(ligature) 기능이 있어서 !=나 => 같은 기호가 합쳐져서 표시된다. 처음엔 어색한데 2주면 적응되고, 적응 후엔 못 돌아간다. 터미널은 Nerd Font 패치된 JetBrainsMono를 써야 아이콘이 깨지지 않는다.

VSCode 익스텐션 — 진짜 쓰는 것만

처음엔 "유용해 보이면 일단 설치"를 했다. 그러다가 VSCode가 느려졌고, 익스텐션끼리 충돌이 나기 시작했다. 지금은 "이게 없으면 실제로 불편한가?"를 기준으로 남긴다.

 

ESLint

저장할 때마다 린트 오류 표시. 이게 없으면 CI에서 터지고 나서야 안다.

 

Prettier - Code formatter

저장 시 자동 포맷. 팀 프로젝트에서 PR diff 노이즈를 없애주는 핵심.

 

Tailwind CSS IntelliSense

Tailwind 클래스 자동완성 + 색상 미리보기. Tailwind 쓴다면 필수다.

 

TypeScript Importer

타입/컴포넌트 자동 import. 손으로 import 경로 안 써도 된다.

 

GitLens

줄마다 blame 표시, 히스토리 탐색. 레거시 코드 파악할 때 특히 유용.

 

Error Lens

에러 메시지를 줄 옆에 인라인으로 표시. 파일 하단 패널 안 봐도 된다.

 

Import Cost

import한 패키지 크기를 옆에 표시. 번들 크기 의식하게 만드는 장치.

 

Todo Tree

코드 내 TODO, FIXME 주석을 한눈에 모아서 보여준다. 나만의 태스크 관리.

 

Material Icon Theme

파일 탐색기 아이콘 교체. 없어도 되지만 있으면 파일 구분이 빠르다.

 

Peacock

프로젝트별로 사이드바 색상 다르게. 여러 창 열어놓을 때 헷갈리지 않는다.

⚠️

설치했다가 지운 대표 익스텐션들
Bracket Pair Colorizer — VSCode 1.60부터 기본 내장됨. 이제 익스텐션 필요 없다.
GitHub Copilot — 유료라 팀 계정 없으면 부담. 대신 VSCode 내장 IntelliCode로 버팀.
Prettier + ESLint 중복 포맷터 — 둘 다 설치하면 충돌 난다. Prettier를 기본 포맷터로 지정하고 ESLint는 린팅 전용으로만.

VSCode settings.json — 핵심만 공개

 

 

 

settings.json — 현재 사용 중인 주요 설정

{
  // ── 에디터 기본 ──
  "editor.fontFamily": "'JetBrains Mono', monospace",
  "editor.fontSize": 14,
  "editor.lineHeight": 1.6,
  "editor.fontLigatures": true,       // => 같은 기호 합쳐서 표시
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,    // 미니맵 끔 (화면 낭비)
  "editor.stickyScroll.enabled": true, // 함수명 상단 고정
  "editor.cursorBlinking": "smooth",
  "editor.renderWhitespace": "boundary",

  // ── 저장 시 자동 처리 ──
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  // ── 터미널 ──
  "terminal.integrated.fontFamily": "'JetBrainsMono Nerd Font'",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.osx": "zsh",

  // ── 파일 탐색 ──
  "explorer.confirmDelete": false,    // 삭제 확인 팝업 끔
  "explorer.compactFolders": false,    // a/b/c 폴더 펼쳐서 표시
  "files.exclude": {
    "**/.next": true,               // Next.js 빌드 폴더 숨김
    "**/node_modules": true
  },

  // ── TypeScript ──
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

💜

가장 생산성 향상에 기여한 설정 TOP 3
1. "editor.stickyScroll.enabled": true — 긴 컴포넌트 스크롤할 때 함수명이 상단에 고정된다. 없었을 때 얼마나 불편했는지 이걸 켜고 나서야 알았다.
2. "source.organizeImports": "explicit" — 저장할 때 import 자동 정렬·미사용 import 제거. PR diff에서 import 관련 노이즈가 확 줄었다.
3. "explorer.confirmDelete": false — 사소하지만 매번 팝업 닫는 0.5초가 쌓이면 꽤 된다.

터미널 — iTerm2 + Zsh + Starship

맥 기본 터미널은 입사 초기에 잠깐 쓰다가 바꿨다. 지금 조합은 iTerm2 + Zsh + Starship 프롬프트다. Oh My Zsh도 써봤는데 플러그인이 많아질수록 느려지는 게 체감돼서 Starship으로 갈아탔다.

🖥️

iTerm2

macOS 전용 터미널 에뮬레이터

무료

기본 Terminal.app 대비 탭 분할, 검색, 자동완성 히스토리가 강력하다. 특히 Cmd+D로 창을 수직 분할해서 한쪽에서 서버 돌리고 다른 쪽에서 명령 치는 게 일상이다. 색상 프리셋은 Tokyo Night 테마에 맞춰서 커스텀했다.

⚡

Starship 프롬프트

크로스 셸 프롬프트 커스터마이저

무료

Oh My Zsh보다 체감상 2배 빠르다. Rust로 만들어져서 프롬프트 렌더링이 빠르고, Git 브랜치 / Node 버전 / 패키지 버전이 자동으로 표시된다. 설정은 ~/.config/starship.toml 하나로 관리해서 깔끔하다.

 

 

 

~/.zshrc — 핵심 alias 모음

# ── 프로젝트 이동 ──
alias dev="cd ~/projects"

# ── Git ──
alias gs="git status"
alias gp="git push"
alias gl="git pull"
alias gc="git commit -m"
alias gco="git checkout"
alias gb="git branch"
alias glog="git log --oneline --graph --decorate"

# ── 패키지 매니저 ──
alias ni="npm install"
alias nrd="npm run dev"
alias nrb="npm run build"
alias nrl="npm run lint"

# ── 유틸 ──
alias c="clear"
alias ll="ls -la"
alias ip="curl ifconfig.me"        # 외부 IP 확인
alias ports="lsof -i -P | grep LISTEN" # 열린 포트 확인

# ── VSCode로 바로 열기 ──
alias code.="code ."

# ── node_modules 핵폭탄 ──
nuke() {
  find . -name "node_modules" -type d -prune -exec rm -rf {} +
  echo "💥 node_modules 전멸"
}

"alias는 단축키가 아니라 기억력을 아끼는 장치다. 매번 타이핑하는 게 문제가 아니라, 명령어 생각하는 그 0.5초가 흐름을 끊는다."

— alias를 본격적으로 쓰기 시작한 이유

맥 앱 — 개발 외 생산성 도구들

🌐

Arc Browser

메인 브라우저

무료

처음엔 "그냥 크롬 아니야?"라고 생각했다. 3개월 써보니 돌아가기 싫어졌다. Space 기능으로 프로젝트별 탭을 완전히 분리할 수 있어서 개인 프로젝트 / 회사 업무 / 리서치가 섞이지 않는다. Command Bar(Cmd+T)로 탭 전환이 빨라서 브라우저 탭 정리 스트레스가 사라졌다.

📋

Raycast

Spotlight 대체 런처

무료 (Pro 있음)

맥 기본 Spotlight를 완전히 대체했다. 클립보드 히스토리(복사한 것들을 나중에 꺼낼 수 있음)와 스니펫(자주 쓰는 텍스트 단축어 등록)이 일상에서 제일 많이 쓰는 기능이다. 개발할 때 환경변수 값이나 테스트 계정 정보를 스니펫으로 등록해두면 매번 찾지 않아도 된다.

🪟

Rectangle

창 관리 도구

무료

Ctrl+Option+←/→로 창을 화면 절반에 스냅. 단순한데 없으면 불편하다. VSCode + 브라우저 반반 분할 작업이 기본이라 이게 없으면 매번 마우스로 창 크기 조절해야 한다. 무료고 가볍고 딱 필요한 기능만 있어서 3년째 사용 중이다.

📝

Notion

개인 지식 베이스 + 작업 관리

무료 (팀 유료)

회사 업무는 사내 툴로 관리하고, 개인 TIL(Today I Learned), 블로그 초안, 사이드 프로젝트 스펙을 Notion에 관리한다. 데이터베이스 기능으로 "이슈 트래커"를 직접 만들어서 사이드 프로젝트 버그를 추적한다. 완벽하진 않지만 지금으로선 대체재가 없다.

Git 설정 — 커밋 전 자동화

❌ 이전 — 수동으로 매번 확인

# 커밋 전에 직접
npm run lint
npm run typecheck
npm run test
# 이걸 깜빡하면 CI에서 터짐
# 팀원들한테 민폐...

✅ 지금 — Husky로 자동화

# .husky/pre-commit
npx lint-staged

# package.json
"lint-staged": {
  "*.{ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}
# 커밋할 파일만 검사해서 빠름

✅

글로벌 .gitignore — 이건 한 번만 세팅하면 모든 프로젝트에 적용
git config --global core.excludesfile ~/.gitignore_global로 설정한 뒤,
.DS_Store, .env.local, *.log, .idea/, .vscode/(개인 설정만)를 넣어두면
매 프로젝트마다 gitignore에 추가하지 않아도 된다. 한 번 세팅하고 3년째 안 건드렸다.

지금 세팅에서 여전히 고민되는 것

세팅 글을 쓰면서 "이게 정말 최선인가"를 다시 돌아봤다. 솔직하게 말하면 아직 확신 없는 부분도 있다.

🤔

아직 결론 못 낸 것들
pnpm vs npm — 팀 전체가 npm을 쓰는 환경이라 개인 프로젝트만 pnpm으로 전환했다. 속도는 확실히 빠른데, 가끔 패키지 호환성 이슈가 생긴다.

Cursor vs VSCode — AI 코드 에디터인 Cursor를 한 달 써봤다. 생산성이 오르긴 했는데, 유료고, AI 제안에 너무 의존하게 되는 것 같아서 다시 VSCode로 돌아왔다. 이건 취향과 철학의 문제 같다.

터미널 멀티플렉서 — tmux를 써볼까 계속 생각하는데, iTerm2 창 분할로 이미 충분해서 배울 동기가 안 생긴다.

세팅은 완성이 없는 것 같다. 새로운 도구를 써보고, 맞으면 남기고, 맞지 않으면 버리는 과정이 계속된다. 지금 이 세팅도 6개월 후엔 반쯤 바뀌어 있을 가능성이 높다. 그래서 "지금 쓰는" 세팅이라는 제목을 붙였다.

---

⚙️ 여러분의 개발 환경 세팅이 궁금합니다

VSCode 테마, 터미널 설정, 맥/윈도우 생산성 앱 중에서 "이거 없으면 진짜 못 살겠다"는 도구가 있다면 댓글로 공유해주세요. 특히 제가 아직 써보지 않은 좋은 익스텐션이나 앱이 있다면 정말 반깁니다. 다음 세팅 업데이트에 반영해볼게요. 🙏