⭐️ 15. 장금상선 AX 대시보드 설계 · 소개 덱 · 팀 깃허브 · 링크 2개 제출 ⭐️

🎯

7교시 · 조 : 6교시에 모은 아이디어로 「장금상선 AX 대시보드」 설계를 만들고, 소개 슬라이드덱을 배포하고, 팀 깃허브(비공개)에 올려 링크 2개를 제출합니다

시작점 : 조장 노트북의 조 폴더 · 역할메모.txt(대시보드 묶음 · 합친 것 · 조원 병목 한 줄 · 역할) · 아이디어/(조원 모두의 PDF) · 6교시에 뽑은 조장

끝 : ① 주제 슬라이드덱 버셀 링크 ② 조 깃허브 리포 링크(비공개) 를 오늘 17:50까지 제출 시트에

4회차에는 이 리포에서 바로 이어서 장금상선 AX 대시보드를 만듭니다 (아래 「4회차 완성 모습」 참고)

⏰

7교시 17:00~17:50 · Step 1 설계 문서 · CLAUDE.md 10분 → Step 2 팀 깃허브(비공개) · 조원 초대 10분 → Step 3 소개 슬라이드덱 만들기 · 배포 20분 → Step 4 링크 2개 제출 10분 (17:50 마감)

✅

모두 조장 노트북에서 하고 조원은 함께 봅니다 (조장 · 아이디어 취합 · 역할은 6교시에 말로 정했고, 조 폴더 · 역할메모.txt 는 조장 노트북에 있습니다). 조원의 초대 수락 · 클론은 집에서 과제로 합니다

조 폴더 이름 = 깃허브 리포 이름 : 1조 seoul-ax-jo1 · 2조 seoul-ax-jo2 · 3조 seoul-ax-jo3 · 4조 seoul-ax-jo4 · 5조 seoul-ax-jo5 · 6조 seoul-ax-jo6 · 7조 seoul-ax-jo7 · 8조 seoul-ax-jo8 (총 8개 조 · 바꾸지 않습니다)

조 폴더 이름 다시 확인 · 조 폴더 이름 = 깃허브 리포 이름 = 덱 버셀 프로젝트 이름의 앞부분입니다

조 (인원)	조 폴더 · 깃허브 리포	덱 버셀 프로젝트	조 (인원)	조 폴더 · 깃허브 리포	덱 버셀 프로젝트
1조 (12명)	`seoul-ax-jo1`	`seoul-ax-jo1-deck`	5조 (7명)	`seoul-ax-jo5`	`seoul-ax-jo5-deck`
2조 (11명)	`seoul-ax-jo2`	`seoul-ax-jo2-deck`	6조 (8명)	`seoul-ax-jo6`	`seoul-ax-jo6-deck`
3조 (9명)	`seoul-ax-jo3`	`seoul-ax-jo3-deck`	7조 (9명)	`seoul-ax-jo7`	`seoul-ax-jo7-deck`
4조 (13명)	`seoul-ax-jo4`	`seoul-ax-jo4-deck`	8조 (8명)	`seoul-ax-jo8`	`seoul-ax-jo8-deck`

6교시에 만든 폴더 이름이 표와 다르면(한글 · 띄어쓰기 · 오타) 지금 바꿉니다. 채팅창 : 「이 폴더 이름을 【seoul-ax-jo1】 로 바꿔줘」 (바꾼 뒤 VS Code 로 다시 엽니다)

🛠️ Step 1. 설계 문서 · `CLAUDE.md` (10분 · 조장 PC)

조 폴더를 VS Code 로 열고 → 터미널 → claude. 6교시에 말로 정한 것(역할메모.txt)을 문서로 만드는 단계입니다

💬

입력 1-1 · 채팅창 · 조장 PC (조 폴더 seoul-ax-jo【조 번호】 에서)

