바이브코딩 입문 시리즈 07앞에서 터미널, Git, Node.js와 npm, AI 코딩 도구의 기본 개념까지 알아봤다면 이제부터는 실제로 AI와 함께 코드를 작성해볼 차례입니다.이번 글에서는 바이브코딩에서 가장 많이 활용되는 AI 코드 에디터 중 하나인 Cursor가 무엇인지, 일반 코드 에디터와 무엇이 다른지, 그리고 초보자가 어떤 방식으로 사용하면 되는지 알아보겠습니다.Cursor를 처음 실행했는데 파일은 어디서 열어야 하는지, AI에게 무엇을 요청해야 하는지 막막했다면 이번 글부터 천천히 따라오면 됩니다.1. Cursor란?Cursor는 쉽게 말하면 AI 기능이 코드 에디터 안에 깊게 통합되어 있는 개발 도구입니다.우리가 일반 문서를 작성할 때 워드나 한글을 사용하듯이, 개발자는 코드를 작성하기 위..

Cursor, Claude Code, Codex 중 무엇을 써야 할까요?바이브코딩을 조금 찾아보기 시작하면 거의 반드시 만나는 이름이 있습니다. 바로 Cursor, Claude Code, Codex입니다.세 도구 모두 자연어로 원하는 기능을 설명하면 AI가 코드를 분석하고 수정해준다는 공통점이 있지만, 실제로 사용하는 화면과 작업 방식은 꽤 다릅니다.이번 글에서는 코딩을 처음 시작하는 사람의 관점에서 각 도구가 무엇인지, 어떤 차이가 있는지, 그리고 처음에는 무엇을 선택하면 좋은지를 알아보겠습니다.1. 바이브코딩 도구란 무엇일까?예전에는 개발자가 직접 코드를 한 줄씩 작성하고, 오류가 발생하면 검색을 통해 해결 방법을 찾아야 했습니다.바이브코딩에서는 이 과정의 상당 부분을 AI에게 맡길 수 있습니다. 우..

바이브코딩을 시작했는데 갑자기 npm install을 실행하라고 한다면?Cursor나 Claude Code 같은 AI 코딩 도구로 웹서비스를 만들다 보면 생각보다 빠르게 Node.js, npm, package.json이라는 용어를 만나게 됩니다.AI가 코드를 만들어주는 시대라고 해도 이 세 가지가 어떤 역할을 하는지 전혀 모르면 프로젝트 설치나 실행 단계에서 쉽게 막힐 수 있습니다.이번 글에서는 코딩을 처음 시작한 사람도 npm이 무엇인지, Node.js와 어떤 관계인지, package.json은 왜 필요한지를 이해할 수 있도록 실제 바이브코딩 과정과 연결해서 알아보겠습니다.1. npm은 왜 알아야 할까?바이브코딩을 하다 보면 AI가 코드를 작성하는 것보다 먼저 프로젝트에 필요한 도구를 설치하는 과정이 ..

바이브코딩을 시작하면 Git과 GitHub라는 단어를 거의 반드시 만나게 됩니다. AI에게 코드를 만들어 달라고 하다 보면 어느 순간 “변경하기 전에 commit을 해주세요”, “GitHub Repository에 push하세요”, “문제가 생기면 이전 commit으로 돌아가세요” 같은 말을 듣게 됩니다. 처음에는 굳이 이런 것까지 알아야 하나 싶을 수 있습니다. 하지만 Git을 모른 채 AI가 코드를 계속 수정하게 두면, 잘 작동하던 서비스가 갑자기 망가졌을 때 이전 상태로 되돌리기가 매우 어려워질 수 있습니다. 이번 글에서는 Git과 GitHub가 무엇인지, 둘의 차이는 무엇인지, commit·push·pull은 어떤 의미인지를 코딩을 처음 접하는 사람의 기준에서 알아보겠습니다.1. Git이란?Git은..

바이브코딩을 시작했는데 갑자기 검은 화면이 나타났나요?Cursor나 Claude Code 같은 AI 코딩 도구를 사용하다 보면 “터미널에서 이 명령어를 실행하세요”라는 말을 자주 만나게 됩니다.처음에는 검은 화면에 글자만 가득해서 어렵게 느껴질 수 있지만, 터미널은 개발자가 컴퓨터에게 명령을 전달하는 또 하나의 방법일 뿐입니다.이번 글에서는 터미널이란 무엇인지, CLI와 터미널의 차이, 그리고 바이브코딩에서 실제로 자주 사용하는 기본 명령어를 코딩을 처음 접하는 사람도 이해할 수 있도록 하나씩 알아보겠습니다.1. 터미널이란?터미널(Terminal)은 문자를 입력해서 컴퓨터에게 명령을 내리는 프로그램입니다.우리가 평소 컴퓨터를 사용할 때는 대부분 마우스를 이용합니다. 폴더를 열려면 폴더를 더블 클릭하고, ..

