Dashy: 고급 커스터마이징이 가능한 셀프호스팅 대시보드 ⋆ Blog * JackerLab

50개 이상의 위젯, 다양한 테마, UI 에디터를 갖춘 개인화 대시보드

개요

Dashy는 고도로 커스터마이징 가능한 셀프호스팅 대시보드입니다. YAML 설정과 UI 에디터를 모두 지원하며, 50개 이상의 내장 위젯, 다양한 테마, 상태 모니터링, 인증, 멀티 페이지, 워크스페이스 뷰 등 풍부한 기능을 제공합니다. 브라우저 시작 페이지로 사용하기에도 좋고, 홈랩 서비스 대시보드로도 훌륭합니다.

항목	내용
공식 사이트	https://dashy.to
GitHub	https://github.com/Lissy93/dashy
라이선스	MIT
GitHub Stars	19k+
Docker 이미지	`lissy93/dashy:latest`
기본 포트	8080
최신 버전	3.x

왜 Dashy인가?

1. 최고 수준의 커스터마이징

레이아웃, 색상, 아이콘, 폰트, 배경 이미지 등 거의 모든 요소를 커스터마이징할 수 있습니다. CSS 변수를 통해 세밀한 테마 조정이 가능합니다.

2. 50개 이상의 내장 위젯

날씨, 시계, 시스템 모니터링, GitHub, Pi-hole, AdGuard, Proxmox, Glances 등 다양한 위젯을 기본 제공합니다. 커스텀 API 위젯으로 확장도 가능합니다.

3. 다양한 뷰 모드

Default: 일반 대시보드 뷰
Minimal: 빠른 로딩을 위한 미니멀 뷰 (브라우저 시작 페이지용)
Workspace: 여러 앱을 동시에 작업하는 워크스페이스 뷰

4. 내장 인증

기본 인증, Keycloak, OIDC 연동을 지원합니다. 사용자별 권한 설정도 가능합니다.

5. 상태 모니터링

각 서비스의 온라인/오프라인 상태를 자동으로 확인하고 표시합니다.

6. PWA 지원

Progressive Web App으로 모바일에서도 네이티브 앱처럼 사용할 수 있습니다.

Dashy vs 다른 대시보드

항목	Dashy	Homepage	Homarr
설정 방식	YAML + UI	YAML	드래그앤드롭 UI
내장 위젯	50개+	100개+	30개+
테마	20개+ 내장 + 커스텀 CSS	제한적	제한적
내장 인증	✅	❌	✅
상태 모니터링	✅	✅	✅
멀티 페이지	✅	❌	✅ (보드)
워크스페이스 뷰	✅	❌	❌
PWA	✅	❌	❌
학습 곡선	중간	중간	낮음
추천 대상	고급 커스터마이징	개발자	입문자

Dashy 선택이 좋은 경우:

테마와 디자인을 세밀하게 커스터마이징하고 싶을 때
브라우저 시작 페이지로 사용하고 싶을 때
위젯과 상태 모니터링이 모두 필요할 때
워크스페이스 뷰로 멀티태스킹이 필요할 때

Docker Compose로 설치하기

기본 설치 (Dashy 3.x)

services:
  dashy:
    image: lissy93/dashy:latest
    container_name: dashy
    restart: unless-stopped
    ports:
      - "4000:8080"
    volumes:
      - ./conf.yml:/app/user-data/conf.yml
    environment:
      - NODE_ENV=production
    healthcheck:
      test: ['CMD', 'node', '/app/services/healthcheck']
      interval: 1m30s
      timeout: 10s
      retries: 3
      start_period: 40s

아이콘 팩 포함 설치

services:
  dashy:
    image: lissy93/dashy:latest
    container_name: dashy
    restart: unless-stopped
    ports:
      - "4000:8080"
    volumes:
      - ./conf.yml:/app/user-data/conf.yml
      - ./icons:/app/public/item-icons/icons
    environment:
      - NODE_ENV=production

설치 및 실행

# 디렉토리 생성
mkdir -p ~/dashy && cd ~/dashy

# 기본 설정 파일 생성
cat > conf.yml << 'EOF'
pageInfo:
  title: My Dashboard
  description: Welcome to Dashy
  navLinks:
    - title: GitHub
      path: https://github.com/Lissy93/dashy

