안녕하세요 상훈입니다.

✅ 개발자를 위한 실전 비교

최근 AI 코딩 도구들이 우후죽순 쏟아지고 있는 가운데, 구글의 Gemini CLI와 Cursor AI가 개발자들 사이에서 특히 주목받고 있다. 두 도구 모두 나름의 장단점이 있지만, 실제로 사용해보니 확실히 차이가 느껴진다.

 

✅ UI/UX: Cursor의 압승

Cursor AI는 애초에 코드 에디터로 설계된 만큼 UI 면에서는 확실히 한 수 위.
VS Code를 포크해서 만들어진 덕분에 기존 VS Code 사용자라면 별다른 학습 없이 바로 적응할 수 있다.

• 직관적인 인터페이스: 채팅 패널이 에디터에 자연스럽게 통합되어 있어 코드 작성 중에도 AI와 대화하기 편하다
• 실시간 코드 제안: 타이핑하는 동안 실시간으로 코드를 제안해주는 기능이 매우 자연스럽다
• 멀티파일 편집: 여러 파일을 동시에 수정할 때도 시각적으로 변경사항을 확인하기 쉽다

반면 Gemini CLI는 터미널 기반이라 아무래도 시각적 편의성에서는 아쉬움이 있었다.
물론 CLI 환경에 익숙한 개발자라면 오히려 더 효율적일 수도 있지만, 일반적인 사용성 면에서는 Cursor가 확실히 우위에 있다.

✅ 경제적 측면: Gemini CLI의 완승

가격 면에서는 Gemini CLI가 압도적. 구글이 정말 파격적인 조건을 내놓았다.

	Gemini	Cursor AI
기본 요금	완전 무료	$20/월 (Pro 플랜)
무료 체험	제한 없음	1개월 무료
일일 요청 한도	1,000회	제한적
분당 요청 한도	60회	-

 

Gemini CLI는 개인 구글 계정으로 로그인하면 Gemini 2.5 Pro 모델을 완전 무료로 사용할 수 있다.
하루 1,000회, 분당 60회라는 넉넉한 한도까지 제공한다.

Cursor AI는 Pro 플랜이 월 20달러인데, 이는 연간 240달러에 해당한다. 물론 Cursor도 1개월 무료 체험을 제공하지만, 장기적으로 보면 비용 부담이 만만치 않다.

1년 구독 해버린 사람으로써 살짝 아쉬울 정도..?

 

✅ 속도: Gemini CLI가 근소하게 앞서

실제 사용해보니 응답 속도 면에서는 Gemini CLI가 조금 더 빠르다고 느껴진다.
특히 Gemini 2.5 Pro 모델을 사용할 때 응답이 상당히 빠르다.

다만 이 부분은 사용 환경과 네트워크 상황에 따라 달라질 수 있다.
Cursor AI도 충분히 빠른 편이지만, 복잡한 요청을 처리할 때는 Gemini CLI가 좀 더 민첩하게 반응하는 것 같다.

 

✅ 편의성: Cursor AI의 우위

편의성 면에서는 Cursor AI가 확실히 앞선다. 
특히 개발 경험이 많지 않은 사용자에게는 더욱 그렇다.

Cursor AI의 편의성 장점:

• 학습 곡선이 낮음: VS Code 사용자라면 바로 적응 가능
• 시각적 피드백: 코드 변경사항을 실시간으로 확인 가능
• 통합된 워크플로우: 에디터 안에서 모든 작업 완료 가능
• 초보자 친화적: 코딩 경험이 적어도 쉽게 사용 가능

Gemini CLI의 아쉬운 점:

• 터미널 의존성: CLI 환경에 익숙하지 않으면 진입 장벽이 높음
• 복사-붙여넣기 필요: 생성된 코드를 직접 복사해서 에디터에 붙여넣어야 함
• 시각적 제약: 코드 변경사항을 바로 확인하기 어려움

Gemini CLI가 2025년 6월에 출시된 따끈따끈한 도구인 만큼, 아직 사용자 경험 최적화가 부족한 면이 있다.

 

✅ 기능적 특징 비교

Gemini CLI만의 특별한 기능:

• 구글 검색 통합: 터미널에서 직접 구글 검색 가능
• MCP 서버 지원: 외부 도구와의 연동이 강력함
• 파일 시스템 직접 접근: 파일 읽기/쓰기/실행이 자유로움
• 대용량 컨텍스트: 100만 토큰 컨텍스트 윈도우 지원

Cursor AI만의 장점:

• 실시간 코드 제안: 타이핑과 동시에 코드 완성
• 멀티파일 리팩토링: 여러 파일을 동시에 수정 가능
• API 문서 통합: API 문서를 읽고 정확한 코드 생성
• 인라인 편집: 코드 블록을 선택해서 바로 수정 요청 가능 : Agent의 강력함

 

