13주차: 바이브 코딩 프로젝트 II - 개발

개요

지난 주 복습: 탄탄한 기획서 완성

지난 12주차에서 여러분은 프로젝트를 기획하고, 구체적인 계획을 세웠습니다. 좋은 프로젝트 주제를 선정하는 법(실제로 필요한 것, 2주 안에 완성 가능, 바이브 코딩 적합)을 배웠고, 4대 원리로 문제를 분석하며, 단계별 계획을 수립했습니다.

특히 중요했던 것은 Agent 모드를 활용한 개발 전략을 세웠다는 점입니다. 어떻게 @workspace 멘션을 사용할지, 어떤 순서로 기능을 구현할지, 각 단계에서 어떻게 테스트할지를 미리 계획했습니다. 프롬프트 템플릿도 준비하고, 테스트 데이터도 마련했죠.

이제 그 기획서라는 지도를 손에 들고, GitHub Copilot Agent라는 강력한 협업 파트너와 함께 실제 여정을 시작하는 것입니다.

이번 주: 계획을 현실로

지난 주차에 여러분은 프로젝트를 기획하고, 구체적인 계획을 세웠습니다. 이제 그 계획을 실행에 옮길 시간입니다. 기획서라는 지도를 손에 들고, GitHub Copilot Agent라는 강력한 협업 파트너와 함께 실제 여정을 시작하는 것입니다.

이번 주차는 여러분이 지금까지 배운 모든 것을 실제로 적용하는 가장 중요한 시간입니다. 컴퓨팅 사고의 4대 원리, GitHub Copilot Agent와의 효과적인 대화법, 문제 해결 전략 등 모든 것이 하나로 합쳐집니다. 특히 Agent 모드를 적극 활용하여 여러 파일에 걸친 복잡한 작업도 효과적으로 처리하는 방법을 실전에서 경험하게 됩니다.

개발이라고 하면 어렵게 들릴 수 있습니다. 하지만 바이브 코딩에서의 개발은 코드를 직접 작성하는 것이 아닙니다. 여러분이 해야 할 일은 명확하게 생각하고, GitHub Copilot Agent에게 정확하게 전달하고, 결과를 확인하고 개선하는 것입니다. Agent 모드를 활용하면 프로젝트 전체를 이해하는 AI와 함께 효율적으로 작업할 수 있습니다.

이번 주차의 학습 목표:

• 기획서를 바탕으로 프로젝트를 단계적으로 구현하기
• GitHub Copilot Agent 모드를 활용하여 복잡한 작업 효과적으로 처리하기
• '@workspace' 멘션으로 프로젝트 컨텍스트를 활용한 개발하기
• 여러 파일에 걸친 기능을 Agent와 협업하여 구현하기
• 테스트와 개선을 반복하며 완성도 높이기
• 예상치 못한 문제를 Agent와 함께 해결하는 경험 쌓기
• 작동하는 프로젝트를 완성하기

개발 시작하기

첫 단계를 시작하기 전에, 마음의 준비와 환경 설정이 필요합니다.

시작 전 점검

개발을 시작하기 전에 다음을 확인하세요:

기획서 준비:

• 지난 주에 작성한 기획서를 손에 닿는 곳에 두세요
• 단계별 계획을 다시 한번 읽어보세요
• 준비한 프롬프트와 테스트 데이터를 확인하세요

환경 설정:

• GitHub Copilot이 활성화되어 있는지 확인하세요
• 프로젝트를 저장할 폴더를 만드세요
• 백업 폴더도 함께 만들어두세요

멘탈 준비:

• 완벽을 기대하지 마세요. 처음부터 잘 작동하지 않을 수 있습니다
• 실수는 학습의 일부입니다. 두려워하지 마세요
• 막히면 기획서로 돌아올 것을 기억하세요

첫 번째 작은 성공 만들기

큰 프로젝트를 시작할 때 가장 중요한 것은 빠르게 첫 번째 작은 성공을 만드는 것입니다. "Hello, World!"처럼 간단하지만 작동하는 무언가를 먼저 완성하세요.

왜 작은 성공이 중요한가:

• 자신감이 생깁니다
• GitHub Copilot과의 협업 패턴을 익힙니다
• 개발 환경이 제대로 작동하는지 확인합니다
• 데이터 저장이나 파일 읽기 같은 기본 작업을 먼저 해결합니다

첫 번째 성공 예시:

독서 진행도 추적기를 만든다면:

• 첫 목표: "책 한 권의 정보를 입력받아서 화면에 출력하기"
• 이것만 되어도 성공입니다
• 저장, 목록, 통계 등은 나중에

가계부를 만든다면:

• 첫 목표: "지출 항목 하나를 입력받아서 화면에 출력하기"
• 카테고리 분류, 합계 계산, 그래프 등은 나중에

이렇게 아주 작은 것부터 시작하면, 30분 안에 첫 번째 성공을 경험할 수 있습니다. 그 성공이 다음 단계로 나아갈 동력이 됩니다.

GitHub Copilot Agent와의 첫 대화

기획서에 준비해둔 첫 번째 프롬프트를 GitHub Copilot Agent에게 보내봅시다. Agent 모드를 활용하면 프로젝트 전체를 이해하는 AI와 협업할 수 있습니다.

Agent 모드 활성화 방법:

1. Chat 창 열기:

   • 단축키: Ctrl + Alt + I (Windows/Linux) 또는 Cmd + Option + I (Mac)
   • 또는 메뉴: View → Chat

2. Agent 모드 선택:

   • Chat 입력창 하단의 모드 드롭다운 클릭
   • Ask / Edit / Agent 중에서 Agent 선택

3. Agent 모드의 특징:

   • 자율적으로 여러 파일을 생성하고 수정
   • 터미널 명령어 제안 및 실행
   • 프로젝트 전체 컨텍스트 이해
   • @workspace 멘션으로 더 강력한 컨텍스트 활용 가능

효과적인 첫 대화 구조 (Agent 모드):

1. @workspace 멘션: 프로젝트 전체 컨텍스트 활용
2. 프로젝트 소개: "무엇을 만들고 있는지" 설명
3. 현재 상태: "지금 어떤 파일들이 있는지" 또는 "새로 시작하는지"
4. 구체적 요청: "지금 무엇이 필요한지" 명확히
5. 예상 결과: "어떤 형태를 원하는지" 설명

대화 예시 1: 독서 진행도 추적기 (Agent 모드)

@workspace
독서 진행도를 추적하는 프로그램을 만들고 있어요.

현재 상태: 빈 프로젝트 (새로 시작)

첫 단계로 필요한 것:
1. 책 정보를 저장할 데이터 구조 (제목, 저자, 총 페이지, 읽은 페이지)
2. 책 한 권을 입력받아서 저장하는 기능
3. 저장한 내용을 화면에 출력하기

예상 결과:

책 제목: 클린 코드 저자: 로버트 C. 마틴 총 페이지: 400 읽은 페이지: 0

저장되었습니다!

간단한 파일로 저장하고, 다음에 추가할 수 있게 해주세요.
필요한 파일들을 만들어주세요.

Agent의 응답 예시:

다음과 같이 작업하겠습니다:

1. book.py 생성 - 책 정보를 다루는 부분
2. storage.py 생성 - JSON 파일로 저장/불러오기
3. main.py 생성 - 사용자와 상호작용하는 메인 프로그램

각 파일의 내용을 보여드릴게요. 확인 후 진행해주세요.

대화 예시 2: 가계부 (Agent 모드)

@workspace
간단한 가계부 프로그램을 만들려고 해요.

필요한 기능:
- 지출 내역 추가 (날짜, 카테고리, 항목, 금액)
- CSV 파일로 저장
- 저장된 내역 불러오기

첫 단계:
지출 하나를 입력받아서 CSV 파일에 저장하고,
다시 읽어서 화면에 보여주는 것부터 시작하고 싶어요.

필요한 파일 구조와 기본 코드를 만들어주세요.

Agent가 하는 일:

• 프로젝트 구조 파악
• 필요한 파일 목록 제시
• 각 파일의 역할 설명
• 코드 생성 후 확인 요청

여러분이 할 일:

1. Agent의 계획을 검토합니다
2. 적절하다고 판단되면 승인합니다
3. 생성된 파일들을 확인합니다
4. 실행해서 테스트합니다
5. 개선사항이 있으면 추가 요청합니다

Agent 모드의 장점:

• 프로젝트 전체를 이해하고 작업합니다
• 여러 파일을 동시에 만들거나 수정할 수 있습니다
• 파일 간의 연결을 자동으로 처리합니다
• 일관된 스타일과 패턴을 유지합니다

첫 대화가 완벽하지 않아도 괜찮습니다. Agent와 계속 대화하며 조정하고 개선해나가면 됩니다. Agent는 여러분의 피드백을 이해하고 점진적으로 나아집니다.

단계별 개발 진행

