시작해요, 커서

시작해요, 커서 - Cursor 설치부터 포트폴리오 웹사이트, AI 챗봇 제작, 깃 & 깃허브 활용까지! ㅣ AI Insight
리브로웍스 지음, 김성훈 옮김 / 인사이트 / 2025년 11월

'이 리뷰는 컬처블룸을 통해 출판사에서 도서를 제공 받아, 직접 읽고 작성한 리뷰입니다.'

인공지능으로 만들어 보는 나만의 프로그램

책을 선택한 이유

인공지능 시대가 시작된다.

사람들은 인공지능에 대해 이러쿵저러쿵 떠들지만,

인공지능을 효과적으로 활용하는 사람은 드물다.

커서 는 자연어로 코딩 을 하도록 도와주는 AI 기반 코드 에디터 다.

프로그래밍 전문 지식이 부족해도 생각대로 코딩 을 할 수 있어

기술적 문턱을 크게 낮추어 준다.

AI를 이용한 코딩 방법을 알아보기 위해 "시작해요, 커서"를 선택한다.

1장 커서 사용해 보기 에서는

커서 는 AI기반 코드 편집기이다.

인공지능이 코드를 정확하게 이해하고 자동 완성은 물론

리팩터링 기능까지 제공한다.

깃허브 코파일럿 은 프로젝트 전체를 파악하지 못하지만,

커서 는 프로젝트 전체를 인식할 수 있어 전반적인 리팩터링 과

개발 효율성 향상에 기여한다.

마켓플레이스 에서는 커서에 다양한 기능을 추가하는 확장 기능을 찾을 수 있다.

커서 설정은 설정 화면에서 조정하는 방법과 직접 편집하는 방법이 있다.

명령 팔레트 에서 표시할 언어를 변경할 수 있다.

설정화면에서 항목을 조정하거나, settings.json 파일을 설정을 편집할 수 있다.

커서 는 AI 기반 편집기다.

AI 기능의 정확도 향상을 위해 사용자의 프롬프트 와 코드 를 수집한다.

커서 의 화면 구성은 액티비티 바, 사이드바, 편집기, 패널, AI 페인,

상태 표시줄로 나눌 수 있다.

미니맵 은 파일 전체를 축소 표시하고,

젠 모드 는 편집기 이외의 모든 영역을 숨긴다.

커서 에서는 상태 표시줄에서 파일 내 들여쓰기 방식을 변경할 수 있다.

커서 탭 은 코드를 입력할 때, AI가 추천 코드 를 제시하여 입력 효율을 높여 준다.

에이전트 는 AI 페인을 열면 표시되는 기본 모드 다.

애스크 모드 는 다양한 주제에 대해 질문할 수 있는 대화형 모드 이다.

Command K는 선택한 범위의 코드를 AI가 수정, 질문하도록 하는 기능이다.

@Symols는 프롬프트 입력시 참조하거나 조작할 대상을 지정하는 기능이다.

오류 자동 수정은 코드 의 품질 향상에 도움을 준다.

2장 기본 파일 편집하기 에서는

커서 로 파일을 개별적으로 여는 것보다 폴더를 열어 작업하는 것이 더 효율적이다.

미리 보기 모드는 파일 을 편집할 수 없다.

열려 있는 편집기 는 열려 있는 파일을 목록으로 확인한다.

커서 는 애플리케이션 종료 시 마지막 입력 상태를 보여 주므로,

실수로 종료했더라도 작업을 바로 재개할 수 있다.

작업 영역은 폴더 를 관리하는 기능이다.

작업 영역을 생성하면 폴더 정보나 작업 영역별로 설정한 내용을 파일 로 저장할 수 있다.

작업 영역 열기에서 저장한 작업 영역 파일 을 간단히 불러올 수 있다.

선택 영역 추가 기능은 선택한 텍스트 와 같은 항목을 한꺼번에 편집할 수 있다.

커서 편집기 에서는 커서 를 추가하여 여러 줄을 한 번에 편집할 수 있다.

파일 비교 기능은 내용을 비교하거나 차이점을 확인하고,

