Notes · 개편 기록과 노트
AI와 함께,
이 사이트를 바꿔가는 기록.
교육 운영 현장의 디지털 전환(DX)에서 AI와 일하는 방식의 전환(AX)으로.
그 과정을 설명하는 대신, 이 사이트를 고치는 작업마다
어떤 도구가 무엇을 했고 사람은 무엇을 확인하고 결정했는지 남깁니다.
노트
개편 기록
네 가지 도구의 역할
도구가 만든 결과는 그대로 쓰지 않습니다. 방향과 공개 범위, 합칠지 말지는 사람이 정합니다.
실습 앱을 shaula.kr 주소로 열기
실타래 실습실의 배포 주소가 바뀌었는데 사이트에는 옛 주소가 남아 있었고, 두 실습을 shaula.kr 아래 주소로 소개하고 싶었습니다.
바꾼 것
- shaula.kr/siltarae 에서 실타래 실습실, shaula.kr/maeilmart-ax 에서 매일마트 AX 실습이 그대로 열림
- 작업 페이지의 ‘앱 열기’를 새 주소로 바꿈
- 실타래는 다른 경로 아래에서도 AI 연결이 같은 배포로 가도록, 매일마트는 앱 주소 전체를 /maeilmart-ax/ 아래로 옮김
도구가 한 일
- Claude Code — 주소 연결 설정, 두 앱의 경로 수정, 배포를 흉내 낸 로컬 서버로 새 주소 확인
사람이 확인하고 정한 것
- 바뀐 배포 주소를 알려 주고 shaula.kr 아래 주소로 열기로 결정
변경 내역: siltarae#2 (새 탭) · maeilmart-ax#1 (새 탭)
매일마트 AX 실습을 AX 작업에 추가
AX 과정의 개념을 설명으로 듣는 대신 가상 회사에 하루 출근해서 겪어 보게 만든 실습을, AX 과정을 보여 주는 대표 작업으로 남기고 싶었습니다.
바꾼 것
- 작업 목록 AX 단계에 매일마트 AX 실습 카드와 /work/maeilmart-ax 소개 페이지 추가
- 도입부와 16단계 중 마찰 찾기 · Pain point · 필요한 데이터 · 판단 조건 · 실행 화면을 캡처해 소개
- 장면 보기 → 마찰 찾기 → 앞으로의 흐름 → 10건 실행, 네 흐름으로 단계 정리
도구가 한 일
- Claude Code — 저장소 검토(테스트 74개 · 빌드 확인), 16단계를 끝까지 통과한 상태로 화면 캡처, 소개 페이지 작성
사람이 확인하고 정한 것
- AX 과정을 더 잘 알려 줄 실습으로 직접 기획하고 만듦
- shaula.kr에 소개하기로 결정
- 검토 중
Shaula 2.0 소개 페이지
개편 과정을 기록 목록으로만 두지 않고, 네 개의 AI와 사람의 판단이 어떻게 나뉘었는지 한 페이지로 보여 주고 싶었습니다.
바꾼 것
- 큰 영문 제목의 여는 장면, 개편 전후를 끌어서 비교하는 슬라이더
- VOICE · SCREEN · ORDER · BUILD · JUDGMENT 단어 줄과 도구별 결과 격자
- 숫자 띠(도구 4 · PR 28 · 개편 전 화면 28 · 사람이 정한 순간 5)와 ‘사람이 정한 순간’ 다섯 가지
도구가 한 일
- Claude Code — 참고 디자인 분석, Lucian UX/UI 요소 3개(비교 슬라이더·벤토 격자·손글씨 밑줄) 옮기기, 페이지 구성과 화면 확인
사람이 확인하고 정한 것
- 독립 페이지로 임팩트 있게 만들기로 결정
- 참고 디자인 2곳을 골라 방향 제시
실타래 실습실을 AX 작업에 추가
학생들이 “문제를 알려면 데이터가 필요하다”고 할 때, 개선점은 어디서 찾는지부터 보여 주려고 하루 만에 만든 실습실을 포트폴리오에 남기고 싶었습니다.
바꾼 것
- 작업 목록 AX 단계에 실타래 실습실 카드와 소개 페이지 추가
- 실습실에 ‘데이터는 어디를 볼지 정한 뒤에 생긴다’는 문장을 세 곳에 넣고, 날짜 계산과 휴대폰 화면 수정
- 실습실을 공개 저장소 siltarae로 옮기고, 회사 업무 도구는 비공개 저장소에 남김
도구가 한 일
- Claude Code — 실습실 검토(미션 10개 화면·문구·코드), 문장 제안과 수정, 업무 도구 분리, 소개 페이지 작성
사람이 확인하고 정한 것
- 실습실을 오늘 만들고, 만든 이유(데이터보다 어디를 볼지가 먼저)를 설명
- 회사 정보만 빠지면 저장소 공개해도 된다고 결정
- 검토 중
홈·작업·기록·소개에 스크롤 흐름 더하기
내용은 정리됐지만 페이지가 위에서 아래로 같은 카드만 이어져 지루했습니다. 참고한 사이트들처럼 섹션마다 리듬을 주고, DX → AX 흐름이 몸으로 느껴지게 하고 싶었습니다.
바꾼 것
- 홈: DX · AI 활용 · AX를 한 화면에 나란히 보여 주는 색 패널, 스크롤로 채워지는 문장, 차례로 올라오는 카드
- 작업: 단계를 고르면 카드가 빠지고 남은 카드가 자리를 채우는 갤러리
- 기록: 스크롤을 따라 불이 켜지는 타임라인
- 소개: 경험 다섯 가지가 쌓이며 뒤로 물러나는 카드
- 섹션 머리에 영문 표지, 뒤에 깔린 큰 단어, 비스듬한 강조 띠
도구가 한 일
- Cursor — 첫 화면에 Lucian UX/UI 요소(차례 등장, 가려졌다 드러나는 제목, 자석 버튼) 적용
- Claude Code — Lucian UX/UI 요소 7개를 골라 페이지 스크롤에 맞게 옮기고, 키보드·모션 줄이기·휴대폰 화면 확인
사람이 확인하고 정한 것
- 참고 사이트 3곳(교과서 출판사, 대학 도서관 모금, 기후금융)과 Lucian UX/UI를 쓰기로 결정
- 지루하지 않고 흐름이 느껴지는 방향 제시
- 미리보기를 보고 흐르는 문구 띠와 옆으로 넘어가는 패널은 정신없다고 판단해 빼고, 한 화면에 다 보이게 결정
- 진행 중
네 가지 AI 도구로 shaula.kr 개편 프로젝트 시작
이 사이트를 크게 바꾸는 일 자체를, AI 도구에 역할을 나눠 맡기고 사람이 판단하는 AX 프로젝트로 남기고 싶었습니다.
바꾼 것
- 개편 전 14개 페이지를 데스크톱·모바일로 기록하고 문제 7가지 정리
- 단계별 계획과 Qwen · Cursor · Codex용 작업 지시서, 인계 기록 양식 작성
- 메뉴를 홈 · 작업 · 기록 · 소개 4개로 줄이고, 모든 작업을 같은 카드와 같은 상세 틀로 묶는 골격 구현
도구가 한 일
- Claude Code — 현황 점검과 화면 기록, 단계 설계, 도구별 지시서 작성, 구조 골격 구현
사람이 확인하고 정한 것
- 네 가지 도구로 개편하고 하나의 프로젝트로 남기기로 결정
- 브랜드는 유지하며 정돈, 메뉴 4개, 이름 ‘Shaula 2.0’으로 결정
묻어 두었던 AI 판단 챌린지를 다시 꺼내기
초기 버전에 만들어 둔 챌린지 두 개가 GitHub 프로필 저장소 안에 묻혀 있었습니다. ‘AI가 제안하고 사람이 판단한다’는 사이트의 메시지를 직접 해볼 수 있는 자료였습니다.
바꾼 것
- ‘배움과 설명’에 AI 판단 챌린지 섹션 추가: 슬랙 AI 요약, 근거로 쓸 출처 고르기
- 장면 읽기 → 선택과 이유 → 놓치기 쉬운 지점 → 다음에 써볼 한 문장 순서로 구성
도구가 한 일
- Claude Code — 보관 브랜치의 원본 찾기, 사이트 형식으로 옮기기, 선택 흐름과 모바일 화면 확인
사람이 확인하고 정한 것
- 초기 버전의 챌린지 내용 작성
- 챌린지를 교육 자료로 옮기기로 결정
- 진행 중
사이트를 DX → AX 흐름으로 다시 묶기 시작
흩어진 프로젝트 소개를, 교육 운영 현장의 디지털 전환에서 AI와 일하는 방식의 전환으로 이어지는 하나의 흐름으로 보여주고 싶었습니다.
바꾼 것
- 홈과 ‘만드는 것들’에 DX · AI 활용 · AX 세 단계 지도 추가
- Instructor Hub · 업무 포털 · 런치패스를 DX 단계에 추가하고 소개 페이지 작성
- 모든 도구 소개에 ‘돌아보며’(좋았던 점 · 아쉬웠던 점과 배운 것) 추가
- 흐름 지도에 단계별 만드는 도구의 변화 표시, Pause & Ponder에 만든 계기와 ‘AI는 분류만’ 설계 추가
- 별이음·책상 위에 만든 계기 추가 (책상 위: 기출문제 대신 AI 에이전트가 공개 정보를 모아 사례를 만든 방식)
- 이 개편 기록 페이지를 새로 만들고 메뉴에 추가
도구가 한 일
- Claude Code — 흐름 구조 제안, 캡처에서 기능 정리, 기관·계정 정보 가림 처리, 페이지 구현과 화면 확인
사람이 확인하고 정한 것
- DX → AX라는 방향 결정
- DX 단계에 들어갈 실제 업무 경험과 화면 캡처 제공
- 사용자 이름까지 가리도록 공개 범위 지정
- 도구마다 만든 이유와 좋았던 점·아쉬웠던 점 회고 제공
- AI는 분류에만 쓰고 파싱·배치는 내부 알고리즘으로 하도록 정한 설계 원칙 설명
- 기출문제를 넣으면 재배포가 될 수 있다고 보고 공개 정보로 바꾼 판단 설명
- 개편 과정을 기록으로 남기기로 결정
별이음 실제 화면, Pause & Ponder 소개 영상
별이음 소개가 설명용 카드에만 기대고 있었고, Pause & Ponder는 움직이는 흐름을 보여줄 자료가 없었습니다.
바꾼 것
- 공개 소스를 실행해 예제 데이터로 별이음 화면 3장 기록 (로그인·AI 호출 없음)
- Pause & Ponder 26초 세로형 소개 영상과 프로젝트 지도 바로가기 추가
도구가 한 일
- Codex — Pause & Ponder 홍보 영상 제작
- Claude Code — 별이음 실행·캡처, 영상 배치, 반응형 확인
사람이 확인하고 정한 것
- 영상을 포트폴리오에 쓰기로 결정
- 변경 내용을 검토하고 합치기
흩어진 저장소 정리와 이름·링크 통일
같은 프로젝트가 저장소마다 다른 이름과 주소로 소개되고, 공개 여부도 들쭉날쭉했습니다.
바꾼 것
- 별이음·책상 위 소스 링크 공개, README 프로젝트 표 갱신
- 뜰의 ‘모아틀’을 별이음으로, Pause & Ponder 데모 주소 통일
- 뜰을 shaula.kr로 합치고, GitHub 프로필을 소개 README로 전환
도구가 한 일
- Claude Code — 저장소 간 불일치 찾기, 수정, PR 작성
사람이 확인하고 정한 것
- 쓰지 않는 저장소 삭제·비공개 전환
- 공개할 링크와 포트폴리오 범위 결정
- 뜰을 합치기로 결정
변경 내역: tteul#1 (새 탭) · PP#20 (새 탭) · tteul#2 (새 탭) · LamdaLee#2 (새 탭)
출결 기록을 ‘구성만’ 공개하기
현장에서 쓰는 도구라 보여주고 싶었지만, 실제 명단과 기록에는 교육생 개인정보가 담겨 있습니다.
바꾼 것
- 화면 흐름만 옮긴 가상 데이터 체험판과 소개 페이지 추가
- 기관명·교육장 정보·서버 주소는 싣지 않음
도구가 한 일
- Claude Code — 원본 구조 분석, 체험판 구현, 모바일 화면 확인, 공개 저장소의 노출 위험 발견
사람이 확인하고 정한 것
- 세부 데이터를 빼고 구조만 공개하기로 결정
- 원본 저장소를 비공개로 전환