K-garoo Social Club K-garoo Works WarRoom

▸ Session 02 Notice

2026.04.29 Wed에서 2026.04.30 Thu 22:00로 옮깁니다.

이번 Session 02는 2026년 4월 29일 수요일 22:00에서 2026년 4월 30일 목요일 22:00로 이동했습니다. 시간은 그대로 유지하고, 오늘 다룰 내용과 준비물, 운영 메모를 이 페이지에 미리 정리합니다.

Move04.29 → 04.30 Time22:00-24:00 KST FormatGoogle Meet
Google Meet 입장 ↗ Session 02 Room Meetings Hub Session 02 회의록
session-02-notice.log
status: rescheduled
from: 2026-04-29 Wed 22:00 KST
to:   2026-04-30 Thu 22:00 KST
focus: terminal -> Codex -> GitHub -> MCP
add-on: repo + skills + notion
routine: notice -> room -> recap
00

일정 변경

Update

원래 잡아둔 날짜 위에 선을 긋고, 같은 시간으로 하루 옮긴다는 점만 먼저 맞춥니다.

기존 일정2026년 4월 29일 수요일 22:00-24:00 KST
변경 일정2026년 4월 30일 목요일 22:00-24:00 KST
접속 링크Google Meet 바로 입장 ↗
변경 내용시간은 유지하고 날짜만 하루 이동합니다.
오늘도 같은 리듬으로 갑니다. 미리 공지 페이지를 보고 들어오고, 미팅 중에는 Room 페이지를 열고, 끝난 뒤에는 회의록이 따로 올라가는 구조입니다.
01

오늘의 순서

Agenda

아래 순서대로 진행하면서 설치, 개념, 실제 손 움직임을 한 번에 묶습니다.

  1. Terminal에 대한 이해
  2. CLI가 무엇인지, Codex/Claude Code를 어떤 표면에서 쓰는지 이해하기
  3. Codex (+Antigravity) 운용법
  4. Codex로 간이 응용 프로그램 만들기, Dev로 로컬에서 테스트
  5. GitHub와 Repo에 대한 이해
  6. GitHub에 올리기와 첫 Push
  7. MCP에 대한 이해
  8. Skill이 무엇인지와 기본 사용법
  9. MCP로 Notion MCP 연결해서 사용하기
02

준비물

Checklist

미팅 중 대기 시간을 줄이기 위해 로그인과 설치는 최대한 미리 끝내고 들어옵니다.

  • Codex Mac OS App 설치 + ChatGPT Plus 이상 구독
  • Antigravity Mac OS App 설치 + Gemini Pro 이상 구독
  • GitHub 가입 및 계정 확보
  • Notion 가입 및 macOS 앱 설치

가능하면 미리 로그인까지 마쳐두고, 열어볼 프로젝트 폴더나 만들고 싶은 작은 아이디어 한 줄도 준비해오면 좋습니다.

03

운영 메모

Meet

이번 모임은 화면 공유와 기록 품질을 조금 더 의식해서 진행합니다.

  • 들어오기 전까지는 이 웹페이지 자료를 먼저 보고, 미팅 중에는 Session 02 Room 페이지를 같이 엽니다.
  • 실버벨님은 가능하면 녹음을 깔끔하게 부탁드립니다. 이번에는 macOS 기본 녹음 방식도 괜찮습니다.
  • 미팅이 끝난 뒤 요약을 공유해주시면, 그 내용을 바탕으로 회의록 페이지를 따로 올릴 예정입니다.
  • 회의 중 표시 이름은 최대한 닉네임으로 바꾸고, 얼굴은 가리거나 필터를 사용합니다.
  • @춘식이 / 냉정과열정사이 님은 오늘 보여주고 싶은 것이 있으면 마지막 시간에 짧게 같이 보여주셔도 좋습니다.
04

업데이트 루틴

System

앞으로는 회차마다 같은 구조를 유지해서 자료가 쌓이도록 갑니다.

  1. 사전 예고 내용을 웹페이지에 올립니다.
  2. 미팅 진행용 자료를 별도 Room 페이지로 올립니다.
  3. 미팅 종료 후 요약과 액션 아이템을 담은 회의록 페이지를 새로 올립니다.
  4. 홈 루트 팝업은 가장 최근 회의록으로 갱신합니다.

