NeoHtop: Rust + Tauri + Svelte로 만든 모던 시스템 모니터 완벽 가이드

⏱️ 예상 읽기 시간: 11분

서론

시스템 모니터링은 개발자와 시스템 관리자에게 필수적인 작업입니다. 전통적으로 htop, top, btop 같은 CLI 도구들이 이 역할을 담당해왔지만, NeoHtop은 현대적인 웹 기술을 활용하여 완전히 새로운 경험을 제공합니다.

NeoHtop은 Rust, Tauri, Svelte를 결합한 크로스플랫폼 데스크톱 애플리케이션으로, GitHub에서 6.7k 스타를 받으며 개발자들의 주목을 받고 있습니다. 본 튜토리얼에서는 NeoHtop의 설치부터 고급 사용법까지 macOS 환경에서 실습과 함께 알아보겠습니다.

NeoHtop이란?

핵심 특징

NeoHtop은 기존 시스템 모니터의 한계를 뛰어넘는 혁신적인 기능들을 제공합니다:

🚀 실시간 성능 모니터링

• 실시간 프로세스 모니터링
• CPU 및 메모리 사용량 추적
• 자동 갱신 시스템 통계

🎨 모던 사용자 인터페이스

• 아름다운 다크/라이트 테마 지원
• 직관적이고 반응형 디자인
• FontAwesome 아이콘 활용

🔍 고급 검색 및 필터링

• 프로세스명, 명령어, PID로 검색
• 정규표현식 지원
• 다중 키워드 검색

🛠 프로세스 관리 기능

• 중요 프로세스 고정
• 프로세스 종료 (kill)
• 컬럼별 정렬

기술 스택

프론트엔드: SvelteKit + TypeScript 백엔드: Rust + Tauri 스타일링: CSS Variables 아이콘: FontAwesome

시스템 요구사항

macOS 환경 확인

# macOS 버전 확인
sw_vers

# 시스템 아키텍처 확인
uname -m

# 사용 가능한 메모리 확인
sysctl hw.memsize

필수 도구 설치

macOS에서 개발 환경을 구축하기 위해 필요한 도구들을 설치합니다:

# Xcode Command Line Tools 설치
xcode-select --install

# Homebrew가 없다면 설치
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.js 설치 (버전 16 이상)
brew install node

# Rust 설치
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source ~/.zshrc

# 설치 확인
node --version
npm --version
rustc --version
cargo --version

NeoHtop 설치 가이드

방법 1: 바이너리 릴리즈 설치 (권장)

가장 간단한 방법은 GitHub 릴리즈에서 미리 빌드된 바이너리를 다운로드하는 것입니다:

# 최신 릴리즈 정보 확인
curl -s https://api.github.com/repos/Abdenasser/neohtop/releases/latest | grep "browser_download_url.*dmg" | cut -d '"' -f 4

# wget 또는 curl로 다운로드 (예시 - 실제 URL은 위 명령어 결과 사용)
wget https://github.com/Abdenasser/neohtop/releases/download/v1.2.0/NeoHtop_1.2.0_universal.dmg

# DMG 파일 마운트 및 설치
open NeoHtop_1.2.0_universal.dmg

설치 스크립트 작성:

#!/bin/bash
# 파일: install_neohtop.sh

set -e

echo "🚀 NeoHtop 설치를 시작합니다..."