appConfig:
  theme: colorful
  statusCheck: true
  statusCheckInterval: 300

sections:
  - name: Getting Started
    icon: fas fa-rocket
    items:
      - title: Dashy Docs
        description: Documentation for Dashy
        url: https://dashy.to/docs
        icon: fas fa-book
EOF

# 아이콘 팩 다운로드 (선택)
git clone https://github.com/walkxcode/dashboard-icons.git icons

# 실행
docker compose up -d

브라우저에서 http://<서버IP>:4000으로 접속합니다.

설정 파일 구조

Dashy는 단일 YAML 파일(conf.yml)로 모든 설정을 관리합니다.

# conf.yml 기본 구조
pageInfo:         # 페이지 메타 정보
  title: ...
  description: ...
  navLinks: []
  footerText: ...

appConfig:        # 앱 전역 설정
  theme: ...
  statusCheck: ...
  language: ...

sections:         # 섹션 (그룹) 목록
  - name: ...
    items: []     # 아이템 (링크) 목록
    widgets: []   # 위젯 목록

기본 설정 예시

완전한 conf.yml 예시

pageInfo:
  title: Homelab Dashboard
  description: My self-hosted services
  navLinks:
    - title: GitHub
      path: https://github.com
    - title: Cloud
      path: https://cloud.example.com
  footerText: '© 2025 My Homelab'

appConfig:
  theme: material-dark
  layout: auto
  iconSize: medium
  statusCheck: true
  statusCheckInterval: 300
  language: en

sections:
  - name: 미디어
    icon: fas fa-play-circle
    displayData:
      sortBy: alphabetical
      collapsed: false
      cols: 2
    items:
      - title: Plex
        description: 미디어 서버
        url: http://plex.local:32400
        icon: hl-plex
        
      - title: Jellyfin
        description: 오픈소스 미디어 서버
        url: http://jellyfin.local:8096
        icon: hl-jellyfin

  - name: 인프라
    icon: fas fa-server
    items:
      - title: Proxmox
        description: 가상화 플랫폼
        url: https://proxmox.local:8006
        icon: hl-proxmox
        statusCheckAllowInsecure: true
        
      - title: Portainer
        description: Docker 관리
        url: http://portainer.local:9000
        icon: hl-portainer

  - name: 네트워크
    icon: fas fa-network-wired
    items:
      - title: Pi-hole
        description: DNS 광고 차단
        url: http://pihole.local/admin
        icon: hl-pihole
        
      - title: Nginx Proxy Manager
        description: 리버스 프록시
        url: http://npm.local:81
        icon: hl-nginx-proxy-manager

아이콘 설정

Dashy는 다양한 아이콘 소스를 지원합니다.

아이콘 유형

접두사	소스	예시
`fas` / `fab`	Font Awesome	`fas fa-home`, `fab fa-github`
`hl-`	Homelab Icons	`hl-plex`, `hl-jellyfin`
`si-`	Simple Icons	`si-docker`, `si-kubernetes`
`mdi-`	Material Design Icons	`mdi-home`, `mdi-server`
`emoji`	이모지	`emoji:🏠`, `emoji:🎬`
`favicon`	자동 파비콘	(URL 기반 자동 감지)
URL	직접 이미지 URL	`https://example.com/icon.png`
로컬	로컬 파일	`/item-icons/icons/plex.png`

아이콘 예시

items:
  # Font Awesome
  - title: Home
    icon: fas fa-home
    
  # Homelab Icons (권장)
  - title: Plex
    icon: hl-plex
    
  # Simple Icons
  - title: Docker
    icon: si-docker
    
  # 이모지
  - title: Movies
    icon: emoji:🎬
    
  # 자동 파비콘
  - title: GitHub
    url: https://github.com
    icon: favicon
    
  # 직접 URL
  - title: Custom App
    icon: https://example.com/logo.png

아이콘 팩 설치

# dashboard-icons 저장소 클론
git clone https://github.com/walkxcode/dashboard-icons.git icons

# Docker 볼륨으로 마운트
volumes:
  - ./icons/png:/app/public/item-icons/icons

위젯

Dashy는 50개 이상의 내장 위젯을 제공합니다.

위젯 추가 방법