이번 Session 02부터 이 루틴을 기준으로 굴리기 시작합니다.

06

Codex Build Practice

Workshop

오늘 미팅에서 다 같이 시도해볼 수 있는 실전 예제입니다. 둘 다 완성보다 워크플로우를 체득하는 데 목적이 있습니다.

이 섹션의 목적은 “Codex에게 어떤 순서로 일을 시켜야 하는가”를 연습하는 것입니다. 핵심은 처음부터 무작정 구현시키지 않고, 먼저 계획을 세우고, 참고 대상을 읽히고, 범위를 줄이고, 로컬에서 바로 확인하는 흐름을 익히는 데 있습니다.

K-garoo 추천 흐름: 목표 한 줄 정리 → 계획부터 요청 → 참고 대상 리서치 → 최소 기능만 구현 → 로컬 테스트 → 수정 요청 → 필요하면 GitHub에 올리기
예제 1. SNUlife 스타일 게시판형 커뮤니티 구조를 분석하고 프로토타입 만들기

첫 예제는 서울대 커뮤니티인 SNUlife를 참고 대상으로 삼아, 게시판형 커뮤니티의 구조를 빠르게 읽고 우리식 프로토타입을 만들어보는 실습입니다. 중요한 점은 기존 브랜드를 그대로 복제하는 것이 아니라, 정보 구조와 사용자 흐름만 참고하는 것입니다.

이 예제로 배우는 것

  • Codex에게 특정 웹사이트를 참고 대상으로 주고 구조를 요약시키는 법
  • 리서치 결과를 바탕으로 범위를 줄인 프로토타입 요구사항을 만드는 법
  • 게시판형 커뮤니티의 기본 화면 구성을 빠르게 설계하는 법

추천 워크플로우

  1. 플랜 모드로 시작: “아직 구현하지 말고 계획부터”라고 해서 먼저 기능 범위, 화면 목록, 구현 순서를 받습니다.
  2. 참고 대상 리서치: SNUlife 주소를 주고 상단 네비, 게시판 리스트, 글 목록, 글 상세, 인기글 구조를 정리하게 합니다.
  3. 복제 금지 조건 추가: 색상, 로고, 명칭, 세부 카피는 그대로 베끼지 말고, 게시판형 구조만 참고하라고 명시합니다.
  4. 최소 기능 정의: 홈, 게시판 목록, 글 상세, 글쓰기 폼, 인기글 영역, 더미 데이터 정도로 범위를 줄입니다.
  5. 구현: 프론트엔드 프로토타입부터 만들게 하고, 로컬에서 동작 확인을 먼저 합니다.
  6. 로컬 테스트: 모바일/PC에서 리스트 가독성, 글 상세 흐름, 글쓰기 경험을 확인합니다.
  7. 후속 확장: 로그인, 댓글, 추천, 검색, 실제 DB 연결은 2차 과제로 둡니다.

Codex에게 이렇게 시작해볼 수 있습니다

아직 구현하지 말고 계획부터 세워줘.

참고 대상은 https://www.snulife.com/ 이고,
서울대 동문용 게시판형 커뮤니티의 구조를 참고한
간단한 웹 프로토타입을 만들고 싶어.

주의:
- 기존 사이트의 브랜드, 로고, 카피, 색상은 복제하지 말 것
- 정보 구조와 화면 흐름만 분석할 것
- 오늘은 홈 / 게시판 목록 / 글 상세 / 글쓰기 폼 정도만 만들 것
- 로컬에서 바로 dev로 확인 가능한 최소 구조로 제안할 것

먼저
1. 참고 사이트 구조 요약
2. 우리가 만들 최소 기능 정의
3. 구현 순서
4. 필요한 파일 구조
만 정리해줘.

이후 구현 요청 예시

좋아. 이제 그 계획대로 만들어줘.

조건:
- mock data로 게시글 12개를 넣어줘
- 인기글 영역을 별도 카드로 보여줘
- 게시판 리스트와 글 상세를 오갈 수 있게 해줘
- 한국어 카피로 자연스럽게 작성해줘
- PC와 모바일 둘 다 기본적으로 읽히게 해줘
- 구현 후 로컬에서 확인하는 방법까지 적어줘