이제 본격적으로 기획서의 각 단계를 하나씩 구현해봅시다.

1단계: 핵심 데이터 구조 만들기 (Agent 모드 활용)

모든 프로젝트의 기초는 데이터를 어떻게 저장하고 관리할 것인가입니다. 복잡할 필요 없습니다. Agent 모드를 활용하면 데이터 구조와 관련 파일들을 한 번에 만들 수 있습니다.

데이터 구조 결정하기:

여러분의 프로젝트에서 다루는 정보가 무엇인지 생각해보세요.

독서 진행도 추적기라면:

• 책 제목
• 저자
• 총 페이지
• 읽은 페이지

가계부라면:

• 날짜
• 카테고리
• 항목
• 금액

GitHub Copilot Agent에게 요청하기:

@workspace
책 정보 저장 시스템을 만들고 싶어요.

데이터 구조:
- 제목 (문자열)
- 저자 (문자열)
- 총 페이지 (숫자)
- 읽은 페이지 (숫자)

요구사항:
1. JSON 파일로 저장
2. 여러 권의 책을 목록으로 관리
3. 저장 기능과 불러오기 기능 분리
4. 에러 처리 포함 (파일이 없을 때 등)

필요한 파일들을 만들고 구조를 잡아주세요.

또는 가계부:

@workspace
지출 내역 관리 시스템을 만들어주세요.

데이터 항목:
- 날짜 (YYYY-MM-DD 형식)
- 카테고리 (식비, 교통비, 쇼핑 등)
- 항목명
- 금액

저장 방식: CSV 파일
기능: 추가, 조회, 파일 저장/불러오기

파일 구조와 기본 코드를 만들어주세요.

Agent의 응답 예시:

다음과 같이 구성하겠습니다:

1. models/book.py - 책 정보 형태 정의
2. services/storage_service.py - 저장/불러오기 처리
3. data/books.json - 실제 데이터 파일 (처음엔 빈 목록)
4. utils/validators.py - 입력 검증

각 파일을 생성하고 기본 구조를 만들겠습니다.

테스트 방법:

1. Agent가 만든 파일들을 확인합니다
2. 간단한 테스트 데이터로 저장을 시도합니다
3. 저장된 파일을 확인합니다
4. 다시 불러오기를 테스트합니다

Agent에게 테스트 요청:

@workspace
방금 만든 저장 시스템이 제대로 작동하는지
테스트하는 간단한 예제 코드를 만들어주세요.

이것이 작동하면 첫 번째 중요한 고비를 넘은 것입니다!

2단계: 추가 기능 구현하기 (Agent의 멀티 파일 편집)

데이터를 저장할 수 있게 되었으니, 이제 새로운 항목을 추가하는 기능을 만들어봅시다. Agent 모드는 여러 파일을 동시에 수정할 수 있어서 매우 편리합니다.

사용자 입력 받기 (Agent 활용):

@workspace
기존 프로젝트에 사용자 입력 기능을 추가하고 싶어요.

추가할 기능:
1. 사용자에게 책 제목, 저자, 총 페이지를 입력받기
2. 입력받은 정보를 검증하기 (비어있지 않은지, 페이지는 숫자인지)
3. 검증 통과하면 JSON 파일에 추가하기
4. 성공/실패 메시지 보여주기

관련된 파일들을 찾아서 적절히 수정해주세요.

Agent가 하는 일:

• 기존 파일들을 확인합니다
• 어떤 파일을 수정해야 할지 판단합니다
• 각 파일의 변경사항을 제시합니다
• 승인 후 여러 파일을 동시에 수정합니다

입력 검증 강화:

@workspace
입력 검증을 더 강화하고 싶어요.

검증 규칙:
- 제목과 저자: 빈 문자열이면 안 됨, 최소 2자 이상
- 총 페이지: 숫자여야 하고, 1 이상 10000 이하
- 검증 실패 시: 구체적인 오류 메시지와 함께 재입력 요청

현재 validators.py에 검증 로직이 있다면 그것을 개선하고,
없다면 새로 만들어서 main.py에서 사용하게 해주세요.

여러 개 연속 추가:

@workspace
사용자가 여러 항목을 연속으로 추가할 수 있게 개선하고 싶어요.

개선 사항:
- 한 항목 추가 후 "더 추가하시겠습니까? (y/n)" 물어보기
- 'y'면 계속, 'n'이면 메인 메뉴로
- 추가한 전체 개수를 마지막에 표시

main.py를 수정해주세요.

이렇게 Agent에게 요청하면:

• 필요한 파일들을 자동으로 찾습니다
• 각 파일의 적절한 위치에 코드를 추가합니다
• 파일 간의 연결을 올바르게 처리합니다

매번 테스트하기:

@workspace
방금 추가한 기능들을 테스트하는 코드를 만들어주세요.
각 검증 규칙이 제대로 작동하는지 확인할 수 있게요.

새 기능을 추가했을 때:

• 이전 기능은 여전히 잘 작동하나요?
• 새 기능이 의도대로 작동하나요?
• 예상치 못한 오류는 없나요?

3단계: 조회 및 표시 기능 (Agent와 함께 디자인)

데이터를 저장할 수 있게 되었으니, 이제 저장된 데이터를 보기 좋게 표시해봅시다. Agent는 일관된 스타일로 여러 화면을 만들어줍니다.

전체 목록 보기:

@workspace
저장된 모든 책을 보기 좋게 표시하는 기능을 추가하고 싶어요.

표시 형식:

=== 나의 독서 목록 === 번호 | 제목 | 저자 | 진행률 -----|------------------|---------------|-------- 1 | 클린 코드 | 로버트 마틴 | 25% 2 | 이펙티브 자바 | 조슈아 블로크 | 0%

요구사항:
- 표 형식으로 깔끔하게
- 진행률 = (읽은 페이지 / 총 페이지) × 100
- 책이 없으면 "등록된 책이 없습니다" 메시지

필요한 파일들을 수정해주세요.

필터링 기능:

@workspace
책 목록을 필터링하는 기능을 추가하고 싶어요.

필터 옵션:
1. 읽는 중인 책만 (0% < 진행률 < 100%)
2. 완독한 책만 (진행률 = 100%)
3. 아직 시작 안 한 책 (진행률 = 0%)

사용자가 옵션을 선택하면 해당 책들만 보여주기.
관련 파일들을 수정해주세요.

정렬 기능:

@workspace
책 목록 정렬 기능을 추가하고 싶어요.

정렬 기준:
- 진행률 낮은 순 (먼저 읽어야 할 책)
- 진행률 높은 순 (거의 다 읽은 책)
- 제목 가나다순
- 최근 추가순

메뉴에서 선택할 수 있게 하고,
선택한 기준으로 정렬된 목록을 보여주세요.

요약 통계:

@workspace
전체 통계를 보여주는 화면을 추가하고 싶어요.

표시할 정보:
- 전체 책 권수
- 완독한 책 권수
- 읽는 중인 책 권수
- 전체 평균 진행률

보기 좋게 포맷팅해서 보여주고,
메인 메뉴에 "통계 보기" 항목을 추가해주세요.

"전체 책 수, 완독한 책 수, 평균 진행률을 계산해서 보여줘."

"이달 총 지출 금액과 카테고리별 합계를 보여줘."

각 기능을 추가할 때마다 실제로 사용해보세요. 보기 편한가요? 원하는 정보를 쉽게 찾을 수 있나요? 불편한 부분이 있다면 GitHub Copilot에게 개선을 요청하세요.

4단계: 수정 및 삭제 기능

정보를 추가할 수 있다면, 수정하고 삭제할 수도 있어야 합니다.

수정 기능:

"책 제목을 입력받아서 해당 책의 읽은 페이지를 업데이트하고 싶어. 새로운 페이지 번호를 입력받아서 저장해줘."

"특정 지출 항목의 카테고리를 수정하고 싶어. 항목명으로 찾아서 새 카테고리로 바꿔줘."

삭제 기능:

"책 제목을 입력받아서 해당 책을 목록에서 삭제해줘. 삭제하기 전에 '정말 삭제하시겠습니까?'라고 확인받으면 좋겠어."

"날짜와 항목명으로 지출 내역을 찾아서 삭제해줘."

실수 방지:

삭제는 되돌릴 수 없으므로 조심해야 합니다.

"삭제하기 전에 해당 항목의 정보를 보여주고, 사용자가 '예'라고 입력해야만 삭제되게 해줘."

5단계: 부가 기능 추가

핵심 기능(추가, 조회, 수정, 삭제)이 모두 작동한다면, 이제 부가 기능을 추가할 차례입니다. 시간이 충분하다면 시도해보세요.

통계 기능:

"월별로 완독한 책 수를 계산해서 보여줘."

"카테고리별 지출 비율을 원 그래프로 만들어줘."

검색 기능:

"책 제목의 일부만 입력해도 검색되게 해줘. 예를 들어 '해리'를 입력하면 '해리포터'가 나오게."