sections:
  - name: System Info
    widgets:
      - type: clock
        options:
          timeZone: Asia/Seoul
          format: ko-KR
          
      - type: weather
        options:
          apiKey: your-openweathermap-api-key
          city: Seoul
          units: metric

주요 위젯 카테고리

일반 / 유틸리티

위젯	설명
`clock`	시계 (타임존 지원)
`weather`	날씨 (OpenWeatherMap)
`crypto-watch-list`	암호화폐 시세
`rss-feed`	RSS 피드
`iframe`	외부 페이지 임베드
`image`	이미지 표시
`embed`	HTML/JS 임베드

시스템 모니터링 (Glances)

widgets:
  - type: gl-current-cpu
    options:
      hostname: http://192.168.1.100:61208
      
  - type: gl-current-mem
    options:
      hostname: http://192.168.1.100:61208
      
  - type: gl-disk-space
    options:
      hostname: http://192.168.1.100:61208
      
  - type: gl-system-load
    options:
      hostname: http://192.168.1.100:61208

네트워크 / DNS

# Pi-hole
widgets:
  - type: pi-hole-stats
    options:
      hostname: http://pihole.local
      apiKey: your-api-key

  - type: pi-hole-top-queries
    options:
      hostname: http://pihole.local
      apiKey: your-api-key
      count: 10

# AdGuard Home
widgets:
  - type: adguard-stats
    useProxy: true
    options:
      hostname: http://adguard.local
      username: admin
      password: your-password

  - type: adguard-filter-status
    options:
      hostname: http://adguard.local
      username: admin
      password: your-password

가상화 (Proxmox)

widgets:
  - type: proxmox
    options:
      cluster_url: https://proxmox.local:8006
      username: dashy@pve
      token_name: dashy-token
      token_value: your-token-uuid
      node: pve1
      type: qemu  # 또는 lxc

개발 / GitHub

widgets:
  - type: github-profile-stats
    options:
      username: your-github-username
      
  - type: github-trending-repos
    options:
      language: javascript
      since: daily
      limit: 5

  - type: code-stats
    options:
      username: your-codestats-username

미디어

# Nextcloud
widgets:
  - type: nextcloud-user
    useProxy: true
    options:
      hostname: https://nextcloud.example.com
      username: alice
      password: app-password

테마

내장 테마

Dashy는 20개 이상의 내장 테마를 제공합니다.

appConfig:
  theme: material-dark  # 테마 이름

주요 테마 목록:

default, colorful, material, material-dark
dracula, nord, nord-frost
minimal-dark, minimal-light
one-dark, cyberpunk, matrix
high-contrast-dark, high-contrast-light

커스텀 테마 만들기

appConfig:
  theme: my-custom-theme
  customColors:
    my-custom-theme:
      primary: '#ff6b6b'
      background: '#1a1a2e'
      background-darker: '#16213e'
      text-color: '#eaeaea'
      curve-factor: '10px'

CSS 변수로 세밀한 조정

appConfig:
  customCss: |
    :root {
      --primary: #7c3aed;
      --background: #0f172a;
      --card-background: #1e293b;
      --text-color: #e2e8f0;
      --item-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
      --curve-factor: 12px;
    }
    
    .item {
      transition: transform 0.2s ease;
    }
    
    .item:hover {
      transform: translateY(-4px);
    }

상태 모니터링

전역 활성화

appConfig:
  statusCheck: true
  statusCheckInterval: 300  # 5분마다 체크

아이템별 설정

items:
  - title: Proxmox
    url: https://proxmox.local:8006
    statusCheck: true
    statusCheckAllowInsecure: true  # 자체 서명 인증서 허용
    statusCheckAcceptCodes: '200,401,403'  # 허용할 상태 코드
    statusCheckMaxRedirects: 2

상태 표시 스타일

appConfig:
  statusCheckInterval: 0  # 페이지 로드 시에만 체크

상태 인디케이터:

🟢 녹색: 온라인 (200 응답)
🔴 빨간색: 오프라인
🟡 노란색: 느린 응답
⚪ 회색: 체크 안 함

인증 설정

기본 인증

appConfig:
  auth:
    enableGuestAccess: false
    users:
      - user: admin
        hash: '5e884898da28047d91...'  # SHA-256 해시
        type: admin
      - user: guest
        hash: '...'
        type: normal

비밀번호 해시 생성:

echo -n "your-password" | sha256sum