✅ 결론: 용도에 따른 선택

두 도구 모두 각각의 강점이 뚜렷하다.

Gemini CLI를 추천하는 경우:

• 비용을 최대한 절약하고 싶은 개발자
• 터미널 환경에 익숙한 숙련된 개발자
• 복잡한 자동화 작업이 필요한 경우
• 대용량 코드베이스를 다루는 경우

Cursor AI를 추천하는 경우:

• 개발 경험이 많지 않은 초보자
• 시각적 피드백을 중시하는 개발자
• VS Code에 익숙한 사용자

개인적으로는 학습 목적이나 간단한 프로젝트에는 Cursor AI, 본격적인 개발 작업에는 Gemini CLI를 사용하는 것이 좋을 것 같다. 특히 Gemini CLI의 무료 정책은 정말 매력적이다. 구글이 언제까지 이 혜택을 유지할지는 모르겠지만, 지금 당장은 가성비가 매우 훌륭하다고 불 수 있다.

 

 

 

참고 사이트::

1. https://techpoint.africa/guide/cursor-vs-vscode-vibe-coding-review/
2. https://scalablehuman.com/2025/02/27/5-reasons-i-chose-cursor-ai-over-vs-code-a-developers-honest-review/
3. https://blog.enginelabs.ai/cursor-ai-an-in-depth-review
4. https://dev.to/javeedishaq/gemini-cli-tells-what-tools-do-the-gemini-cli-use-for-ai-coding-comparing-gemini-claude-and-416f
5. https://blog.google/technology/developers/introducing-gemini-cli-open-source-ai-agent/
6. https://www.infyways.com/google-gemini-cli-review/
7. https://blog.getbind.co/2025/06/27/gemini-cli-vs-claude-code-vs-cursor-which-is-the-best-option-for-coding/
8. https://www.youtube.com/watch?v=CqL5kB8pOfo
9. https://velog.io/@dnjstjdgus03/GeminiCLI
10. https://www.reddit.com/r/Bard/comments/1lkb5u3/google_gemini_cli_is_end_game/
11. https://dev.to/therealmrmumba/i-tested-gemini-cli-and-other-top-coding-agents-heres-what-i-found-om1
12. https://javascript.plainenglish.io/i-tried-googles-new-gemini-cli-it-s-the-most-powerful-open-source-dev-tool-e8c35ee338a6
13. https://www.youtube.com/watch?v=JcgdGESQlEQ
14. https://www.youtube.com/watch?v=6NJYlWuoA_w
15. https://randomcoding.com/blog/2024-09-15-is-cursor-ais-code-editor-any-good/
16. https://www.youtube.com/watch?v=psvzcHDLKto
17. https://www.reddit.com/r/ChatGPTCoding/comments/1c1o8wm/anyone_using_cursor_ai_and_barely_writing_any/
18. https://www.rectify.so/categories/all/claude-code-vs-cursor-vs-gemini-cli
19. https://www.arguingwithalgorithms.com/posts/cursor-review.html
20. https://slashdot.org/software/comparison/Cursor-vs-Gemini-CLI/

vue.js 3, vue-cli 4.5.x 버전에서 tailwind css 를 설치하려고하는데 에러가 발생하였다.

지난 포스팅에서는 아직 tailwindcss가 vue3에 맞춰서 나오지 않았기에 에러가 났지만, 지금은 출시가 되었다.

그런데 에러라니!?

그래서 해결책을 찾아왔다.

core-js, vue, vue-cli 의 버전이 최신이 아니었기에 오류가 발생하였다.

그래서 각각 버전을 모두 최신화 하였고, 정상적으로 설치가 되었다.

최신화: core-js, vue, vue-cli

npm install --save core-js@^3
npm install vue@next
vue upgrade --next

아무래도 얼마전에 tailwind.css 가 최신화가 된만큼, node, core-js, vue 등의 버전도 가장 최신으로 올려야  알맞게 설치가 된다.

그리고 다시 tailwindcss 설치

npm install -D tailwindcss postcss autoprefixer

■ 결과 확인

가장 중요한 결과 확인 작업이 남았다. 기본 default css 설정 후, class를 입력해보았다.

해당 웹사이트 공유

에러 해결은 역시 stackoverflow

vue 3,  vue-cli 4.5.x 의 환경을 사용하고 있습니다.

■ LocalStorage

 - 로컬 스토리지에 관하여 자세한 내용은 MDN의  링크를 확인해주시기 바랍니다.

사용 방법은 아주 간단합니다.

localStorage.setItem() 으로 저장, localStorage.getItem() 으로 호출 입니다.

