AI를 이용하여 웹 개발 시작하기 전에

최근 바이브 코딩이라는 기술이라고 할지, 현상이라고 할지가 유행하고 있다.

 

 

웹 개발을 모르더라도, AI를 활용해서 누구나 남는 시간을 들여서 원하는 사이트를 제작하여 공개할 수 있다.

 

 

라고는 하지만, 아무것도 모르는 상황에서 할 수 있는 것은 제한되어있다.

 

 

내가 원하는 것을 무엇이라 부르는지도 모르는 상황이라면, AI에게 지시를 할 수도 없는 것이다.

 

 

그래서 이번 포스트에서는 웹 위주로 바이브 코딩을 시작하려는 미경험자가 무엇을 알아야 하는지에 대해 간단하게 다루고자 한다.

 

 

바이브 코딩을 위한 도구들은 이후에 다른 포스트에서 다루겠다.

---

목차

1. 사이트의 종류(이커머스, 비즈니스, 커뮤니티, ...)
2. 웹 개발의 용어(프론트엔드, 백엔드, ...)
3. 프로젝트 관리(요구, 요건정의, 배포, ...)

 

 

1. 사이트의 종류

AI에게 무엇을 만들어달라고 할지 물어보려면, 사이트의 종류를 알아야 한다.

 

이커머스(EC)

~ 쇼핑몰(쿠팡, 아마존), 넓게는 전자서적(만화, 영상매체)까지

상품 판매를 목적으로 하고 아마 부업으로 무언가를 하고자 한다면 이커머스를 생각할 것이다.

 

비즈니스

~기업 사이트

사업자라면 간소한 것이라도 자사 홈페이지를 갖고 있다는 것이 거래처에 좋은 인상을 심어줄 수 있으니 고려해볼만 하다.

 

랜딩페이지

~일시적인 광고 사이트

비즈니스와 비슷한 결로 이벤트성으로 사용하는 간단한 페이지를 활용할 수 있다. 비즈니스 사이트가 B2B 위주라면 B2C 마케팅을 위해 제작한다.

수요조사/ 신규고객 유치 등을 위해 활용된다. 생소할 수 있고 고려할 사항이 많으니, 자세한 내용은 웹 마케팅 관련 서적을 참고하자.

 

퍼스널브랜딩

~포트폴리오(작업물)

개발자 뿐만 아니라 디자인/ 음악/ 3D 모델링/ 트레이너등 이력서안에 담을 수 없는 것들을 보여줘야 하는 직종에게는 본인만의 독창적인 웹사이트를 보여줌으로써 차별화할 수 있다.

 

 

이외에도 커뮤니티, 블로그, 학술 목적의 여러가지가 있겠으나, 이정도까지는 알아두고, AI에게 명령할 때 자신이 무엇을 원하는지를 명확하게 하도록 하자.

 

 

2. 웹 개발 용어

프론트엔드와 백엔드

자판기로 치면 프론트엔드는 자판기의 겉면, 백엔드는 자판기를 열면 나오는 내부 장치들이다.

자판기는 고객에게는 겉면만 보여주고,

나머지는 숨겨서 별 생각 없이 자판기 버튼만으로 서비스를 이용하는데 어려움이 없도록 한다.

 

프론트엔드는 유저에게 매력적으로 느낄 수 있는 겉면을 만들도록

백엔드는 가장 작은 비용으로, 안전하고 논리적으로 이런 서비스를 뒷받침해주는 것들에 집중할 수 있도록

개발자의 입장에서 목적이 다른 두 서비스를 분리한 것이라 간단하게 생각하자.

 

프론트엔드를 개발할때는 마케터, 디자이너의 관점이 중요하고

백엔드를 개발할때는 기술적인 관점이 더 중요해질 것이다.

 

비개발자라면 첫 프로젝트에서 백엔드를 최대한 간소하게 만들고, 프론트엔드 개발에 집중한 뒤, 사업의 타당성이 어느정도 보일 때 개발자를 투입하여 서비스의 완성도를 높이는 것이 전략적으로 유리할 것이다.

 

 

API

자판기나 키보드의 버튼을 뜯어보면 전극이 있는데, 이것이 버튼을 눌렀다는 신호를 보드의 전기신호로 연결해준다.

 

백엔드와 프론트엔드 사이에도 이런 연결이 존재한다. 개발할 때 API를 정해두고, 프론트엔드와 백엔드개발을 각자 따로 끝내고 난 뒤에 조립하면 아귀가 맞아떨어지도록 해야한다.

 

 

데이터베이스(DB)

데이터베이스의 겉의미는 알 것이지만, 그게 어떻게 저장되는지 구체적인 형태까지는 상상하기 힘들다.

 

데이터가 유출되면 큰 사고기 때문에, 큰 웹사이트에서 데이터베이스는 아무렇게나 저장되는 단순한 파일이 아니다.

 

개발의 규모가 커지면 데이터베이스는 백엔드, 프론트엔드와 구분되어 따로 전담하는 사람이 필요한 간단하지 않은 개념이다.

 

간단하게만 개발하고자 한다면, 처음에는 데이터베이스에 민감한 정보가 없는 사이트를 만들자.

 

 

