도구 사용성 — 이 앱이 쓰기 편한가?
지금까지는 다이어그램 자체를 평가하는 기준이었습니다. 이번엔 다릅니다. **다이어그램을 만드는 도구(앱)**가 쓰기 편한지를 봅니다.
아무리 좋은 결과물이 나와도, 도구가 불편하면 안 쓰게 됩니다.
1. Nielsen의 10원칙이란?
Jakob Nielsen이 1994년에 만든 UI 사용성 평가 기준입니다. 웹사이트, 앱, 소프트웨어 — 뭐든 UI가 있으면 이 10개로 평가할 수 있어요.
시각화 도구에 적용하면 이렇게 됩니다.
2. 10원칙 — 시각화 도구 버전
2-1. 지금 뭐 하는 중인지 보여줘
저장됐어? 내보내기 중이야? 동기화 끝났어?
- draw.io: "저장 완료" 표시 명확 ✅
- Excalidraw: 자동 저장이지만 피드백 약함 △
- Mermaid Live: 저장 개념 없음 (복사해서 쓰는 거라) —
2-2. 내가 아는 말로 말해줘
메뉴가 직관적인가? "Export to mxGraph XML" 같은 전문 용어가 튀어나오진 않는가?
2-3. 실수를 되돌릴 수 있어야 해
Ctrl+Z (Undo)가 잘 되는가? 몇 단계까지 되돌릴 수 있는가?
- draw.io: Undo 무제한 ✅
- Excalidraw: Undo 잘 됨 ✅
- Mermaid: 텍스트 에디터의 Undo에 의존 ✅
2-4. 같은 건 같게, 다른 건 다르게
단축키가 다른 앱과 비슷한가? Ctrl+C가 복사, Ctrl+V가 붙여넣기인가?
당연한 것 같지만, 독자적인 단축키 체계를 쓰는 도구는 학습 비용이 높습니다.
2-5. 실수를 미리 막아줘
잘못된 연결(화살표가 자기 자신을 가리키기)을 사전에 차단하는가?
2-6. 외울 필요 없이 보여줘
도구 팔레트가 화면에 보이는가? 숨겨진 메뉴 속에 기능이 묻혀있지 않은가?
- Excalidraw: 왼쪽에 도구 바로 보임 ✅
- draw.io: 메뉴가 많아서 찾아야 함 △
2-7. 초보자도, 숙련자도 편해야 해
처음 쓸 때 쉽고, 익숙해지면 단축키로 빠르게 쓸 수 있는가?
2-8. 깔끔해야 해
UI가 다이어그램 편집 영역을 최대한 넓게 잡아주는가? 불필요한 버튼이 화면을 채우고 있지 않은가?
2-9. 에러가 나면 뭐가 잘못됐는지 알려줘
Mermaid 문법 오류 시: "Syntax error at line 5" — 이 정도면 OK 그냥 빈 화면만 나옴 — 나쁨
2-10. 도움말이 있어야 해
처음 쓰는 사람을 위한 튜토리얼, 템플릿이 있는가?
- draw.io: 템플릿 풍부 ✅
- Excalidraw: 라이브러리 공유 있음 ✅
- Mermaid: 공식 문서가 잘 되어있음 ✅
3. 이건 "도구" 평가이지, "결과물" 평가가 아니다
중요한 구분입니다.
| 뭘 평가? | 어떤 기준? |
|---|---|
| draw.io 앱이 쓰기 편한가? | Nielsen (이번 글) |
| draw.io로 만든 다이어그램이 잘 읽히는가? | Bertin, Tufte (앞의 글들) |
| draw.io로 작업하는 과정이 효율적인가? | Green (03편) |
세 가지가 다 다릅니다. 도구 UI는 좋은데 결과물이 별로일 수 있고, 그 반대도 가능합니다.
4. 체크리스트
- 처음 열었을 때 5분 안에 뭔가 그릴 수 있었다
- Undo/Redo가 잘 된다
- 단축키가 다른 앱과 비슷하다
- 메뉴/도구가 찾기 쉬운 곳에 있다
- 에러가 나면 뭐가 잘못됐는지 알려준다
출처
Nielsen, J. (1994). 10 Usability Heuristics for User Interface Design. NN/g. → 30년 된 원칙이지만 여전히 UX 평가의 글로벌 표준. 모든 앱·웹사이트 평가에 쓸 수 있습니다.