"금액 범위로 지출을 검색하고 싶어. 최소 금액과 최대 금액을 입력받아서 그 사이의 항목들을 보여줘."

목표 설정:

"월간 독서 목표를 설정하고, 현재 얼마나 달성했는지 보여줘."

"월간 지출 목표를 설정하고, 남은 예산을 보여줘."

부가 기능은 "있으면 좋은" 것이지 필수는 아닙니다. 시간이 부족하다면 나중으로 미루고, 핵심 기능을 더 안정적으로 만드는 데 집중하세요.

반복적 개선 및 테스트

기능을 추가하는 것만큼 중요한 것이 테스트하고 개선하는 것입니다.

체계적으로 테스트하기

각 기능이 제대로 작동하는지 확인해야 합니다. 단순히 "한 번 해봤는데 됐어"가 아니라, 다양한 경우를 시도해보세요.

정상 케이스 테스트:

먼저 정상적인 사용 시나리오를 테스트하세요.

독서 진행도 추적기라면:

1. 책 한 권 추가
2. 목록 확인
3. 진행도 업데이트
4. 다시 목록 확인 (진행률이 바뀌었나?)
5. 완독 표시 (100%로 만들기)
6. 완독 목록에 나타나나?

가계부라면:

1. 지출 항목 추가
2. 목록 확인
3. 카테고리별 합계 확인
4. 특정 카테고리만 필터링
5. 항목 수정
6. 항목 삭제

경계 케이스 테스트:

특이한 상황에서도 잘 작동하는지 확인하세요.

• 데이터가 하나도 없을 때 목록 조회하면?
• 존재하지 않는 책을 수정하려고 하면?
• 읽은 페이지가 총 페이지보다 크면?
• 금액에 음수를 입력하면?
• 날짜 형식이 잘못되었으면?

오류 케이스 테스트:

일부러 잘못된 입력을 해보세요.

• 숫자 입력란에 문자 입력
• 필수 항목을 비워두고 저장 시도
• 같은 이름의 책을 두 번 추가
• 파일이 없는 상태에서 조회

각 경우에 프로그램이 어떻게 반응하나요? 오류 메시지가 나오나요? 프로그램이 멈추나요? 이상한 결과가 나오나요?

문제를 발견하면 GitHub Copilot에게 수정을 요청하세요:

"숫자를 입력받는 부분에서 사용자가 문자를 입력하면 오류가 나. 숫자가 아니면 '숫자를 입력해주세요'라고 메시지를 보여주고 다시 입력받게 해줘."

사용성 개선하기

기능이 작동한다고 해서 끝이 아닙니다. 사용하기 편해야 합니다.

메뉴 시스템:

처음에는 각 기능을 개별적으로 테스트했지만, 이제 하나로 통합할 시간입니다.

"메인 메뉴를 만들고 싶어. 다음 옵션을 보여줘:

1. 책 추가
2. 목록 보기
3. 진행도 업데이트
4. 책 삭제
5. 통계 보기
6. 종료

사용자가 번호를 선택하면 해당 기능을 실행하고, 다시 메뉴로 돌아오게 해줘."

명확한 안내 메시지:

사용자가 무엇을 해야 할지 항상 알 수 있어야 합니다.

"각 입력 단계마다 무엇을 입력해야 하는지 설명을 보여줘. 예를 들어 '책 제목을 입력하세요:' 같이."

결과 피드백:

작업이 성공했는지 사용자에게 알려주세요.

"책을 추가한 후에 '책이 성공적으로 추가되었습니다!' 메시지를 보여줘."

"삭제한 후에 '항목이 삭제되었습니다' 메시지를 보여줘."

시각적 개선:

정보를 보기 좋게 표시하세요.

"표를 그릴 때 선으로 구분해서 읽기 쉽게 해줘."

"진행률을 퍼센트 숫자와 함께 막대 그래프로도 보여주면 좋겠어."

성능 개선하기

데이터가 많아지면 느려질 수 있습니다. 미리 대비하세요.

"책이 100권 이상일 때도 빠르게 목록을 보여줄 수 있을까? 지금 방법이 너무 느리다면 더 효율적인 방법을 제안해줘."

"한 번에 너무 많은 항목을 보여주지 말고, 페이지를 나누어서 보여주면 어떨까? 한 페이지에 10개씩만 보여주고, 다음/이전 페이지로 이동할 수 있게."

문제 해결 전략

개발 중에는 반드시 문제가 생깁니다. 당황하지 말고 체계적으로 접근하세요.

일반적인 문제와 해결법

문제 1: GitHub Copilot이 원하는 대로 작동하지 않음

증상: 요청한 것과 다른 결과가 나옴

해결법:

1. 요청을 더 구체적으로 다시 해보세요
2. 예시를 추가하세요: "예를 들어 입력이 '해리포터, 500'이면 출력은 '제목: 해리포터, 페이지: 500'이 되어야 해"
3. 단계를 더 작게 나누세요: 한 번에 모든 걸 요청하지 말고 하나씩

문제 2: 오류 메시지가 나옴

증상: 프로그램 실행 시 오류 발생

해결법:

1. 오류 메시지를 정확히 GitHub Copilot에게 보여주세요: "이런 오류가 났어: [오류 메시지 전체 복사]"
2. 어떤 상황에서 오류가 나는지 설명하세요: "책을 추가하려고 할 때 이 오류가 나"
3. GitHub Copilot이 원인을 찾고 수정 방법을 제시할 것입니다

문제 3: 데이터가 저장되지 않거나 사라짐

증상: 입력한 데이터가 다음에 실행하면 없어짐

해결법:

1. 파일이 실제로 생성되었는지 확인하세요
2. 파일 경로가 올바른지 확인하세요
3. GitHub Copilot에게: "데이터를 파일에 저장하는 부분을 다시 확인해줘. 프로그램을 종료하고 다시 실행해도 데이터가 남아있어야 해"

문제 4: 기능이 충돌함

증상: 새 기능을 추가했더니 이전 기능이 작동하지 않음

해결법:

1. 최근에 추가한 것을 하나씩 제거하면서 어디서 문제가 생겼는지 찾으세요
2. 백업해둔 이전 버전으로 돌아가세요
3. 문제가 생긴 부분을 GitHub Copilot에게 보여주고: "이 기능을 추가했더니 저장이 안 돼. 뭐가 잘못된 걸까?"

문제 5: 너무 복잡해져서 감당이 안 됨

증상: 코드가 너무 길고 복잡해져서 뭐가 뭔지 모르겠음

해결법:

1. 잠시 멈추고 기획서로 돌아가세요
2. 핵심 기능만 남기고 나머지는 일단 제거하세요
3. 다시 처음부터 차근차근, 하지만 이번에는 경험이 있으니 더 잘할 수 있습니다

막혔을 때 시도해볼 것들

1. 5분 휴식

30분 이상 같은 문제로 막혀 있다면, 5분간 완전히 다른 것을 하세요. 물 마시기, 스트레칭, 창밖 보기. 돌아와서 다시 보면 해결책이 보일 수 있습니다.

2. 문제를 말로 설명하기

가족이나 친구에게 (프로그래밍을 모르는 사람이라도) 문제를 설명해보세요. "이게 이렇게 되어야 하는데, 저렇게 돼"라고 말하다 보면 스스로 해결책을 떠올릴 때가 많습니다.

3. 다른 접근법 시도

같은 문제를 다른 방식으로 해결해보세요. JSON이 안 되면 CSV를, CSV가 안 되면 텍스트 파일을 시도해보세요. 자동 분류가 어려우면 수동 분류로 시작하세요.

4. 기획서의 우선순위 재확인

지금 막힌 부분이 정말 필수인가요? 아니면 나중에 해도 되나요? 핵심 기능에 집중하고, 부가 기능은 미루세요.

5. 작동하는 버전 보존

새로운 시도를 하기 전에, 지금 작동하는 버전을 별도로 저장하세요. 그러면 실험이 실패해도 작동하는 버전으로 돌아갈 수 있습니다.

동료 피드백 받기

혼자 작업하다 보면 놓치는 부분이 있습니다. 다른 사람의 관점이 필요합니다.

피드백 준비하기

피드백을 받기 전에 프로젝트를 정리하세요.

준비 사항:

1. 프로그램이 실행 가능한 상태로 만들기
2. 간단한 사용 설명서 작성 (어떻게 시작하고, 각 기능을 어떻게 사용하는지)
3. 테스트 데이터 몇 개 미리 넣어두기
4. 알려진 문제나 제한사항 정리

사용 설명서 예시:

독서 진행도 추적기 사용법

1. 프로그램 실행
2. 메뉴에서 번호 선택
   - 1: 새 책 추가 (제목, 저자, 총 페이지 입력)
   - 2: 책 목록 보기
   - 3: 읽은 페이지 업데이트
   - 4: 통계 보기
   - 5: 종료