번외로 localStorage.removeItem() 로 지정하여 삭제가 가능하고, localStorage.clear()로 모두 삭제가 가능합니다.

■ 예제

//add.vue

<template>
  <div class="add">
      <input 
        type="text" 
        class="add__input" 
        placeholder="Enter your task" 
        v-model="newTodoItem"
        @keyup.enter="addTodoItem"
      />
      <button 
        class="add__button"
        @click="addTodoItem"  
      >Add</button>
  </div>
</template>

Input:text 창에서 enter를 누르거나, button을 클릭하면 addTodoItem이라는 함수가 호출되게 하였습니다.

v-model을 통하여 input에 작성되어져 있는 value와 연동하였습니다.

export default {
  data () {
    return {
      newTodoItem: ''
    }
  },
  methods: {
    addTodoItem () { 
      if(this.newTodoItem !== '') {

        const value = {
          item: this.newtodoItem,
          date: `${new Date().getMonth() + 1}/${new Date().getDate()}`,
          compeleted: false
        }

        // setItem 이라는 method 속에 key, value를 전달
        localStorage.setItem(this.newTodoItem, JSON.stringify(value))
        this.clearInput()

      }
    },
    clearInput () {
      this.newTodoItem = ''
    }
  }

}

localStorage.setItem( )은 key와 value를 전달 수가 있는데, 이를 응용하여 value에 JSON 객체를 전달하도록 하였습니다.

value라는 객체에 위에서 작성한 input의 값을 저장하고, localStorage에 데이터를 저장하였습니다.

로컬 스토리지에 저장된 것을 확인하고 싶다면, 개발자도구 -> Application -> 저장용량 -> 로컬 스토리지 에서 확인하실 수 있습니다.

Vue.js Cli 3 부터 prefetch 기능이 추가 되었습니다!

■ prefetch란?

pre + fetch 로, fetch를 선행한다는 뜻입니다. 
기본적으로 Vue.js에서는 prefetch = true로 설정되어져 있고, 이를 vue.config.js 에서 수정이 가능합니다.
브라우저가 미리 캐시(cache) 하는 것으로, 브라우저를 사용하는데에 빠르다고 느낄 수 있다.

■ 사용 목적

1. 렌더링 시간 단축
    => 하지만, 잘못 사용 시 오히려 렌더링 시간이 증가하게 된다. 

■ 특징

- Lazy Load가 적용된  Components는 모두 prefetch 기능이 적용 된다. (= 캐시가 미리 저장된다)
- 비동기 컴포넌트로 정의된 모든 리소스들을 캐시에 담기 때문에 요청(request) 수가 증가한다.
- 초기 화면은 오히려 느림
    => 마지막에 다운로드 받기 때문이다.
        => 따라서 초기 렌더링은 prefetch를 사용하지 않는 것이 더 빠르다.

■ 추가

- Vue Application 개발 시 기본적으로 prefetch는 끄는 것을 권장한다.
- vue-router에서 주석으로 처리된 "webpackPrefetch: true" 를 넣어주면 prefetch가 적용된다.

Vue.js 3 에서 axios를 이용해 php 에 데이터를 송신하는 방법을 포스팅하도록 하겠습니다.

3일째 이거 만지다가 어쩌다 됐습니다. 억울..

[버전은 상관없지만] @vue/cli 4.5.15 에서 적용하였습니다. 

■ 1. Vue-cli project 설정 1/2

/src/views/Account/AxiosTest.vue

제가 form을 이용해 post data 를 송신할 Vue 페이지는 위와 같습니다.

AxiosTest.vue 
=> input 태그 2개로, id 와 password를 전달하려고 합니다.

1. Template

<template>
  <div>
    <form action="" @submit="checkForm">
      <input type="text" name="id" v-model="idValue" />
      <input type="password" name="password" v-model="passwordValue" />
      <button type="submit">submit</button>
    </form>
  </div>
</template>

2. script

<script>
import axios from "axios";

export default {
  data() {
    return {
      idValue: "",
      passwordValue: "",
    };
  },
  methods: {
    async checkForm(e) {
      e.preventDefault();
      let idValue = this.idValue;
      let passwordValue = this.passwordValue;

      await axios
        .post("/api/loginCheck", {
          id: idValue,
          password: passwordValue
        })
        .then(function (response) {
          // handle success
          console.log("success");

          console.log(response);
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
        .then(function () {
          // always executed
        });
    },
  },
};
</script>

■ 1. Vue-cli project 설정 2/2

vue.config.js

프로젝트의 root 경로에 vue.config.js 파일을 없으신 분들은 생성해주시고 아래의 내용을 복붙해주세요.

vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080/",
      },
    },
  },
};

