2026년 9월 6일 일요일

[행정/연구] 학교 표준 UI 디자인 시스템 - 토큰으로 교무 웹앱 일괄 표준화



우리 학교 웹앱이 한 브랜드처럼 보이는 법 — 학교 표준 UI 디자인 시스템 & 토큰 표준화

🎨 시설물 예약, 방과후 신청, 설문 조사 — 교무실에서 만드는 교내 웹 도구가 앱마다 색·폰트·버튼이 제각각이라면? 디자인 토큰(design token)(색·폰트·간격·버튼 규격의 이름표)으로 학교 표준을 정하고, 피그마(Figma)에서 시스템으로 구축한 뒤, 모든 교무 웹앱 파일 상단에 같은 토큰 CSS를 심는 심기 모드로 일원화합니다.

AI 코딩 도구와 MCP(모델 컨텍스트 프로토콜 — AI와 도구·문서를 잇는 연결 규약)에 토큰 규칙을 함께 제공하면, 새 앱도 처음부터 표준대로 태어납니다. 학생·학부모가 어느 도구를 열어도 같은 감각 — 브랜드 신뢰의 기술.

📖 한 줄 정의

심기 모드(데이터 임베딩): API 데이터를 미리 받아 HTML 파일 안 상수로 박아두는 방식(앱 실행 중 외부 통신 0).

학내망 원칙: 학교 배포 웹앱은 개인정보 수집·저장·전송 없음(외부 CDN·API 호출 0, 단일 파일) — 학생은 학내망에서 교사 PC 서버에 접속.

1. 3대 핵심 분석 비교표

무엇이 바뀌었나요? / 영역 초보자를 위한 쉬운 설명 이렇게 한번 써보세요!
해결 문제 교내 웹 도구마다 디자인이 다르면 사용자가 매번 적응해야 합니다 — 파편화(fragmentation)가 UX 부담이자 브랜드 혼란의 원인. 기존 도구 3개의 버튼 스크린샷 나란히 놓고 비교.
디자인 토큰 색·폰트·간격·버튼 규격에 이름표를 붙인 최소 단위 — --school-color처럼. 이름표가 곧 학교의 디자인 맞춤법. 토큰 5종(컬러 3·폰트 1·버튼 규격 1) 정하기.
피그마 시스템 피그마의 스타일 가이드 페이지에 컬러·폰트·버튼 컴포넌트를 정리 — 교무실 안에서 눈으로 공유되는 표준. 무료 커뮤니티 가이드 양식으로 시작.
토큰 CSS 심기 표준 토큰 20줄을 각 웹앱 파일 상단 :root에 심는 심기 모드 — 외부 CDN 없이 모든 도구가 같은 토큰을 씁니다. 토큰 CSS를 3개 기존 앱에 붙여넣기.
AI·MCP 적용 AI 코딩 도구에 '토큰 파일의 변수만 사용' 규칙을 함께 제공(AI Rules의 확장) — 새 앱도 처음부터 표준대로. 프롬프트 안전장치에 토큰 문구 한 줄.

2. 핵심 아키텍처 해설 — 토큰이 맞춤법이다

① 토큰 정의: :root 변수

:root {
  --school-color: #1e5aa8;    /* 학교 대표 색 — 교화·상징색으로 교체 */
  --school-accent: #f4b400;   /* 강조 색 — 알림·포인트 */
  --school-font: "맑은 고딕", sans-serif;
  --btn-radius: 8px;
  --btn-padding: 12px 20px;
}

② 버튼 표준: 토큰만 참조

.btn {
  background: var(--school-color);
  color: #fff;
  font-family: var(--school-font);
  border-radius: var(--btn-radius);
  padding: var(--btn-padding);
}

앱마다 직접 색상 코드를 쓰지 않고 토큰 이름만 씁니다 — 학교 색이 바뀌면 토큰 파일 한 곳만 고치면 됩니다.

