개발 환경 세팅
사이트를 만들기 전에, 우리가 앞으로 사용할 몇 가지 필수 도구를 준비해두어야 합니다.
이 도구들은 모두 무료이며, 한 번만 설정해두면 이후 과정이 훨씬 편해집니다.
다만 Cursor의 경우에는 일주일 무료체험기간이 있고 이후엔 결제가 필요합니다.
입문 단계시라면 무료체험이 종료되었을 때 Pro 플랜부터 구독하시는 것을 추천합니다.
1. Cursor 세팅
Cursor(커서) 는 최근 많은 개발자들이 사용하는 AI 기반 코딩 도구입니다.
쉽게 말해 “코드를 대신 써주는 인공지능”이라고 생각하면 됩니다.
직접 코드를 작성하지 않아도, “이런 사이트를 만들어줘”라고 말하면 AI가 자동으로 코드를 만들어줍니다.
요약하자면 Cursor는 “코드 편집기 + 인공지능 팀원”입니다.
복잡한 코드를 몰라도 사이트 제작 과정을 빠르게 진행할 수 있습니다.
설치 후 실행해주세요.
실행 후 회원가입을 진행해주세요.
회원가입을 완료하면, Preferences에서
Chat Language를 Korean으로 바꾸고 Continue를 눌러주세요.
Appearance에선 IDE Layout을 선택해주고, Continue를 눌러주세요.
세팅이 완료되면, 아래와 같은 화면이 나올 것입니다.
이제 Cursor 세팅은 끝났습니다.
2. Github 세팅
Github(깃허브) 는 ‘내가 만든 파일과 코드를 안전하게 저장하고, 버전별로 관리할 수 있는 온라인 저장소’입니다.
쉽게 말해 “코드를 위한 구글 드라이브” 같은 곳입니다.
Cursor에서 작업한 내용은 내 컴퓨터 안에도 저장되지만, Github에 올려두면 인터넷상에서도 안전하게 보관할 수 있습니다.
그래서 나중에 다른 컴퓨터에서 작업을 이어가거나, 파일이 날아가더라도 Github에서 언제든 다시 내려받을 수 있습니다.
Github은 “내 코드를 언제, 어디서든 꺼내 쓸 수 있게 해주는 온라인 폴더를 제공하는 서비스”입니다.
Cursor는 “그 폴더 안에서 AI와 함께 작업하는 프로그램”입니다.
즉, Cursor에서 수정한 파일을 바로 Github에 업로드할 수도 있고,
Github에 저장된 최신 파일을 Cursor로 불러와 이어서 작업할 수도 있습니다.
https://github.com 에 접속한 후, Sign up 버튼을 눌러 회원가입을 진행해주세요.
다운로드 버튼을 누르고, 파일을 실행시켜줍니다.
Sign in to GIthub.com을 클릭합니다.
Use my GIthub account name and email address를 선택하고 Finish를 눌러줍니다.
Create a New Repository on your local drive… 을 클릭해줍니다.
Repository란 저장소로, 쉽게 말해 구글 드라이브의 폴더 하나라고 보시면 됩니다.
현재는 우리 PC에만 있는 파일을, Github에 업로드하겠다. 라는 의미입니다.
바탕화면 또는 원하는 위치를 지정해주세요.
그 후 아래 세팅과 같이 하고 Create Repository 버튼을 눌러줍니다.
Publish repository를 눌러줍니다.
Keep this code private 옵션을 체크해준 후 Publish repository 버튼을 클릭합니다.
이제
github.com 으로 가보면, 우리가 만든 repository가 보일 것입니다.
이제 첨부자료인 skeleton 프로젝트를 만드신 repository 폴더로 옮겨주세요.
그리고 github desktop을 다시 보면, 추가된 파일 목록이 보이실 겁니다.
commit 해보겠습니다.
“이 파일들로 작업을 완성하겠다!” 라고 생각하시면 됩니다.
push 하겠습니다. “정말 Github에 올리겠다” 라는 의미로 보시면 됩니다.
Github에 잘 올라온 것을 볼 수 있습니다.
이제 Cursor에서, Open project 버튼을 클릭합니다.
그리고 아까 만든 repository 폴더를 선택합니다.
그리고 표시된 버튼들을 눌러줍니다.
버튼들을 누르면 이런 레이아웃이 보일 것입니다.
좌측은 우리 프로젝트의 코드 파일들이고 우측은 AI에게 일을 시킬 수 있는 대화창입니다.
이제 정말 일을 맡길 수 있는 상태가 된 것입니다.
아래는 시험삼아 AI에게 이 프로젝트의 구성에 대해 설명해달라고 시켜본 결과입니다.
