Codex부터 GitHub 저장까지

여기서 시작합니다

처음 열었다면 01부터 누릅니다. 각 묶음 끝의 확인 문장까지 마친 뒤 다음 번호로 넘어갑니다.

프로젝트 폴더와 GitHub에 모을 여섯 가지

한 프로젝트 폴더와 GitHub에 아래 결과 여섯 개가 남습니다.

1. Codex가 실제 파일을 읽는 프로젝트 폴더
2. Claude가 Codex에 요청해 저장한 이미지 파일 1개
3. Figma Weave에 저장한 Gen Effect 노드 1개
4. 반복 업무의 순서와 확인 기준을 적은 스킬 초안 1개
5. 디자인 수정 전후 화면과 발행 주소 또는 실사용 기록
6. 안전한 파일과 첫 커밋이 보이는 비공개 GitHub 저장소

해결할 문제

도구마다 다른 폴더와 파일 이름을 쓰면 결과가 흩어집니다. 같은 프로젝트 폴더와 같은 파일 이름을 사용하면 Claude, Codex, Figma Weave가 만든 결과를 한곳에서 확인할 수 있습니다.

이 수업에서는 만들기 → 파일 확인 → 다시 사용하기 → 전후 비교 순서로 작업합니다.

시작 전 준비

• ChatGPT 계정과 데스크톱 앱
• Claude 또는 Claude Code
• GitHub 계정과 GitHub CLI(Command Line Interface, 터미널에서 GitHub를 연결하는 도구)
• Figma 계정과 Figma Weave 접근 권한
• 이미지와 화면 파일을 저장할 프로젝트 폴더 1개
• 2회차에서 만든 brand.md, design.md, AGENTS.md

ChatGPT 앱을 아직 설치하지 않았다면 Codex 설치 4단계 따라하기를 먼저 엽니다.

GitHub 계정이 없어도 괜찮습니다. 06에서 계정 만들기부터 첫 저장까지 한 페이지에서 진행합니다.

01. Codex 설치와 폴더 열기

이 묶음이 끝나면 Codex가 선택한 프로젝트의 실제 파일 이름을 답합니다.

ChatGPT 앱 설치

운영체제에 맞는 ChatGPT 앱을 설치하고 계정으로 로그인합니다.

• macOS용 ChatGPT 공식 다운로드
• Windows용 ChatGPT 공식 설치 안내

Windows에서는 설치 안내를 열고 Download the ChatGPT desktop app을 누른 뒤, 내려받은 ChatGPT Installer.exe를 실행합니다. 다운로드가 시작되지 않으면 시작 메뉴에서 PowerShell을 열고 아래 명령을 붙여넣습니다.

winget install --id 9PLM9XGG6VKS -s msstore

※ 2026년 8월 17일 기준으로 확인한 OpenAI 공식 Windows 설치 경로입니다.

Codex 선택

왼쪽 위 ChatGPT 메뉴에서 Codex를 선택합니다. 새 작업을 열고 현재 작업할 프로젝트 폴더 하나만 선택합니다.

실제 파일 확인

아래 문장을 Codex에 붙여넣습니다.

이 폴더의 파일과 하위 폴더를 읽고, 지금 작업을 시작할 때 먼저 봐야 할 파일 세 개를 알려 주세요. 파일은 고치지 마세요.

02. Claude에서 Codex로 이미지 만들기

Claude가 이미지 조건과 저장 위치를 정하고 Codex가 파일을 만듭니다. 두 도구에서 같은 프로젝트 폴더를 엽니다.

Codex 상태 확인

Claude와 Codex 같이 쓰기를 열고 아래 문장을 Claude Code에 붙여넣습니다.

이 컴퓨터에서 Codex를 사용할 수 있는지 `codex --version`과 `codex login status`로 확인해 주세요. 확인만 하고 파일은 고치지 마세요.

이미지 조건 작성

아래 네 항목을 한 줄씩 적습니다.

• 이미지가 들어갈 자료와 용도
• 화면에 보여야 할 대상과 배치
• 배경, 색, 선, 조명 조건
• 저장할 폴더와 파일 이름

이미지 생성

Codex 이미지 생성 카드의 요청문을 사용합니다. [이미지 설명]과 저장 경로만 바꿉니다.

codex exec --sandbox workspace-write '$imagegen [이미지 설명]을 만들고 images/approved-frame이라는 이름의 PNG 파일로 저장해 줘. 저장이 끝나면 파일 경로와 해상도를 알려 줘.' < /dev/null