역할메모.txt 와 아이디어/ 의 PDF(조원 모두)를 읽고 질문하지 말고 두 가지를 만들어줘. 우리 조가 만들 것은 조원 아이디어를 모은 「장금상선 AX 대시보드」 하나야. ① 설계 문서 설계.md 와 보기 쉬운 설계.html : 조원 아이디어 표(이름 · 병목 한 줄 · 내 에이전트), 합친 아이디어와 묶음, 대시보드 첫 화면 그림(맨 위 요약 + 묶음별 카드), 에이전트 목록과 에이전트마다 스킬 2~3개, 공통 결과 파일 꼴, 역할 표(이름 · 맡을 에이전트 · 만들 스킬 · 4회차에 만들어 올 것 · 결과 파일 이름, 조원 한 명도 빠지지 않게). ② 이 폴더의 CLAUDE.md : 역할 표를 그대로 넣고, 맨 끝에 「6교시 역할 메모」 절을 만들어 역할메모.txt 내용을 고치지 말고 그대로 붙여줘. 그리고 4회차 과제 「장금상선 AX 대시보드」의 목적, 에이전트와 스킬 목록, 공통 결과 파일 꼴, 폴더 구조(아이디어/ · agents/에이전트/SKILL.md · 공통 계산 규칙 lib/ · 결과 파일 data/out/ · dashboard/ · deck/), 대시보드 방식(부서 엑셀을 브라우저 안에서 규칙으로 계산, AI 는 이름을 가린 확인 목록만 정리), 지킬 것(가상 데이터만 · 보내기 기능 없음 · 키는 .env.local 과 버셀 환경 변수에만 · 실제 자료를 올리면 대시보드에 입장 비밀번호)을 넣어줘. 코드는 만들지 마. 다 만들면 설계.html 을 브라우저로 열어줘.

🤖

예시 · CLAUDE.md 에 들어간 것 (실제 결과를 줄인 것)

목적 : 조원 아이디어로 만든 에이전트 결과를 「장금상선 AX 대시보드」 한 화면에 모으고, 사람이 확인할 건부터 먼저 보여 준다

에이전트와 스킬 : 부킹 집계 · 선적 마감 점검 · 운항 지연 안내 · 문의 처리 점검 · 컨테이너 수리 점검 · 운임 미수금 점검 · 장기 보관 점검, 에이전트마다 스킬 2~3개 · 역할 표

공통 결과 파일 꼴 : 7개 에이전트가 같은 칸(처리 건수 · 아낀 시간 · 확인 대기 목록 · 한 줄 요약 · 숫자 3개)으로 결과를 낸다. 칸을 바꾸는 일은 조장만

지킬 것 : 가상 데이터만, 실명 · 연락처 · 운임 단가 넣지 않기, 발송 기능 없음

✅

조장 PC 의 조 폴더(예 : seoul-ax-jo1)에 설계.md · 설계.html · CLAUDE.md 가 생기고, 설계.html 역할 표에 조원이 모두 보이고, CLAUDE.md 끝에 「6교시 역할 메모」가 붙어 있으면 다음 (보통 3~4분)

🛠️ Step 2. 팀 깃허브(비공개) 만들고 조원 초대 (10분 · 조장)

① 조원 모두 깃허브 아이디를 조장에게 알려 줍니다 (사내 메신저 단체방에 한 줄씩 올리면 빠릅니다) (2교시에 만든 아이디)

내 아이디 찾기 : github.com 로그인 → 오른쪽 위 동그라미(프로필) → 이름 아래 회색 글자가 아이디입니다. 또는 채팅창에 「내 깃허브 아이디를 알려줘」

아이디를 보내는 것이 기본입니다 (예 : kim-minsu). 채팅창 초대(방법 A)는 아이디만 됩니다. 아이디가 틀리면 다른 사람에게 초대가 갑니다

아이디를 모르고 이메일만 알면 아래 방법 B(깃허브 웹)로 초대합니다. 그 이메일이 상대 깃허브 계정에 등록돼 있어야 찾아집니다 (보통 깃허브에 가입할 때 쓴 메일)

💬

입력 2-1 · 채팅창 · 조장 PC (2교시에 배운 것)

