완전 쌩초보도 "말"로만 앱 만드는 법 - 바이브 코딩 직접 해보기!

728x90

코딩 1도 몰라도 앱을 만들 수 있다고요? '바이브 코딩'이 뭔가요?

이제는 코딩을 전혀 몰라도 말만으로 앱을 만들 수 있다는 사실, 알고 계셨나요? 요즘 바이브 코딩이라는 게 정말 트렌디하게 떠오르고 있다고 해요. 이건 말 그대로 코딩을 느낌적으로, 말만으로 한다는 뜻이죠. 예전에는 코딩이 전문가들만 할 수 있는 영역이었어요. 하지만 이제는 아이디어만 있으면 말로 표현해서 서비스를 만들고 구현할 수 있게 되었답니다.

 

이 바이브 코딩이라는 말은 유명한 인공지능 개발자의 트위터에서 시작되었는데요. 처음에는 좀 가볍게 시작했다가 이제는 아주 진지한 트렌드가 되었어요. 요즘 인공지능이 정말 많은 것을 할 수 있잖아요. 코딩도 마찬가지랍니다. 인공지능이 발달하면서 코딩을 너무나 잘하게 되었고, 심지어 개발자가 필요 없어지는 거 아니냐는 이야기까지 나올 정도예요.

 

'Replit'으로 어떻게 앱을 만드나요? 직접 해보니 정말 쉬웠어요!

오늘은 이 바이브 코딩을 직접 해보는 모습을 보여드릴 건데요. 여러 도구 중에서도 사용하기 가장 쉽다고 생각하는 "replit"이라는 서비스를 이용해 볼 거예요. 이 replit 서비스는 여러분의 아이디어를 앱으로 만들 수 있도록 도와준다고 해요. 특히 코딩에 익숙하지 않은 분들이 인공지능을 사용해서 개발자처럼 쉽게 웹사이트를 만들도록 돕는다고 합니다. 게다가 무료로도 사용할 수 있어요.

 

제가 이 replit을 추천하는 이유는, 바이브 코딩이 개발을 쉽게 만들어도 사실 개발에는 두 가지 큰 어려움이 있기 때문이에요. 첫 번째는 바로 사용 환경이랍니다. 코딩을 인공지능이 도와준다 해도, 코딩을 시작하기 위한 설정 자체가 어려운 경우가 많거든요. 예를 들어, 여러 프로그램을 설치해야 하는 경우가 있는데, 그 과정이 쉽지 않아요. 하지만 replit 같은 서비스는 웹사이트에서 마치 chatgpt처럼 코딩을 아주 쉽게 할 수 있도록 만들었어요. 그래서 로그인만 하고 "이런 앱 만들어줘"라고 말하면 끝이랍니다.

 

replit의 작업 환경을 한번 살펴볼게요. 로그인을 하면 익숙한 창이 나타나요. "Hi Alex, what do you wanna make?"라고 뜨는데, 여기서 만들고 싶은 앱 사이트를 설명하면 바로 제작해 줘요. 거기서부터는 계속해서 이 인공지능과 대화하면서 앱을 완성해 나가는 거죠. 저는 저를 잘 소개해 주는 멋진 디자인의 웹사이트를 만들어 달라고 요청해 봤어요. 정말 간단하죠?

 

말만 하면 뚝딱! 인공지능과 대화하며 앱을 발전시키는 방법은?

replit에서는 처음 앱을 만들 때 추가 질문들을 해준답니다. 예를 들어, 개인 웹사이트에 자기소개 섹션이나 스킬 및 경험 섹션을 만들고 싶은지 물어보고, 다크모드나 여러 언어 지원 같은 추가 기능은 어떤지 물어봐요. 저는 다크모드와 언어 지원 기능을 넣어달라고 선택해 봤어요. 만약 영어가 어렵다면 이 내용을 복사해서 chatgpt에 번역해 달라고 부탁해도 되고요. 아니면 처음부터 한국어로 알려달라고 요청해도 될 것 같아요.

 

선택을 하고 버튼을 누르면 실행이 되면서 오른쪽에 미리 보기 창이 나타나요. 이 미리 보기 기능은 인공지능이 코드를 어떻게 입력하고 있는지, 그리고 코드가 완성되었을 때 웹사이트가 실제로 어떻게 보일지를 실시간으로 보여줘요. 그래서 웹사이트가 만들어지는 과정을 눈으로 직접 볼 수 있답니다. 처음에는 헤더에 포트폴리오, 홈, 소개, 기술, 프로젝트, 연락처 같은 메뉴가 나오고 웹사이트가 하나씩 만들어지는 걸 볼 수 있었어요.

 

