Vibe Coding 03 admin_panel_settings

Admin Glossary

관리자 페이지
필수 용어 정리

“관리자 페이지 만들어줘”가 아니라 CRUD, MVC, 권한, 보안, 검색, 필터, 페이지네이션까지 정확히 지시하는 법을 배웁니다.

CRUD
MVC
RBAC
Security
Slide 02psychology

관리자 페이지는 “화면”보다 “운영 구조”입니다

Bad Request

관리자 페이지 만들어줘

무엇을 관리할지, 어떤 권한이 필요한지, 삭제 방식과 보안 조건이 빠져 결과가 불안정해집니다.

Good Request

회원 CRUD + 검색 + 권한 + CSRF

기능, 데이터 구조, 보안, 화면 구성을 정확히 말하면 AI가 구현 범위를 안정적으로 잡습니다.

Slide 03dashboard

관리자 기본 구조

1

대시보드

첫 화면 요약 지표

2

사이드바

주요 관리 메뉴

3

헤더

검색, 알림, 로그아웃

4

콘텐츠 영역

목록/폼/상세 화면

5

활성 메뉴

현재 위치 표시

Slide 04view_list

화면은 보통 4종류로 나뉩니다

목록 페이지

테이블, 검색, 필터, 정렬, 페이지네이션

상세 페이지

한 레코드의 전체 정보 확인

등록 페이지

새 데이터를 입력하는 폼

수정 페이지

기존 데이터를 변경하는 폼

삭제 기능은 목록/상세 화면에 버튼으로 배치하되, confirm 또는 모달 확인을 반드시 넣습니다.
Slide 05sync_alt

CRUD는 관리자 페이지의 기본 문법입니다

C

Create

등록

R

Read

목록/상세 조회

U

Update

수정/상태 변경

D

Delete

삭제/소프트 삭제

바이브코딩 요청에서는 “회원 CRUD”, “배너 CRUD”, “공지사항 CRUD”처럼 관리 대상을 붙여 말합니다.

Slide 06group

회원 관리는 권한과 상태가 핵심입니다

회원 목록

ID, 이름, 이메일, 휴대폰, 권한, 상태, 가입일, 관리 버튼

회원 상세

기본 정보, 최근 로그인, 작성글, 주문 내역, 관리자 메모

회원 상태

정상, 휴면, 정지, 탈퇴, 대기

관리자 메모

내부 상담 이력이나 주의사항을 사용자에게 보이지 않게 기록

비밀번호 초기화

임시 비밀번호 발급 또는 재설정 링크 발송

소프트 삭제

회원 데이터를 지우지 않고 deleted_at으로 삭제 처리

Slide 07verified_user

권한은 “누가 어디까지 할 수 있나”입니다

최고관리자

전체 접근, 관리자 계정 생성, 설정 변경

일반관리자

일부 기능 접근, 민감 설정 제한

운영자

게시글, 주문, 문의 등 특정 업무 담당

요청 예시: 회원 삭제 기능은 최고관리자만 사용할 수 있도록 권한 체크를 추가해줘.
Slide 08database

DB 용어를 알아야 테이블을 정확히 요청합니다

테이블 / 컬럼 / 레코드

users 테이블 안에 name, email, role 컬럼이 있고 회원 1명이 레코드입니다.

Primary Key

각 데이터를 구분하는 고유 번호입니다. 보통 id 컬럼입니다.

Foreign Key

orders.user_id처럼 다른 테이블과 연결되는 값입니다.

인덱스

검색이 많은 이메일, 제목, 날짜 컬럼의 조회 속도를 높입니다.

created_at / updated_at / deleted_at

생성, 수정, 삭제 처리 시각을 기록합니다.

마이그레이션 / 시드 / 트랜잭션

DB 구조 변경, 기본 데이터 입력, 묶음 작업 처리입니다.

Slide 09account_tree

MVC는 파일 역할을 나누는 구조입니다

Model

DB 조회, 저장, 수정, 삭제 담당

View

HTML, Tailwind CSS, jQuery 화면 담당

Controller

요청을 받고 Model과 View를 연결

/admin/users → UserController@index → UserModel::paginate() → admin/users/index.php
Slide 10table_chart

관리자 UI는 스캔하기 쉬워야 합니다

table_chart

테이블

search

검색창

filter_list

필터

sort

정렬

more_horiz

페이지네이션

dialogs

모달

warning

삭제 확인

close

선택한 회원을 삭제하시겠습니까?

취소 삭제

현재 화면 위에 뜨는 확인/입력 팝업

notifications_active

토스트 알림

check_circle

저장되었습니다.

회원 정보가 정상적으로 수정되었습니다.

error

저장 실패

필수 입력값을 확인해주세요.

작업 결과를 짧게 알려주는 알림

edit_note

폼

Tailwind CSS를 쓴다면 “깔끔한 관리자 페이지 테이블 UI”, “상태 배지”, “관리 버튼”처럼 구체적으로 요청합니다.

Slide 11shield_lock

관리자 페이지 보안은 “문 잠그기”입니다

어려운 이름을 외우는 것보다, 어떤 위험을 막는 기능인지 먼저 이해하면 됩니다.

