본문 바로가기
C.W.K.
Stream
Lesson 01 of 05 · published

왜 대시보드가 필요한지

~15 min · dashboard, visibility, wireframe

Level 0Greenhorn
0 XP0/53 lessons0/14 achievements
0/100 XP to next level100 XP to go0% complete

인증 시스템은 조용히 실패해. 뭔가 잘못됐다는 첫 신호는 알람인 경우가 거의 없어. 화요일 오후의 막연한 느낌, 숫자가 안 맞는 것 같은 느낌이지. 대시보드가 그 느낌을 30초 만에 증거로 바꿔줘.

솔로 auth 한테 "가시성" 이 진짜 뭘 의미하는지

물어볼 질문대시보드 없이대시보드와 함께
"지금 나 말고 누가 로그인돼 있어?"서버에 SSH, sqlite3 쿼리, row 파싱오른쪽 위 카운터 한 번 흘깃
"이번 주 실패 로그인 시도 받았어?"로그 rotation 을 넘나들며 앱 로그를 grep차트 하나, 지난 7일
"어떤 IP 가 blacklist 됐고 왜?"DB row 수동으로 읽기시각까지 나오고 정렬되는 테이블
"지금 뭐 의심스러운 거 있어?"눈에 띄게 깨지기 전엔 모름상태 배지: 녹/황/적

최소한으로 쓸 만한 대시보드

Grafana 를 흉내 내고 싶은 충동은 참아. 섹션 넷, HTML 페이지 하나면 돼. JavaScript 프레임워크도 필요 없고.

  1. 상태 헤더 — active session, 지난 시간 실패 시도, blacklist IP.
  2. Active session 테이블 — token prefix, IP, 생성, 만료, "Revoke" 버튼.
  3. 최근 시도 로그 — 성공/실패, IP, timestamp, 마지막 100.
  4. Killswitch 영역 — 큰 빨간 Revoke All, "unblock" 액션 있는 blacklist 테이블.

External links

Exercise

코딩 전 종이에 대시보드 스케치. 박스 4개: 상태 헤더, session 테이블, 시도 로그, killswitch 영역. 어느 걸 왼쪽 위에 (제일 자주 눈이 가는 자리) 둘지 정해. 그다음 코드에서 그 네 섹션 자리만 잡아둔 HTML 라우트 /admin/security 를 하나 만들어. 구조가 먼저고, 데이터 연결은 그다음이야.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.