기본적인 웹사이트 구조가 만들어지면 이제 인공지능과의 대화를 통해 하나씩 내용을 바꿔 나갈 수 있어요. 예를 들어, 이름이나 직업 같은 개인 정보를 수정하고 싶다면 인공지능에게 말하면 된답니다. 이렇게 채팅으로 요청하면 오른쪽 웹사이트가 바로 업데이트되는 모습을 볼 수 있어요. 제 이름이 알렉스로 바뀌고, 메타에 다니는 소프트웨어 엔지니어라고 바뀌는 것을 눈앞에서 확인했죠.

사진도 쉽게 바꿀 수 있어요. 바꾸고 싶은 사진을 폴더에서 replit으로 드래그해서 업로드하면 된답니다. 사진 업로드 후에 "내 프로필 사진을 지금 업로드하고 있는 사진으로 바꿔줘"라고 명령하면 프로필 사진도 잘 바뀌는 것을 볼 수 있어요. 제 사진으로 깔끔하게 변경된 것을 확인했죠.

 

말로만 설명하기 어려울 때는 element select 기능을 활용할 수 있어요. 왼쪽 밑에 있는 포인터 버튼을 누르고 바꾸고 싶은 부분을 클릭하면, 그 부분에 대한 변경을 더 정확하게 인공지시에게 전달할 수 있답니다. 예를 들어, 프로젝트 섹션을 누르고 "프로젝트 섹션을 내가 인스타그램 광고팀에서 일하면서 할 만한 프로젝트들로 바꿔줘"라고 말하면, 인공지능이 어디를 바꿔야 할지 더 정확하게 알기 때문에 에러 없이 업데이트될 수 있어요. 이 element selector를 활용하면 정말 유용하답니다. 업데이트가 되어서 인스타그램 광고 효율 분석 대시보드 같은 관련성 있는 프로젝트들이 추가된 것을 볼 수 있었어요.

 

밋밋한 웹사이트는 이제 그만! 화려한 애니메이션도 쉽게 넣을 수 있나요?

기본 디자인도 깔끔하고 예쁘지만, 좀 더 멋지게 바꾸고 싶다면 화려한 애니메이션 효과를 추가할 수 있어요. 예를 들어, 홈 화면에 3D 객체가 배경으로 움직이는 효과를 넣어볼게요. "홈페이지가 조금 더 유니크하고 모던하게 보이기 위해서, 3D 객체가 애니메이션으로 배경 화면에 보여지는 이펙트를 넣어줘"라고 요청하면 인공지능이 알아서 추가해 준답니다.

 

인공지능은 three.js 라이브러리 같은 개발 프레임워크를 사용해서 3d 애니메이션 효과를 추가해요. 필요한 곳에 알아서 코드를 찾아서 설치하고 개발해서 넣어주는 모습을 볼 수 있어요. 미리 보기 화면을 보면 실제로 3D 객체들이 움직이는 것을 확인할 수 있답니다. 처음에는 컬러풀한 모형들이 그라데이션으로 나오는데, 도넛 같은 객체도 움직이는 등 멋지게 구현되는 것을 볼 수 있죠.

 

옛날에는 이 정도 퀄리티의 웹사이트를 만들려면 많은 노력과 공부가 필요했어요. 하지만 이제는 프롬프트 한 줄로 뚝딱 만들어진다는 것이 정말 놀랍습니다. 이게 바로 바이브 코딩의 핵심이고, 개발 시대의 혁명이라고 할 수 있죠. 정말 믿기지 않는답니다.

 

이렇게 변경된 내용이 실제로 코드에서는 어떻게 동작하는지 볼 수도 있어요. 코드가 어떻게 변경되었는지 확인하는 기능이 있답니다. 인공지능이 3D 배경 애니메이션을 추가하기 위해 컴포넌트를 만들고, 그 코드를 알아서 만들어서 변경했다는 것을 볼 수 있어요. 원래 이런 것들을 바꾸는 것이 코딩인데, 이제는 인공지능이 다 해주는 거죠. 코드에 사용된 3D 도형의 종류나 크기를 직접 바꿔보는 것도 가능해요. 이렇게 직접 코드를 수정할 수도 있다는 점이 흥미롭죠.

 