개발언어와 프레임워크

엄밀한 구분을 생략하고 뭉뚱그려 언어라고 하면 웹에서는 주로 HTML, CSS, Javascript, PHP등의 언어가 사용된다.

 

그리고 Javascript(자바스크립트)의 프레임워크로 React, Vue.js, Node.js, Express.js등이 있다.

 

프레임워크는 개발하는데 맨날 똑같이 사용되는 것들('Boilerplate' 등)을 쓰기 쉽게 정리한 것이라 생각하면 된다.

 

언어는 비교적 안정적이고 업데이트가 되지 않지만, 프레임워크는 자주 버전 업데이트가 되며, 조심하지 않으면 초보자에게는 이에 따른 문제에 많은 시간을 낭비할 것이다.

 

간단한 튜토리얼은 유튜브에 많이 올라와있으니, 더 깊게 공부하고싶다면 유튜브를 참조하자(영어 자료가 더 많으니 가능하면 영어자료로).

 

 

컨테이너

~Docker

사용하던 컴퓨터를 폐기하고 새로 컴퓨터를 살 때 드라이버부터 설치해서 각종 프로그램을 설치한 적이 있을것이다. 그리고 다 끝나고 작업을 해보면 전에는 잘 돌아가던 것들이 왠지 잘 안되는 때도 있었을것이다.

 

개발에서는 이게 더욱 빈번히 일어난다.

 

이 문제를 편하게 해결하기 위해 필요한 프레임워크나 라이브러리의 버전을 잘 정리해두고 설치와 그 뒤의 작업들을 자동화하는 방법이 컨테이너이다.

 

컨테이너로 가장 많이 쓰이는 서비스가 Docker(도커)인데, 그리 어렵지 않으니 어느정도 지식을 쌓고 개발을 확장하기 위해서 도커정도는 공부해두자.

 

3.  프로젝트 관리

요구, 요건 정의

개발에 대해 거의 모르는 사람이 개발자들에게 요청을 할 때 무엇을 해달라고 하는지에 관해 요구 정의를 한다.

 

그러면 그 요구 정의를 들은 전문가가 기술적으로 더 정밀하게 정리한 것이 요건 정의이다.

 

 

비개발자라면 AI에게 요청하는 내용은 요구 정의가 될 것이다.

 

만약 조금 더 정밀한 요청을 하고 싶다면 AI에게 요건 정의를 상세히 명세해달라고 하자.

 

스스로 어느정도는 공부를 하고 개발 공정 전체에 대한 지식을 갖추면 AI에게 더 구체적인 요건 정의를 할 수 있게 될 것이다.

 

또 최종적인 결과물이 이런 요건 정의에 부합하는지를 판단할 정도의 지식은 필요하다.

 

프로젝트 관리 방법론

애자일, 린 프로세스 같은 팀에서 어떤 절차로 개발을 진행할지에 대한 방법론이 있다.

 

직관적인 내용이고 꼭 웹 개발이 아니더라도 창업에 관련된 내용이기도 하니, 여기서는 이까지만 설명하도록 하겠다.

 

 

버전 관리와 협업

만들어진 프로젝트가 업데이트를 거치면서 점점 달라지면, 어딘가 백업해둔 곳에도 다시 그 내용을 저장해야 한다.

 

그러다 어떤 시점에서 문제가 생겼는데, 백업이나 되돌리기 기능만으로는 어찌할 수 없는 상황에 직면한다.

 

그런 상황을 미연에 방지하기 위해 작업의 기록을 버전으로써 남기는 것이 버전 관리이다.

 

가장 많이 사용되는 것은 git이고, github과 같은 웹 서비스를 활용하면 버전 관리에 더하여 협업에도 활용할 수 있다.

 

 

Notion은 비개발자들도 많이 쓰는 협업 툴이므로 써본 적이 없으면 한번 배워보자.

 

배포

코드만 만든다고 내 사이트를 스마트폰으로 볼 수 있는 것은 아니다.

 

Linode, Heroku, AWS, Google Cloud Platform (GCP), Microsoft Azure 등 배포 서비스를 이용해야 한다.

 

도메인도 비용을 부담하여 호스팅 업체에서 사서 연결해줘야한다.

 

---

최근 바이브 코딩이면 마치 코드를 한줄도 쓸 줄 몰라도 웹 개발을 할 수 있는 것처럼 알려주겠다는 강의를 파는 광고를 자주 본다.

 

사실 맞는 말인게 전체 개발에서 코드를 쓰는 과정은 의외로 그렇게 길지 않고, AI가 어느정도 해낼 수 있다.

 

그러나 정말 중요하고 시간이 드는 것은 개발 사이사이의 의사결정이다.

 

이런 의사결정도 물론 AI가 할 수 있지만, 거기에 내가 디테일을 추가할 줄 아는가가 내가 원하는 가치를 창조하는데 중요하다.

 

결국 당신이 말한 무언가를 만들어줄 수는 있지만,

맞긴 한데 내가 정말 원한 건 이게 아니야! 라는 원숭이 손 이야기와 같은 시간 낭비로 끝나지 않도록

이 포스트로 끝내지 않고 더 넓게 탐구해야하겠다.