# 최신 릴리즈 URL 가져오기
DOWNLOAD_URL=$(curl -s https://api.github.com/repos/Abdenasser/neohtop/releases/latest | grep "browser_download_url.*dmg" | cut -d '"' -f 4)

if [ -z "$DOWNLOAD_URL" ]; then
    echo "❌ 다운로드 URL을 찾을 수 없습니다."
    exit 1
fi

echo "📥 다운로드 중: $DOWNLOAD_URL"

# 임시 디렉토리에 다운로드
TEMP_DIR=$(mktemp -d)
cd "$TEMP_DIR"

curl -L -o neohtop.dmg "$DOWNLOAD_URL"

echo "📦 DMG 파일 마운트 중..."
hdiutil attach neohtop.dmg

# Applications 폴더로 복사
cp -r /Volumes/NeoHtop/NeoHtop.app /Applications/

# DMG 언마운트
hdiutil detach /Volumes/NeoHtop

# 정리
rm -rf "$TEMP_DIR"

echo "✅ NeoHtop 설치가 완료되었습니다!"
echo "💡 Applications 폴더에서 NeoHtop을 실행하세요."

방법 2: 소스코드에서 빌드

개발자이거나 최신 기능을 사용하고 싶다면 소스코드에서 직접 빌드할 수 있습니다:

# 저장소 클론
git clone https://github.com/Abdenasser/neohtop.git
cd neohtop

# 의존성 설치
npm install

# 개발 모드로 실행
npm run tauri dev

# 프로덕션 빌드
npm run tauri build

빌드 스크립트 작성:

#!/bin/bash
# 파일: build_neohtop.sh

set -e

echo "🔨 NeoHtop 소스코드 빌드를 시작합니다..."

# 작업 디렉토리 설정
WORK_DIR="$HOME/Developer/neohtop"
mkdir -p "$(dirname "$WORK_DIR")"

# 기존 디렉토리가 있다면 업데이트
if [ -d "$WORK_DIR" ]; then
    echo "📁 기존 저장소 업데이트 중..."
    cd "$WORK_DIR"
    git pull origin main
else
    echo "📥 저장소 클론 중..."
    git clone https://github.com/Abdenasser/neohtop.git "$WORK_DIR"
    cd "$WORK_DIR"
fi

# 의존성 설치
echo "📦 의존성 설치 중..."
npm install

# 코드 포맷팅 확인
echo "🎨 코드 포맷팅 확인 중..."
npm run format:check

# 프로덕션 빌드
echo "🏗️ 프로덕션 빌드 중..."
npm run tauri build

echo "✅ 빌드가 완료되었습니다!"
echo "📍 빌드 결과: src-tauri/target/release/bundle/dmg/"

기본 사용법

애플리케이션 실행

# GUI에서 실행
open /Applications/NeoHtop.app

# 터미널에서 실행
/Applications/NeoHtop.app/Contents/MacOS/NeoHtop

# sudo 권한으로 실행 (모든 프로세스 모니터링)
sudo /Applications/NeoHtop.app/Contents/MacOS/NeoHtop

인터페이스 둘러보기

NeoHtop을 실행하면 다음과 같은 주요 영역을 볼 수 있습니다:

상단 헤더

• 시스템 통계 (CPU, 메모리, 프로세스 수)
• 테마 전환 버튼
• 새로고침 설정

메인 테이블

• PID (프로세스 ID)
• 프로세스명
• CPU 사용률
• 메모리 사용량
• 명령어

하단 도구모음

• 검색 바
• 필터 옵션
• 정렬 컨트롤

고급 사용법

검색 및 필터링 마스터하기

NeoHtop의 강력한 검색 기능을 활용해보겠습니다:

기본 검색:

# 프로세스명으로 검색
chrome

# PID로 검색
1234

# 명령어로 검색
python

다중 키워드 검색:

# 쉼표로 구분하여 여러 키워드 검색
chrome, firefox, safari

# ARM과 x86 프로세스 동시 검색
arm, x86

정규표현식 검색:

# 데몬 프로세스 찾기 (d로 끝나는 프로세스)
d$

# 역도메인 표기법 프로세스 찾기
^(\w+\.)+\w+$

# Python 관련 프로세스
python.*

# 포트 번호가 포함된 프로세스
:\d{4,5}

프로세스 관리

프로세스 고정하기: 중요한 프로세스를 상단에 고정하여 쉽게 모니터링할 수 있습니다.

프로세스 종료하기: 문제가 있는 프로세스를 안전하게 종료할 수 있습니다.

정렬 기능 활용:

• CPU 사용률 기준 정렬
• 메모리 사용량 기준 정렬
• 프로세스명 알파벳 순 정렬

테마 커스터마이징

NeoHtop은 다크/라이트 테마를 지원하며, 시스템 설정에 따라 자동으로 전환됩니다:

# macOS 다크 모드 설정
defaults write -g AppleInterfaceStyle Dark

# 라이트 모드로 전환
defaults delete -g AppleInterfaceStyle

# 현재 테마 확인
defaults read -g AppleInterfaceStyle 2>/dev/null || echo "Light"

실전 활용 시나리오

시나리오 1: 성능 문제 진단

시스템이 느려질 때 NeoHtop을 활용한 진단 과정:

# 1. CPU 사용률 높은 프로세스 찾기
# NeoHtop에서 CPU 컬럼 클릭으로 정렬

# 2. 메모리 누수 의심 프로세스 찾기
# 메모리 컬럼 정렬 후 지속적으로 증가하는 프로세스 확인

# 3. 특정 애플리케이션 모니터링
# 검색 바에서 앱 이름으로 필터링

시나리오 2: 개발 환경 모니터링

개발 중인 애플리케이션의 리소스 사용량 모니터링:

# Node.js 애플리케이션 모니터링
# 검색: node

# Docker 컨테이너 모니터링
# 검색: docker

# 데이터베이스 프로세스 모니터링
# 검색: mysql|postgres|mongo

시나리오 3: 시스템 정리

불필요한 프로세스 정리 및 시스템 최적화:

# 오래된 프로세스 찾기
# 시작 시간 컬럼 확인

# 중복 프로세스 찾기
# 프로세스명으로 정렬 후 중복 확인

# 리소스 점유율 높은 프로세스 식별
# CPU/메모리 사용률 기준 정렬

성능 최적화 팁

시스템 리소스 절약

새로고침 간격 조정:

# NeoHtop 설정에서 새로고침 간격을 적절히 조정
# 실시간 모니터링이 필요하지 않다면 5-10초로 설정

필터 활용:

# 관심 있는 프로세스만 표시하여 성능 향상
# 정규표현식을 활용한 효율적인 필터링

모니터링 자동화

스크립트와 연동:

#!/bin/bash
# 파일: monitor_system.sh

# 시스템 부하 확인
if [ $(sysctl -n vm.loadavg | cut -d' ' -f2 | cut -d'.' -f1) -gt 5 ]; then
    echo "⚠️ 시스템 부하가 높습니다. NeoHtop으로 확인하세요."
    open /Applications/NeoHtop.app
fi

문제 해결

일반적인 문제들

권한 문제:

# 일부 시스템 프로세스가 보이지 않는 경우
sudo /Applications/NeoHtop.app/Contents/MacOS/NeoHtop

# 또는 pkexec 사용 (Linux)
pkexec /path/to/neohtop

성능 문제:

# 메모리 사용량이 높은 경우
# 새로고침 간격을 늘리거나 필터를 활용하여 표시되는 프로세스 수를 줄임

# CPU 사용률이 높은 경우
# 백그라운드 실행을 피하고 필요할 때만 실행

호환성 문제:

# macOS 버전 호환성 확인
sw_vers

# Apple Silicon vs Intel 확인
arch

# Rosetta 2 설치 (필요한 경우)
softwareupdate --install-rosetta

개발 및 기여하기

개발 환경 구축

NeoHtop 개발에 참여하고 싶다면:

# 저장소 포크 후 클론
git clone https://github.com/yourusername/neohtop.git
cd neohtop

# 개발 의존성 설치
npm install

# 개발 서버 실행
npm run tauri dev

# 코드 포맷팅
npm run format

# 포맷팅 확인
npm run format:check

기여 가이드라인

코드 스타일:

# Prettier를 사용한 웹 코드 포맷팅
npm run format

# Rust 코드 포맷팅
cargo fmt

# 린팅 확인
npm run lint

커밋 메시지 규칙:

# 기능 추가
feat: add process filtering by CPU usage

# 버그 수정
fix: resolve memory leak in process monitor

# 문서 업데이트
docs: update installation guide for macOS

유사 도구 비교

vs 기존 CLI 도구들

특징	htop	btop	NeoHtop
UI/UX	CLI	CLI + 그래픽	Modern GUI
검색	기본	고급	정규표현식
테마	제한적	다양	다크/라이트
플랫폼	Unix/Linux	크로스플랫폼	크로스플랫폼
확장성	제한적	제한적	웹 기술 기반

vs GUI 도구들

Activity Monitor (macOS):

• NeoHtop이 더 직관적인 검색 기능 제공
• 정규표현식 지원으로 고급 필터링 가능
• 모던한 UI/UX

Task Manager (Windows):

• 크로스플랫폼 지원
• 더 나은 시각화
• 개발자 친화적 기능

고급 설정 및 팁

단축키 및 워크플로우

# zshrc에 유용한 alias 추가
echo 'alias nht="open /Applications/NeoHtop.app"' >> ~/.zshrc
echo 'alias nhts="sudo /Applications/NeoHtop.app/Contents/MacOS/NeoHtop"' >> ~/.zshrc
source ~/.zshrc

# 시스템 부하 모니터링 함수
system_check() {
    load=$(sysctl -n vm.loadavg | awk '{print $2}')
    if (( $(echo "$load > 2.0" | bc -l) )); then
        echo "⚠️  High system load detected: $load"
        nht
    else
        echo "✅ System load normal: $load"
    fi
}

설정 파일 커스터마이징

NeoHtop의 설정을 영구적으로 저장하고 관리하기:

# 설정 파일 위치 확인
ls ~/Library/Application\ Support/NeoHtop/

# 설정 백업
cp -r ~/Library/Application\ Support/NeoHtop/ ~/Desktop/neohtop-backup/

# 설정 복원
cp -r ~/Desktop/neohtop-backup/ ~/Library/Application\ Support/NeoHtop/

실습 예제

실습 1: 메모리 누수 탐지

#!/bin/bash
# 파일: memory_leak_detection.sh

echo "🔍 메모리 누수 의심 프로세스 탐지를 시작합니다..."

# NeoHtop 실행 (백그라운드)
/Applications/NeoHtop.app/Contents/MacOS/NeoHtop &
NEOHTOP_PID=$!

echo "📊 NeoHtop이 실행되었습니다 (PID: $NEOHTOP_PID)"
echo "🔄 메모리 사용량을 모니터링하세요:"
echo "   1. 메모리 컬럼을 클릭하여 정렬"
echo "   2. 지속적으로 증가하는 프로세스 확인"
echo "   3. 의심 프로세스를 고정하여 추적"

# 10분 후 자동 종료
sleep 600
kill $NEOHTOP_PID 2>/dev/null

echo "✅ 모니터링이 완료되었습니다."

실습 2: 개발 환경 최적화

#!/bin/bash
# 파일: dev_env_optimization.sh

echo "🚀 개발 환경 최적화를 시작합니다..."

# 현재 실행 중인 개발 도구 확인
echo "📋 현재 실행 중인 개발 도구들:"
echo "   - Visual Studio Code: $(pgrep -f 'Visual Studio Code' | wc -l)개 프로세스"
echo "   - Node.js: $(pgrep -f node | wc -l)개 프로세스"
echo "   - Docker: $(pgrep -f docker | wc -l)개 프로세스"
echo "   - Python: $(pgrep -f python | wc -l)개 프로세스"

# NeoHtop으로 상세 분석
echo "🔍 NeoHtop에서 다음 검색어를 사용해보세요:"
echo "   - 'code' : VS Code 관련 프로세스"
echo "   - 'node' : Node.js 프로세스"
echo "   - 'docker' : Docker 관련 프로세스"
echo "   - 'python.*server' : Python 서버 프로세스"

/Applications/NeoHtop.app/Contents/MacOS/NeoHtop

미래 전망 및 로드맵

예상되는 기능 개선

차세대 기능들:

• AI 기반 이상 프로세스 탐지
• 클라우드 기반 모니터링 연동
• 플러그인 시스템 도입
• 모바일 앱 연동

성능 개선:

• 더 빠른 렌더링
• 메모리 사용량 최적화
• 배터리 효율성 향상

커뮤니티 생태계

확장 가능성:

• 테마 마켓플레이스
• 커스텀 위젯 시스템
• 서드파티 플러그인 지원
• 기업용 확장 기능

결론

NeoHtop은 전통적인 시스템 모니터링 도구의 한계를 뛰어넘어 현대적이고 직관적인 사용자 경험을 제공합니다. Rust의 성능과 Tauri의 가벼움, 그리고 Svelte의 반응성이 결합되어 탄생한 이 도구는 개발자와 시스템 관리자 모두에게 유용한 솔루션입니다.

특히 다음과 같은 경우에 NeoHtop을 적극 권장합니다:

• 시각적이고 직관적인 인터페이스를 선호하는 개발자
• 정규표현식을 활용한 고급 필터링이 필요한 경우
• 크로스플랫폼 환경에서 일관된 경험을 원하는 팀
• 모던한 도구로 워크플로우를 개선하고 싶은 사용자

앞으로도 활발한 개발이 예상되는 프로젝트이므로, 지속적인 업데이트와 커뮤니티 참여를 통해 더욱 강력한 도구로 발전할 것으로 기대됩니다. 여러분도 NeoHtop을 통해 시스템 모니터링의 새로운 경험을 시작해보세요!

추가 리소스

• 공식 GitHub: github.com/Abdenasser/neohtop
• 공식 웹사이트: abdenasser.github.io/neohtop
• 이슈 리포트: GitHub Issues를 통한 버그 신고 및 기능 요청
• 커뮤니티: GitHub Discussions를 통한 사용자 간 정보 공유