알려진 제한사항:
- 같은 제목의 책을 두 권 추가하면 첫 번째 것만 업데이트됨
- 페이지 수는 10,000 이하만 지원

효과적인 피드백 받기

피드백을 받을 때는 구체적인 질문을 준비하세요.

좋은 질문들:

• "이 프로그램이 무엇을 하는지 설명 없이 알 수 있어?"
• "사용법이 직관적이야? 어떤 부분이 헷갈려?"
• "어떤 기능이 가장 유용해 보여?"
• "어떤 기능이 빠진 것 같아?"
• "만약 매일 사용한다면, 어떤 점이 불편할 것 같아?"

피드백 받는 자세:

• 방어하지 마세요. "그건 이렇게 하면 돼"라고 설명하는 대신, 왜 그런 피드백이 나왔는지 생각하세요
• 메모하세요. 나중에 개선할 때 참고할 수 있습니다
• "좋다"는 말만 듣고 싶어하지 마세요. 건설적인 비판이 더 유용합니다
• 모든 피드백을 다 반영할 필요는 없습니다. 중요한 것을 선택하세요

피드백 반영하기

받은 피드백을 바탕으로 개선합니다.

우선순위 정하기:

모든 피드백을 한 번에 반영하려 하지 마세요. 우선순위를 정하세요:

1. 치명적인 문제: 프로그램이 멈추거나 데이터가 손실되는 문제 (즉시 수정)
2. 주요 사용성 문제: 사용하기 매우 불편한 점 (빨리 수정)
3. 개선 제안: 있으면 좋은 기능 (시간이 있으면 반영)
4. 개인 취향: 한 사람만의 의견 (참고만)

반영 예시:

피드백: "책 제목을 정확히 입력해야 해서 불편해요. 일부만 입력하면 검색되면 좋겠어요." → 우선순위: 주요 사용성 문제 → GitHub Copilot에게: "책 제목의 일부만 입력해도 검색되게 해줘. 대소문자 구분 없이."

피드백: "완독한 책이 몇 권인지 알고 싶어요." → 우선순위: 개선 제안 → GitHub Copilot에게: "진행률이 100%인 책의 개수를 세어서 '완독: X권'이라고 보여줘."

피드백: "색깔이 있으면 좋겠어요." → 우선순위: 개인 취향 → 시간이 많이 남으면 고려

완성도 높이기

기본 기능이 모두 작동한다면, 이제 마지막 손질을 할 시간입니다.

일관성 확보

프로젝트 전체가 일관된 느낌을 주어야 합니다.

메시지 스타일:

• 성공 메시지: "✓ 책이 추가되었습니다!"
• 오류 메시지: "✗ 오류: 페이지는 숫자여야 합니다."
• 안내 메시지: "→ 책 제목을 입력하세요:"

모든 메시지가 같은 스타일을 따르면 훨씬 전문적으로 보입니다.

입력 형식:

• 항상 같은 방식으로 입력받기
• 날짜는 항상 같은 형식 (YYYY-MM-DD)
• 선택지는 항상 숫자로 (1, 2, 3...)

출력 형식:

• 목록은 항상 같은 형태의 표로
• 통계는 항상 같은 순서로

오류 처리 강화

모든 가능한 오류 상황을 대비하세요.

파일 관련 오류:

"파일이 없으면 새로 만들고, 파일을 읽을 수 없으면 '데이터 파일을 읽을 수 없습니다'라고 메시지를 보여줘."

입력 오류:

"사용자가 잘못된 메뉴 번호를 입력하면 '1~5 사이의 숫자를 입력하세요'라고 하고 다시 물어봐."

데이터 오류:

"JSON 파일이 손상되었으면 백업을 불러오고, 백업도 없으면 빈 상태로 시작해."

문서화

나중에 자신이 다시 사용하거나, 다른 사람과 공유할 때를 대비해 문서를 작성하세요.

README 파일 작성:

# 독서 진행도 추적기

## 소개
읽고 있는 책의 진행도를 추적하고 독서 통계를 보여주는 프로그램입니다.

## 기능
- 책 추가 및 관리
- 읽은 페이지 업데이트
- 진행률 자동 계산
- 완독 책 통계

## 사용법
1. 프로그램 실행
2. 메뉴에서 원하는 기능 선택
3. 안내에 따라 정보 입력

## 요구사항
- Python 3.7 이상

## 데이터 저장 위치
- books.json 파일에 모든 데이터 저장

주석 추가:

GitHub Copilot에게 요청하세요:

"코드의 각 부분에 무엇을 하는지 설명하는 주석을 추가해줘. 나중에 다시 볼 때 이해하기 쉽게."

최종 테스트

완성했다고 생각되면, 처음부터 끝까지 다시 한번 테스트하세요.

전체 시나리오 테스트:

1. 프로그램을 처음 실행 (데이터 없는 상태)
2. 책 3권 추가
3. 각 책의 진행도 업데이트
4. 한 권 완독 처리
5. 목록 확인
6. 통계 확인
7. 한 권 삭제
8. 프로그램 종료
9. 다시 실행하여 데이터가 남아있는지 확인

모든 단계가 자연스럽게 진행되나요? 어색하거나 불편한 부분이 있나요? 있다면 마지막으로 개선하세요.

실습 결과 요약

축하합니다! 여러분은 기획부터 개발, 테스트, 개선까지 전체 개발 사이클을 경험했습니다. 이것은 단순히 프로그램 하나를 만든 것 이상의 의미가 있습니다.

핵심 학습 내용

체계적인 개발 프로세스: 기획서를 바탕으로 단계별로 진행하는 것이 얼마나 효과적인지 배웠습니다. 명확한 계획이 있으면 막힐 때도 방향을 잃지 않습니다.

GitHub Copilot과의 협업: 효과적인 프롬프트 작성, 결과 확인, 피드백 제공, 반복적 개선의 사이클을 익혔습니다. 이것은 앞으로 모든 바이브 코딩 프로젝트에 적용할 수 있는 패턴입니다.

문제 해결 능력: 예상치 못한 문제를 만났을 때 당황하지 않고 체계적으로 접근하는 방법을 배웠습니다. 문제를 작게 나누고, 하나씩 해결하고, 필요하면 도움을 요청하는 것.

반복적 개선의 가치: 한 번에 완벽하게 만들 필요 없이, 작동하는 버전을 먼저 만들고 점진적으로 개선하는 것이 더 효과적임을 경험했습니다.

실용적 사고: 모든 기능을 다 구현하는 것보다, 핵심 기능을 제대로 완성하는 것이 더 중요함을 배웠습니다. 80-20 원칙의 실제 적용입니다.

여러분이 만든 것의 가치

여러분이 만든 프로그램은 단순한 연습 프로젝트가 아닙니다:

실용성: 실제로 여러분이나 다른 사람이 사용할 수 있는 도구입니다.

학습: 바이브 코딩의 전 과정을 경험했습니다. 이 경험은 다음 프로젝트를 훨씬 쉽게 만들 것입니다.

자신감: "나도 할 수 있다"는 것을 증명했습니다. 코드를 직접 작성하지 않아도, 명확하게 생각하고 효과적으로 소통하면 원하는 것을 만들 수 있습니다.

포트폴리오: 이것은 여러분의 첫 번째 바이브 코딩 프로젝트입니다. 앞으로 더 많은 프로젝트를 만들 때 참고할 수 있는 템플릿입니다.

다음 단계를 위한 준비

다음 주차에는 프로젝트를 발표하고 공유하는 시간을 가집니다. 그 준비를 위해:

발표 자료 준비:

• 프로젝트 소개 (무엇을 만들었는지, 왜 만들었는지)
• 주요 기능 시연
• 개발 과정에서 배운 점
• 어려웠던 점과 해결 방법

프로젝트 정리:

• 코드 정리 (불필요한 부분 제거)
• 문서화 (README 파일 완성)
• 최종 테스트
• 데모용 샘플 데이터 준비

성찰:

• 이 프로젝트를 하면서 무엇을 배웠나요?
• 가장 어려웠던 순간은 언제였나요? 어떻게 극복했나요?
• 다음에 비슷한 프로젝트를 한다면 어떻게 다르게 할 건가요?
• 이 경험을 다른 사람에게 어떻게 설명하고 싶나요?

이런 질문들에 대한 답을 정리해두면, 발표할 때도 도움이 되고, 스스로의 성장을 확인할 수 있습니다.

지속적인 개선:

프로젝트가 "완성"되었다고 해서 끝이 아닙니다. 앞으로도 계속 사용하고 개선할 수 있습니다:

• 사용하면서 불편한 점 발견하면 개선
• 새로운 아이디어가 떠오르면 기능 추가
• GitHub Copilot의 새로운 기능 활용해보기
• 다른 사람의 피드백 반영

여러분의 프로젝트는 살아있는 것입니다. 계속 진화할 수 있습니다.

