'그동안 오해해서 미안해' 바이브코딩으로 1% 개발 찍먹한 빌더
코워크메이커스가 만들어진 목적에 대한 이전 글에 이어서 환경세팅을 어떻게 했는지를 풀어보려고 합니다!
이전글에서 기획을 하기 전에 개발환경 세팅을 먼저 진행 했다고 했는데요. 비개발자가 0->1을 만드는 과정에서 어떻게 개발 환경을 세팅했는지 풀어보도록할게요.
바이브코딩 개발 환경 세팅 어떻게 했나?
내가 잘하는 것부터
일단 뭐부터 해야할지 모르겠어서 제가 제일 잘하는거부터 했습니다! 제 원래 직무가 무엇인지 살짝 공개하자면 저는 프로덕트 디자이너 입니다.😊 프로덕트 디자이너가 제일 잘하는게 무엇일까요? UXUI디자인, 화면 기획이죠. 그래서 전 화면부터 만들었습니다. 아무런 기능도 없는 와이어프레임을 짠거죠. 일반적으로 디자이너에게 와이어프레임은 피그마로 작업하고, 피그마로 디자인하고 피그마로 프로토타입까지 세팅합니다.
피그마 환경에서 벗어나지 않는 구조예요. 코워크메이커스는 피그마를 전혀 사용하지 않았고 클로드코드에서만 작업했어요. 피그마 환경에서 클로드코드 환경으로 어떻게 넘어갈 수 있었는지에 대해서도 추후 작성해보도록 할게요!📃
환경 세팅 어떻게 하고 뭐가 필요한데?
저는 팀에 개발자가 있어서 따로 찾아보지 않고도 도움을 받을 수 있었는데요. 팀에 개발자가 없거나 혼자하시는 분들이 이해하기 쉽도록 풀어볼게요! 개발자분들은 개념을 설명할 때 건물 짓는다고 예시를 많이 드시더구요. 저도 그 말을 인용하자면 건물을 지으려면 땅이 있어야하고 골조를 세우는것 부터 시작이다. 기반이 잘 다져져 있어야 무너지지 않고 위로 쌓아올릴 수 있기 때문에 토대가 중요하다는 것 입니다.
땅을 다지고 골조 세우기
건물을 세우려면 공간이 필요하고 어떤 재료로 건물을 지을건지 형태와 방식을 결정해야 하듯 웹 서비스를 만들 때도 똑같은 준비가 필요해요. 건물을 짓기 위한 도면을 보관하고 작업자들의 일지를 백업할 현장사무소가 있어야 하고, 나중에 건물이 완성되어 찾아올 손님들의 데이터를 기록할 자재 창고도 필요하죠. 보여줄 화면을 만들기 전에 세팅되어야할 가장 기본이 되는 구조라고 할 수 있어요.
예시만으로는 이해하기 어려우실거 같아서, 제가 진행했던 환경 세팅 플로우를 정리했어요.💻
① VScode다운로드
② VSCode 좌측 'Extensions(확장 기능)'에서 Claude Code 설치하기
③ Claude Code를 열어 채팅창 입력
④ 일단 작업해보기
⑤ 스택설정(뼈대 결정)
⑥ 화면을 보고 싶음 GitHub연결 (코드,파일저장)
⑦ 코드리스 연결 (Vercel,Netlify 등)
⑧ 브라우저로 화면 확인
⑨ 저장이 필요한 데이터가 있다면 DB 연결 (Supabase, Firebase,Pocketbase 등)
뼈대만 세워둬도 반은 시작한거에요. 화면과 기능에 집중 할 수 있는 환경이 제공되었으니 무엇이든 만들어 보세요!
✋🏻 잠깐! Git과 GitHub는 다르다는 걸 인지하고 있으면 개발지식이 Upgrade ⬆️ 됩니다. 둘의 차이점을 다룬 글도 참고해보세요!
클로드는 아는데 클로드코드랑 무슨 차이?
클로드로 작업하는 방법 2가지
클로드로 작업할 수 있는 환경이 2가지가 있는걸 아시나요? 보통 알고 있는 클로드는 ChatGPT 처럼 컨텍스트를 입력해서 정보 서치, 검토용으로 답변 받는 목적으로 사용되고 있어요. 반면 클로드코드는 개발에 특화된 AI도구 입니다. 요청 처리를 코드베이스를 기반으로 해서 폴더와 파일을 생성하여 복잡한 프로젝트를 작업 하는 경우에 유용해요.
구분 | 클로드 (Claude.ai) | 클로드 코드 (Claude Code) |
주요 환경 | 웹 브라우저, 모바일 앱 (채팅창) | 컴퓨터 터미널 (CLI / 명령줄 인터페이스) |
작동 방식 | 사용자가 코드를 복사·붙여넣기하며 대화 | AI가 프로젝트 폴더 내 파일에 직접 접근 |
자율성 (에이전트) | 답변(코드 뭉치)만 제공, 실행은 인간의 몫 | 파일 수정, 테스트 실행, Git 커밋까지 직접 수행 |
컨텍스트 관리 | 대화창에 소스 코드를 매번 업로드해야 함 | 코드베이스 전체를 스스로 탐색하고 필요한 부분만 수정 |
추천 대상 | 기획, 학습, 단발성 코드 생성 및 검토 | 본격적인 소프트웨어 개발, 복잡한 멀티 파일 작업 |
클로드에서 작업하는게 나을지 VScode가 나은지
개인적으로 로컬(내 컴퓨터 화면)에서 먼저 오류나 작동을 확인하고 최종 main에 올리는게 안전했고, 브라우저는 화면 보는용으로 충분해서 저는 VScode를 사용합니다. 👍🏻
개발자분들은 터미널 창(CLI)을 사용하셔서 VScode로 쓰시더라구요 (터미널은 특정 명령어가 있어서 채팅창 입력하지 않고 작업 할 수 있습니다.)
최근에 클로드 웹브라우저에서도 클로드코드를 사용할 수 있도록 제공 했기 때문에 이제 VScode를 설치 하지 않아도 웹에서 개발할 수 있는데요. GitHub를 연결하는 세팅 동일하게 해줘야 해요. 웹에서 실행하느냐, 내 컴퓨터에서 실행하느냐의 큰 차이이고, 편한 선택지로 사용하시면 됩니다!
구분 | 웹 브라우저 클로드 코드 (claude.ai/code) | VS Code / 로컬 터미널 클로드 코드 |
구동 위치 | Anthropic의 클라우드 서버 (가상 샌드박스) | 사용자의 개인 컴퓨터 (로컬 파일 시스템) |
코드 접근 방식 | GitHub 연동을 통해 원격 리포지토리 코드를 불러옴 | 내 컴퓨터에 다운로드된(Clone) 로컬 파일에 직접 접근 |
작업 방식 | 비동기 & 병렬 작업 최적화 (여러 작업을 동시에 던져둘 수 있음) | 동기식 실시간 작업 (내 화면에서 코드가 바뀌는 걸 바로 확인) |
최종 결과물 반영 | 작업이 끝나면 GitHub에 Pull Request(PR)를 자동으로 생성 | 내 컴퓨터 파일이 즉시 수정되며, |
가장 큰 장점 | 컴퓨터 사양에 구애받지 않음, 모바일에서도 작업 지시 가능 | 로컬 서버( |
p.s. 코워크메이커스 초기UI 디자인 할때 클로드 디자인을 사용해서 반영하기도 했어요😊
UI 기준을 잡기 어렵다면 클로드디자인으로 먼저 만들어 보는것을 추천합니다!
클로드 웹 브라우저로 들어가면 제품 > 코드 or 디자인으로 사용할 수 있습니다.
직접 해보고 개발자를 1%이해하다
개발자와 같은 프로젝트를 진행하다 보면 보이지 않는데 굉장히 바쁩니다! 그들은 도대체 무엇을 하고 있나! 어떤걸 하고 있길래 바쁘다 하고 할 것이 많다고 하는 것일까? 왜 개발자는 밥먹듯이 야근을 할까? 개발 환경 세팅만 직접 해봐도 1%정도 이해할 수 있게 됩니다... 저 역시 프로덕트 디자이너 입장에서 개발자가 항상 "안돼요" "그렇게 간단한 게 아니에요"를 굉장히 많이 들었는데요. 😂 제가 직접 AI의 도움을 받아서 혼자 해보니 비개발자 입장에서는 이 과정도 쉽지 않다는것을 느꼈어요. 개발자 입장에서 기본기가 없는 비개발자에게 복잡한 과정과 개념을 설명하기에 굉장히 난감했을거 같았습니다...
더불어 AI가 안되던 시기에는 개발자가 직접 세팅하는 과정만 해도 굉장히 오래걸리고 어려운 과정이었겠구나 생각이 들어서 직접 이야기를 들어봤는데요! 불과 1년~2년전만해도 인프라와 서버 세팅해주는 개발자가 있고 9 to 6 업무 시간을 기준으로 잡으면 개발 환경 세팅이 7일정도 소요 됐다고 해요. 혼자 세팅하면 2주까지 시간이 소요 됐었다네요! AI가 개발시장에 나오기 전에는 환경 세팅을 위해 어떤 과정을 거쳤었는지는 나중에 저희 개발자분을 모셔보도록 하겠습니다.😆
코워크메이커스 빌더가 바이브코딩으로 개발 환경을 세팅한 과정이였습니다.
아직 시작을 안해보신분이라면 제가 직접 세팅한 환경 플로우를 참고해서 반영해보세요! 👏🏻
이 글은 코워크에디터 민지님이 직접 작성했어요.
댓글 0
첫 댓글을 남겨 보세요.