check_circle

SQL Injection

검색창이나 입력칸에 이상한 SQL 명령을 넣어 DB를 건드리는 공격입니다.

막는 법: SQL에 값을 직접 붙이지 말고 Prepared Statement로 처리합니다.

check_circle

XSS

제목이나 메모에 스크립트를 넣어 다른 사람 화면에서 실행되게 하는 공격입니다.

막는 법: 화면에 출력할 때 htmlspecialchars로 안전하게 바꿔줍니다.

check_circle

CSRF

관리자가 로그인한 상태를 이용해 몰래 삭제/수정 요청을 보내는 공격입니다.

막는 법: 폼과 AJAX 요청마다 CSRF Token을 넣고 서버에서 확인합니다.

check_circle

비밀번호 해싱

DB가 털려도 비밀번호 원문이 보이지 않게 바꿔 저장하는 방식입니다.

막는 법: password_hash로 저장하고 password_verify로 확인합니다.

check_circle

접근 제어

일반 회원이 관리자 URL을 직접 입력해서 들어오는 상황을 막는 기능입니다.

막는 법: 모든 관리자 페이지 시작 부분에서 로그인과 관리자 권한을 확인합니다.

check_circle

파일 업로드 보안

이미지 업로드 기능에 악성 파일이 올라오는 것을 막는 검사입니다.

막는 법: 확장자, MIME 타입, 파일 크기, 저장 경로, 랜덤 파일명을 확인합니다.

Slide 12settings_applications

관리자 기능은 계속 확장됩니다

사이트 설정
메타태그 관리
SEO / GEO
접속 통계
관리자 로그
배너 관리
팝업 관리
공지사항 관리
카테고리 관리
파일 관리
관리자 알림
관리자 메모
Slide 13monitoring

로그와 통계는 운영자의 눈입니다

방문자 수
페이지뷰
유입 경로
클릭 수
노출 수
전환율
관리자 액션 로그

문제가 생겼을 때 “누가, 언제, 무엇을 바꿨는지”를 추적하려면 관리자 로그가 필요합니다.

Slide 14api

API와 AJAX를 알면 화면이 부드러워집니다

GET

조회

POST

등록/중요 요청

PUT/PATCH

수정

DELETE

삭제

Endpoint

API URL

Status Code

응답 상태

회원 상태 변경은 AJAX로 처리하고, 성공하면 페이지 새로고침 없이 상태 배지만 변경되게 해줘.
Slide 15cloud_upload

운영 용어는 배포 사고를 줄입니다

로컬 환경
개발 서버
운영 서버
배포
백업
에러 로그
유지보수
버전 관리

운영 서버 반영 전에는 백업, 마이그레이션, 에러 로그 확인, 롤백 가능성을 함께 생각해야 합니다.

Slide 16edit_note

바로 쓰는 바이브코딩 요청 표현

전체 구조

“PHP MVC 구조로 관리자 페이지 기본 구조를 만들어줘. 대시보드, 회원 관리, 게시글 관리, 사이트 설정 메뉴를 포함해줘.”

파일 경로

“작업 전에 생성하거나 수정할 파일 경로를 먼저 목록으로 알려줘.”

단계별 작업

“한 번에 모든 코드를 만들지 말고 DB 설계부터 Controller, Model, View 순서로 단계별로 진행해줘.”

CRUD

“회원 관리 CRUD를 만들어줘. 목록, 상세, 등록, 수정, 삭제 기능을 포함해줘.”

검색/필터

“회원 목록에서 이름, 이메일, 권한, 상태로 검색하고 필터링할 수 있게 해줘.”

페이지네이션

“회원 목록은 1페이지에 20개씩 표시하고 페이지네이션을 추가해줘.”

권한

“최고관리자와 일반관리자 권한을 나누고, 일반관리자는 설정 메뉴에 접근하지 못하게 해줘.”

보안

“CSRF 방어, SQL Injection 방어, XSS 방어, 비밀번호 해싱을 적용해줘.”

로그

“관리자가 회원을 수정하거나 삭제하면 관리자 액션 로그에 기록되게 해줘.”

AJAX

“회원 상태 변경은 AJAX로 처리하고 성공하면 페이지 새로고침 없이 상태값만 변경되게 해줘.”

Slide 17checklist

초보자가 먼저 알아야 할 핵심 30개

01

관리자 페이지

02

백오피스

03

대시보드

04

사이드바

05

목록 페이지

06

등록 페이지

07

수정 페이지

08

삭제 기능

09

CRUD

10

검색

11

필터

12

페이지네이션

13

회원 권한

14

최고관리자

15

일반관리자

16

로그인 인증

17

세션

18

MVC

19

Model

20

View

21

Controller

22

Route

23

Middleware

24

데이터베이스

25

테이블

26

컬럼

27

Primary Key

28

CSRF

29

SQL Injection

30

XSS

Final Summary

관리자 페이지는
CRUD + MVC + 권한 + 보안입니다

관리자 페이지는 운영자가 데이터를 관리하는 백오피스입니다. 바이브코딩에서는 CRUD, MVC, 권한 관리, 보안, 검색, 필터, 페이지네이션 같은 용어를 정확히 사용해야 원하는 결과물을 얻을 수 있습니다.

