픽스다인 관리자 교육 · P1
픽스다인 홈페이지 관리자 교육

홈페이지 뒤편을,
오늘 다 열어 봅니다

관리자 화면을 함께 열고, 운영 전에 정할 첫 설정을 정합니다.
화면은 말로 만들고, 망가뜨려도 되돌립니다.
오프라인 2026. 08. 26.(수) 15:00 - 18:00  ·  Artetlab
관리자 화면 프로젝트 목록
01
CHAPTER 01

관리자 화면 투어와
첫 설정

다섯 부품 · 메뉴 4개 · 첫 설정 · Claude Design · 되돌리기
오늘의 도착점

끝나면 이 다섯 가지를 가져가십니다

01
홈페이지가 어떤 부품으로 되어 있는지 안다
1.1절
02
관리자 화면 메뉴 4개에서 각각 무엇을 하는지 안다
1.2절
03
운영 전에 정할 첫 설정값 셋을 결정지에 채운다
1.3절
04
Claude Design으로 화면을 말로 만들고 고친다
1.4절
05
망가뜨려도 되돌리고, 모르는 것은 물어본다
1.5 - 1.6절
오늘의 약속

틀만 잘 잡아 두면,
모르는 것은 물어보면 됩니다

개발 지식은 필요 없습니다. 필요한 개념은 나올 때마다 그 자리에서 풀어 설명합니다.
외울 것은 마지막에 문장 네 개뿐입니다.
홈페이지의 다섯 부품
클릭해서 크게 보기
1.1 다섯 부품

'홈페이지'는 사실
부품 다섯 개입니다

보이는 화면과 관리자 화면은 보여 주기만 합니다. 기억은 뒤편의 셋, 일꾼·장부·창고가 합니다. 오늘 정할 설정값은 전부 장부와 창고에 대한 결정입니다.
1.1 다섯 부품

개발자의 말을 우리 말로 바꿔 듣습니다

개발자의 말오늘 우리의 말무엇인가
프론트 (FO)보이는 화면손님이 보는 홈페이지
백오피스 (BO)관리자 화면직원이 콘텐츠를 관리하는 화면
서버, API일꾼부탁을 받아 처리하는 프로그램
데이터베이스 (DB)장부글자 정보를 적어 두는 곳
스토리지, 버킷창고파일을 넣어 두는 곳
배포가게에 내놓기인터넷 주소에 올려 쓰게 하는 일
개발팀이나 Claude와 대화할 때, 왼쪽 말이 나오면 가운데로 바꿔 들으면 됩니다.
1.1 다섯 부품

이 다섯 부품은 실제 폴더에 그대로 있습니다

pixdine/
├── apps/bo/     ← 관리자 화면
├── server/      ← 일꾼 (서버 프로그램)
├── supabase/    ← 장부 설계
└── design/      ← 화면 시안 (1.4절에서 엽니다)
폴더 이름이 곧 부품 이름입니다. 외울 필요는 없고, "홈페이지는 폴더 몇 개로 된 물건이고 각 폴더가 하는 일이 정해져 있다"는 감각만 가져가면 됩니다.
프로젝트 목록 화면
클릭해서 크게 보기
1.2 메뉴 4개

왼쪽 메뉴 네 개가
관리자 화면의 전부입니다

프로젝트 · 어워드 · 지원자 · 권한. 로그인하면 이 목록 화면이 처음 보입니다. 오늘 나눠 드린 화면 캡처 9종이 바로 이 화면들입니다.
1.2 메뉴 4개

메뉴는 역할에 따라 다르게 보입니다

메뉴무엇을 하나누가 쓰나
프로젝트 관리포트폴리오 프로젝트를 등록·수정·게시콘텐츠 담당
어워드 관리수상 이력을 등록하고 프로젝트와 연결콘텐츠 담당
지원자 관리채용 지원자를 확인하고 상태를 변경채용 담당
권한 관리관리자 계정을 초대하고 역할을 지정최고 관리자만
세 번째 열이 전부 다릅니다. 이건 말로 한 약속이 아니라 화면 코드에 박혀 있는 규칙입니다.
1.2 메뉴 4개

'누가 볼 수 있는가'가 코드에 박혀 있습니다