들여쓰기된 문자열을 선택하면 편집하기 편리하다.

마크다운 파일 이란 계층 구조를 텍스트 에 부여하거나 꾸밀 수 있는

마크다운 문법으로 작성된 파일 이다.

마크다운 문서에는 JPG, PNG 형식 이미지 를 삽입할 수 있다.

검색 뷰 를 이용하면 열려 있는 폴더 나 작업 영역에 있는

모든 파일 에서 문자열을 찾을 수 있다.

정규 표현식 을 사용하면 문자열 패턴 을 지정해 조건에 맞는

문자열을 검색할 수 있다.

프롬프트 실행 전 상태로 되돌리기는 프롬프트 적용 전의

소스 코드 로 되돌릴 수 있다.

레이아웃 을 그린 이미지 를 프롬프트 에 첨부해 전달할 수 있다.

3장 설정과 커스터마이징 살펴보기 에서는

커서 는 명령 팔레트 에서 커맨드 명령을 호출할 수 있다.

명령 팔레트 에서 원하는 명렬을 찾기 위해서

단어 일부를 입력하여 명령을 필터링 한다.

명령 팔레트 는 간편하게 명령을 검색하고 실행할 수 있다.

글꼴 변경, 줄 높이 변경, 줄 번호 표시 방법 변경,

파일 자동 저장 설정, 색 테마 변경 방법을 설명한다.

사용자 설정은 커서 전체에 관한 다양한 항목을 설정할 수 있다.

작업 영역 설정은 각 작업 영역에만 적용되는 설정이다.

폴더 설정은 설정 화면에서 변경하는 방법과, JSON 설정 파일을

편집하는 방법이 있다.

설정을 사용자 설정, 작업 영역 설정, 폴더 설정 으로 계층을 나누면

프로젝트 작업자가 작업 영역별 설정을 다르게 적용하고,

프로젝트 구분이 쉬워지며, 각 계층에서 적용하고 싶은 설정만 변경하면 된다.

작업 영역별로 색 테마 를 각각 다르게 설정해 본다.

JSON, 제이슨 은 자바스크립트 규칙을 따르며,

다른 언어와 데이터 교환할 때도 사용된다.

settings.json은 사용자 설정을 관리하는 설정 파일 이다.

설정 사이를 쉼표로 구분한다.

팝업 으로 설명 표시, 주석 추가, 오류 표시 등

settings.json 편집에 유용한 기능을 알아본다.

단축키 목록에서 단축기를 확인할 수 있다.

단축킥가 없는 명령에 새 단축키 를 할당하면 더 효율적이다.

다양한 확장 기능을 설치하면 커서 기능을 강화할 수 있다.

커서 는 열려 있는 파일 의 확장자를 기준으로 적절한 확장 기능을 추천한다.

확장 기능 사용 안 함은 확장 기능을 비활성화할 수 있다.

확장자 기능이 필요 없다면 커서 에서 제거한다.

4장 웹사이트 제작하기 에서는

라이브 서버 는 로컬 환경에 간이 서버 를 구축해

미리 보기를 보여주므로 코드 를 실시간 으로 수정할 수 있어

프런트엔드 개발에 꼭 필요한 기능이다.

라이브 리로드 기능은 파일 변경을 감지하여 브라우저 를 자동 리로드 한다.

AI 패널 을 사용해 프로그램 이나 HTML 소스 코드 를 생성한다.

소스 코드 생성 지시는 모호함을 없애고 내용을 명확하게 작성한다.

자기소개, 프로젝트, 문의 폼 을 표시한 프런트엔드 엔지니어 의

포트폴리오 사이트 를 만들어 본다.

AI에 추가 지시를 내려 AI가 생성한 초안 코드 를 수정한다.

프롬프트 를 전송하면 수정안을 제시한다.

자바스크립트 가 추가되고 디자인 이 바뀌면서

HTML과 CSS 파일 이 동시에 수정된다.

Command K는 기존 코드 를 수정할 때 유용하지만

새 콘텐츠 를 추가하거나 코드 확장 방향이 명확할 때는

커서 탭 이 효과적이다.