만든 앱, 나만 볼 건가요? '배포'까지 쉽게 해봐요!

웹사이트를 이렇게 멋지게 만들었다면 이제 다른 사람들도 볼 수 있도록 만들어야겠죠? 이것을 배포라고 합니다. 배포 과정을 거치면 나만 미리 보기로 보는 것이 아니라, 링크를 통해 다른 사람들도 웹사이트에 접속할 수 있게 돼요.

replit에서는 배포 과정도 아주 쉬워요. 왼쪽의 초록색 디플로이먼트 아이콘을 누르면 돼요. 몇 가지 옵션이 있지만, 기본 설정으로 시작할 수 있어요. "셋업 디플로이먼트" 버튼을 누르고 몇 번만 더 클릭하면 바로 웹사이트 링크가 생성된답니다. 이 작업이 원래는 개발자들도 익숙하지 않은 어려운 과정인데, replit에서는 버튼 몇 개만 누르면 뚝딱 완성된다는 것이 정말 대단하죠. replit을 추천하는 이유도 바로 이런 점 때문이에요. 개발 지식 없이도 웹사이트를 만들고 배포해서 바로 사용할 수 있다는 것이 핵심이죠.

배포가 완료되면 웹사이트 링크가 나타나는 메시지를 볼 수 있어요. 이 링크가 바로 웹사이트 주소가 되는 거예요. 이 링크를 친구나 다른 사람들에게 보내주면 그들도 제 페이지를 볼 수 있게 된답니다.

배포된 웹사이트는 모바일 환경에서도 잘 보여진답니다. 모바일로 링크를 열어보니 아주 깔끔하게 잘 보였어요. 이렇게 오늘 만든 웹사이트를 바로 친구들과 공유하거나 사업에 활용할 수도 있어요. 정말 쉽고 깔끔하지 않나요? 인공지능이 이렇게 쉽게 만들어주니 웹사이트 하나쯤은 누구나 가질 수 있게 된 것 같아요.

 

실수해도 괜찮아요! '버전 컨트롤' 기능으로 되돌아가기!

웹사이트를 만들다가 혹시 실수를 하거나, 예전 버전이 더 좋다고 느껴질 때가 있잖아요. replit에는 버전 컨트롤 기능이 있어서 작업 중 언제든지 이전 상태로 되돌아갈 수 있답니다. 마치 게임의 저장 기능처럼, replit은 작업 과정을 자동으로 저장해 주는 체크포인트가 있어요.

 

만약 현재 상태보다 이전 버전이 더 마음에 든다면, 이 체크포인트 중에서 원하는 시점을 선택하고 "roll back to here" 버튼을 누르면 돼요. 그러면 웹사이트가 그 시점의 버전으로 돌아가서 보여진답니다. 인공지능을 활용해서 많은 변화를 시도했는데 마음에 들지 않을 때, 실행 취소처럼 이전 버전으로 돌아갈 수 있어요. 아까 추가했던 3D 오브젝트가 다시 없어지는 것처럼 말이죠. 다만, 이렇게 되돌아간 후에 다시 현재 버전으로 돌아갈 수는 없는 것 같으니 이 기능은 신중하게 사용하는 것이 좋답니다.

 

더 멋진 앱을 만들고 싶다면? '프롬프트' 활용 팁!

replit을 사용해서 계속해서 웹사이트를 만들 수 있는데요. 지금까지는 아주 간단한 방법이었지만, 좀 더 전문적으로 원하는 웹사이트를 만들고 싶다면 프롬프트를 잘 작성하는 것이 중요해요. 처음 프롬프트를 어떻게 시작해야 할지 모르겠다면 chatgpt 같은 도구를 활용해 볼 수 있답니다.

 

예를 들어, "나는 replit이라는 서비스를 사용해서 오늘의 할 일을 관리해 주는 To Do 웹사이트를 만들고 싶어. 가장 모던하고 사용 친화적이고 유용하고 웹사이트를 만들기 위한 프롬프트 작성해 줘."라고 chatgpt에게 요청해 볼 수 있어요. 이렇게 chatgpt를 활용해서 처음 프롬프트를 좀 더 구체적이고 전문적으로 다듬으면, 내가 생각했던 것보다 훨씬 더 멋지고 잘 만들어진 웹사이트가 나올 수 있답니다. 이 프롬프트를 복사해서 replit에 붙여넣기만 하면 되는 거예요. 이렇게 하면 바로 웹사이트가 만들어지고, 거기서 또 인공지능과 대화하면서 수정해 나갈 수 있죠.

 