이 폴더를 【seoul-ax-jo1】 비공개(private) 리포로 깃허브에 올려줘. 커밋 이름은 「조 설계 · CLAUDE.md · 역할」. 그리고 조원 깃허브 아이디 【조장을 뺀 조원 아이디 모두, 쉼표로】 를 협업자(collaborator)로 초대해줘. 과제 확인용으로 강사 아이디 steveaimkt 도 초대해줘. 다 하면 초대한 사람 목록과 아직 수락 안 한 사람을 표로 보여줘.

방법 B · 깃허브 웹에서 직접 초대하기 (채팅창이 안 될 때 · 조장)

github.com 에서 우리 조 리포(예 : kim-minsu/seoul-ax-jo1)로 들어갑니다

리포 위쪽 메뉴 맨 오른쪽 Settings (톱니바퀴)

왼쪽 메뉴 Collaborators → 비밀번호나 인증 코드를 묻으면 넣습니다

초록 버튼 Add people → 조원 아이디 또는 가입 이메일을 넣고 아래 나오는 사람을 고릅니다 (이메일로 안 나오면 아이디를 다시 받습니다) → Add 【아이디】 to this repository

조원 수만큼 반복 + 강사 steveaimkt 한 번. 목록에 Pending Invite 로 보이면 초대가 간 것입니다

개인 계정 리포는 권한을 고르는 칸이 없습니다. 초대된 사람은 모두 올리기(쓰기) 권한을 받습니다 (읽기 전용은 회사 · 조직(Organization) 리포에서만 됩니다)

초대는 7일 안에 수락해야 합니다. 지나면 같은 방법으로 다시 초대합니다

② 조원의 초대 수락 · 클론은 집에서 과제로 합니다 (아래 「🏠 집에서 할 과제」). 수업 중에는 초대가 갔는지만 확인합니다

✅

조장 화면에 조원 모두와 steveaimkt 가 Pending Invite(초대 감)로 보이면 바로 Step 3 으로. 17:20 전에는 덱 만들기를 시작해야 17:50 마감에 맞습니다

🛠️ Step 3. 「장금상선 AX 대시보드」 소개 슬라이드덱 만들기 · 배포 (20분 · 조장 PC)

⏰

제출 마감 : 오늘(10/15) 17:50. 조장이 덱을 만드는 동안 조원은 덱의 내 줄(내 병목 · 내 에이전트 · 내 역할) 을 확인합니다. 시간이 모자라면 장 수를 줄여서라도 배포 주소를 먼저 제출합니다

🔄

개인 아이디어 → 조 대시보드로 넘어갈 때 덱에서 바뀌는 것

주인공이 바뀝니다 : 5교시 슬라이드는 「나」, 조 덱은 「우리 조 장금상선 AX 대시보드」입니다. 개인 슬라이드를 이어 붙이지 않고, 조원 아이디어는 표 한 장으로 모읍니다

어떻게 모았는지를 넣습니다 : 합친 아이디어 · 묶음(탭) · 맨 위 요약

조원과 카드를 잇습니다 : 누구의 아이디어가 어느 카드(에이전트)가 되었는지. 조원 모두의 아이디어가 들어갑니다

조원 수가 다릅니다 : 7~13명. 역할 표에 조원이 모두 보이게 합니다

덱은 공개 주소입니다 : 리포는 비공개지만 버셀 덱은 누구나 열 수 있습니다. 거래처 이름, 금액 · 운임 단가는 덱에서 빼고 「화주 A」 처럼 씁니다. 조원 PDF 는 덱에 넣지 않습니다

💬

입력 · 채팅창 · 조장 PC