커서 의 @ 기호 기능을 사용하면 코딩 규칙 검토를 맡길 수 있다.

코드 규칙 준수, 웹사이트 개선할 점을 확인해 본다.

Emmet, 에밋 은 HTML 이나 CSS를 편집하는 웹 개발자를 위한 입력 보조 도구다.

약어로 구성된 간단한 조합을 입력한 뒤 엔터 키 를 누르면

웹 페이지 기본 구조를 빠르게 생성할 수 있고,

여러 HTML 요소를 한 번에 만들 수도 있다.

단순히 태그 만 삽입해서는 약어의 편리함을 크게 실감하기 어렵다.

Emmet은 단 한 줄의 단축 표기로 여러 줄의 HTML 코드 를 입력해

반복 입력 작업을 줄일 수 있다.

포매터 는 소스 코드 를 자동으로 정돈해 주는 도구다.

프리티어 는 다양한 언어를 지원하므로 널리 쓰이는 포매터 다.

프리티어 설정을 개발 프로젝트 팀원들과 공유하면 소스 코드 형식을

쉽게 통일할 수 있다.

프리터어 전용 설정 파일은 커서 의 설정 화면에서

지정한 내용보다 먼저 적용된다.

Fix Lints는 AI를 활용한 커서 의 기본 기능 중 하나이다.

커서 에는 함수나 기능의 정의를 확인할 수 있는 피킹 표시 기능이 있다.

CSS 파일을 편집하려면 CSS 파일의 정의 부분으로 이동하면 된다.

Ctrl 키 를 누른 상태에서 CSS 클래스 부분에 커서 를 올리면

정의 피킹 이나 정의로 이동하는 방법보다 더 간편하게

CSS 파일 내용을 확인할 수 있다.

Image preview가 활성화되어 있으면

이미지 파일 경로가 있는 줄 왼쪽에

이미지 썸네일 이 작게 표시된다.

이미지 파일 의 차이점을 한눈에 보고 싶거나

미리 보기 화면으로 이미지 를 더 크게 확인하고 싶을 때는

미리 보기의 크기를 최대로 변경하는 것이 좋다.

Auto Rename Tag은 이름 그대로 태그명 을 자동으로 변경한다.

HTML CSS Support는 CSS 파일 내용을 기반으로

HTML 파일 에서 class나 id 속성값을 자동으로 완성한다.

5장 AI 챗봇 개발하기 에서는

플라스크 는 소규모 웹 앱 개발에 적합하다.

초안 수준의 소스 코드 를 맘든 뒤 완성도를 높여 간다.

프롬프트 입력 조건으로, AI는 애플리케이션 소스 코드 와 사용 방법을 만든다.

AI 챗봇 앱 이 작동하려면 라이브러리 설치 명령어를 실행해

앱 실행 환경을 만들어야 한다.

생성형 AI를 활용하는 애플리케이션 을 만들려면

AI 서비스 에서 제공하는 API 키 가 필요하다.

AI 챗봇 에 프롬프트 를 추가 입력해 디자인 과 기능을 보완해 본다.

로봇 아이콘 추가, 스마트폰에 맞게 앱 형태 바꾸기,

세련된 색상 구분으로 앱 을 개선해 본다.

앱 을 실행하고, 이전 실행한 브라우저 는 새로고침한다.

AI 챗 패널 에 프롬프트 를 입력하는 방법은 소스 코드 전체에 영향을 미친다.

Command K는 AI에 프롬프트 를 전송해

소스 코드 의 개선안을 생성한다.

커서 탭 은 입력 중인 소스 코드 의 다음을 제안한다.

전체적인 코드 개선은 AI 챗 패널 을 활용하고,

세부 수정은 Command K 기능과 커서 탭 을 활용해

앱 을 더욱 편리하게 만들어 본다.

생성 AI가 작성한 소스 코드 가 잘못된 소스 코드 를 생성하면,

AI 챗 패널 에 오류를 검토해 달라고 요청해 본다.

AI 챗 패널 에서는 코드 를 실행한 뒤 오류가 발생하면