[ 바이브코딩 ] 바이브코딩 용어 총정리 - 초보자가 꼭 알아야 할 개발 용어바이브코딩을 처음 시작하면 생각보다 코드를 직접 작성하는 것보다 먼저 막히는 부분이 있습니다.바로 개발 용어입니다.Cursor나 Claude Code, Codex 같은 AI 코딩 도구에게 기능을 만들어달라고 요청하면 AI가 자연스럽게 이런 말을 하기 시작합니다."백엔드 API를 하나 추가하겠습니다.""환경변수에 API Key를 등록해주세요.""npm 패키지를 설치한 뒤 개발 서버를 다시 실행하겠습니다.""localhost:3000에서 확인할 수 있습니다."개발자라면 익숙한 표현이지만 코딩을 처음 시작한 사람에게는 한 문장 안에도 모르는 단어가 여러 개 등장합니다.그렇다고 바이브코딩을 하기 전에 개발 공부를 몇 달씩 할 필요는 없..

[ 바이브코딩 ] 바이브코딩(Vibe Coding)이란? 코딩 초보자를 위한 완벽 입문 가이드최근 개발이나 AI 관련 콘텐츠를 보다 보면 바이브코딩(Vibe Coding)이라는 단어를 정말 자주 볼 수 있습니다.Cursor, Claude Code, Codex 같은 AI 코딩 도구가 등장하면서 이제는 개발자가 직접 모든 코드를 작성하는 대신, AI에게 내가 원하는 기능을 설명하고 AI가 실제 코드를 작성하도록 하는 개발 방식이 빠르게 확산되고 있습니다.특히 개발 경험이 없는 사람도 "간단한 홈페이지를 만들어줘", "로그인 기능을 추가해줘", "엑셀 파일을 업로드하면 내용을 분석하는 웹서비스를 만들어줘" 처럼 자연어로 요청하면서 프로그램을 만들 수 있게 되었습니다.하지만 바이브코딩이 정말 코딩을 하나도 몰라..

[ 바이브코딩 ] 초보자를 위한 바이브코딩 입문 가이드 요즘 개발 관련 콘텐츠를 보다 보면 바이브코딩(Vibe Coding)이라는 단어를 정말 자주 볼 수 있습니다.예전에는 웹사이트나 앱을 만들기 위해 HTML, CSS, JavaScript부터 하나씩 공부해야 했다면, 최근에는 내가 원하는 기능을 자연어로 설명하고 AI와 대화하면서 실제 서비스를 만들어가는 방식이 빠르게 확산되고 있습니다.그리고, 이제는 실무에서도 쓸수 있을정도로 수준이 많이 올라왔다고 생각합니다. 저희 회사에서도 실제로 코딩업무는 바이브코딩으로 대체해서 작업하고 있습니다.하지만 막상 바이브코딩을 시작하려고 하면 생각보다 모르는 단어가 굉장히 많이 등장합니다.예를 들어 이런 말들입니다.✔️ 터미널을 열어주세요.✔️ npm install을..

[ UX/UI ] 토글(Toggle) UX 용어 정리 – 개념, 예제 UX/UI 디자인에서 토글 스위치는 UI에서 가장 자주 등장하는 인터페이스 중 하나입니다.특히 모바일 앱이나 설정 화면에서 “ON/OFF”, “활성/비활성” 같은 단순한 조작을 손쉽게 구현할 수 있어 UX 측면에서 매우 유용한 컴포넌트라고 볼 수 있습니다. 이번 포스팅에서는 토글이란 무엇인지, 그리고 UX/UI 설계에서 토글을 구성하는 핵심 요소들에 대해 상세히 정리해보겠습니다.✅ 각종 팁 모음 [정보공유 같이해요/Terms] - [ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제 [ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제[ UX/UI ] 버튼(Button) UX 용어 정리 - 개념, 예제..

[ UX/UI ] 툴팁(Tooltip) UX 용어 정리 – 개념, 예제 UX/UI 디자인에서 툴팁(Tooltip)은 사용자의 이해를 돕기위한 요소입니다. 이번 포스팅에서는 툴팁의 요소가 무엇인지, 그리고 실무에서는 어떤식으로 쓰이는지 정리해보도록 하겠습니다.✅ 각종 팁 모음 [정보공유 같이해요/Terms] - [ UX/UI ] 폼(Form) UX 용어 정리 – 개념, 예제 [ UX/UI ] 폼(Form) UX 용어 정리 – 개념, 예제[ UX/UI ] 폼(Form) UX 용어 정리 – 개념, 예제 UX/UI 디자인에서 폼(Form)은 사용자 입력을 처리하는 중요한 요소입니다. 이번 포스팅에서는 폼의 주요 요소, 입력 필드 유형, 오류 메시지, UX 최적화it-ability.tistory.com [정..