이번 주차 완료 체크리스트:

• 핵심 기능이 모두 작동한다
• 테스트를 거쳐 주요 버그가 수정되었다
• 피드백을 받고 중요한 부분을 개선했다
• 사용 설명서가 작성되었다
• 프로젝트가 안정적으로 실행된다
• 개발 과정에서 배운 점을 정리했다
• 발표 준비가 되었다

모든 항목에 체크할 수 있다면, 여러분은 성공적으로 바이브 코딩 프로젝트를 완성한 것입니다!

다음 주차에는 여러분의 성과를 자랑스럽게 공유하고, 다른 사람들의 프로젝트에서도 배우는 시간을 가지겠습니다. 잘 하셨습니다!

실전 개발 사례 연구

여러분의 이해를 돕기 위해, 실제 프로젝트 개발 과정을 단계별로 살펴보겠습니다. 독서 진행도 추적기를 예시로, 기획부터 완성까지의 전 과정을 자세히 알아봅시다.

사례: 독서 진행도 추적기 개발 과정

프로젝트 목표: 읽고 있는 책들의 진행도를 추적하고, 독서 목표를 관리하는 간단한 도구

개발 일정: 2주 (하루 1~2시간)

1일차: 첫 성공 만들기

목표: 책 한 권의 정보를 입력받아 저장하고 다시 불러오기

GitHub Copilot과의 대화:

여러분: "독서 진행도 추적 프로그램을 만들고 있어. 먼저 책 한 권의 정보(제목, 저자, 총 페이지)를 입력받아서 JSON 파일로 저장하고, 다시 불러오는 간단한 기능부터 만들고 싶어."

GitHub Copilot: [JSON 파일 저장/불러오기 코드 제안]

테스트:

1. 제목: "해리포터", 저자: "롤링", 총 페이지: 500 입력
2. 파일이 생성되었는지 확인
3. 프로그램 재실행 후 데이터가 그대로 있는지 확인

결과: 성공! 데이터가 저장되고 불러와집니다.

배운 점:

• JSON 파일 형식이 생각보다 간단함
• 파일 경로를 현재 디렉토리로 하면 찾기 쉬움
• GitHub Copilot의 첫 제안이 바로 작동함

소요 시간: 약 40분

2일차: 여러 책 관리하기

목표: 여러 권의 책을 리스트로 저장하고 관리하기

GitHub Copilot과의 대화:

여러분: "이제 여러 권의 책을 저장하고 싶어. 기존 JSON 파일에 책들을 리스트로 저장하고, 새 책을 추가할 때 리스트에 추가되게 해줘. 각 책에는 ID도 부여하면 좋겠어."

GitHub Copilot: [리스트 기반 데이터 구조 제안]

여러분: "좋아. 이제 책을 추가한 후에 '더 추가하시겠습니까?'라고 물어보고, '네'라고 하면 계속 추가할 수 있게 해줘."

테스트:

1. 책 3권 연속으로 추가
2. 파일 확인 - 3권이 모두 저장되었는가?
3. ID가 자동으로 부여되었는가?

발견한 문제: 같은 ID가 중복 생성되는 문제 발견

해결: 여러분: "ID가 중복되는 문제가 있어. 기존 책들 중 가장 큰 ID를 찾아서, 그보다 1 큰 ID를 새 책에 부여해줘."

결과: 문제 해결, 각 책에 고유 ID 부여됨

배운 점:

• 처음 시도에서 완벽하지 않아도 괜찮음
• 문제를 발견하면 즉시 GitHub Copilot에게 설명하고 수정 가능
• 테스트를 꼼꼼히 해야 문제를 발견할 수 있음

소요 시간: 약 1시간 20분

3일차: 목록 보기 기능

목표: 저장된 모든 책을 보기 좋은 형태로 표시하기

GitHub Copilot과의 대화:

여러분: "저장된 모든 책을 표 형식으로 보여주고 싶어. ID, 제목, 저자, 진행률을 컬럼으로 하되, 진행률은 아직 계산 안 했으니 0%로 표시하면 돼."

GitHub Copilot: [표 형식 출력 코드 제안]

첫 시도 결과: 표가 깔끔하지 않음 - 제목이 길면 정렬이 안 맞음

개선 요청: 여러분: "표가 좀 더 깔끔했으면 좋겠어. 각 컬럼의 너비를 일정하게 맞추고, 제목이 너무 길면 잘라줘."

GitHub Copilot: [개선된 표 형식 제안]

추가 요청: 여러분: "표 위에 '총 X권의 책이 있습니다'라는 메시지도 보여줘."

결과: 보기 좋은 목록 완성

배운 점:

• 처음 결과가 만족스럽지 않으면 구체적으로 개선 요청
• "깔끔하게"처럼 막연한 표현보다 "컬럼 너비 일정하게"처럼 구체적 표현이 좋음

소요 시간: 약 1시간

4~5일차: 진행도 업데이트 기능

목표: 읽은 페이지를 입력받아 진행률 계산하기

GitHub Copilot과의 대화:

여러분: "사용자에게 책 ID를 입력받아서 해당 책을 찾고, 현재까지 읽은 페이지를 입력받아서 업데이트하고 싶어. 진행률은 (읽은페이지/총페이지)*100으로 계산해줘."

테스트 중 발견한 문제들:

1. 존재하지 않는 ID 입력 시 오류

   • 해결: "ID를 찾을 수 없으면 '해당 책이 없습니다' 메시지 보여주고 다시 입력받게 해줘"

2. 읽은 페이지가 총 페이지보다 큼

   • 해결: "읽은 페이지가 총 페이지를 초과하면 오류 메시지 보여줘"

3. 음수 입력

   • 해결: "읽은 페이지는 0 이상이어야 해. 음수면 다시 입력받게 해줘"

추가 기능: 여러분: "진행률이 100%가 되면 '축하합니다! 완독하셨습니다!' 메시지를 보여줘."

결과: 안정적인 진행도 업데이트 기능 완성

배운 점:

• 예외 상황을 하나씩 발견하고 처리하는 과정이 중요
• 사용자 입력은 항상 검증해야 함
• 작은 성취(완독)에 축하 메시지를 주면 사용 경험이 좋아짐

소요 시간: 약 2시간 30분 (양일간)

6일차: 메뉴 시스템 통합

목표: 모든 기능을 하나의 메뉴로 통합하기

GitHub Copilot과의 대화:

여러분: "이제 메인 메뉴를 만들고 싶어. 다음 옵션을 보여주고 사용자가 선택하면 해당 기능을 실행한 후 다시 메뉴로 돌아오게 해줘:

1. 책 추가
2. 책 목록 보기
3. 진행도 업데이트
4. 종료"

개선 사항:

• 잘못된 메뉴 번호 입력 시 처리
• 메뉴 표시를 더 보기 좋게
• 각 기능 실행 후 "계속하려면 Enter를 누르세요" 메시지

결과: 통합된 사용자 인터페이스 완성

배운 점:

• 개별 기능들을 통합하면서 전체적인 흐름 파악
• 사용자 경험을 고려한 작은 디테일이 중요

소요 시간: 약 1시간 30분

7일차: 통계 기능 추가

목표: 전체 통계 보여주기 (부가 기능)

GitHub Copilot과의 대화:

여러분: "통계 메뉴를 추가하고 싶어. 다음 정보를 보여줘:

• 전체 책 수
• 완독한 책 수 (진행률 100%)
• 읽는 중인 책 수 (0% < 진행률 < 100%)
• 평균 진행률"

결과: 유용한 통계 정보 제공

추가 아이디어 (시간이 있어서 구현): 여러분: "진행률 구간별로 책을 분류해서 보여줄 수 있을까?

• 시작 안 함 (0%)
• 읽는 중 (1~99%)
• 완독 (100%)"

배운 점:

• 핵심 기능이 완성되면 부가 기능 추가가 쉬워짐
• 데이터를 다양한 관점에서 보여주면 유용성이 증가

소요 시간: 약 1시간

8~9일차: 테스트 및 버그 수정

체계적 테스트:

1. 정상 시나리오:

   • 책 5권 추가
   • 각 책의 진행도를 다르게 업데이트
   • 목록 확인
   • 통계 확인
   • 프로그램 종료 후 재실행하여 데이터 유지 확인

2. 경계 케이스:

   • 데이터 없이 시작
   • 한 권만 있을 때
   • 모든 책이 완독일 때
   • 페이지 수가 1일 때

3. 오류 상황:

   • 잘못된 입력 (문자 대신 숫자, 음수 등)
   • 존재하지 않는 ID
   • 빈 문자열 입력

발견한 버그와 수정:

1. 책이 하나도 없을 때 평균 진행률 계산 오류

   • 해결: 0으로 나누기 방지

2. 제목이 매우 긴 경우 표 깨짐

   • 해결: 30자 이상이면 잘라내기

