바이브 코딩 모듈 2

창작 공간 설정하기 (Setting Up Your Creative Space)

모듈 소개

바이브 코딩의 두번째 단계는 당신의 창작 공간을 설정하는 것입니다. 코딩은 단순한 기술이 아닌 창의적인 표현의 한 형태입니다. 마치 화가가 캔버스와 물감을 준비하듯, 우리는 코딩을 위한 도구를 준비해야 합니다.

이 모듈에서는 코드 에디터, 클라우드 백엔드, 버전 관리 시스템, 그리고 AI 코딩 파트너 설정까지 모든 필수 도구를 설치하고 구성하는 방법을 배우게 됩니다.

필수 도구 설정하기

코드 에디터: Visual Studio Code

Visual Studio Code(VSCode)는 Microsoft에서 개발한 가볍고 강력한 무료 코드 에디터입니다. 직관적인 인터페이스와 다양한 확장 프로그램을 통해 코딩 경험을 향상시킬 수 있습니다.

클라우드 백엔드: Firebase

Firebase는 Google에서 제공하는 앱 개발 플랫폼으로, 데이터베이스, 인증, 호스팅 등 다양한 기능을 제공합니다. 복잡한 서버 구축 없이도 강력한 웹 애플리케이션을 만들 수 있습니다.

버전 관리 & 협업: GitHub

GitHub는 Git을 기반으로 한 코드 호스팅 및 협업 플랫폼입니다. 코드 변경사항을 추적하고, 다른 개발자들과 협업하며, 오픈 소스 프로젝트에 참여할 수 있습니다.

AI 코딩 파트너

GitHub Copilot과 Claude 3.7 Sonnet과 같은 AI 도구는 코딩 과정을 도와주는 강력한 파트너입니다. 코드 자동 완성, 문법 검사, 문제 해결 제안 등 다양한 도움을 제공합니다.

Visual Studio Code 설치 및 구성

Visual Studio Code는 현재 가장 인기 있는 코드 에디터 중 하나로, 웹 개발을 위한 최적화된 기능과 확장 프로그램을 제공합니다.

  1. Visual Studio Code 공식 웹사이트에서 운영 체제에 맞는 버전을 다운로드하세요.
  2. 다운로드한 설치 파일을 실행하고 화면에 나타나는 지시에 따라 설치를 완료하세요.
  3. VSCode를 실행하고 왼쪽 메뉴에서 확장 프로그램 아이콘을 클릭하세요.
  4. 웹 개발에 유용한 다음 확장 프로그램을 설치하세요:
    • GitHub Copilot - AI 코드 자동완성 도구
    • GitHub Copilot Chat - AI와 코드에 대해 대화하기

Firebase 계정 설정

Firebase는 웹 및 모바일 애플리케이션 개발을 위한 다양한 도구와 서비스를 제공하는 클라우드 플랫폼입니다. 데이터베이스, 인증, 호스팅 등의 기능을 손쉽게 구현할 수 있습니다.

  1. Firebase 공식 웹사이트에 접속하여 Google 계정으로 로그인하세요.
  2. "시작하기" 또는 "Go to console" 버튼을 클릭하세요.
  3. "프로젝트 추가" 버튼을 클릭하고 프로젝트 이름을 지정한 후 화면의 지시에 따라 설정을 완료하세요.
  4. 프로젝트 생성이 완료되면 왼쪽 메뉴에서 "빌드" > "Firestore Database"를 선택하고 "데이터베이스 만들기" 버튼을 클릭하여 테스트 모드로 데이터베이스를 생성하세요.

Firebase 설정이 완료되면 실제 작동하는 백엔드를 쉽게 구현할 수 있습니다. 추후 모듈에서 Firebase를 활용하여 데이터를 저장하고 불러오는 방법을 배우게 됩니다.

GitHub 계정 설정

GitHub는 코드 저장소 호스팅 및 협업을 위한 플랫폼으로, 버전 관리와 협업에 필수적인 도구입니다. 개인 프로젝트를 관리하고 다른 개발자와 협업하는 데 매우 유용합니다.

  1. GitHub 공식 웹사이트에 접속하여 "Sign up" 버튼을 클릭하세요.
  2. 이메일 주소, 비밀번호, 사용자 이름을 입력하고 계정 생성 절차를 완료하세요.
  3. VSCode에는 이미 Git이 통합되어 있어 별도의 프로그램 없이도 버전 관리가 가능합니다. VSCode의 왼쪽 사이드바에서 소스 제어 아이콘(분기 모양)을 클릭하여 Git 기능에 접근할 수 있습니다.
  4. 처음 Git을 사용할 때는 VSCode에서 GitHub 계정으로 로그인하라는 메시지가 표시됩니다. 안내에 따라 로그인을 완료하세요.