설계.md · 설계.html · 역할메모.txt 를 읽고, 우리 조 「장금상선 AX 대시보드」 를 소개하는 슬라이드덱을 deck/index.html 한 파일로 8장 이내로 만들어줘. 순서 : ① 표지(장금상선 AX 대시보드 · 조 번호 · 조원 이름) ② 조원 아이디어 한눈에(이름 · 병목 한 줄 · 내 에이전트 표, 조원이 많아도 한 장) ③ 어떻게 모았나(합친 아이디어 · 묶음 · 맨 위 요약) ④ 대시보드 첫 화면 그림(설계.html 의 그림) ⑤ 묶음별 에이전트 · 스킬 · 누구의 아이디어인가 ⑥ 공통 결과 파일 꼴 ⑦ 역할 표(조원 모두) ⑧ 4회차 일정. 덱은 공개 주소이니 거래처 이름 · 금액 · 운임 단가가 보이면 「화주 A」 처럼 바꿔줘. 조원 PDF 는 덱에 넣지 마. 키보드 화살표로 넘기고 휴대폰에서도 보이게. 다 만들면 deck 폴더를 버셀 프로젝트 이름 【seoul-ax-jo1】-deck 으로 배포하고 주소를 알려줘. 조 리포에도 커밋해서 올려줘.

강사가 실제로 만든 예시 (가상 조원 7명 · 슬라이드 7장 · 4장에 실제 대시보드 화면 · 약 5분) · https://jo1-deck-demo.vercel.app

예시의 4장은 완성 대시보드를 보여 줍니다. 과제 덱에는 아직 대시보드가 없으니 설계.html 의 첫 화면 그림을 넣으면 됩니다

덱을 배포한 뒤 조원에게 주소를 돌리고 내 줄에 틀린 곳이 있으면 조장에게 말합니다. 고칠 때는 「② 표의 【이름】 줄을 【고칠 내용】 으로 고치고 다시 배포해줘」 (주소는 그대로입니다)

🛠️ Step 4. 링크 2개 제출 (10분 · 오늘 17:50 마감)

제출 : 과제 제출 시트 의 우리 조 줄에 적습니다

조장 (O 표기) : 조장 자기 줄에 O
3회차 과제 주제 : 「장금상선 AX 대시보드 (【N】조) · 묶음 【영업 · 운항 …】 · 에이전트 【N】개」
3회차 과제 링크 : 링크 2개를 두 줄로 (칸 안에서 줄바꿈 : 윈도우 Alt+Enter · 맥 ⌘+Enter)