'Replit'으로 어떤 앱까지 만들 수 있나요? 다양한 예시 살펴보기!

replit으로는 정말 다양한 종류의 웹사이트나 서비스를 만들 수 있답니다. 옛날에는 웹사이트를 코딩해서 만들려면 몇 시간에서 열 시간까지 걸렸을 거예요. 애니메이션이나 디자인 디테일을 만드는 것이 사실 정말 어렵거든요. 심지어 다크모드와 라이트모드 기능도 들어갔어요. 이런 화려한 웹사이트를 쉽게 만들 수 있다는 것이 놀랍죠. 강의 소개나 소셜 미디어 링크도 넣었고, 실제로 배포해서 활용할 생각이에요.

 

다른 느낌의 개인 웹사이트도 만들어 봤어요. 그리고 서비스 같은 것도 만들 수 있는데요. 로그인 기능까지 넣어서 목표를 관리하고 일상 업무를 관리할 수 있는 웹사이트도 만들어 봤답니다. 예를 들어, 매일 독서하는 습관을 관리하는 웹사이트 같은 것도 만들 수 있어요.

 

그 외에도 재미있는 것들을 만들어 볼 수 있는데요. 먹이를 주면서 놀 수 있는 디지털 팻 같은 게임 웹사이트나, "오늘 뭐 먹지?" 같은 웹사이트, 룰렛 돌려서 메뉴를 정해주는 프로토타입도 만들 수 있었어요. 성격 테스트 웹사이트도 만들 수 있었는데, 디자인도 깔끔하게 잘 나왔답니다. 옛날부터 만들어 보고 싶었던 웹사이트나 서비스를 직접 제작해 보는 것도 정말 도움이 될 것 같아요. 이 정도 퀄리티면 지금 당장 배포해도 될 것 같다고 느꼈답니다. 카카오톡, 페이스북 같은 공유 기능도 잘 들어가 있었어요. 이렇게 replit으로 다양한 웹사이트와 서비스까지 만들 수 있다는 것을 알려드리고 싶었어요.

 

반응형

'Replit' 사용 요금은 어떻게 되나요? 무료로 시작해봐요!

replit 서비스의 가격에 대해 궁금하실 수도 있는데요. 일단 무료로 사용할 수 있답니다. 무료 버전으로는 3개의 앱을 만들 수 있어요. 다만, 무료 버전으로 만든 앱은 모두에게 공개된다는 단점이 있어요.

 

대부분의 경우, 무료 버전으로도 웬만한 앱은 만들 수 있고 프로토타입까지는 충분히 완성할 수 있다고 생각해요. 만약 정말 제대로 된 앱을 만들고 싶다면 replit Core 유료 플랜을 이용할 수 있는데, 한 달에 20불 정도로 크게 부담되는 금액은 아니에요. 유료 결제 전에 무료로 먼저 사용해보면서 '아, 이런 느낌으로 하는 거구나' 하고 경험해보고, 막히는 부분이 있을 때 결제를 고려해 보는 것도 좋답니다. 일단은 무료로 사용해보는 것을 추천드려요.

 

 

'바이브 코딩', 정말 비개발자에게 새로운 기회일까요?

오늘은 replit 서비스를 통해 바이브 코딩이 무엇인지, 그리고 어떻게 하는지 알아보는 시간을 가졌어요. 어떠셨나요? 저는 드디어 코딩 전문가가 아닌 분들도 앱을 만들 수 있는 시대가 왔다고 느꼈답니다.

 

정말 생각했던 것보다 웹사이트의 퀄리티가 훨씬 높았고, 심지어 "웬만한 실리콘밸리 엔지니어보다 잘하는 것 같은데?"라는 생각까지 들 정도였어요. 이 바이브 코딩 도구는 정말 모두에게 엄청난 기회를 제공할 수 있다고 생각해요. 비개발자를 위한 코딩 교육의 중요성을 늘 생각해왔는데, 바이브 코딩이 그 해답이 될 수 있을 것 같아요.

 

여러분들도 이 기회를 꼭 한번 도전해 보시고, 꿈에 그리던 나만의 웹사이트나 앱을 멋지게 만들어 보셨으면 좋겠어요.