3. JSON 파일이 수동으로 수정되어 형식이 깨진 경우

   • 해결: 파일 읽기 오류 시 백업 생성 후 새로 시작

배운 점:

• 체계적인 테스트로 많은 버그 발견
• 사용자는 예상하지 못한 방식으로 프로그램을 사용할 수 있음
• 방어적 프로그래밍이 중요

소요 시간: 약 3시간 (양일간)

10일차: 피드백 받고 개선

피드백 요청: 친구에게 프로그램을 사용해보게 함

받은 피드백:

1. "책 제목을 정확히 기억 못 해서 ID를 찾기 어려워요"

   • 개선: 책 목록에서 제목 일부로 검색 기능 추가

2. "완독한 책만 따로 보고 싶어요"

   • 개선: 완독 목록 메뉴 추가

3. "읽은 날짜를 기록하면 좋겠어요"

   • 판단: 시간 부족으로 다음 버전에 추가하기로 결정

반영 결과: 1, 2번 피드백 반영하여 사용성 크게 개선

배운 점:

• 개발자 관점과 사용자 관점이 다를 수 있음
• 모든 피드백을 반영할 필요는 없음, 우선순위 판단 중요

소요 시간: 약 2시간

11~12일차: 문서화 및 마무리

README 작성:

• 프로그램 소개
• 설치 및 실행 방법
• 기능 설명
• 사용 예시
• 알려진 제한사항

코드 정리:

• 불필요한 부분 제거
• 주석 추가 (GitHub Copilot에게 요청)
• 일관된 형식 적용

데모 준비:

• 샘플 데이터 준비 (다양한 진행률의 책 10권)
• 발표용 시나리오 작성
• 스크린샷 캡처

배운 점:

• 문서화가 생각보다 중요함
• 나중에 다시 볼 때, 또는 다른 사람에게 공유할 때 필수

소요 시간: 약 2시간 (양일간)

프로젝트 완성 후 성찰

성공한 점:

• 계획한 핵심 기능 모두 구현
• 안정적으로 작동하는 실용적 도구 완성
• 실제로 사용하고 있음 (독서 관리에 유용)

어려웠던 점:

• 예외 상황 처리가 생각보다 복잡함
• 사용자 인터페이스를 직관적으로 만드는 것이 쉽지 않음

배운 교훈:

• 작게 시작하고 점진적으로 확장하는 전략이 효과적
• GitHub Copilot과의 명확한 소통이 핵심
• 테스트와 피드백이 완성도를 높임

다음에 개선할 점:

• 더 일찍 피드백 받기
• 예외 처리를 처음부터 고려하기
• 데모 데이터를 미리 준비하기

이 사례에서 배울 점

단계적 진행의 중요성: 각 날마다 명확한 목표를 설정하고 달성함으로써 꾸준한 진전을 이룸

문제 해결 패턴: 문제 발견 → GitHub Copilot에게 구체적 설명 → 해결 → 테스트 → 다음 단계

현실적 범위 설정: 모든 피드백을 다 반영하지 않고, 시간 내에 완성 가능한 것에 집중

반복적 개선: 완벽한 첫 버전보다, 작동하는 버전을 만들고 계속 개선

개발 중 마인드셋 유지하기

2주간의 개발 과정은 단순히 기술적 도전만이 아닙니다. 심리적, 정서적 도전이기도 합니다.

동기 부여 유지하기

작은 성취 축하하기:

매일 목표를 달성하면 스스로에게 보상하세요:

• 좋아하는 간식 먹기
• 짧은 게임이나 영상 보기
• 가족에게 자랑하기

성취를 기록하세요: "오늘은 책 추가 기능을 완성했다. 처음에 파일 저장이 안 돼서 힘들었지만, GitHub Copilot과 대화하며 해결했다. 뿌듯하다."

진행 상황 시각화:

체크리스트를 만들고 완료한 것에 체크하세요:

• [✓] 데이터 저장/불러오기
• [✓] 책 추가 기능
• [✓] 목록 보기
• [✓] 진행도 업데이트
• 통계 기능
• 최종 테스트

보이는 진전이 동기를 부여합니다.

어려움을 학습으로 재해석:

"막혔다" → "배울 기회다" "오류가 났다" → "문제 해결 능력을 키우는 중이다" "시간이 오래 걸린다" → "제대로 배우는 중이다"

균형 잡기

번아웃 방지:

매일 1~2시간 집중하는 것이 한 번에 5시간 하는 것보다 효과적입니다.

쉬는 시간 규칙:

• 50분 작업 + 10분 휴식
• 눈 운동, 스트레칭
• 다른 생각하기

다른 활동과 병행:

프로젝트만 생각하지 마세요:

• 운동
• 취미 활동
• 친구와 시간 보내기

뇌에 휴식을 주면 오히려 문제 해결이 쉬워집니다.

포기하고 싶을 때

2/3 지점의 슬럼프:

많은 사람이 프로젝트 중간(60~70% 지점)에서 지칩니다. 초반의 흥분은 사라지고, 끝은 아직 멀게 느껴집니다.

극복 방법:

1. 지금까지 온 길 돌아보기

   • 처음에는 아무것도 없었는데, 지금은 이미 많은 것이 작동함
   • 첫날과 지금을 비교해보세요

2. 끝이 생각보다 가까움 인식

   • 남은 기능들은 이미 해본 것의 변형일 뿐
   • 경험이 쌓여서 이제는 더 빠르게 할 수 있음

3. 최소 목표로 조정

   • 모든 기능을 다 못 해도 괜찮음
   • 핵심만 작동하면 성공

4. 도움 요청

   • 동료에게 고민 나누기
   • 조언을 구할 필요는 없음, 그냥 들어주는 것만으로도 도움
   • "너는 잘하고 있어"라는 격려의 힘

5. 완성된 모습 상상

   • 프로젝트를 다른 사람에게 보여주는 장면
   • 실제로 사용하는 모습
   • 뿌듯함을 느끼는 순간

기억하세요: 모든 창작자는 중간에 힘들어합니다. 그것을 극복하는 사람이 완성하는 사람입니다.

프로젝트 완성의 의미

여러분이 만든 것은 단순한 프로그램 하나가 아닙니다.

증명: 코딩을 배우지 않아도, 명확하게 생각하고 효과적으로 소통하면 원하는 것을 만들 수 있다는 증명입니다.

자산: 이 프로젝트는 여러분의 포트폴리오입니다. 바이브 코딩 능력을 보여주는 구체적 증거입니다.

시작: 이것은 끝이 아니라 시작입니다. 첫 번째 프로젝트를 완성했으니, 두 번째, 세 번째 프로젝트는 훨씬 쉬울 것입니다.

변화: 여러분은 단순히 프로그램 하나를 만든 것이 아니라, 문제를 바라보는 시각이 바뀌었습니다. 이제 "이거 자동화하면 좋겠다"고 생각할 때, 실제로 할 수 있다는 것을 압니다.

터미널 프로그램 완성을 축하합니다! 하지만 진짜 완성은 아직 남았습니다. 이제 모든 사람이 쉽게 사용할 수 있는 웹 앱으로 변환하는 필수 단계를 진행합니다.

웹 앱으로 진화하기 (필수 과정)

⚠️ 중요: 이 섹션은 선택이 아닌 필수 과정입니다. 여러분의 프로젝트는 웹 앱으로 완성되어야 진정한 "사용 가능한 앱"이 됩니다.

터미널 프로그램은 개발자에게는 익숙하지만, 일반인에게는 낯설고 어렵습니다. 하지만 웹 앱은 다릅니다. 브라우저만 있으면 누구나 클릭 몇 번으로 사용할 수 있습니다. 바이브 코딩의 진정한 힘은 바로 이 순간에 드러납니다. Agent와의 대화만으로 여러분의 터미널 프로그램이 현대적이고 아름다운 웹 앱으로 변신하는 마법을 경험하세요.

웹 앱이 중요한 이유

터미널 프로그램의 한계:

• 사용하려면 Python을 설치해야 함
• 명령어를 입력해야 해서 초보자에게 어려움
• 다른 사람과 공유하기 어려움
• 스마트폰에서 사용하기 거의 불가능
• 보기에 딱딱하고 전문적으로만 보임

웹 앱의 장점:

• 브라우저만 있으면 누구나 사용 가능 (설치 불필요)
• 버튼 클릭으로 쉽게 조작
• 링크만 보내면 다른 사람도 즉시 사용
• 스마트폰, 태블릿에서도 작동
• 색상, 이미지, 레이아웃으로 예쁘게 꾸밀 수 있음
• "내가 만든 앱"이라고 자랑하기 좋음

실용적인 이유: 여러분이 만든 가계부, 독서 기록, 운동 추적 프로그램을 가족이나 친구가 쓰고 싶어 한다고 상상해보세요. "Python 설치하고, 명령어 입력하고..." 설명하기 복잡하죠? 하지만 웹 앱이라면 "이 링크 들어가"면 끝입니다.