$imagegen은 Codex의 이미지 생성 기능을 부릅니다. 생성은 Codex 사용 한도에 포함되므로 한 장을 확인한 뒤 다음 이미지를 만듭니다.

파일과 이미지 확인

Claude에 아래 문장을 보냅니다.

images 폴더에 approved-frame이라는 이름의 PNG 파일이 실제로 있는지 확인해 주세요. 이미지를 열어 처음 조건과 비교하고, 맞지 않는 항목만 적어 주세요.

03. Figma Weave에서 효과 만들기

Figma Weave는 노드를 캔버스에 놓고 연결해 이미지를 처리합니다. 이 묶음에서는 효과와 조절 항목을 직접 적어 Gen Effect 노드로 만듭니다.

첫 이미지 연결

Prompt 하나를 이미지 모델 여러 개에 연결하는 공식 영상 구간에서 한 출력이 두 입력으로 나뉘는 구조를 봅니다.

Figma Weave 입문을 열고 Prompt 노드의 출력 포트에서 이미지 모델의 입력 포트까지 연결합니다. 같은 Prompt를 모델 두 개에 연결해 결과를 나란히 확인합니다.

Gen Effect 노드 추가

Gen Effect 노드를 만들기 시작하는 공식 영상 구간은 빈 노드에 효과를 설명하는 순서를 보여 줍니다.

Gen Effect 따라하기에서 실제 화면과 복사용 요청문을 확인합니다. 캔버스에서 Tab을 누르고 Gen Effect를 검색해 노드를 놓습니다.

효과와 조절 항목 작성

기존 효과에 조절 항목을 추가하는 공식 영상 구간은 설명을 고친 뒤 조절 화면이 바뀌는 장면으로 이어집니다.

아래 문장을 Gen Effect 설명 칸에 붙여넣습니다.

컬러 하프톤 효과를 만들어 주세요.
점 크기, 점 간격, 각도, RGB 색상, 불투명도를 조절할 수 있게 해 주세요.
초기값은 원본 이미지를 알아볼 수 있는 약한 강도로 정해 주세요.

입력 이미지를 연결하고 오른쪽 조절 화면에 다섯 항목이 생겼는지 확인합니다.

다른 이미지에 다시 사용

Saved Nodes에 저장한 효과를 다시 쓰는 공식 영상 구간에서 새 입력에 같은 효과를 연결하는 과정을 따라갑니다.

완성한 효과를 Saved Nodes에 저장합니다. 성격이 다른 이미지 한 장을 연결하고 효과를 새로 만들지 않은 채 조절 값만 바꿉니다.

전체 Gen Effect 수업자료에는 공식 영상 구간, 실제 화면, 막힐 때 확인할 항목이 있습니다.

04. SOLV Tools의 내용을 스킬로 만들기

Skill(스킬)은 반복 작업의 순서와 판단 기준을 적은 작업 설명서입니다. 이 묶음에서는 도구 하나를 실제 업무에 사용한 뒤 그 순서를 스킬 초안으로 남깁니다.

필요한 도구 선택

SOLV Tools와 스킬 목록에서 지금 반복하는 일과 가장 가까운 항목 하나를 고릅니다. 이름보다 입력, 실행 순서, 결과 파일을 확인합니다.

기존 스킬로 한 건 실행

스킬 이름을 선택하고 실제 업무 한 건으로 실행합니다. 결과를 고친 내용은 새 스킬 초안의 규칙으로 적습니다.

반복 절차를 파일로 저장

Skill Creator 카드를 열고 Codex에 아래 문장을 보냅니다.

SKILL.md는 반복 절차와 확인 기준을 글자로 적은 스킬 설명 파일입니다.

$skill-creator
내가 반복하는 일은 [업무 이름]입니다.
입력은 [받는 자료], 결과는 [남길 파일]입니다.
이 스킬을 사용할 때와 사용하지 않을 때, 실행 순서, 통과 기준을 질문한 뒤 이 프로젝트에서 쓸 스킬 초안을 만들어 주세요.

name은 스킬 이름이며 description은 이 스킬을 언제 사용하고 언제 사용하지 않을지 적는 설명입니다.

두 요청으로 시험

1. 스킬을 사용해야 하는 실제 요청 1개를 보냅니다.
2. 비슷하지만 스킬을 사용하면 안 되는 요청 1개를 보냅니다.