{ href: '/projects/',    label: '프로젝트 관리', (...) roles: ['super', 'content'] },
{ href: '/awards/',      label: '어워드 관리',   (...) roles: ['super', 'content'] },
{ href: '/applicants/',  label: '지원자 관리',   (...) roles: ['super', 'recruit'] },
{ href: '/permissions/', label: '권한 관리',     (...) roles: ['super'] },
한국어 부분만 따라가면 됩니다. super(최고 관리자)는 네 줄 모두에 있어 전부 보이고, recruit(채용 담당)는 지원자 관리 한 줄에만 있어 그 메뉴만 보입니다.
지원자 관리 화면
클릭해서 크게 보기
1.2 · 지원자 관리

지원자 화면에서
볼 것 세 가지

상태 버튼(미검토 → 검토중 → 합격/불합격), D-day 칸(서류가 사라지기까지 남은 날), 열람 링크. 이력서는 버튼을 눌러 만든 10분짜리 링크로만 열리고, 열람은 전부 기록됩니다.
1.3 첫 설정 · 계정과 권한

누구에게 어떤 열쇠를 줄까

역할화면에 적힌 설명 (할 수 있는 일)
최고 관리자 (super)모든 기능 + 권한 관리 + 로그 열람
콘텐츠 관리자 (content)프로젝트·어워드 등록/수정/삭제
채용 담당 (recruit)지원자 열람·상태 변경 (서류 열람 포함)
계정은 최고 관리자가 이메일로 초대하고, 받은 사람이 72시간 안에 수락하면 활성화됩니다. 실제로 하는 일에 맞는 가장 작은 열쇠를 주고, 최고 관리자는 2명을 권합니다.
1.3 첫 설정 · 이미지와 파일

창고는 두 칸으로 나뉘어 있습니다

공개 버킷   pixdine-public  : 프로젝트 이미지·썸네일·어워드 마크

비공개 버킷 pixdine-private : 이력서·포트폴리오
                            → 공개 주소 연결 금지, 만료형 링크로만 열람
지원서류는 비공개 칸에 들어갑니다. 파일 상한은 이미지·이력서 10MB, 포트폴리오 30MB. 여러분이 칸을 고를 필요는 없고, 화면이 종류에 따라 알아서 나눠 넣습니다.
지원서류의 90일 수명
클릭해서 크게 보기
1.3 첫 설정 · 서류 보관

서류는 90일이 지나면
스스로 사라집니다

지원 서류는 접수 90일 뒤 자동 파기됩니다. 사람이 기억해서 지우는 방식은 반드시 잊어버리기 때문에, 지우는 일 자체를 기계에게 맡겼습니다. 계속 볼 후보만 '보관 지정'을 눌러 파기에서 뺍니다.
1.3 첫 설정 · 정리

여러분이 정할 것은 세 가지뿐입니다

묶음이미 정해진 것여러분이 정할 것
계정·권한역할 3종, 초대 72시간팀원별 역할, 최고 관리자 2명
이미지·파일창고 2칸, 상한 10/30MB이미지 주소에 쓸 도메인
서류 보관90일 자동 파기, 열람기록 1년보관 지정 담당자·점검 주기
나머지 값(90일 · 10분 · 72시간)은 이미 설계에 박혀 있고, 기계가 알아서 지킵니다.
1.4 Claude Design

이 화면은 그림판이 아니라,
말로 만들어졌습니다

Claude Design은 말로 요청해 화면 시안을 만들고, 나온 시안을 같이 보며 다시 말로 고치는 기능입니다.
오늘 구경한 관리자 화면이 실제로 이렇게 태어났습니다.
1.4 Claude Design

증거가 폴더 안에 그대로 있습니다

design/bo/
├── BO 디자인.dc.html   ← 관리자 화면 전체 시안 (파일 하나에 전 화면)
├── industry.css        ← 색·글꼴 규칙 모음
├── README.md           ← 디자인을 개발로 넘길 때의 설명서
└── screenshots/        ← 화면별 캡처 9종
오늘 본 모든 화면의 시안이 이 파일 하나에 들어 있고, 배포물로 드린 캡처 9종이 바로 이 시안의 캡처입니다.
Claude Design 작업 흐름
클릭해서 크게 보기
1.4 · 작업 흐름