// 이미지로 교체되어야 함 : 터미널 화면과 웹 앱 화면의 비교. 왼쪽은 검은 화면에 텍스트만 있는 터미널, 오른쪽은 색상과 버튼이 있는 현대적인 웹 인터페이스 프롬프트: A side-by-side comparison showing terminal interface on left (black screen with green text) and modern web app interface on right (colorful buttons, input fields, clean design), showing the same todo app in both formats, dramatic transformation

Streamlit: 가장 쉬운 웹 앱 변환 도구

웹 앱을 만드는 방법은 여러 가지가 있지만, 우리는 Streamlit을 사용합니다. 왜일까요?

Streamlit의 장점:

• 초보자도 사용하기 쉬움
• Python 프로그램을 거의 그대로 활용
• 자동으로 예쁘게 만들어줌
• 코드 몇 줄만 추가하면 됨
• 무료로 온라인에 배포 가능

다른 도구와의 비교:

• Flask/Django: 전문적이지만 초보자에게 복잡함
• React/Vue: 배우기 어려운 다른 언어 필요
• Streamlit: Python으로 바로 웹 앱 제작 가능

단계별 웹 앱 변환 과정

이제 실제로 여러분의 프로그램을 웹 앱으로 바꿔봅시다. Agent가 대부분의 작업을 해주지만, 과정을 이해하는 것이 중요합니다.

단계 1: Streamlit 설치 및 기본 구조 만들기

Agent에게 요청하기:

@workspace
현재 터미널에서 실행되는 이 프로그램을
Streamlit을 사용하여 웹 앱으로 변환하고 싶습니다.

요구사항:
- 기존 기능 모두 유지
- 버튼으로 클릭할 수 있게
- 입력창으로 데이터 입력
- 결과는 화면에 깔끔하게 표시
- 모바일에서도 잘 보이게

app.py 파일을 만들어주시고,
어떻게 실행하는지 알려주세요.

Agent가 하는 일:

1. app.py 파일 생성 (Streamlit 웹 앱)
2. 기존 로직을 Streamlit 인터페이스로 감싸기
3. 버튼, 입력창, 표시 영역 추가
4. 필요한 패키지 목록 제공

설치 및 실행:

터미널에서 실행하세요:

pip install streamlit
streamlit run app.py

몇 초 후, 브라우저가 자동으로 열리고 여러분의 앱이 실행됩니다!

단계 2: 인터페이스 개선하기

기본 변환이 완료되었으면, 이제 더 예쁘고 사용하기 쉽게 만들어봅시다.

2-1. 제목과 설명 추가

@workspace
앱 상단에 멋진 제목과 간단한 설명을 추가해주세요.

제목: [여러분의 프로젝트 이름]
설명: 이 앱의 용도를 한 문장으로

2-2. 사이드바 활용

화면 왼쪽에 사이드바를 만들어주세요.
거기에 주요 메뉴와 설정 옵션을 배치하면 좋겠습니다.

2-3. 데이터 시각화 추가 (해당되는 경우)

여러분의 프로젝트에 숫자나 통계가 있다면:

@workspace
데이터를 그래프로 보여주면 좋겠어요.
Streamlit의 차트 기능을 사용해서
[어떤 데이터]를 [어떤 형태의 그래프]로 표시해주세요.

예:

• 가계부: 카테고리별 지출 파이 차트
• 독서 기록: 월별 독서량 막대 그래프
• 운동 추적: 일별 운동 시간 선 그래프

2-4. 색상과 스타일 적용

앱의 색상 테마를 [원하는 색상]으로 바꾸고 싶어요.
Streamlit 설정을 조정해서 더 개성있게 만들어주세요.

단계 3: 사용성 향상

3-1. 입력 검증 추가

@workspace
사용자가 잘못된 값을 입력하면
친절한 안내 메시지를 보여주세요.

예:
- 빈 값 입력 시: "내용을 입력해주세요"
- 숫자 입력란에 문자 입력 시: "숫자만 입력 가능합니다"

3-2. 성공 메시지와 확인

작업이 성공하면 초록색 성공 메시지를,
문제가 있으면 빨간색 오류 메시지를 표시해주세요.

삭제 같은 중요한 작업 전에는
"정말 삭제하시겠습니까?" 확인을 받아주세요.

3-3. 로딩 상태 표시

@workspace
데이터를 저장하거나 불러올 때
"처리 중..." 메시지를 표시해주세요.
Streamlit의 spinner 기능을 사용하면 좋을 것 같아요.

단계 4: 모바일 최적화

확인할 것:

Agent에게 요청하세요:

@workspace
이 앱이 스마트폰에서도 잘 보이고 사용하기 쉬운지 확인해주세요.
필요하면 모바일 친화적으로 조정해주세요.

특히:
- 버튼 크기가 손가락으로 누르기 적당한가
- 텍스트가 작은 화면에서도 읽기 쉬운가
- 가로/세로 스크롤 문제는 없는가

테스트 방법:

