📖 호라헤어살롱 메모보드
사용 매뉴얼 v1.4.8 — 디자이너 협업 메모보드 완전 가이드
📦 로컬 파일 공유 방법
🎉 인터넷 없이도 완전히 동작합니다!
이 앱은 폴더 하나를 ZIP으로 묶어
카카오톡 · USB · 이메일로 전달하면 끝입니다.
받는 사람은 압축 해제 후 index.html 더블클릭만!
상세 공유 안내 페이지 열기
폴더 구조 (공유되는 파일들)
📁 hora-memoboard/ ← 이 폴더 전체를 ZIP
├── 📄 index.html ← 메인 앱 (여기 더블클릭!)
├── 📁 assets/
│ ├── 📁 fonts/
│ │ └── pretendard-variable.woff2 (한글 폰트)
│ └── 📁 fontawesome/
│ ├── css/all.min.css (아이콘 CSS)
│ └── webfonts/*.woff2 (아이콘 폰트)
├── 📄 owner.html ← 사장님 전용
├── 📄 README_사용법.html ← 이 페이지
└── 📄 공유방법_안내.html ← 공유 가이드
💡 중요: 폴더 구조를 유지해야 합니다. assets 폴더와 index.html이 같은 위치에 있어야 폰트와 아이콘이 정상 표시됩니다.
공유 방법 요약
| 방법 | 장점 | 방법 |
|---|
| 📱 카카오톡 | 가장 편리 | ZIP 파일을 파일로 전송 |
| 🖥️ USB | 인터넷 불필요 | USB에 폴더 복사 |
| 📧 이메일 | 어디서나 | ZIP 첨부파일로 전송 |
| ☁️ 구글드라이브 | 여러명에게 | 공유 링크로 다운로드 |
✨ 소개 및 특징
호라헤어살롱 메모보드는 미용실 직원들이 서로의 메모를 실시간으로 공유하고 관리할 수 있는 협업 도구입니다.
- 디자이너별 카드 보드로 한 눈에 파악
- 메모 상태 추적: 미확인 → 확인됨 → 완료
- 6가지 카테고리: 전화, 예약, 인계, 재고, 컴플레인, 기타
- 긴급(🚨) 표시로 중요 메모 강조
- 드래그앤드롭으로 디자이너 순서 변경
- 모든 데이터는 내 기기에 안전하게 저장 (LocalStorage)
- 완전 오프라인 동작 — 인터넷 연결 불필요
- 로컬 파일 공유 / PWA 설치 / Electron 앱 모두 지원
ℹ️ 데이터 저장 위치: 모든 데이터는 브라우저의 LocalStorage에 저장됩니다. 같은 컴퓨터·같은 브라우저에서만 데이터가 유지됩니다. 다른 컴퓨터로 이전하려면 백업 기능을 사용하세요.
🚀 빠른 시작
첫 실행 위저드
앱을 처음 열면 3단계 위저드가 나타납니다:
- Step 1: 매장명과 부제목 입력
- Step 2: 브랜드 색상 선택
- Step 3: 완료 → 기본 디자이너 3명 자동 등록
💡 위저드를 건너뛰면 나중에 상단 ⚙️ 버튼에서 설정할 수 있습니다.
로컬 파일로 시작하기
- ZIP 파일을 받아서 압축 해제
- index.html을 더블클릭 (Chrome 또는 Edge 추천)
- 처음 실행 시 위저드로 매장 설정
- 디자이너 추가 후 메모 작성 시작!
📝 메모 작성 방법
방법 1 — 디자이너 컬럼의 + 버튼
각 디자이너 카드 우측 상단 [+] 버튼을 클릭하면 해당 디자이너에게 메모를 추가합니다.
방법 2 — ⚡ 빠른 메모 버튼
상단 우측 ⚡ 빠른 메모 버튼을 클릭하면 디자이너 선택과 메모 작성을 한 번에 처리합니다.
카테고리 선택
| 아이콘 | 카테고리 | 용도 |
|---|
| 📞 | 전화 | 고객 전화 내용 전달 |
| 📅 | 예약 | 예약 관련 사항 |
| 🔄 | 인계 | 업무 인계 사항 |
| 📦 | 재고 | 재고/발주 관련 |
| ⚠️ | 컴플레인 | 고객 불만 처리 |
| 💬 | 기타 | 기타 메모 |
긴급 표시
메모 작성 시 하단 긴급 토글을 켜면 🚨 긴급 배지가 표시되며, 해당 메모가 상단에 정렬됩니다.
🔄 상태 관리
각 메모 카드 좌측 상단의 체크박스를 클릭하면 상태가 순환됩니다:
| 상태 | 색상 | 의미 | 체크박스 |
|---|
| 미확인 | 노란 크림 | 새로 들어온 메모, 아직 확인 전 | 비어있음 |
| 확인됨 | 민트 그린 | 내용을 확인함, 처리 중 | ✓ 녹색 |
| 완료 | 라벤더 | 처리 완료 | ✓✓ 보라색 |
⚠️ 완료 상태의 메모는 취소선이 표시되어 구분됩니다.
🔍 검색 & 필터
검색창
상단 검색창에 키워드를 입력하면 200ms 디바운스 후 실시간으로 필터링됩니다.
날짜 필터
날짜 피커에서 날짜를 선택하거나, 오늘 / 전체 칩을 클릭합니다.
카테고리 필터
하단 카테고리 칩을 클릭하면 해당 카테고리만 표시됩니다. 다시 클릭하면 해제됩니다.
KPI 카드 클릭 필터
상단 5개 KPI 카드(전체/미확인/확인됨/완료/긴급)를 클릭하면 해당 상태로 필터링됩니다.
필터 초기화
카테고리 필터 오른쪽 ✕ 초기화 버튼으로 모든 필터를 지웁니다.
↕️ 드래그앤드롭 순서 변경
디자이너 컬럼 상단의 ⠿ 핸들을 클릭&드래그하여 순서를 변경할 수 있습니다.
- PC: 마우스 드래그
- 태블릿/모바일: 터치 드래그
- 변경된 순서는 자동으로 저장됩니다
👥 디자이너 설정
상단 ⚙️ 아이콘 → 디자이너 탭에서 관리합니다.
- 추가: + 디자이너 추가 버튼
- 수정: 편집 아이콘(🖊) 클릭
- 비활성화: 👁 아이콘으로 임시 숨김
- 삭제: 🗑 아이콘 (관련 메모도 함께 삭제됨)
💡 사진은 256×256으로 자동 리사이즈됩니다.
🏪 매장 설정
상단 ⚙️ 아이콘 → 매장 탭에서 수정합니다.
- 매장명, 부제목 변경
- 로고 이미지 업로드 (128px 자동 리사이즈)
- 브랜드 포인트 색상 변경
💾 백업 & 복원
⚙️ 아이콘 → 데이터 탭에서 관리합니다.
백업
JSON 파일로 모든 데이터(메모, 디자이너, 설정)를 내보냅니다.
파일명: hora-backup-YYYY-MM-DD.json
복원
백업 JSON 파일을 불러오면 현재 데이터를 덮어씁니다.
⚠️ 복원 전 반드시 현재 데이터를 백업하세요!
다른 PC로 이전
- 구 기기에서 백업 저장 (JSON 파일 생성)
- 새 기기에 앱 폴더 복사 (ZIP 공유 방법 이용)
- 새 기기에서 index.html 열기
- 복원으로 백업 파일 불러오기
🛠️ 데스크탑 앱 빌드 (Electron)
ℹ️ 일반 사용자는 이 섹션을 건너뛰셔도 됩니다. 로컬 파일 공유 방식이 훨씬 간단합니다.
사전 요구사항
- Node.js 18+ (nodejs.org에서 다운로드)
- Git
설치 & 실행
# 의존성 설치
npm install
# 개발 모드 실행 (빌드 없이)
npm start
# Windows 인스톨러 빌드
npm run build:win
# Mac DMG 빌드
npm run build:mac
# 모든 플랫폼 빌드
npm run build:all
빌드 결과물 위치
dist/
├── win-unpacked/ # 압축 해제된 Windows 앱
├── 호라헤어살롱-메모보드-1.4.8-x64.exe
├── 호라헤어살롱-메모보드-1.4.8-x64-포터블.exe
└── mac/
└── 호라헤어살롱-메모보드-1.4.8.dmg
❓ FAQ
Q. 폰트(글자)가 이상하게 보여요
assets/fonts/pretendard-variable.woff2 파일이 있는지 확인하세요. index.html과 같은 폴더 위치에 assets 폴더가 있어야 합니다.
Q. 아이콘이 네모(□□)로 보여요
assets/fontawesome/ 폴더가 있는지 확인하세요. 폴더 구조가 맞으면 정상 표시됩니다.
Q. 데이터가 사라졌어요
브라우저 데이터를 지우거나 시크릿 모드에서 사용하면 데이터가 초기화됩니다. 반드시 백업을 자주 해두세요.
Q. 여러 기기에서 동시에 사용하고 싶어요
현재 버전은 오프라인 전용입니다. 각 기기에 별도 설치하고, 백업 파일로 데이터를 동기화하세요.
Q. 어떤 브라우저를 써야 하나요?
Chrome 또는 Edge를 권장합니다. Firefox도 동작하지만 일부 기능(PWA 설치)이 제한될 수 있습니다.
Q. Electron 빌드 중 오류가 발생해요
npm install --force 후 다시 시도하거나, Node.js 버전을 18.x LTS로 맞춰보세요.