■ 3. php 

Apache 서버를 사용하신다면, 8080포트로 구동 중이실겁니다. (본인의 포트에 맞게 설정해주세요)

/var/www/html/ 경로에 /api 폴더를 생성해주세요. 이곳에 axios의 data 를 수신할 php 파일을 생성할겁니다.

이렇게 생성하였습니다. (자유롭게 생성해주세요. 보통 /api 라고 많이 생성합니다.

/api/loginCheck.php

<?php
 // header의 요청을 수락하는 php 설정들. 안해주면 데이터를 못받는 경우가 생김
header('Access-Control-Allow-Origin:*');
header("Access-Control-Allow-Credentials", "true");
header('Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');
header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS');

$data = json_decode(file_get_contents('php://input'), true);

// 반복문으로 데이터 출력 

■ 결과

감격스럽게도 200 통신 성공 결과가 출력되었고,

php에서 $data 는 array 의 타입이기 때문에 출력 결과(response) 가 array 로 출력되었습니다. 

■ 1차 수정

- 기존에 params 를 넘겨줘서 자꾸 데이터가 array로 출력이 되었습니다.

- 기존 : data(=params객체) : jsonStyleValues 
- 변경 : { jsonStyleValues list}

* POST method에서는 params 를 넘겨주면 안된다. 

참고

https://coderedirect.com/questions/43570/axios-get-from-local-php-just-returns-code-instead-of-executing

덕분에 3일동안 axios와 http, proxy, 등에 대해 많이 공부할 수 있었습니다.

Linux, Ubuntu, Vue-cli, axios를 사용하는데, proxy 에러가 출력되었다.

Proxy error: Could not proxy request 

■ 해결 방법

해당 에러는 root 경로의 vue.config.js 에서 proxy 관련 정보를 수정하면 된다.

/vue.config.js

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "https://localhost:8081/",
      },
    },
}

기본 경로(/root)가 될 port 번호와 정보를 작성하면 된다.

proxy 문제가 해결된것을 확인하실 수 있습니다.

이렇게 axios를 이용해서 데이터를 올바른 경로에서 뽑아오면 되겠습니다.

에러문구

VM8167:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Vue.js 3 ,  App.vue 에서 json 파일을 fetch() 하려고 했는데 경로를 옳게 작성했는데 이런 에러가 발생하였음.

해당 파일의 경로는 같은 폴더 내(/src) 에 있었지만 발생하였고, Network에서 확인하니 404에러가 발생하였다.

해결방법

json 파일을 /src 가 아닌, /public에 넣어서 사용하도록 한다.

경로를 변경해주니까 바로 200 success가 반환되었습니다.

내부에 js폴더를 추가시켜 사용하여도 똑같이 잘 읽습니다.

public/js/food.json

결론.

경로 설정을 잘 합시다.

안녕하세요 상훈입니다.

Vue cli 3 를 유튜브로 클론코딩 하였습니다.

위는 해당하는 강의 내용입니다.

Vue.js 버전은 3.2.20 이고, 
Vue/cli는 4.~ 입니다. 

style은 tailwind.css를 사용하였고,
추가된 라이브러리는 moment.js 로, datetime을 출력할 수 있는 자바스크립트 라이브러리입니다. 

일단 결과적으로 문제가 한 개 있었는데 고치지 못하였습니다. ㅎㅎ;;

moment.js 관련해서 인 것같은데 어떻게 해야할지 모르겠더군요. 

=> 원작 개발자님의 소스를 보아도 아예 포맷이 달라, 결론을 얻어내지 못하였습니다.

발생한 에러는 dataDate(현재시각)관련해서의 에러인데... 타입에러가 발생하였고, 프로퍼티가 선언되지 않았다고 합니다.

분명 main vue 에서
1. 변수 선언
2. DataTitle.vue 에서 props로 참조해주어
3. data 출력을 진행하였지만 해당되는 내용에 에러가 발생하였습니다. 

언젠가 이게 무슨 원리로 제대로 작동하는지 이해해서 수정할 수 있을거라 생각합니다......ㅎ.ㅎ..

결과화면

select-option을 이용하여 해당 내역을 모두 불러올 수 있고, 이를 computed 처리하여 실시간으로 데이터가 전환됩니다. 

button - Clear Country 하면 다시 Global을 나타냅니다. (=초기화)

모바일 화면에서는 이렇게 출력될겁니다.

이렇게 프로젝트를 따라 만들어보면서 느낀것이 

1. vue.js 에 대해 이제 알아듣는 것 보니 걸음마는 떼었다.
2. async await에 대해 공부를 좀 해야겠습니다.

이상입니다.

수고!

사용

코로나 api

프로젝트전체

,