Keycloak 연동

appConfig:
  auth:
    enableKeycloak: true
    keycloak:
      serverUrl: https://keycloak.example.com
      realm: dashy
      clientId: dashy-client

멀티 페이지

여러 설정 파일로 멀티 페이지 대시보드를 만들 수 있습니다.

pages 설정

# conf.yml (메인)
pages:
  - name: Home
    path: /
  - name: Media
    path: media.yml
  - name: Infrastructure
    path: infra.yml

서브 페이지 파일

# media.yml
pageInfo:
  title: Media Dashboard

sections:
  - name: Streaming
    items:
      - title: Plex
        url: http://plex.local:32400
        icon: hl-plex

뷰 모드

Default 뷰

일반 대시보드 레이아웃입니다.

Minimal 뷰

브라우저 시작 페이지에 적합한 미니멀 뷰입니다.

appConfig:
  startingView: minimal

Workspace 뷰

여러 앱을 iframe으로 동시에 열어 작업할 수 있습니다.

appConfig:
  startingView: workspace
  workspaceLandingUrl: https://github.com  # 기본 앱
  enableMultiTasking: true  # 백그라운드 유지

레이아웃 설정

전역 레이아웃

appConfig:
  layout: auto  # auto, vertical, horizontal, sidebar
  iconSize: medium  # small, medium, large
  colCount: 4  # 열 개수

섹션별 레이아웃

sections:
  - name: Infrastructure
    displayData:
      sortBy: alphabetical  # alphabetical, reverse-alphabetical, most-used, last-used, random
      rows: 2
      cols: 3
      collapsed: false
      hideForGuests: false
      itemSize: medium

고급 기능

검색

검색 바에서 타이핑을 시작하면 즉시 필터링됩니다. 화살표 키로 이동, Enter로 실행합니다.

appConfig:
  webSearch:
    searchEngine: duckduckgo  # google, duckduckgo, bing 등
    openingMethod: newtab

키보드 단축키

단축키	동작
`/` 또는 `Ctrl+K`	검색 포커스
`Esc`	모달 닫기
`Arrow Keys`	아이템 탐색
`Enter`	선택 항목 실행

클라우드 백업

appConfig:
  enableBackup: true
  # 암호화된 백업을 Dashy 클라우드에 저장

UI 에디터 사용

Dashy는 브라우저에서 직접 설정을 편집할 수 있습니다.

우측 하단 설정 아이콘 클릭
“Config” 탭 선택
비주얼 에디터 또는 YAML 에디터 사용
“Save” 클릭

참고: UI에서 수정한 설정은 브라우저 로컬 스토리지에 저장됩니다. 영구 저장하려면 설정 파일로 내보내기하세요.

트러블슈팅

컨테이너 시작이 느림

Dashy는 첫 시작 시 빌드 과정이 있어 60초 정도 걸릴 수 있습니다.

# 로그 확인
docker logs -f dashy

설정 변경이 반영되지 않음

브라우저 캐시 삭제
컨테이너 재시작: docker restart dashy
로컬 스토리지 설정이 우선할 수 있음 → UI에서 “Reset Local Settings”

위젯이 작동하지 않음

CORS 문제일 수 있음 → useProxy: true 추가
API 키 확인
네트워크 연결 확인

Dashy 3.0 마이그레이션

버전 3.0에서 볼륨 경로가 변경되었습니다.

# 이전 (2.x)
volumes:
  - ./conf.yml:/app/public/conf.yml

# 현재 (3.x)
volumes:
  - ./conf.yml:/app/user-data/conf.yml

마무리

Dashy는 커스터마이징의 끝판왕입니다. 단순한 서비스 링크 모음부터 위젯이 가득한 모니터링 대시보드, 미니멀한 브라우저 시작 페이지까지 원하는 대로 만들 수 있습니다.

YAML 설정과 UI 에디터를 모두 지원해서, 설정 파일을 직접 편집하는 것이 편한 사람과 GUI를 선호하는 사람 모두 만족할 수 있습니다. 50개 이상의 내장 위젯, 다양한 테마, 상태 모니터링, 인증, 멀티 페이지 등 기능도 풍부합니다.

시간을 들여 커스터마이징할 의향이 있다면, Dashy는 가장 만족스러운 대시보드가 될 것입니다.

개요