GitHub Copilot Agent 모드 사용법

VSCode에서 GitHub Copilot을 활용해 자동으로 웹 페이지를 생성할 수 있습니다:

  1. VSCode에서 GitHub Copilot Chat 패널을 엽니다 (Ctrl+Shift+I 또는 Cmd+Shift+I)
  2. 채팅 입력란에 /agent를 입력해 Agent 모드를 활성화합니다
  3. 아래 프롬프트를 복사해 붙여넣고 엔터를 누릅니다

프롬프트 예시:

간단한 포트폴리오 웹사이트를 만들어주세요. 다음 요소를 포함해야 합니다: 1. 반응형 헤더 및 내비게이션 메뉴 2. 프로필 소개 섹션 3. 기술 스택을 보여주는 섹션 4. 프로젝트 갤러리 5. 연락처 정보와 폼 모던한 디자인으로 만들고, CSS 애니메이션도 포함해주세요.

Next.js 프로젝트 생성하기

Next.js는 React 기반의 강력한 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우트 등 다양한 기능을 제공합니다. GitHub Copilot Agent를 활용하면 Next.js 프로젝트를 쉽고 빠르게 설정할 수 있습니다.

  1. VSCode에서 GitHub Copilot Chat 패널을 엽니다 (Ctrl+Shift+I 또는 Cmd+Shift+I)
  2. 채팅 입력란에 /agent를 입력해 Agent 모드를 활성화합니다
  3. 아래 Next.js 프로젝트 생성 프롬프트를 복사해 붙여넣고 엔터를 누릅니다

Next.js 프로젝트 생성 프롬프트:

간단하고 아름다운 개인 홈페이지용 Next.js 프로젝트를 설정해주세요. 다음 요구사항을 충족해야 합니다: 1. TypeScript 사용하지 않고 JavaScript로만 작성 2. 깔끔하고 미니멀한 싱글 페이지 디자인 3. 반응형 레이아웃(모바일, 태블릿, 데스크톱) 4. 다음 섹션을 포함: - 헤더 (이름/로고) - 자기소개 영역 - 기술 스택/능력 - 경력/학력 타임라인 - 포트폴리오/프로젝트 갤러리 - 연락처 정보 5. 애니메이션과 전환 효과 6. Tailwind CSS v3 사용 (v3를 명시적으로 사용해주세요) 7. 깔끔한 폴더 구조 프롬프트에 다음과 같은 개인 정보를 추가하면 웹사이트에 반영할 수 있다고 안내해주세요: - 이름 - 직업/타이틀 - 자기소개 문구 - 기술 스택 목록 - 경력/학력 내용 - 포트폴리오 프로젝트 - 연락처 정보 각 파일의 용도를 주석으로 설명해주시고, 코드는 깔끔하고 유지보수하기 쉽게 작성해주세요.

GitHub Copilot Agent는 다음과 같은 작업을 자동으로 수행합니다:

  • 새 Next.js 프로젝트 초기화 (create-next-app)
  • Tailwind CSS 설치 및 구성
  • 페이지 및 컴포넌트 생성
  • 필요한 모든 종속성 설치

프로젝트가 생성되면 다음 명령어로 개발 서버를 실행할 수 있습니다:

cd [프로젝트폴더]
npm run dev

이제 http://localhost:3000에서 생성된 Next.js 애플리케이션을 확인할 수 있습니다!

설정 확인하기

모든 도구를 설치하고 설정했다면, 이제 모든 것이 제대로 작동하는지 확인해 봅시다.

  1. VSCode를 열고 새 폴더를 만든 후, 그 안에 index.html 파일을 생성하세요.
  2. GitHub Copilot의 도움을 받아 간단한 웹 페이지를 만들거나, 위의 프롬프트 예시를 복사하여 Agent 모드에서 사용해보세요.
  3. VSCode에서 HTML 파일을 마우스 오른쪽 버튼으로 클릭하고 "브라우저에서 열기" 옵션을 선택하여 생성된 페이지를 확인하세요.
  4. VSCode의 소스 제어 메뉴(왼쪽 사이드바의 분기 모양 아이콘)를 통해 프로젝트를 Git 저장소로 초기화하고, 변경사항을 커밋한 후 GitHub에 푸시하세요.

위 단계를 모두 성공적으로 완료했다면, 바이브 코딩을 위한 모든 도구 설정이 완료된 것입니다! 이제 HTML, CSS, JavaScript를 배우고 실제 웹 애플리케이션을 만드는 단계로 넘어갈 준비가 되었습니다.