1. 스마트폰에서 같은 WiFi에 연결
2. 터미널에 표시된 IP 주소로 접속 (예: http://192.168.0.10:8501)
3. 실제로 사용해보며 불편한 점 체크

단계 5: 최종 다듬기

5-1. 파비콘과 페이지 제목 설정

@workspace
브라우저 탭에 표시되는 아이콘과 제목을 설정하고 싶어요.
Streamlit page config로 설정해주세요.

페이지 제목: [프로젝트 이름]
아이콘: 적절한 아이콘 선택
레이아웃: wide (넓게)

5-2. 초기 설명 및 사용법

처음 앱에 들어오면
간단한 사용법이 표시되면 좋겠어요.
접었다 펼 수 있는 형태로 만들어주세요.

5-3. 데이터 내보내기 기능 (선택)

@workspace
현재 데이터를 CSV 파일로 다운로드할 수 있는
버튼을 추가해주세요.

실습: 할 일 관리 앱을 웹 앱으로 변환하기

구체적인 예시로 전체 과정을 따라가봅시다.

원본 터미널 프로그램:

• Python 스크립트
• 메뉴 선택으로 기능 실행
• 텍스트 기반 입출력

변환 과정:

1단계: 기본 변환 요청

@workspace
todo-app 프로그램을 Streamlit 웹 앱으로 변환해주세요.

화면 구성:
- 상단: 제목 "나의 할 일 관리"
- 사이드바: 메뉴 (할 일 추가, 목록 보기, 설정)
- 메인: 선택한 메뉴에 따라 내용 표시

2단계: 추가 기능 요청

목록 보기 화면에:
- 완료된 항목은 회색에 취소선
- 각 항목 옆에 완료/삭제 버튼
- 우선순위에 따라 색상 표시 (높음: 빨강, 보통: 노랑, 낮음: 초록)

3단계: 시각화 추가

대시보드 탭을 추가해서:
- 전체 할 일 개수
- 완료된 할 일 개수
- 우선순위별 분포 파이 차트

4단계: 테스트 및 개선 실행해보고 불편한 점 발견 시:

@workspace
할 일 추가할 때 엔터 누르면 바로 추가되게 해주세요.
지금은 버튼을 꼭 클릭해야 해서 불편해요.

최종 결과:

• 브라우저에서 실행되는 예쁜 앱
• 클릭만으로 모든 기능 사용 가능
• 차트로 시각화된 통계
• 모바일에서도 사용 가능

온라인 배포하기 (보너스)

로컬에서만 실행되는 것이 아니라, 인터넷 어디서나 접속할 수 있게 만들고 싶다면? Streamlit은 무료 배포 서비스를 제공합니다!

Streamlit Community Cloud 사용하기:

1단계: GitHub에 코드 업로드

Agent에게 물어보세요:

@workspace
이 앱을 GitHub에 올리고 싶어요.
필요한 파일들(requirements.txt 등)을 준비해주세요.

2단계: Streamlit Cloud에서 배포

1. https://streamlit.io/cloud 방문
2. GitHub 계정으로 로그인
3. 앱 배포 버튼 클릭
4. 여러분의 GitHub 저장소 선택
5. 배포!

몇 분 후, 여러분만의 URL이 생성됩니다! 예: https://your-app.streamlit.app

이 링크를 누구에게나 보낼 수 있습니다.

배포 시 주의사항:

@workspace
배포 전 체크리스트:
- 민감한 정보(비밀번호 등)가 코드에 없는지
- requirements.txt에 모든 필요한 패키지 포함
- 데이터 파일 경로가 올바른지

웹 앱 완성: 최종 점검

웹 앱으로의 변환까지 완료했다면, 이제 최종 점검 단계입니다.

완성도 체크리스트

✅ 기능 점검:

• 모든 핵심 기능이 웹에서도 작동
• 데이터 추가/수정/삭제 정상 작동
• 페이지 새로고침 후에도 데이터 유지
• 오류 메시지가 적절하게 표시

✅ 사용성 점검:

• 버튼이 명확하고 클릭하기 쉬움
• 입력창이 직관적
• 결과가 보기 좋게 표시
• 모바일에서도 사용 가능

✅ 외관 점검:

• 깔끔하고 전문적으로 보임
• 색상 조합이 자연스러움
• 폰트 크기가 읽기 편함
• 레이아웃이 균형잡힘

✅ 공유 준비:

• README 파일 작성 완료
• 실행 방법 문서화
• 스크린샷 준비
• (선택) 온라인 배포 완료

성과 정리

여러분이 이룬 것:

기술적 성과

• 아이디어 → 기획 → 개발 → 웹 앱 변환까지 전 과정 완수
• Streamlit/Flask를 활용한 웹 개발 경험
• 반응형 UI 구현
• GitHub Copilot Agent와의 고급 협업 능력 획득

창작물

• 실제로 사용 가능한 웹 애플리케이션
• 다른 사람과 공유 가능한 링크
• 포트폴리오에 추가할 수 있는 프로젝트
• 모바일에서도 작동하는 현대적 앱

역량 향상

• 컴퓨팅 사고 4대 원리 실전 적용
• 문제를 명확히 정의하고 단계별로 해결하는 능력
• AI와 효과적으로 협업하는 소통 능력
• 사용자 경험(UX)을 고려하는 관점

자신감

• "나도 앱을 만들 수 있다"는 확신
• 코드를 읽지 않고도 프로그래밍할 수 있다는 증명
• 앞으로 더 복잡한 프로젝트도 할 수 있다는 자신감

자랑하기

완성된 앱을 주변에 자랑하세요! 실제로 사용하는 사람들의 반응을 보는 것만큼 뿌듯한 일은 없습니다.

공유 방법:

1. 가족/친구에게: "이거 내가 만든 거야. 한번 써봐!"
2. SNS에: 스크린샷과 함께 간단한 소개
3. 학교/직장에: "이런 도구가 필요하신 분 계신가요?"
4. 온라인 커뮤니티에: 프로젝트 설명과 링크

발표 준비 (14주차 예고): 다음 주차에는 여러분의 프로젝트를 효과적으로 발표하는 법을 배웁니다.

• 7분 발표 구조
• 시연 팁
• 질문 대응

문제 해결 가이드

개발 과정에서 만날 수 있는 일반적인 문제와 해결 방법입니다.

Streamlit 관련

문제: "streamlit command not found"

# 해결
pip install streamlit

# 또는 Python이 여러 버전이면
python -m pip install streamlit

문제: "Port 8501 already in use"

# 다른 포트로 실행
streamlit run app.py --server.port 8502

문제: 새로고침하면 데이터 사라짐

Agent에게 요청:

@workspace
Streamlit의 session state를 사용해서
페이지를 새로고침해도 데이터가 유지되게 해주세요.

일반적인 문제

문제: 모바일에서 접속 안 됨

체크사항:

• 같은 WiFi 네트워크에 연결되었는지
• 올바른 IP 주소 사용 (streamlit 실행 시 표시되는 "Network URL")
• 방화벽이 차단하지 않는지

문제: 파일 업로드/다운로드 안 됨

Agent에게 상세히 설명:

@workspace
사용자가 파일을 업로드할 수 있게 하고 싶어요.
업로드된 파일을 처리한 후 결과를 다운로드할 수 있게 해주세요.

문제: 느림/멈춤

최적화 요청:

@workspace
앱이 느려요. 
데이터를 캐싱하고 불필요한 처리는 줄여주세요.

Agent에게 효과적으로 도움 요청하기

❌ 나쁜 예: "안 돼요" "오류 나요" "이상해요"

✅ 좋은 예:

@workspace
할 일을 추가하려고 하는데 다음 오류가 납니다:

[오류 메시지 복사-붙여넣기]

이 부분 코드:
[관련 코드 일부]

어떻게 고칠 수 있을까요?

핵심: 구체적인 상황, 오류 메시지, 예상했던 것 vs 실제 결과를 모두 알려주세요.

다음 단계

프로젝트를 완성한 후에는:

즉시 할 일

1. 백업하기

   • 프로젝트 폴더 전체를 안전한 곳에 복사
   • GitHub에 업로드 (선택)

2. README 작성

   • 프로젝트 설명
   • 설치 방법
   • 사용 방법
   • 스크린샷

3. 발표 준비 (14주차용)

   • 7분 발표 슬라이드 구상
   • 시연 연습
   • 핵심 배운 점 3가지 정리

추가 도전 (선택)

레벨 1: 기능 확장

• 사용자가 요청한 추가 기능 구현
• 데이터 시각화 (그래프, 차트)
• 검색/필터 기능 강화

레벨 2: 배포

• Streamlit Community Cloud에 무료 배포
• Heroku, Vercel 등에 호스팅
• 실제 도메인 연결

레벨 3: 오픈소스

• GitHub에 공개
• 다른 사람들이 사용하고 개선할 수 있게
• 커뮤니티 기여 경험

마무리: 여러분은 이미 바이브 코더입니다

13주차 여정을 완주한 여러분께 진심으로 축하드립니다.

여러분이 증명한 것:

• 코딩을 배우지 않아도 앱을 만들 수 있다
• 명확한 사고와 효과적인 소통이 핵심이다
• AI는 강력한 협업 파트너다
• 누구나 창조자가 될 수 있는 시대다

앞으로 할 수 있는 것:

• 더 복잡한 프로젝트 (이미 방법을 안다)
• 실제 업무/생활 문제 해결 (경험이 생겼다)
• 다른 사람 돕기 (도구를 만들 수 있다)
• 지속적 성장 (기반이 튼튼하다)

다음 14주차에서는 프로젝트를 발표하고, 디지털 리터러시에서 컴퓨팅 리터러시로의 전환이 가지는 의미를 함께 탐구합니다.

여러분의 성과를 자랑스럽게 공유할 준비를 하세요!

2. 서버 실행 (보통 python app.py)
3. 브라우저에서 http://localhost:5000 열기

여러분의 앱이 웹 페이지로 나타납니다!

웹 앱 개선하기

첫 버전은 매우 단순할 것입니다. 이제 Agent와 함께 개선합니다.

1. 디자인 개선

@workspace
웹 페이지를 더 예쁘게 만들고 싶어요.

개선사항:
- 버튼을 파란색 배경에 흰색 글자로
- 입력창을 더 크고 선명하게
- 전체를 화면 가운데 정렬
- 목록을 카드 형태로 표시 (각 항목마다 테두리)

CSS를 추가해서 깔끔하게 만들어주세요.

2. 모바일 지원

@workspace
스마트폰에서도 잘 보이도록 만들고 싶어요.

- 화면 크기에 맞춰 자동 조정
- 버튼을 손가락으로 누르기 쉽게 크게
- 작은 화면에서는 한 줄에 하나씩 표시

반응형 CSS를 추가해주세요.

3. 실시간 업데이트 (더 도전적)

@workspace
항목을 추가하거나 삭제할 때 
페이지 새로고침 없이 바로 반영되게 하고 싶어요.

JavaScript를 사용해서 구현해주세요.

웹 앱의 한계 이해하기

웹 앱은 멋지지만, 주의할 점이 있습니다:

보안:

• 다른 사람에게 공유하려면 보안 설정 필요
• 비밀번호나 중요 데이터는 암호화 필요

배포:

• 로컬(컴퓨터)에서만 실행됨
• 인터넷에 공개하려면 호스팅 필요 (Heroku, Vercel 등)

복잡도:

• 터미널 프로그램보다 복잡해질 수 있음
• HTML, CSS, JavaScript 기본 이해가 도움됨
• 하지만 Agent가 대부분을 도와줌

웹 앱 변환 체크리스트

시도하기 전에 확인하세요:

• 터미널 버전이 완전히 작동하나요?
• 시간이 최소 2-3시간 더 있나요?
• 배우는 것 자체를 즐기시나요?
• 필요한 패키지를 설치할 수 있나요?

3개 이상 체크했다면 시도해볼 만합니다!

마무리

웹 앱 변환은 보너스입니다. 하지 않아도 여러분의 프로젝트는 이미 완성되었고, 충분히 가치 있습니다. 하지만 도전하고 싶다면, Agent가 함께합니다. 예쁜 웹 인터페이스로 여러분의 창조물을 더 빛나게 만들어보세요!

다음 주 예고: 디지털 리터러시에서 컴퓨팅 리터러시로

14주차에서는 여러분이 경험한 변화를 더 큰 그림에서 살펴봅니다:

• 디지털 리터러시를 넘어 컴퓨팅 리터러시로
• 바이브 코딩이 여러분의 미래를 어떻게 바꾸는가
• 새로운 시대를 살아가는 지혜

여러분은 이미 큰 변화를 경험했습니다. 다음 주에는 그 변화의 의미를 함께 생각해봅시다!