본문 바로가기

AI for ALL

코드 한번 쳐본 적이 없는 비개발자를 위한 Vibe coding 환경 설정 방법

 
최근 주변에 개발 경험이 없는 사람에게 Vibe coding 환경 설정을 도와주었다. 초반 설정에서 제일 어려움을 느끼는 모습을 보고 관련 글을 써보기로 하였다.
물론 하나하나 경험하면서 해보는것도 좋을 수 있으나 너무 과도한 시행착오는 흥미를 잃게 만든다고 생각하여 내 세팅을 공유하고자 한다.

설치해야 하는 것

Vscode (Visual studio code)
WSL (Window Subsystem Linux)
Claude code or Codex (둘다 있으면 좋다.)

설치

Vscode

vscode는 일반적으로 IDE라고 불리우는 소프트웨어 개발자용 어플리케이션으로 코드 편집 및 버전 관리 등등 다양한 기능 등을 쉽게 사용할 수 있다. 물론, Vibe coding 시에는 그런 기능들을 사용하지 않을 수 있으나, 점점 개발을 진행하면서 필요로 하는 많은 기능들이 들어가 있으므로 설치하는 것을 추천하고 있다. 단순 코드 확인만으로도 설치할 이유는 충분하다.

Vscode의 모양새

https://code.visualstudio.com/

Visual Studio Code - The open source AI code editor | Your home for multi-agent development

Visual Studio Code is a free, open source AI code editor. Build with AI agents that plan, code, and debug for you. Manage multi-agent workflows across environments on Linux, macOS, and Windows.

code.visualstudio.com

 
위 링크에서 설치할 수 있다. 설치 후에 추천하는 일은 터미널을 오른쪽으로 옮기는 것인데, ctrl + ` 를 입력하면 터미널이 아래에 뜬다.

아래에 터미널 이라는게 뜬다

그걸 눌러서 드래그 한 후에 우상단에 Chat으로 옮기자.
 

저 터미널을 눌러서

 

우상단의 챗 옆으로 옮기자

 

그렇게 하면 우측이 다 터미널이 된다.

 
옮기는 이유는 내가 그렇게 쓰기 때문이다. 오른쪽에 두면 널찍하니 좋다. 어차피 여러분은 저 화면밖에 안볼 것이다.

WSL

WSL은 Linux라고 불리우는 운영체제를 Windows에서 사용할 수 있게 만들어주는 프로그램으로, Window에서 제공하는 프로그램이다. 일반적으로 개발과 연관된 많은 툴들이 Window보다는 Linux에서 더 자유롭게 실행된다. 제일 중요한 점은 어차피 본인이 직접 명령어를 칠 일은 없다는 점이다. Claude code나 Codex가 알아서 Linux에서 명령어를 쳐줄테니 그냥 설치하자.
설치 방법은 간단하다.

 
터미널에 wsl을 치고 엔터를 누르면 된다. 그 후에 원하는 Linux OS를 깔면된다.
Linux OS 중에 제일 유명하고 보편적인 것은 Ubuntu고 그 중 24.04 버전을 추천한다.

ChatGPT는 신이고 나는 무적이다.
Powershell은 검색을 통해 찾자. 저기 관리자로 실행 이 보인다.

 
위와 같은 정 없어 보이는 화면이 나오면 성공이다. 저기다가 아까 챗지피티가 알려준 걸 치고, 설치 후에 비밀번호 같은거 입력하면 끝이다.
 
다 설치가 되면, 아래와 같이 wsl을 눌럿을 때 Ubuntu 24.04 가 뜬다.

 
 

Claude code 설치

이제 Claude code를 설치할 것이다.
Claude code는 "요즘 개발 안배운사람도 웹사이트 하나는 금방 만든다던데" 의 주인공으로 Claude 에서 Pro 요금제 이상 사용 시 사용할 수 있는 기능이다.

curl -fsSL https://claude.ai/install.sh | bash

 
를 위의 wsl을 킨 곳에 입력하면 알아서 설치가 된다.
설치가 되면 claude를 입력하자.

 
요런 귀여운 캐릭터가 있는 claude가 뜨게 된다. 이제 여기다가 개발하고 싶은것을 시키면 된다.
 
Claude code를 그냥 사용하는 것은 비추천하고 superpowers같은 plugin을 활용하는 것을 추천한다. 아래 링크를 참고하도록 하자.
https://duststorage.tistory.com/80

Superpowers 설치 및 사용법

저는 현재 개발을 위해 Claude Code에 Superpowers 플러그인을 추가하여 사용하고 있습니다. Superpowers 플러그인을 활용하면 brainstorm → plan → implement로 이어지는 체계적인 개발 워크플로우, TDD 강제,

duststorage.tistory.com

 
여기까지 했으면 기본 세팅은 완료된 것이다. 여기서부터 해보고 싶은 것이 있다면 claude code를 시키면 되니 사실 이전보다 난이도가 쉽다고 할 수 있다. 참고로 claude 는 토큰 제한이 정없기로 유명하니, 무언가 구현을 해볼 생각이면 5시간마다 충전되는 (claude code 내에서 /usage 를 입력하면 해결 가능하다) 걸 활용하거나, 돈으로 해결하자.