① 슬라이드덱 버셀 주소 (예 : https://seoul-ax-jo1-deck.vercel.app)
② 조 깃허브 리포 주소 (예 : https://github.com/kim-minsu/seoul-ax-jo1) · 비공개(private) 그대로 둡니다. 강사(steveaimkt)를 협업자로 초대했는지 확인 (초대가 없으면 강사가 비공개 리포를 열 수 없습니다)

주제 · 링크는 조원 모두의 줄에 같은 값을 넣습니다 (조장이 한꺼번에 넣어도 됩니다)
제출 전 확인 한 줄 · 조장 PC 채팅창 : 「우리 조 리포가 비공개인지, steveaimkt 초대가 됐는지, 덱 주소가 열리는지 확인해줘」

🏠 집에서 할 과제 (조원 모두 · 4회차 전까지 · 초대는 7일 뒤 만료)

① 초대 수락 (세 가지 중 편한 것)

깃허브에 가입한 메일함의 초대 메일 → View invitation → Accept invitation

github.com 오른쪽 위 종 모양 알림 → 초대 → Accept invitation

조장이 단체방에 올린 주소 https://github.com/【조장아이디】/seoul-ax-jo【조 번호】/invitations 를 열고 Accept invitation

② 내 노트북에 클론 · 내 역할 확인

💬

입력 · 채팅창 · 내 노트북

【조장아이디/seoul-ax-jo1】 리포를 바탕화면에 클론해줘 (예 : kim-minsu/seoul-ax-jo1). 내가 이 리포에 올릴 수 있는 권한이 있는지 확인하고, CLAUDE.md 역할 표에서 내 역할을 알려줘.

✅

내 노트북 바탕화면에 조 폴더 · CLAUDE.md · 설계.html 이 보이고 「올릴 수 있는 권한이 있다」고 나오면 과제 끝. 조 단체방에 「클론 완료」 한 줄. 막히면 아래 「막혔을 때」

조장은 4회차 전에 「아직 초대를 수락 안 한 사람 알려줘」로 남은 사람을 확인하고, 7일이 지나 만료되면 다시 초대합니다

🔗

4회차에서 이어집니다 : 조 리포 · CLAUDE.md · 역할 표에서 시작해, 조원이 각자 맡은 에이전트와 스킬을 만들고 공통 결과 파일로 조 대시보드 한 화면에 합친 뒤 Gemini 버튼 · 배포 · 발표까지 합니다

🏁 (참고) 4회차 완성 모습

4회차에는 이 조 리포에서 조원이 각자 만든 스킬을 조 대시보드 한 화면에 모읍니다. 아래는 강사가 만든 예시입니다.

직접 열어 보기 : 조 대시보드 예시 · 샘플 데이터로 돌아갑니다. 맨 위 「▶ 샘플로 7개 모두 실행」을 누르고 전체 업무 흐름도(부서 엑셀 → 에이전트 → 사람 확인)를 보세요. 실제 업무 자료를 올릴 때는 버셀 환경 변수 SITE_PASSWORD 로 입장 비밀번호를 겁니다

쓰는 순서 : 카드의 [▶ 실행] → 부서 엑셀(부킹내역 · 선적마감 · 운항실적 · 문의처리 · 컨테이너수리 · 운임미수금 · 입출고) 올리기 → 브라우저 안에서 규칙으로 계산 (엑셀은 서버로 가지 않습니다) → 필요하면 화주명을 가린 뒤 Gemini 로 정리 (할 일 · 메일 초안) → 결과 파일을 조 리포 data/out/ 에 커밋하면 조원 모두 같은 화면을 봅니다

다른 모양 예시 : 에이전트가 결과를 이어 넘기는 루프형 → 루프형 예시

막혔을 때

이럴 때	채팅창에 입력
조원이 깃허브 아이디를 모른다	조원 PC : 「내 깃허브 아이디를 알려줘」
초대가 안 보인다	조장 PC : 「seoul-ax-jo1 리포의 협업자 초대 상태를 확인해줘」
클론이 안 된다 (권한 없음)	(입력 없음) 초대를 수락했는지 확인합니다. 수락 전에는 비공개 리포가 보이지 않습니다
조원이 올리려는데 거절된다	대부분 초대를 아직 수락하지 않은 경우입니다. 조원 PC : 「내가 이 리포에 초대됐는지, 수락했는지 확인해줘」 · 조장 PC : 「【아이디】 초대가 갔는지 확인하고 없으면 다시 초대해줘」
다른 사람에게 초대가 갔다 (아이디 오타)	조장 PC : 「【잘못된 아이디】 초대를 취소하고 【맞는 아이디】 를 초대해줘」 (웹 : Settings → Collaborators → 그 사람 오른쪽 Cancel invite)
2교시에 깃허브 가입을 못 한 조원이 있다	(입력 없음) 지금 2교시 Step 1 로 가입만 하고 아이디를 조장에게. 7교시에는 조장 화면을 함께 봅니다
덱에 거래처 이름 · 금액이 보인다	「덱에서 거래처 이름 · 금액 · 운임 단가를 모두 「화주 A」 처럼 바꾸고 다시 배포해줘」
설계 문서 대신 코드부터 만든다 (Step 1)	Esc 로 멈추고 「멈춰. 코드는 지우고 설계.md · 설계.html · `CLAUDE.md` 만 만들어줘」. 질문을 계속하면 「질문하지 말고 바로 만들어줘」
(4회차) AI 정리를 눌렀는데 「찾을 수 없음」	「버셀이 api 서버 함수를 빌드하지 않았어. vercel build 로 빌드한 뒤 --prebuilt 로 다시 배포하고 /api 가 응답하는지 확인해줘」 (강사 시연 때 실제로 겪은 일)
슬라이드덱 배포 때 「No Output Directory」	「이 폴더는 index.html 하나짜리 정적 사이트야. 그대로 배포되게 설정하고 다시 배포해줘」