Slide 19 web_asset

부트스트랩5 예제

open_in_new
예제 사이트 열기

Material Admin Pro

관리자 페이지의 사이드바, 대시보드 카드, 테이블, 폼, 차트 구성을 참고하기 좋은 템플릿 예시입니다.

https://startbootstrap.com/previews/material-admin-pro

Admin UI Reference
Dashboard
Users
Tables
Forms
Settings

방문자

128

회원

128

매출

128

참고할 때는 디자인만 보는 것이 아니라 “메뉴 구조, 정보 밀도, 테이블/폼 배치, 반응형 처리”를 함께 봅니다.

Slide 20 view_quilt

Tailwind Plus UI Blocks 참고하기

관리자 페이지를 만들 때는 디자인을 처음부터 상상하기보다, 검증된 UI 블록에서 레이아웃과 정보 밀도를 참고하면 요청이 훨씬 구체적이 됩니다.

open_in_new
UI Blocks 열기

Tailwind Plus UI Blocks

HTML, React, Vue로 제공되는 500개 이상의 반응형 컴포넌트 예시를 참고할 수 있습니다.

https://tailwindcss.com/plus/ui-blocks

Application UI

Sidebar Layouts

관리자 레이아웃

Tables

목록 화면

Form Layouts

등록/수정 폼

Modal Dialogs

확인/상세 팝업

Pagination

페이지 이동

Notifications

토스트/알림

바이브코딩 요청 예시

“Tailwind CSS로 Sidebar Layout + Tables + Form Layout을 참고해서 관리자 회원 CRUD 화면을 만들어줘.”

Slide 21 schedule

크론탭은 “정해진 시간에 자동 실행”입니다

관리자 페이지에서는 알림 발송, 통계 집계, 오래된 임시 파일 삭제, 예약 콘텐츠 공개처럼 반복 작업을 자동으로 돌릴 때 사용합니다.

alarm
cron-job.org 열기

console.cron-job.org 방식

  1. 1. 실행할 PHP/API URL을 준비합니다.
  2. 2. Cronjob을 만들고 URL, 실행 주기, 타임존을 설정합니다.
  3. 3. GET 요청으로 URL을 호출해 서버 작업을 실행합니다.
  4. 4. 실행 결과와 실패 알림을 확인합니다.

예시 URL

https://example.com/cron/send-notifications?token=SECRET

account_tree
make.com 열기

Make.com 방식

  1. 1. Scenario를 만들고 Scheduler를 시작 트리거로 둡니다.
  2. 2. HTTP 모듈로 내 서버의 API URL을 호출합니다.
  3. 3. 필요하면 Gmail, Slack, Notion 같은 앱과 연결합니다.
  4. 4. 실행 로그를 보며 실패한 단계만 다시 처리합니다.
Scheduler
HTTP
Slack/Gmail

바이브코딩 요청 예시

“매일 오전 9시에 미확인 알림을 조회해서 회원에게 발송하는 cron용 PHP API를 만들고, 외부 호출용 보안 token 검증을 추가해줘.”

Slide 22 category

용어 전체 묶음

기본 구조

관리자 페이지 백오피스 대시보드 관리자 레이아웃 사이드바 헤더 콘텐츠 영역 메뉴 그룹 활성 메뉴 반응형 관리자 페이지

화면 구성

목록 페이지 상세 페이지 등록 페이지 수정 페이지 삭제 기능 검색 필터 정렬 페이지네이션 테이블 테이블 컬럼 관리 버튼 상태값 모달 토스트 알림 폼 유효성 검사

회원 관리

회원 CRUD 회원 목록 회원 상세 회원 등록 회원 수정 회원 삭제 회원 상태 관리자 메모 권한 최고관리자 일반관리자 운영자 권한 체크 RBAC 로그인 인증 세션 로그아웃 비밀번호 초기화

데이터베이스

데이터베이스 테이블 컬럼 레코드 Primary Key Foreign Key 인덱스 created_at updated_at deleted_at 소프트 삭제 하드 삭제 마이그레이션 시드 데이터 트랜잭션

개발 구조

MVC Model View Controller Route Middleware Request Response Redirect Helper Config Environment Variable

프론트엔드

HTML CSS Tailwind CSS jQuery AJAX JSON 컴포넌트 다크모드

보안

SQL Injection Prepared Statement XSS CSRF CSRF Token 비밀번호 해싱 입력값 검증 출력값 이스케이프 접근 제어 파일 업로드 보안 관리자 로그인 보호

관리 기능

사이트 설정 메타태그 관리 SEO GEO 접속 통계 관리자 로그 배너 관리 팝업 관리 공지사항 관리 카테고리 관리 파일 관리 관리자 알림

로그와 통계

방문자 수 페이지뷰 유입 경로 클릭 수 노출 수 전환율 관리자 액션 로그

API와 운영

API Endpoint GET POST PUT/PATCH DELETE Status Code 로컬 환경 개발 서버 운영 서버 배포 백업 에러 로그 유지보수 버전 관리