오리엔테이션

아래는 위 오리엔테이션 영상(약 4분 50초)을 글로 옮긴 내용입니다. 영상 재생이 어렵거나 PDF로 인쇄해 두고 보실 분들을 위해 정리했습니다.

오리엔테이션 전문

자, 이번 강의의 목표를 먼저 짚어 볼게요. 이 강의를 들으러 오신 분들은 바이브 코딩의 의미에 대해서는 다 아실 것이라 생각합니다. 바이브 코딩 하면 가장 많이 쓰는 도구가 바로 커서(Cursor) AI 에디터예요. 커서의 사용법은 강의 중간중간 그때마다 차근차근 설명드릴게요.

그리고 서비스를 만들려면 각종 로그인, DB 등을 해결해 주는 서버가 필요한데요. 저는 구글의 파이어베이스(Firebase)를 사용할 거예요. 파이어베이스는 인증을 쉽게 구현할 수 있도록 오센티케이션(Authentication)이라는 제품을 제공해요. 복잡한 구현 없이 몇 번의 클릭으로 환경을 구성할 수 있어요.

파이어베이스에서 제공하는 DB 서비스인 파이어스토어(Firestore)는 실시간으로 데이터를 전송해 주는 기능이 있어요. 그래서 페이지 새로고침 없이 새로운 채팅 메시지를 화면에 뿌려 줄 수 있어요. 그리고 파이어베이스를 유료로 업그레이드하면 파일을 저장할 수 있는 공간도 제공해요. 스토리지(Storage)라는 이름의 서비스인데, 유료로 올리더라도 사용한 만큼만 돈을 내고 일정 사용량까지는 무료이니 꼭 한번 써 보세요. 다만 이 강의에서 스토리지까지 다루지는 않습니다.

그리고 본격적으로 AI 편집기를 이용해서 바이브 코딩을 해 볼 거고요. 완성된 웹은 깃허브(GitHub)와 버셀(Vercel)을 통해 실제 사이트에 배포해 볼게요. 이렇게 이 강의를 따라오시면 여러분만의 채팅 서비스가 하나 생길 거예요.

그럼 제가 미리 완성해 둔 웹을 한번 보여 드릴게요. 강의 결과물이 이것과 똑같이 구현되지는 않을 거예요. 일단 한번 보시죠. 먼저 저는 브라우저를 세 개 띄워 놨어요. 각 브라우저는 여러분 가족 한 명 한 명이라고 생각하면 되겠죠. 로그인을 하면 바로 단톡방으로 들어갑니다. 그러면 대화창이 뜨고 기존 메시지들을 확인할 수 있어요. 제가 입장했다는 메시지도 잘 보이네요.

다음은 엄마가 로그인을 합니다. 로그인이 성공했고, 엄마가 입장했다는 메시지가 보이네요. 마지막으로 아들이 로그인해 봅니다. 나머지 두 브라우저에도 실시간으로 입장했다는 표시가 보이죠. 그럼 이제 각 브라우저에 메시지를 입력해 볼게요. 다른 브라우저에 동시에 ‘안녕’이라는 메시지가 보이면서 화면이 스크롤되어 가장 마지막 메시지가 보이게 됩니다. 나머지 메시지들도 입력되는 대로 화면에 실시간으로 잘 보이고, 스크롤도 자동으로 되는 것을 확인할 수 있습니다.

오른쪽 상단의 사람 모양 아이콘을 클릭해 보면 접속이 가능한 사람들의 목록과 온라인인 사람의 수가 표시됩니다. 자, 이제 아들 브라우저에서 로그아웃을 해 보면 접속자 수가 다섯 명에서 네 명으로 줄어든 것 보이시죠? 아들이 오프라인이 되었습니다. 이 정도가 제가 한 시간 정도 만들어 본 웹 채팅 서비스예요. 이 강의에서는 보신 서비스와 완전히 동일하게 구현하지는 않겠지만, 바이브 코딩은 어떻게 하는 것이고 어디에 어떻게 배포하면 실제 PC나 브라우저에서 접속할 수 있는지 배워 보도록 할게요.

자, 이 수업의 마지막으로 개발 환경과 필요한 프로그램에 대해 안내할게요. 이 강의는 윈도우즈 환경에서 개발을 진행합니다. 맥북은 개발 환경 구성하기가 윈도우즈보다는 편해요. 그래서 맥북 환경으로 강의를 설명하면 윈도우즈 사용자들은 헤매기가 쉽다고 해서, 저도 윈도우즈 환경에서 개발은 거의 안 해 봤지만 이번에 직접 해 보며 얻은 노하우를 함께 알려 드리며 수업을 진행해 볼게요. 맥북에서는 이것보다 쉬우니 금방 따라 하실 수 있을 거예요.

자, 가장 먼저 가입이 필요한 사이트가 있어요. 구글 계정은 다들 하나씩 가지고 계시죠? 파이어베이스는 구글 계정으로 시작하면 되니 구글 계정을 준비해 주세요. 그리고 소스 코드 관리와 배포를 위해서 깃허브를 이용할 거예요. 여기에 가입하는 법도 다음 수업에서 설명드릴게요. 그리고 실제 사이트가 배포될 버셀에도 가입할 거예요. 그다음은 저와 함께 AI 편집기를 설치할 것이고요. 웹사이트를 만들고 배포하는 데 필요한 프로그램 두 개, 바로 노드JS(Node.js)와 깃배시(Git Bash)도 설치할 거예요. 이 모든 것은 다음 수업 내용에 포함되어 있어요.

자, 그럼 진짜 본격적으로 수업에 들어가 볼까요?