사이트 조직도 — 화면이 어디에 달려 있나

맨 위가 홈이고, 그 아래로 급 5갈래에 화면 36개가 달려 있습니다. 칸을 누르면 그 화면으로 갑니다. 화면을 새로 만들면 이 그림에도 저절로 나옵니다.

로그인·관리자 권한이 있어야 열림 8개
바깥 열쇠를 넣어야 켜짐 4개
화면이 아니라 파일 3개

John's Factory홈 ( / ) — 이 공장이 무엇을 하는 곳인지와, 무엇부터 눌러 보면 되는지

기본기화면 8개
누구나 바로 보는 화면. 로그인도 열쇠도 필요 없다.
- 소개/about우리가 무엇을 하는 곳인지 — 「우리는」「하는 일」「연락처」 세 칸과 문의 단추
- 랜딩/landing한 화면으로 소개하고 문의까지 받는 본보기
  안에 든 것 4가지
  - 큰 제목 구역
  - 특징 3가지
  - 자주 묻는 질문
  - 문의 폼
- 블로그/blog글 목록. 검색칸과 태그로 걸러 볼 수 있다 (글쓰기는 관리자만)
- 화면 기본값/design-basics허술한 화면과 우리 기준을 나란히 놓고 비교하는 곳. 아홉 가지 기준을 눈으로 확인한다
  안에 든 것 9가지
  - 한글 글꼴
  - 글자 크기·줄 간격
  - 한국어 줄바꿈
  - 간격 4배수
  - 색 (강조색 아껴 쓰기)
  - 긴 글자 자동 간격
  - 빈 화면·로딩·처리 중
  - 조사 붙이기·초성 검색
  - 움직임
- 디자인 갤러리/designs깃허브 인기 템플릿과 테마를 모아 사이트 안에서 미리 보고, 테마를 눌러 시험해 보는 곳
- 부품 순위/libraries표·차트·결제·AI 같은 갈래마다 깃허브에서 요즘 많이 쓰는 부품을 별점 순으로 받아 보는 곳
- 스킬 순위/skills글쓰기·SEO·이커머스 같은 업무 갈래마다 깃허브에서 인기 있는 AI 스킬을 별점 순으로 받아 보는 곳
- 사이트 조직도/sitemap이 사이트의 모든 화면이 어느 급에 어떻게 달려 있는지 한 장의 그림으로 본다. 칸을 누르면 그 화면으로 간다
중급기화면 8개
실제 업무에 쓰는 화면. 예약·결제·표·문서 같은 것.
- 예약/booking날짜를 골라 예약을 신청받는다. 신청은 「대기」로 들어가고 관리자가 확정·취소한다
- 결제로그인열쇠 필요/pay토스 결제를 끝까지 해 보는 화면. 내 결제 기록 최근 10건도 같이 보인다
- 엑셀표/sheet모은 자료를 엑셀처럼 표로 본다. 칸을 끌어 고르고 Ctrl+C 로 복사된다 (모은 자료가 없으면 견본 표가 나온다)
- 내보내기/export표를 엑셀·CSV 로 내려받거나 인쇄한다. 인쇄물에는 출처와 날짜가 자동으로 찍힌다
- 글쓰기관리자만/blog/write블로그 글을 새로 쓰거나 고친다 (제목·요약·태그·본문·발행 여부)↳ 「블로그」 아래 주소
- 부품 창고/parts깔아 둔 부품 10가지를 직접 눌러 만져 보는 곳 — 날짜·시간, 찾기·흐름, 바코드·QR, 문서·차트 네 갈래
- 화면 부품/kit바로 갖다 쓰는 화면 조각 다섯 가지를 만져 보는 전시장
  안에 든 것 5가지
  - 글쓰기 편집기
  - 달력 (날짜 선택)
  - 끌어서 순서 바꾸기
  - 주소 입력 (우편번호 찾기)
  - 전화번호·금액 입력
  - 대시보드 견본/kit/dashboard요약 숫자 카드·영역 그래프·자료 표를 한 화면에 어떻게 놓는지 보는 본보기. 새 대시보드는 이걸 복사해서 시작한다
    안에 든 것 3가지
    - 통계 카드
    - 영역형 차트
    - 자료 표
고급기화면 6개
관리자와 만드는 사람의 화면. 권한이 있어야 열린다.
- 관리자 홈관리자만/admin가입한 사람·결제·예약·문의·기록을 카드와 그래프로 한눈에. 최근 14일 가입·로그인 추이가 같이 나온다
  안에 든 것 5가지
  - 가입한 사람
  - 결제
  - 예약
  - 문의
  - 감사 기록
  - 자료 관리관리자만/admin/items자료를 이름으로 찾고 넣고 고치고 지운다. 손댄 것은 모두 기록에 남는다
  - 파일 관리관리자만/admin/files올린 파일과 사진을 보고 지운다. 지운 것은 없어지지 않고 폐기 폴더로 옮겨진다
- 설정 마법사/setup아홉 가지 질문에 답하면 필요한 기능 뭉치와 작업지시서가 나온다 — 새 프로젝트의 출발점
  안에 든 것 9가지
  - 관리자 화면
  - 로그인
  - 결제
  - 엑셀·인쇄 내보내기
  - 외부 자료 수집
  - 한글 문서
  - 좁은 화면
  - 깔아 쓰는 프로그램
  - 구독 요금
- 기능 뭉치/bundles기능 뭉치 96개를 쓰임새 3갈래와 급 4단계로 나눠 놓은 곳. 찾기·소팅이 된다
- 보안 규정/security사이트를 만들 때 지켜야 할 보안 규정 40가지 — OWASP 안내서에서 골라 우리말로 풀었다
  안에 든 것 9가지
  - 로그인·계정
  - 권한
  - 입력·출력
  - 브라우저 방어
  - 비밀값·암호화
  - 서버·API
  - 결제·연동
  - 부품·배포
  - AI
특급기화면 3개
AI 와 바깥 연결. 열쇠(.env)를 넣어야 켜진다.
- AI 채팅로그인열쇠 필요/ai사이트 안에서 AI 에게 물어본다. 답은 최종 결정이 아니라 초안으로 본다
- AI 도구로그인열쇠 필요/tools글 요약과 PPT 초안 만들기. 결과를 파일(요약.md · 발표자료.pptx)로 내려받는다
  안에 든 것 2가지
  - 글 요약
  - PPT 초안
- MCP 연결선/mcpAI 에 손발을 달아 주는 연결선 129개 — 열세 갈래로 나눠 무엇이 있고 지금 붙어 있는지 본다
  안에 든 것 13가지
  - 바로 켜짐
  - 자료 수집
  - 업무·장사
  - 공공데이터
  - 개발·서버
  - AI·미디어·지식
  - 소통·생활·금융
  - 로그인 필요
  - 열쇠 필요
  - 파이썬 필요
  - 이 폴더 등록
  - Claude 앱 커넥터
  - 한국은 아직 없음
그 밖화면 10개
급으로 나눌 성격이 아닌 것 — 계정, 결제 돌아오는 화면, 문서 파일.

구글·네이버 같은 검색 사이트가 읽는 기계용 목록은 /sitemap.xml 에 따로 있습니다. 브라우저로 열면 글자만 줄줄이 나오는데, 로봇이 읽는 양식이라 그게 정상입니다. 거기에는 검색에 내보내기로 한 화면만 들어 있습니다.

사이트 조직도 — 화면이 어디에 달려 있나

기본기화면 8개

중급기화면 8개

고급기화면 6개

특급기화면 3개

그 밖화면 10개