5주 간의 Cursor IDE 실전 사용 후기: AI로 코딩 효율성 극대화하기.
목차 펼치기
![Created By GPT4.](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2F900c2477-bb86-4e83-91de-d496d3f24007%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D24ffc08d4f134ada71b0545d90557a78497b93dfccbd31baedfbe523ada06994%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=5d54da3f-dfad-4bcc-a646-cdec784d47cc&cache=v2)
Created By GPT4.
머리말
머리말
넘실대는 AI 파도 속에서 모 설문조사에 따르면 많은 개발자가 Copilot을 사용하고 있다고 하지만 저는 한 번도 사용해 본 적이 없었습니다. 그러다 유독 가벼운 호기심이 동하던 날, Cursor IDE를 설치하면서 내장된 Copilot++와 AI Chat 기능을 사용하기 시작했습니다. 불과 몇 시간 만에 무료 토큰이 동이 났고 그렇게 구독을 시작했습니다. 이후 약 3주간 사용하고 나서 생각나는 바를
링크드인과
커리어리에 올렸었습니다. 그로부터도 2주가 지난 지금, 작성했던 후기 글을 다듬고 일부 내용을 보충해서 다시 후기를 작성합니다.
TL;DR;
TL;DR;
AI는 백설공주 속 왕비의 거울이지 알라딘의 램프가 아니다.
코딩은 생각보다 단순 작업이 많다.
이름은 명확하게 정의해야 한다.
기초를 두텁게 쌓아야 한다.
AI 도구를 다루는 것도 하나의 소양이 될 것 같다.
후기
후기
Cursor IDE를 설치해서 사용하기 시작했다고는 해도 처음에는 평소와 다름없었습니다. 플러그인 등 VSCode 설정들이 바로 마이그레이션 되었지만, AI를 위한 단축키와 제가 사용하는 VSCode 단축키가 충돌해서 이를 해결하기 위해 번거로운 시간을 거치느라 다소 맥이 빠지기도 했었습니다.
하지만 점점 AI가 제안해 주는 코드가 눈에 들어오기 시작하고, 작업 포인트를 넘나들며 제 의도를 너무 잘 이해한 코드를 제안해 줄 때 저도 모르게 감탄사를 내뱉기 시작했습니다. 그렇게 불과 몇 시간 만에 tab으로만 코드를 작성하는 제 모습이 섬뜩하게 느껴지기도 했습니다.
그렇게 약 2주의 시간이 흐르고, 조금씩 AI Chat 기능을 사용하기 시작했습니다. 문맥을 파악시켜 코드를 리팩터링하거나 코드 블록을 생성하기 시작했습니다.
또 그렇게 약 1주의 시간이 흐르고, 이제는 포인터를 가져다 대거나 몇 글자만 입력하면 제가 원하는 코드와 유사한 코드를 제안해 줄 것이라는 마음을 가지고 코딩하기 시작했습니다. 즉, 세부 로직이나 문법에 대한 고민 없이 적당히 흐름에 대해서만 작성하는 것입니다. 틀린 부분은 제가 조금만 손 보면 되었습니다. Chat GPT나 구글을 열지 않고 AI Chat으로 질문하는 것도 자연스러워졌습니다.
불과 3주 만에 이전과는 전혀 다른 방식으로 훨씬 빠르게 작업하게 되었습니다. 생각보다 코딩에는 단순한 작업이 너무 많았고 이를 AI에 위임하며 온전히 로직과 흐름, 기획과 UX에 집중하며 개발 속도가 생각하는 속도에 한층 가까워졌습니다. 실무는 물론이고 가벼운 사이드 프로젝트에서도 GPT4로 데이터를 가공하고 Cursor로 초기 코드를 작업할 수 있었습니다. 이 변화가 너무도 놀라워 개발팀에 Cursor를 소개하기도 하고, SNS에 제 생각을 공유하기도 했습니다.
이 과정에서 AI로 대체되어 버릴 것만 같은 두려움도 많이 해소가 되었는데, AI와 같이 작업을 하며 아무리 봐도 더 나은 생산성을 위한 도구로 백설 공주 속 왕비의 거울이지 알라딘의 램프는 아닌 것 같다고 느꼈기 때문입니다. ‘어떤 질문에도 대답을 해준다’와 ‘어떤 문제도 해결해 준다’는 결이 다른 이야기였습니다.
또 이름 짓기가 더욱 중요해졌다고 느꼈습니다. JS의 정적 슈퍼셋 언어인 TS를 통해 IDE의 인텔리전스 기능을 효과적으로 활용했던 것처럼 명확한 이름을 통해 개발자뿐만 아니라 AI도 문맥을 더 명확히 파악해서 더 개발자가 원하는 코드를 제안해 줄 수 있기 때문입니다.
이 과정에서 기초가 중요하다는 생각만 더욱 커졌습니다. AI가 제안해 주는 것이 모두 다 답이 아니기 때문에 정답과 오답을 가리고, 좋은 질문을 하기 위해서는 내게 이해도가 있어야 합니다. AI가 제안해 준 내용 안에 있는 무언가 모를 이상함을 느끼고 파고들 수 있어야 합니다.
프레임워크에 해박하고, 변화하는 트렌드에 발맞추며 어떤 새로운 기술도 척척 응용할 수 있다면 너무 좋겠지만 너무나 빠르게 기술이 발전해서 따라가기도 버 거운 세상입니다. 마치 붉은 여왕이 사는 곳만 같습니다. 그 자리에 멈춰있기 위해 끊임없이 달려야 하는 그런 세상 말입니다. Chat GPT가 등장하며 더욱 빠르게 변하는 세상 속에서, AI 도구를 적절히 다룰 줄 아는 것도 하나의 소양이 되지 않을까 생각합니다.
활용 팁
활용 팁
예시를 위해 만든 내용과 실무에서 사용한 내용을 더해 다양한 방법을 공유하고 싶었습니다. 하지만 아무리 예시를 들어도 이는 AI를 이용해 빠르게 결과물을 만들어낼 수 있는 가능성 중 일부에 불과합니다. 문맥과 올바른 이름이나 설명만 주어진다면, AI는 여러 작업 파일을 넘나들며 생각의 속도만큼이나 빠르게 코드를 만들어줄 것입니다. 예시를 보며 이해한 활용성과 사용해 보며 이해하는 활용성은 다를 것입니다.
분기문 생성
분기문 생성
switch, if 문 등 특정 상황에 따른 분기문을 작성할 때 번거로운 반복 작업을 줄여줍니다. 유니온 타입이 잘 선언되어 있다면, 그 내용까지 잘 이해해서 제안합니다.
![분기문 생성 예시 1](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2F775b6634-181a-4b4e-9160-b37208d6938f%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D5534cf20aec485ce853f53d2be26944134708fb2dcc02f0ed26d83b313b1e629%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=5dc24679-9fc4-424e-a39c-bd54d84f6701&cache=v2)
분기문 생성 예시 1
함수 생성
함수 생성
이름을 잘 짓거나, 함수의 기능을 설명하면 바로 코드를 생성해 줍니다.
![함수 생성 예시 1](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2F94c1d4ff-5c9b-4608-82d8-afb3ef5e2d5d%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D241e232a2f1ecd35b4cb2c869b9988be1a628cc78cd667f58b910c6f60a8be64%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=33b44342-aa9b-4e58-a4a8-51f3572e8977&cache=v2)
함수 생성 예시 1
![함수 생성 예시 2](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2F6ab514c6-4b65-4812-86a7-e9ae7bb4bb12%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3Dae286a6a3da57caf0e11b43ffea7d6a6d3fafa9789592fff037c173aa72ab6fa%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=bc384b99-1b52-4592-b186-8ee5b338bee8&cache=v2)
함수 생성 예시 2
타입 생성
타입 생성
JSON 데이터를 타입으로 변환해 주는 사이트(
transform: json to typescript)도 있지만, 그 외에도 개발 단계에서 생성할 많은 타입들을 자동 생성할 수 있습니다.
![타입 생성 예시 1](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2Ff899ea26-28e9-4173-9cdd-c46cad619f79%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3Df63ee7a3db32e8c9cd1d6ac6dad349a480002cac4b97f161b816cb10dab0eed4%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=16b2f468-7c67-4671-aa7c-2315736dfdc1&cache=v2)
타입 생성 예시 1
보일러 플레이트 생성
보일러 플레이트 생성
Next.js, Svelte, express 등 특정 기술에 맞는 보일러 플레이트를 빠르게 생성할 수 있습니다.
![보일러 플레이트 생성 예시 1](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2Fe9dade00-90ac-4238-bc26-e0c99b8f454b%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D0293832204e4c3560861410f101fbccc03edbb4bc948d96099eece52646dd872%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=78cd3e1b-dee7-4a21-bc12-d8f87fc7627c&cache=v2)
보일러 플레이트 생성 예시 1
![보일러 플레이트 생성 예시 2](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2Fedac3211-2559-4413-b9b1-9519174f3fb0%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3De214a9f9513038df97137a6fcabcde0ba0c3fa2ce3fbe031d1535f08fdd5d2a5%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=b100db3d-5b22-4fa0-853f-402489c20908&cache=v2)
보일러 플레이트 생성 예시 2
리팩터링
리팩터링
에디터에서 AI가 리팩터링한 내용을 반영할 수 있습니다.
![리팩터링 생성 예시 1](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2Fc4d6a628-1b5a-4e73-9358-d7ebb75a928f%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D121dabd0e97c650f1750da9c2c676a8d1f85d92502ae2beb4bea4620880de056%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=d024ab8c-6fc5-46f6-96e8-b87b5088852d&cache=v2)
리팩터링 생성 예시 1
테스트 코드 생성
테스트 코드 생성
이 내용은 스토리북 코드를 작성할 때 사용했던 스크립트입니다. 컴포넌트 코드를 전달해서 바로 테스트 코드를 만들 수 있습니다.
![테스트 코드 생성 예시 1](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2Fe4250bab-b931-4d44-90fc-ee700f1f7509%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D646547eb70f3dade299657c07e4aba7073228e077221aff781a4cf9a66362867%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=40d896bb-7964-4b11-a2d6-f7df5c408d68&cache=v2)
테스트 코드 생성 예시 1
코드 베이스 질문
코드 베이스 질문
사람의 개성처럼 프로젝트마다 다른 부분들이 있는데, 이를 효과적으로 고려해서 원하는 코드를 얻어낼 수 있습니다.
![코드 베이스 질문 예시 1](https://treefeely.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2Fad9b6331-a1bf-4510-ab6e-afe732ede744%2F1d91f759-ae38-4f8a-8ead-a1d1dd56eb47%2FUntitled.png%3FX-Amz-Algorithm%3DAWS4-HMAC-SHA256%26X-Amz-Content-Sha256%3DUNSIGNED-PAYLOAD%26X-Amz-Credential%3DAKIAT73L2G45HZZMZUHI%252F20240730%252Fus-west-2%252Fs3%252Faws4_request%26X-Amz-Date%3D20240730T123100Z%26X-Amz-Expires%3D3600%26X-Amz-Signature%3D581a1cb78220b6f5f8e2880be2e548bebf7f8720f149bcd18a8acb5415db6595%26X-Amz-SignedHeaders%3Dhost%26x-id%3DGetObject?table=block&id=4a53b9c9-d48b-47a8-b03b-24e7694f245a&cache=v2)
코드 베이스 질문 예시 1