AI가 오류 메시지 를 바탕으로 해결 방안을 제시한다.

커서 의 기반인 VS Code는 개발 도구로 널리 사용된다.

다양한 프로그래밍 언어를 같은 UI로 디버깅 할 수 있다.

디버거 를 클릭학 실행할 환경을 선택하는 옵션이 표시되면

파이썬 파일 을 클릭한다.

디버깅 중 변수에 커서 를 올리면 해당 시점의 변숫값이 표시된다.

파이썬 을 디버깅 하면 화면 아래 패널 에 터미널 이 표시된다.

터미널 은 커서 에서 윈도 의 명령 프롬프트 나 macOS 터미널 을

비롯한 명령줄 도구를 이용하는 기능이다.

디버그 뷰 가장 위에 있는 변수 부분에는 실행 중인 스코프 에서

유효한 변숫값이 정리되어 있다.

추가된 조사식은 디버그 가 종료되더라도 조사식에 계속 남아 있다.

호출 스택 부분에는 함수 호출 이력이 표시된다.

중단점은 프로그램을 일시 정지하고 싶은 줄에 추가한다.

커서 에서는 추가한 중단점을 편집해 특정 조건을 만족할 때

일시 정지하거나 지정한 횟수만큼 실행한 후 정지하는

특수한 설정을 추가할 수 있다.

스티펫 은 재사용 가능한 작은 소스 코드 조각을 가리킨다.

스니펫 을 적극적으로 활용하려면 자동 완성 목록을

제안할 때 스니펫 을 먼저 표시하도록 설정해 둔다.

언어 확장 기능에는 해당 언어에 특화된 스니펫 이 대부분 들어 있다.

자주 사용하는 문자열을 나만의 스니펫 으로 등록할 수도 있다.

한 파일 에서 정의한 함수나 메서드 를 다른 파일에서 사용해야 하므로

여러 파일 을 오가며 편집하는 것이 필수적이다.

파일로 이동 기능은 파일 을 빠르게 열 수 있다.

커서 는 코딩 중 변수, 함수, 메서드 의 정의를 확인할 수 있는

다양한 기능을 제공한다.

대규모 프로그램 을 개발할 때는 함수나 메서드 가 어디에서

호출되는지 파악하는 것도 중요하다.

호출 계층 보기는 피킹 창에 해당 항목을 참조하는 위치가 한눈에 표시된다.

언어에 따라 참조가 표시되는 범위가 다르다.

내부에 불필요한 코드 나 복잡한 코드가 남아 있다면

프로그램 효율성이 저하되거나 유지 관리가 어려워질 수 잇다.

리팩터링 으로 프로그램 의 외부 동작에는 영향을 주지 않으면서

내부 코드 를 개선한다.

리팩터링 액션 은 커서가 제안한 접근할 수 없는 코드 제거 같은 빠른 수정안이다.

Commad K를 사용하면 코드 블록 을 함수나 메서드 로

쉽게 추출할 수 있다.

기존 변수나 함수 이름을 나중에 바꿀 때, 모든 부분에서 수정하지 않으면

오류가 발생할 수 잇다.

기호 이름 바꾸기 기능을 사용하면 변수나 함수 이름을 바꿀 때

해당 변수를 참조하는 부분에서도 이름이 변경된다.

생성한 앱 에 대한 설명을 AI 챗 기능으로 만들어 본다.

맥락에 따라 AI가 더 능동적으로 코드베이스 와 상호 작용할 수 있다.

소스 코드 에 포함된 기능 또는 사용 방법 등을 정리한

README 파일을 생성할 수 있다.

AI로 문서를 만들 때는 필요한 정보를 충분히 전달하고

만들어진 문장을 검토하여 내용이 올바른지 확인하는 것이 중요하다.

6장 커서에서 깃 사용해 보기 에서는

소스 제어 는 기스로 버전 관리를 할 수 있다.

버전 관리 시스템 은 파일의 변경 이력을 체계적으로 저장해

문제 원인을 빠르게 파악하고 필요 시 이전 버전 으로 복원할 수 있다.

깃 을 사용하려면 리포지터리 가 필요하다.

커밋 은 변경 이력을 숨김 영역에 기록하는 작업이다.

깃 에서는 푸시 또는 풀 을 직접 실행해야 동기화된다.

깃허브 에서는 분기를 병합하기 전에 동료 개발자들에게

변경 사항 검토를 요청하는 풀 리퀘스트 기능을 함께 사용한다.

깃허브 는 단순한 파일 저장소를 넘어 개발자들이 소프트웨어 문제를

논의할 수 있는 이슈 기능, 변경 사항의 타당성을 검토하는 풀 리퀘스트,

코드 리뷰 등 다양한 협업 도구를 제공한다.

깃 을 사용할 때는 누가 변경했는지 기록하기 위해 사용자 이름을 지정해야 한다.

깃 배시 는 윈도 에서 리눅스 스타일 명령줄 조작을 실현하는 도구다.

커서 에서 로컬 리포지터리 를 생성해 본다.

오류를 피하려면 폴더 이름은 영문자와 숫자만 사용한다.

리포지터리 초기화 는 선택한 폴더 안에 .git이라는 숨김 폴더 를 만드는 작업이다.

탐색기의 설정을 바꿔 숨겨진 파일 및 폴더가 표시되도록 설정을 변경하면

숨김 폴더 가 만들어진 것을 확인할 수 있다.

숨김 폴더를 확인했다면 설정을 되돌려 숨김 폴더 가 표시되지 않도록 하기를 권장한다.

파일 을 커밋 에 포함시키려면 변경 내용을 스테이징 하는 작업이 필요하다.

변경 사항을 스테이징 했다면 입력 창에 커밋 메시지 를 입력하고 커밋 을 클릭한다.

커밋 메시지 는 변경 내용을 짧고 명확하게 작성한다.

커밋 메시지는 커밋 의 변경 내용을 요약해야 한다.

AI 챗 패널 에서도 커밋 메시지 를 생성할 수 있다.

변경 내용을 스테이징 하고 커밋 메시지 를 추가한 후 커밋 한다.

커밋 이력은 탐색기 의 타임라인에서 확인한다.

소스 뷰 로 전환하면 여러 파일이 표시된다.

변경 사항에서 모든 변경 내용 스테이징 을 클릭 하면

변경된 파일 을 모두 커밋할 수 있다.

변경 내용을 삭제하면 커밋 상태 이전으로 되돌릴 수 있다.

마지막 키밋 실행 취소 를 클릭하면 커밋 이전 상태로 되돌릴 수 있다.

게시 또는 발행 작업은 로컬 리포지터리 를 기반으로

깃허브 에 원격 리포지터리 를 생성할 수 있다.

다시 게시 Branch를 클릭하면 원격 리포지터리 를

비공개로 할지 공개로 할지 선택할 수 있다.

클론 은 원격 리포지터리 를 통째로 복사해 로컬 리포지터리 를 생성한다.

원격 리포지터리 를 클론하는 작업은 여러 번 할 필요가 없다.

커서 에서 폴더 를 닫았더라도 폴더 열기 기능을 사용하면

해당 로컬 리포지터리 를 다시 열어서 작업할 수 있다.

클론 한 로컬 리포지터리 에서 자신의 커밋 을 정기적으로 푸시 하고

공동 작업자가 수행한 커밋 을 풀 해야 한다.

풀 한 다음에 변경하고 다시 푸시할 때는 문제가 발생하지 않지만

여러 변경이 동시에 일어난다면 충돌이 일어날 수 있다.

여러 사람이 함께 작업할 때 같은 파일 이라도 변경된 위치가 다르면

충돌이 발생한다.

충돌이 발생한 부분은 로컬 리포지터리 변경 내용이 위에

원격 리포지터리 의 변경 내용이 아래에 표시된다.

충돌을 해결하고 커밋 을 진행한다.

커밋 하고 원격 리포지터리 와 동기화한다.

로컬 과 원격 리포지터리 양쪽의 커밋 과 병합 커밋 을 확인할 수 있다.

AI를 사용하면 원격 및 로컬 의 모든 변경 내용을 고려해

더 나은 해결 방법을 제시해 준다.

분기는 커밋 이력을 여러 갈래로 나누어 관리하는 기능이다.

프로젝트에 큰 변경 사항을 적용할 대 분기를 만들면

변경 내용을 분기 단위로 채택하거나 삭제할 수 있어 편리하다.

분기를 만들거나 전환할 때는 가능한 한 모든 변경 사항을

커밋 한 상태에서 진행한다.

풀 리퀘스트 는 문제가 없다는 사실을 논의하는 기능이다.

풀 리퀘스트 를 작성하려면 작업용 분기를 만들고

분기에 추가한 변경 내용을 커밋 한다.

리뷰 는 풀 리퀘스트 에서 제안된 변경 사항을 확인하는 작업이다.

검토 의견을 확인하고 수정한 내용이 타당하다면 파일을 수정한다.

변경 내용을 리뷰 할 때는 하나하나 눈으로 확인해도 되지만

AI를 활용하는 방법도 있다.

변경 사항에 문제가 없음을 확인하고 풀 리퀘스트 를 병합한다.

깃렌즈 확장 기능은 현재 위체에서 커밋 내역을 확인하거나

분기를 전환하는 불편함을 해소해 준다.

깃렌즈 뷰에서 전환할 수 있는 모든 뷰 가 버튼 으로 표시되는 것은 아니다.

커밋 뷰 를 사용하면 소스 제어 뷰에서 커밋 이력 을 확인할 수 있다.

커밋 이 늘어나서 원하는 커밋 을 찾기 어려워지면 검색 & 비교 뷰 를 사용한다.

Current Line Blame 기능을 사용하면 어떤 커밋 으로 변경이 이루어졌는지

어떤 내용이 수정되었는지, 누가 변경했는지 등의 정보를 확인할 수 있다.

많은 사람들이 코딩 의 높은 벽을 넘지 못해서,

자신의 생각을 디지털 로 구현하지 못한다.

AI 기술 발전은 코딩 의 문턱을 크게 낮춘다.

커서 는 AI를 이용해 코딩 을 손쉽게 작성할 수 있도록 한다.

누구나 자신에게 필요한 프로그램 을 프로그래밍 할 수 있으므로,

AI는 일상에 깊이 파고들 것이다.

커서 는 자신의 프로그램 을 자동으로 코딩 이 가능하도록 하므로,

AI 시대가 이미 도래되었음을 깨닫게 한다.

"시작해요, 커서"는 커서 설치부터 초기 설정, 프롬프트 입력,

오류 수정 등 커서 의 사용법을 단계별로 상세하게 설명한다.

코드 개선 테크닉 을 소개하고, 확장 기능을 활용하면서,

커서 사용법을 심화 학습할 수 있도록 한다.

깃 으로 버전을 관리하고, 깃허브로 협업을 하면서,

프로그래밍 을 효율적으로 작성하고, 문제점을 해결하면서,

프로그래밍 능력을 크게 향상할 수 있다.

웹사이트 기본 틀을 만들고, 완성도를 높이며,

HTML과 CSS 편집, 코드 정렬, 편집기 이용

등을 학습하면서 포트폴리오 웹사이트 를 제작한다.

앱 기본 틀을 만들고, 디버깅, 스니펫,

파일간 정의와 참조 등을 학습하면서

AI 챗봇 을 만들어 본다

AI 시대를 살아가기 위해서는 AI 활용법을 알아야 한다.

AI의 문턱은 크게 낮아지고 있으며,

커서 는 누구나 프로그래밍 이 가능하도록 도우면서,

AI의 활용도를 크게 높이고 있다.

"시작해요, 커서"는 커서를 이용법을 배우고,

포트폴리오 웹사이트, AI 챗봇 를 제작해 보면서

AI 시대를 주도적으로 살아갈 수 있도록 돕는다.

인사이트 와 컬처블룸 서평단에서 "시작해요, 커서"를 증정해주셨다.

감사드린다.

#시작해요커서 #/인사이트 #리브로웍스 #김성훈 #서평 #컬처블룸 #컬처블룸서평단