마음에 들 때까지
보며 고치고, 그다음 구현

시안은 '이렇게 생기면 좋겠다'를 보여 주는 그림이고, 진짜 화면은 그 그림을 보고 다시 만드는 제품입니다. 그림을 고치는 건 몇 분, 제품을 고치는 건 훨씬 비쌉니다.
1.4 · 개발로 넘기기

확정된 시안을 넘길 때 한 줄이면 됩니다

design_handoff_pixdine_bo/README.md를 읽고, 이 디자인 레퍼런스대로
BO 관리자 화면을 구현해줘. TURN 3 섹션이 최종안이야.
프레임워크 선정부터 제안해줘.
프롬프트가 짧은 이유는 필요한 설명이 전부 핸드오프 문서 안에 있기 때문입니다. 그 문서를 만드는 것도, 이렇게 넘기라는 것도 Claude Design이 알려 준 순서였습니다.
1.4 · 외울 문장

시안은 그림, 화면은 제품입니다

고치기 싼 그림 단계에서 말로 실컷 고치고, 확정된 것만 개발로 넘깁니다.
1.4 실습 · 직접 만들기

지금 없는 화면 하나를 말로 만들어 봅니다

관리자 화면에 들어갈 "공지 관리" 화면 시안을 만들어줘.
- 왼쪽에 공지 목록 표: 제목 / 게시 기간 / 상태
- 오른쪽에 새 공지 작성 칸
- 색과 글꼴은 지금 관리자 화면과 같은 규칙으로
나오면 그 자리에서 말로 고칩니다. "표가 빽빽해, 줄 간격 넉넉하게" "상태를 색깔 태그로". 요령은 화면 용어가 아니라 불편을 그대로 말하는 것입니다.
1.5 망가뜨려도 됩니다

내가 잘못 시켜서 다 망가지면?
괜찮습니다

첫 강의에서 가장 많이 나오는 걱정입니다. 이 자리는 그 걱정을 없애는 자리입니다.
방법은 하나, 일부러 망가뜨려 보고 되돌아오는 걸 눈으로 확인하는 것.
말하면 바뀐다
클릭해서 크게 보기
1.5 · 말하면 바뀐다

원하는 걸 말하면
시안이 바뀝니다

방금 1.4에서 만든 공지 관리 시안을 그대로 씁니다. "표 제목 줄을 진한 파란 배경에 흰 글씨로, 글씨도 두 단계 키워줘" 한마디면 그 자리에서 바뀝니다. 정확한 용어는 도구가 번역합니다.
1.5 · 부수고 되돌리기

일부러 부수고, 한 줄로 되돌립니다

# 일부러 망가뜨리기
방금 그 표를 통째로 지우고 배경을 새까맣게 칠해줘.

# 되돌리기
방금 바꾼 거 되돌려줘. 그 전 상태로.
화면이 엉망이 됐다가, 이 한 줄이면 원래 시안으로 돌아옵니다. 무언가 바뀔 때마다 그 직전 순간이 통째로 저장되기 때문입니다.
저장점으로 되돌아간다
클릭해서 크게 보기
1.5 · 저장점

바뀔 때마다
저장점이 남습니다

이 되돌리기는 진짜 화면과 코드에도 똑같이 있습니다. 개발자들은 이 저장 장치를 git이라 부르고, 저장된 각 순간이 되돌아올 수 있는 저장점입니다. 그래서 고치다 잘못돼도 "그 전으로 되돌려줘"가 됩니다.
1.5 · 딱 두 가지만 조심

되돌아오지 않는 것은 딱 둘입니다

되돌아오지 않음 ①
장부에서 지운 데이터
  • 지원자 기록을 삭제하면 그 줄은 장부에서 영영 사라집니다
    • 되돌아오지 않음 ②
    파기된 파일
  • 90일 자동 파기로 창고에서 지워진 서류는 돌아오지 않습니다
    • 모양을 바꾸는 일은 다 되돌릴 수 있고, 지우는 일만 조심하면 됩니다. 삭제·파기처럼 되돌릴 수 없는 일만 개발 창구를 거치세요.
    1.6 물어보면 됩니다

    이 홈페이지를 만든 사람은
    코드를 한 줄도 안 썼습니다

    한 일은 둘뿐입니다. 틀을 잡는 것, 그리고 물어보는 것.
    개발 작업의 대부분은 Claude Code가 했습니다.
    1.6 · 작업 기록

    작업 기록은 한국어 한 줄씩입니다

    feat(api): RFP 원본 24시간 보존·파기 + R2 lifecycle 배포 연동