③ 피그마(Figma) 워크플로

  • 스타일 가이드 페이지: 컬러 3종(대표·강조·배경), 폰트 2종(제목·본문), 버튼 규격(기본·눌림)을 한 페이지로.
  • 컴포넌트: 버튼·입력칸·카드를 컴포넌트로 등록 — 교무실 누구나 화면에서 표준을 확인.
  • 무료 시작: 커뮤니티의 무료 UI 킷 양식을 학교색으로 바꾸는 것부터.

④ AI·MCP 적용: 규칙을 함께 제공한다

MCP(모델 컨텍스트 프로토콜)는 AI와 도구·문서를 잇는 연결 규약입니다. 교무실 실무 기준은 단순합니다 — AI 코딩 도구의 규칙 파일(AI Rules)에 토큰 파일을 함께 제공하고 프롬프트에 다음 한 줄을 심는 것.

6. 색상·폰트·버튼 스타일은 반드시 토큰 파일(school_tokens.css)의 변수만 참조한다.
   임의의 새 색상 코드·폰트를 직접 쓰지 않는다.

⑤ 배포 루틴: 교무실 표준 절차 3단계

  1. 심기: 표준 토큰 CSS 20줄을 신규·기존 웹앱 상단에 붙여넣는다(외부 CDN 없음 — 학내망 원칙 정합).
  2. 점검: 각 앱에서 버튼·제목·배경이 토큰대로 나오는지 눈으로 확인.
  3. 갱신: 학교 브랜드가 바뀌면 토큰 파일을 고치고 전 앱에 재심기 — 1년 1회 정도의 리듬.

3. 초보자를 위한 바이브 코딩 실전 사용 예시

  1. 프롬프트 복사 — 아래 '제미나이 전용 에러 제로 프롬프트' 전체를 Gemini에 붙여넣습니다.
  2. 역질문 답변 — 학교 상징색, 도구 종류, 화면 톤에 답합니다.
  3. 표준 배포 — 만들어진 앱에 토큰 CSS를 심고 기존 앱에도 순서대로 적용.

제미나이 전용 에러 제로 프롬프트

[🚨 에러 방지 기본 안전장치]
1. 결과물은 외부 라이브러리·프레임워크·웹폰트·외부 CDN 없이 단일 HTML 파일로 완성한다(학내망 원칙).
2. 파일 상단에 school_tokens 토큰 블록(:root 변수 5종 이상)을 반드시 포함한다.
3. 모든 색상·폰트·버튼 스타일은 토큰 변수만 참조한다 — 새 색상 코드 직접 입력 금지.
4. 모바일 터치 대응: 뷰포트 메타 태그, 버튼 최소 44×44px, 360px 화면 가로 스크롤 금지.
5. 알림·완료 피드백은 Web Audio API로 직접 합성한다(오디오 파일·CDN 사운드 금지).
6. 교사·학생 실명·학교명을 코드나 화면에 노출하지 않는다(가명·일반명사).
7. // TODO, /* 생략 */ 금지 — 끝까지 완성한다.

[❓ 역질문 유도]
코드를 바로 만들지 말고, 아래 3가지를 먼저 나에게 질문한 뒤 내 답변으로 설계를 확정한다.
Q1. 어떤 교무 도구인가? (시설물 예약 / 방과후 신청 / 설문 조사 등)
Q2. 학교 상징색은? (교화·로고 색 — 토큰의 뼈대)
Q3. 화면 톤은? (심플 목록 / 카드 격자)

🎯 에디터 한줄평

'앱마다 다른 버튼'이 '우리 학교 서명'처럼 보이는 순간 — 토큰은 디자인의 맞춤법입니다. 학생·학부모가 어느 도구를 열어도 같은 감각을 느끼는 것이 신뢰이고, 그 신뢰는 색상 코드 5개의 이름표에서 시작합니다. 심기 모드가 데이터에서 디자인까지 확장되는 설계입니다.

📚 기술·교육 참고 링크

  • 피그마(Figma) : 실측으로 정상 응답 확인(2026-09-05) — 무료 플랜으로 시작
  • MDN CSS 사용자 정의 변수 : 토큰의 표준 기술
  • 행정·교육 연계: 교내 디지털 서비스 표준화, 정보 소양(디자인 시스템 개념)과 함께 활용
By 시간: