Week 1 퀘스트
Week 1에 배운 내용을 습득하며 AI-native 역량을 훈련할 수 있도록 설계되었습니다.
퀘스트 수행 및 제출 방법
- 본인 컴퓨터에
Week1-Quest 폴더를 만듭니다.
- Visual Studio Code에서 퀘스트별 개별 하위 폴더를 만들어 산출물을 정리합니다.
Week1-Quest/
├── Q1
│ └── my-environment.md...
├── Q2
│ └── automation-plan.md...
├── Q3
│ ├── img/
│ └── brand.md
주의: VS Code에서 Week1-Quest 폴더를 열면 Claude는 폴더 전체를 맥락으로 인식합니다. 따라서 특정 퀘스트를 수행할 때는 “이번에는 Q2를 진행하자”처럼 해당 퀘스트를 명확히 알려주고 시작하는 것이 좋습니다.
- 각 퀘스트 폴더 안에 필요한 작업 파일과 최종 제출 결과물을 모두 정리합니다.
Week1-Quest를 Git으로 관리하도록 Claude에게 요청하고, public GitHub 리포지토리로 업로드해 달라고 합니다.
- 제출물은 최종 GitHub 리포지토리 주소 하나입니다. 구글 폼을 통해 제출해주세요. https://forms.gle/vCT7PRH7vP6NZTQn7
[Quest 1] AI 에이전트 환경 구축 및 매뉴얼 작성
1. 퀘스트 목표
1 주차 수업 전에 스크립트를 통해 AI 환경 설치를 했습니다. 어떤 도구들이 설치 되었는지, 설치된 도구들이 내 업무(엑셀 자동화, 문서 요약, 파일 정리 등)에 어떻게 쓰이는지 이해하는 것이 핵심입니다.
2. 수행 방법
- 환경 구축 (자동 설치): 본인 컴퓨터 운영체제에 맞는 명령어를 복사해서 터미널(PowerShell 또는 Terminal)에 붙여넣은 후 실행합니다. 단축키로 html 파일이 열리지 않는 에러를 수정했습니다. 아래 스크립트를 다시 실행해주세요..
- Windows:
irm https://raw.githubusercontent.com/whatfontisthis/claude-setup/main/install.ps1 | iex
- macOS:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/whatfontisthis/claude-setup/main/install.sh)"
- 클로드와 대화하기 (환경 분석): 설치가 끝나면 Claude Code에게 스크립트 링크를 알려주고 다음 내용을 물어보세요. (쉽게 풀어서 설명해달라고 요청해보세요)
- “이 스크립트로 내 컴퓨터에 어떤 ‘프로그램’들이 설치됐어?”
- “Node.js나 Python 같은 것들이 내 업무 자동화에 왜 필요한 거야?”
중요: “VS Code는 왜 필요하고, 어떤 편리한 기능(확장 프로그램)이 추가됐어?”
- 본인이 우리의 환경을 충분히 이해했다고 판단 될까지 꼬리에 꼬리를 무는 질문을 이어가며 대화를 합니다.
- 저장하기
- 진행한 대화를 my_environment.md 파일로 저장해달라고 요청합니다.
- 마크 다운 파일에 아래 필수 포함 내용을 추가적으로 정리합니다.
3. 제출물 (나의 AI 업무 매뉴얼)
- 파일:
my_environment.md (Markdown 형식)
- 필수 포함 내용:
- 업무 자동화 도구 설명서: 설치된 프로그램(Git, Python 등)을 내가 이해하기 쉬운 톤과 비유로 설명.
- 핵심 용어 사전: ‘터미널’, ‘레포지토리’, ‘CLI’ 등 생소한 용어를 업무 맥락에서 정의.
- 한눈에 보는 구조도: 마인드맵(Markmap)을 사용하여 내 컴퓨터와 AI가 연결된 구조 시각화.
- 증빙 스크린샷:
- AI와 대화하며 업무 환경을 파악한 채팅 화면 1장.
- 깔끔하게 세팅된 본인의 작업 화면(VS Code) 1장.
[Quest 2] 업무 자동화 진단 및 프로세스 설계서 작성
1. 과제 개요
지난 한 주간의 업무를 돌아보고, AI를 도입했을 때 가장 파급력이 큰 업무 하나를 선정합니다. 해당 업무의 시작(Trigger)부터 최종 전달(Handoff)까지의 과정을 분석하고, AI가 개입할 지점과 예상 변화를 담은 ‘자동화 설계서’를 작성합니다.
2. 수행 방법
- 대상 선정: 지난주 업무 중 반복적이거나 시간이 오래 걸렸던 작업 3개를 브레인스토밍하고, 그중 가장 자동화가 시급한 1순위 업무를 결정합니다.
- 프로세스 상세화: Week1-Quest/Q2 폴더 안에 텍스트 파일 하나 또는 마크다운 파일 하나를 만든 후, 선택한 업무가 시작되어 마무리될 때까지의 모든 단계(Step)와 각 단계에 필요한 자료(Spec)를 작성해봅니다.
- AI 최적화 설계: 전체적인 과정을 어떻게 AI를 어떻게 활용할 수 있는지, 각 단계 중 AI가 대신할 수 있는 부분, 사람이 반드시 검수해야 할 지점(Human-in-the-loop)을 AI와 함께 대화하며 정리해봅니다.
- 시각화: 업무의 전체 흐름을 Mermaid Flowchart를 사용하여 도식화해봅니다.
- 해당 내용을 automation-plan.md로 저장합니다.
3. 제출물 상세 요구사항
- 파일명:
automation-plan.md (Markdown 형식)
- 필수 포함 항목:
- 업무 명칭 및 정의: 어떤 업무를 대상으로 하는가?
- Before & After 비교:
- 기존(Before): 총 소요 시간, 전체 단계 수, 주요 병목 구간.
- 개선(After): 예상 소요 시간, 줄어든 단계 수, 체감되는 변화(예: “단순 복붙 작업 소멸”).
- 업무 흐름도 (Mermaid): 업무의 시작부터 끝까지를 보여주는 플로우차트.
- AI 협업 포인트: AI가 도움을 줄 수 있는 구체적인 방법과 사람이 확인해야 할 검수 포인트.
- 이미지 파일: AI와 대화하며 진행한 스크린샷 1장
[Quest 3] 브랜드 사이트 만들기
1. 과제 개요
현재 재직 중인 회사나 평소 관심 있는 브랜드를 선정하여, 그 가치를 가장 잘 보여줄 수 있는 한 페이지 분량의 웹사이트(Landing Page)를 제작합니다.
2. 수행 방법
- 브랜드 자료 준비
- Week1-Quest/Q3 폴더 안에 회사의 로고, 서비스 문구, 이미지, 브랜드 컬러 등을 준비하여 텍스트 정보는
brand.md 파일로 저장하고, 이미지 파일들은 img/ 폴더에 넣습니다.
- Tip: AI가 용도를 파악할 수 있게
logo.png, background.jpg 처럼 파일 이름을 명확하게 지어주세요.
- AI 페어 프로그래밍
- Claude Code에게 다음과 같이 요청하여 사이트 제작을 시작합니다.
- 명령어 예시: “OO회사의 브랜드 사이트를 만들고 싶어. [brand.md]를 참고해서 현대적이고 깔끔한 리니어(Linear) 스타일의 랜딩 페이지를 index.html 파일 하나로 작성해줘.”
- Tip: 원하는 디자인 스타일 또는 레퍼런스 사이트 스크린 샷을 주면 해당 내용을 잘 반영해줍니다
- 디자인 디테일 수정
- Chrome 브라우저로 html 파일을 열어 확인하고, AI와 대화해 디자인을 다듬습니다.
- 예: “버튼을 좀 더 둥글게 만들고 네온 보더 효과를 넣어줘”, “모바일에서도 가독성이 좋게 폰트 크기를 조절해줘”
- 로컬 확인 및 검토
- 수정 사항이 생길 때마다 브라우저에서 새로고침(F5)하여 변경된 내용을 실시간으로 확인합니다.
- 웹 배포 (GitHub Pages)
- 작업이 완료되면 AI에게 “이 프로젝트를 GitHub Pages로 배포해줘”라고 요청하여 전 세계 누구나 접속 가능한 URL을 생성합니다.
3. 제출물 상세 요구사항
- 결과물 파일:
index.html (모든 스타일과 스크립트가 포함된 단일 파일 권장)
- 이미지 파일이 담긴
img 폴더
- 필수 포함 섹션:
- Hero Section: 시선을 사로잡는 메인 카피와 브랜드 소개.
- Features: 우리 회사만의 주요 강점 3~4가지 (카드 형태 권장).
- About/Vision: 브랜드가 추구하는 가치와 철학.
- Contact: 문의하기 버튼 또는 정보가 담긴 푸터(Footer).
- 작업 보고서 (
branding-report.md):
- 선정 브랜드: 어떤 브랜드를 선택했는가?
- 핵심 명령어: 제작 과정에서 효과적이었던 프롬프트 2~3개.
- 제작 소감: AI와 협업하며 느낀 효율성이나 배운 점. 내 의도대로 주도하기 어려웠던 점.
- 배포 URL: GitHub Pages로 생성된 웹사이트 주소를
branding-report.md에 함께 기록하고 그룹 채팅방에도 공유해주세요!
💡 제작 팁
- 디자인 컨셉: “Linear 스타일”, “Bento Grid”, “Apple 스타일” 같은 키워드를 사용하면 AI가 훨씬 세련된 디자인을 뽑아냅니다.
- 이미지 활용: 적절한 이미지가 없다면 AI에게 “Unsplash에서 브랜드 분위기에 맞는 이미지를 가져와서 넣어줘”라고 요청해 보세요.
- 배포가 안 될 때: 당황하지 말고 에러 메시지를 복사해서 Claude에게 알려주세요. 배포 과정의 문제도 AI가 직접 해결해 줄 수 있습니다.