feat: RFP→초안 자동생성 (BO-B14)
fix: 헬스 엔드포인트를 /healthz에서 /health로 변경
fix: 경력 년차 구간에 check 제약·고정 코드 목록 추가
    암호 같은 단어가 섞여 있지만 구조는 전부 같습니다. '무엇을 했는지 한 줄'. 이 한 줄 한 줄이 1.5에서 본 되돌아올 수 있는 저장점입니다.
    1.6 · 틀을 잡은 첫 프롬프트

    맨 처음 한 일은 부품 선언이었습니다

    pixdine-movement 의 홈페이지의 BO를 만들건데, 데이터베이스는 supabase,
화면은 nextjs인데 firebase hosting으로 도메인을 붙일 거야.
Google Cloud Platform에 Cloud Run에서 Golang이라는 언어로 준비,
서버는 Golang Gin, 우리는 무료로 최소한의 과금 구간을 사용해서 만들어줘.
    영어가 많아 보여도 하는 말은 하나입니다. 1.1의 부품들을 무엇으로 만들지 한 문단으로 선언한 것. 처음에 틀을 정해 두면 이후 모든 작업이 이 틀 안에서 움직입니다.
    시작 프롬프트에서 시스템까지
    클릭해서 크게 보기
    1.6 · 선언이 시스템이 된다

    말 한 문단이
    조립된 시스템으로 돕니다

    맨 아래 말 한 문단이 코드가 되고, 깃허브에 쌓이고, 배포되면 선언해 둔 부품들이 시스템으로 돌아갑니다. 화면은 nextjs, 장부는 supabase, 일꾼은 Cloud Run. 구절 하나하나가 부품 하나입니다.
    1.6 · 이제 물으면 됩니다

    정확한 용어 없이 그냥 물어도 됩니다

    01
    "보관 기간 90일 근거가 뭐야? 120일로 바꾸면 어디를 고쳐?"
    02
    "초대 메일이 안 가는 것 같아. 어디서부터 확인하면 돼?"
    03
    "어워드 관리에 연도 필터 추가하고 싶어. 얼마나 걸려?"
    04
    "지금 들어온 지원서 중 아직 아무도 안 본 것만 몇 건이야?"
    세어 준다
    물어보는 건 언제나 안전합니다. 다만 실제 홈페이지를 바꾸는 작업, 특히 지원자 데이터는 반드시 개발 창구를 거치세요.
    1장 마무리

    오늘의 산출물, 이만큼 채워졌으면 성공입니다

    ☐
    관리자 계정 명단 확정 (이름·이메일·역할)
    결정지
    ☐
    최고 관리자 2명 지정 + 이미지 주소 도메인 결정
    결정지
    ☐
    보관 지정 담당자와 점검 주기 한 줄 규칙
    결정지
    ☐
    시안 수정 1회 + 망가뜨리고 "되돌려줘"로 되돌리기
    실습
    1장 마무리

    외울 문장은 넷입니다

    01
    틀만 잘 잡아 두면, 모르는 것은 물어보면 됩니다
    02
    서류는 90일이 지나면 스스로 사라집니다. 남길 것만 보관 지정
    03
    시안은 그림, 화면은 제품. 고치기 싼 쪽에서 실컷 고칩니다
    04
    망가뜨려도 됩니다. 안 돌아오는 건 지운 데이터와 파기된 파일 둘뿐
    이 네 문장이 오늘의 전부입니다. 나머지는 파일이 기억합니다.
    ✓
    다음 단계 · NEXT

    이제 결정지를
    채웁니다

    부록의 세 결정(계정 명단 · 이미지 도메인 · 보관 규칙)을 지금 채워
    개발 창구로 넘기면, 운영 준비가 끝납니다.