05. Impeccable로 기존 화면 확인하기

기존 화면을 자동으로 검사하고 수정한 뒤 같은 조건에서 다시 확인합니다.

Impeccable 설치와 검사

Impeccable 실습 카드를 옆에 열고 아래 순서로 진행합니다.

1. 프로젝트 폴더에서 npx impeccable install을 실행하고 AI 도구를 다시 엽니다. Codex가 프로젝트 훅 승인을 요구하면 /hooks를 열어 내용을 확인한 뒤 승인합니다.
2. /impeccable init을 실행합니다.
3. npx impeccable detect index.html로 첫 검사 결과를 저장합니다.
4. /impeccable polish index.html을 실행합니다.
5. 같은 detect 명령을 다시 실행합니다.
6. /impeccable audit index.html으로 기록을 남깁니다.

06. GitHub에 처음 저장하고 확인하기

GitHub는 프로젝트 파일과 변경 기록을 함께 보관합니다. 이 묶음에서는 계정 확인부터 빈 비공개 저장소 생성, 첫 커밋과 푸시까지 한 단계씩 진행합니다. GitHub 저장소 주소는 파일을 보는 주소이며, 방문자가 보는 공개 사이트 주소와는 다릅니다.

필요한 설명은 각 단계에 바로 적혀 있으므로 다른 수업 페이지를 열지 않습니다.

1. 계정 만들기

GitHub 계정이 없다면 아래 순서대로 만듭니다. 계정이 있으면 2번으로 넘어갑니다.

1. 이메일을 입력합니다.
2. 비밀번호를 만듭니다.
3. 공개할 유저네임을 정합니다.
4. 이메일로 받은 인증 코드를 입력합니다.
5. 오른쪽 위 프로필에서 유저네임을 확인합니다.
6. 오른쪽 위 프로필에서 Settings를 누르고 Password and authentication으로 이동합니다. Enable two-factor authentication을 눌러 인증 앱과 복구 코드를 설정합니다.

2. 커밋·푸시·머지 구분하기

세 단어를 블록 집에 빗대어 구분합니다.

• 커밋은 블록 집을 사진으로 남기듯 지금까지 바꾼 내용을 내 컴퓨터에 기록합니다.
• 푸시는 사진첩을 인터넷 보관함에 올리듯 내 컴퓨터의 커밋을 GitHub로 보냅니다.
• 머지는 다른 책상에서 만든 조각을 완성할 집에 붙이듯 다른 브랜치의 변경을 main에 합칩니다.

첫 저장에서는 커밋한 뒤 푸시합니다. 아직 합칠 다른 브랜치가 없으므로 머지는 하지 않습니다.

3. GitHub 웹에서 빈 비공개 저장소 만들기

아래 순서대로 한 항목씩 확인합니다.

1. GitHub 오른쪽 위의 +를 누르고 New repository를 누릅니다.
2. Owner에 내 유저네임이 선택되어 있는지 확인합니다.
3. Repository name에 영문 소문자와 하이픈으로 이름을 입력합니다.
4. Private을 선택합니다.
5. README, .gitignore, License는 추가하지 않고 빈 상태로 둡니다.
6. Create repository를 누릅니다.
7. Quick setup 화면의 HTTPS 저장소 주소를 복사합니다.

4. 로그인과 올릴 파일 확인

프로젝트 폴더를 Codex나 Claude Code에서 연 뒤 첫 문장을 보냅니다.

이 프로젝트 폴더에서 GitHub 로그인 상태와 로그인한 계정 이름만 확인해 주세요. 로그인하지 않았다면 `gh auth login`을 시작하고, 브라우저에서 제가 승인해야 하는 순간에 멈춰 주세요. 토큰 값은 보여 주지 말고 파일도 고치지 마세요.

로그인 계정을 확인한 뒤 두 번째 문장을 보냅니다.

이 폴더를 GitHub에 올리기 전에 커밋할 파일과 `.gitignore`를 확인해 주세요. `.env`, 토큰, API 키, 비밀번호, 개인·고객 자료가 있으면 값을 보여 주지 말고 파일 경로와 위험 종류만 알려 준 뒤 멈춰 주세요. 문제가 없으면 커밋할 파일 목록만 보여 주세요.

5. 첫 커밋 내용 확인하기