이 실습의 포인트는 “SNUlife처럼 보이는 사이트를 똑같이 만들기”가 아니라, 이미 존재하는 커뮤니티 제품을 보고 무엇이 핵심 구조인지 추출한 뒤, 그걸 우리 힘으로 다시 재구성해보는 감각을 배우는 것입니다.

예제 2. 웹캠 손동작을 MediaPipe로 인식하고 손가락마다 다른 소리 내기

두 번째 예제는 카메라와 브라우저 인터랙션을 다루는 연습입니다. Google의 MediaPipe Hand Landmarker for Web를 참고해서, 웹캠 손동작을 인식하고 손가락 상태에 따라 다른 소리가 나도록 하는 작은 인터랙티브 페이지를 만들어봅니다.

이 예제로 배우는 것

  • Codex에게 라이브 카메라/브라우저 기능을 계획부터 시키는 법
  • 외부 기술 문서와 예제를 참고해 브라우저 인터랙션을 구현하는 법
  • 손동작 인식 같은 센서형 입력을 작은 프로토타입으로 줄여서 만드는 법

추천 워크플로우

  1. 플랜 모드로 시작: 카메라 권한, 브라우저 보안 조건, MediaPipe 로딩 방식, 오디오 처리 방식을 먼저 계획하게 합니다.
  2. 범위 줄이기: 손 전체 제스처 인식이 아니라, 손가락의 펴짐/굽힘 또는 특정 랜드마크 거리 변화 정도만 쓰도록 단순화합니다.
  3. 기본 UI 만들기: 웹캠 미리보기, 손 랜드마크 오버레이, 현재 손가락 상태 텍스트, 사운드 on/off 버튼 정도만 둡니다.
  4. MediaPipe 연결: 카메라 프레임을 읽고 손 랜드마크를 받아옵니다.
  5. 사운드 매핑: 엄지, 검지, 중지, 약지, 소지의 움직임에 서로 다른 음 또는 샘플을 연결합니다.
  6. 테스트: localhost에서 카메라 권한이 잘 뜨는지, 손가락 움직임에 반응이 안정적인지 봅니다.
  7. 후속 확장: 양손 인식, 제스처 녹음, 드럼패드, 시각 효과 추가는 이후 과제로 둡니다.

Codex에게 이렇게 시작해볼 수 있습니다

아직 구현하지 말고 계획부터 세워줘.

브라우저에서 웹캠을 켜고,
Google MediaPipe Hand Landmarker를 사용해서
손가락 움직임에 따라 서로 다른 소리가 나는
작은 인터랙티브 데모를 만들고 싶어.

조건:
- localhost에서 실행 가능할 것
- 손 랜드마크를 화면에 보이게 할 것
- 손가락별로 다른 소리를 낼 수 있게 할 것
- 오늘은 백엔드 없이 프론트엔드만 만들 것
- 구현 전 필요한 라이브러리, 파일 구조, 단계별 계획을 먼저 정리할 것

먼저
1. 기술 계획
2. 구현 범위 최소화 제안
3. 파일 구조
4. 테스트 순서
를 설명해줘.

이후 구현 요청 예시

좋아. 이제 그 계획대로 만들어줘.

조건:
- 카메라 비디오 프리뷰를 보여줘
- 손가락 랜드마크를 선과 점으로 오버레이해줘
- 엄지/검지/중지/약지/소지에 서로 다른 음을 매핑해줘
- 너무 자주 중복 재생되지 않도록 간단한 쿨다운을 넣어줘
- 화면 하단에 현재 감지 상태를 텍스트로 보여줘
- 구현 후 localhost 실행 방법을 적어줘

이 실습의 포인트는 AI에게 막연히 “멋진 인터랙션을 하나 만들어줘”라고 하는 것이 아니라, 카메라, 랜드마크, 사운드, UI, 테스트로 작업을 쪼개서 지시하는 방법을 익히는 데 있습니다. 이 감각이 생기면 나중에는 웹 게임, 퍼포먼스 툴, 악기형 인터랙션까지 훨씬 빠르게 확장할 수 있습니다.