이 폴더가 아직 Git 저장소가 아니면 main 브랜치로 시작해 주세요. 방금 확인한 안전한 파일만 첫 커밋 후보로 올리고, 바뀐 내용과 커밋 메시지 후보를 보여 주세요. 아직 커밋하거나 GitHub에 푸시하지 마세요.

6. 커밋하고 푸시하기

아래의 [여기에 복사한 저장소 주소]를 실제 주소로 바꾼 뒤 보냅니다.

제가 GitHub 웹에서 만든 빈 비공개 저장소 주소는 [여기에 복사한 저장소 주소]입니다. 확인한 파일을 첫 커밋으로 기록하고, 이 주소를 origin으로 연결한 뒤 main 브랜치를 푸시해 주세요. 끝나면 저장소 주소, origin 주소, 최근 커밋 한 건을 알려 주세요.

7. GitHub 웹에서 네 자리 확인

저장소 주소를 열어 아래 네 자리를 확인합니다.

1. 저장소 이름이 현재 프로젝트와 맞습니다.
2. 기본 브랜치에 main이 보입니다.
3. 최근 커밋 문구와 시각이 보입니다.
4. 프로젝트 파일 세 개 이상이 목록에 보입니다.

GitHub가 비밀 값을 감지해 푸시를 막으면 우회하지 않습니다. 해당 값을 파일과 커밋 대상에서 제거하고, 실제로 사용하던 키나 토큰이라면 해당 서비스에서 폐기한 뒤 새로 발급합니다.

내 프로젝트에 적용

1회차에서 만든 project-brief.md를 다시 엽니다. 처음 적은 문제와 이번 결과를 아래 네 줄로 연결합니다.

처음 적은 문제:
이번에 만든 결과:
확인할 주소 또는 실사용 기록:
GitHub 저장소 주소와 최근 커밋:

• 브랜드 작업: 완성한 이미지나 화면을 인터넷 주소로 발행합니다. 처음이라면 콘텐츠 세트 발행의 한 가지 경로만 따라갑니다.
• 업무 작업: 만든 스킬을 실제 업무 한 건에 사용합니다. 실전 투입 카드의 확인 항목에 따라 실행 기록을 남깁니다.
• 공통 저장: 두 갈래 모두 GitHub 비공개 저장소 주소와 최근 커밋을 남깁니다. 방문자가 보는 사이트를 만들려면 저장 뒤에 별도의 발행 과정이 필요합니다.

완료 체크리스트

• Codex가 선택한 프로젝트의 실제 파일 이름을 읽습니다.
• Claude가 실행한 이미지 결과가 지정한 폴더에 있습니다.
• 저장한 Gen Effect를 다른 이미지에 다시 사용했습니다.
• 스킬을 써야 하는 요청과 쓰지 않아야 하는 요청이 구분됩니다.
• 디자인 수정 전후에 같은 요청과 같은 화면 크기를 사용했습니다.
• 공개하면 안 되는 파일을 확인한 뒤 비공개 GitHub 저장소에 첫 커밋을 올렸습니다.
• GitHub 웹에서 저장소 이름, main, 최근 커밋, 프로젝트 파일을 확인했습니다.
• 결과 주소가 열리거나 실제 입력과 결과 파일이 함께 남았습니다.
• project-brief.md에 문제 문장과 결과 기록을 갱신했습니다.

막힐 때

• Codex가 다른 폴더를 읽으면 새 작업에서 프로젝트 폴더를 다시 선택합니다.
• Claude에서 codex 명령을 찾지 못하면 Codex CLI 설치와 로그인을 확인합니다.
• $imagegen이 실행되지 않으면 전체 요청을 작은따옴표로 감쌌는지 확인합니다.
• Gen Effect에 조절 항목이 없으면 효과 이름과 조절할 값을 함께 적었는지 확인합니다.
• 스킬이 실행되지 않으면 SKILL.md의 설명에 실제 요청에서 쓰는 말이 들어 있는지 확인합니다.
• Impeccable 검사 결과가 0건이어도 데스크톱과 모바일 화면을 직접 확인합니다.
• gh auth status에서 로그인이 보이지 않으면 gh auth login을 실행하고 브라우저 승인까지 마칩니다.
• GitHub가 푸시를 막으면 차단을 우회하지 말고 표시된 파일에서 비밀 값을 제거합니다.
• 저장소 주소는 열리는데 사이트가 보이지 않으면 파일 저장만 끝난 상태입니다. 방문자가 보는 사이트를 만들려면 별도의 발행 과정이 필요합니다.

더 자세히