안녕하세요. 뉴니커

지난 시간에는 QA를 다루었다면, 오늘 나눠 드릴 이야기는 그 이후의 작업들이에요. 보안 검토부터 실제 서버로의 배포까지이며, 보안 검토는 바이브로 가능하지만 실제 배포는 사람 손을 태워야하니 약간의 집중이 필요할 수도 있을 듯 해요.

그럼 오늘도 유익한 뉴스레터가 되길 바랄게요. 🙋‍♂️

지난 이야기

• Ep0. Vibe Coding을 해보아요.

• Ep1. AI와 데일리 스크럼하기 (feat.롤백 🫠)

• Ep2. "??: 고맙고, 행복하길 빌고, 많이 좋아했다."

• Ep3. QA도 Vibe하게 해보자

1. 출시해도 되는거 맞아? (Security Review)

1) 보안의 중요성

바이브 코딩이랍시고 급급하게 여기까지 달려왔네요. 그런데 '이걸 출시해도 될까?'라는 물음을 던져보면 사실 망설여지는게 있더라고요. 바로 '보안성 검토'인데, 신나서 개발하고 서비스 오픈한 후에 보안 사고가 터지면...이것은 돌이킬 수 없는 강을 건너는 게 아닐지.

2) Vibe Security

그럼 우리가 어떻게 보안 검토를 할것이냐면, 보안도 바이브하게 좀 진행해보고자 합니다. 원래는 "현재 서비스의 소스코드를 토대로 보안성 검토 및 잠재 위협 가능성을 검토해줘"와 같이 해줘 전법으로 하려 했으나, 때마침 Claude Code에서는 보안을 컴토할 수 있는 기능을 업데이트 하였더라고요.

그래서 해당 기능을 이용하여 출시 전, 마지막 보안성 검토를 해보려 해요. 명령어는 /security-review 이고요. Claude는 자체적으로 우리 프로젝트의 보안성 검토를 해줄거에요.

/security-review 명령어 실행

Security Review 진행중

Security Review 결과

다행히 바이브코딩을 하면서 보안 취약점은 만들지 않았네요.

주위에 전문가가 있다면 직접 컨설팅을 요청할 수 있겠지만, 그런 여력이 잘 없기에 이정도로 하고 넘어가도록 할게요. :)

2. Server가 필요해 🫠 (Vercel 사용기)

1) Vercel 소개

우선 Server란, 진짜 쉽게 말해서 사용자에게 서비스를 제공하기 위해 프로그램을 실행시켜 둘 수 있는 컴퓨터예요. 서비스를 24시간 꺼지지 않고 운영하기 위해선 클라우드(AWS, GCP, NCP 등) 서버가 좋긴 한데, 비용이 필요해요.

저는 이런 클라우드보다 무료로 활용할 수 있는 Vercel 이라는 사이트를 소개드릴게요. 이 사이트는 소스코드 저장소인 github과 연동하여 소스코드를 build하고 실제 운영할 수 있는 서버에 배포를 해주는 서비스인데요. 최소한의 스펙을 사용한다면 무료로 활용할 수 있으니 추천드려요. (도메인 주소도 줌)

2) Vercel 프로젝트 생성

Vercel을 사용하기 위해서는 github이라는 소스코드 저장소를 사용해야 하는데요. 이 저장소에 작업한 코드를 github.com에 업로드(혹은 commt/push)를 해주세요. (**github에 대해 다루면 산으로 갈듯하여, 별도로 찾아보시길 권장드립니다**)

Vercel 사이트에서 New Project를 생성할 때, Github의 정보를 앞서 업로드한 정보를 작성하면 되겠네요. 또한 저는 Next.js를 사용했고, 이 코드를 build하기 위한 명령어는 `npm run build`이기에 추가로 입력했어요.

혹시라도 .env.local 파일로 각종 API 키를 관리하고 있었다면, Environment Variables 옵션에 추가할 수 있어요. 저는 Gemini와 Supabase API를 활용 중이기에 해당 값들을 입력하고 프로젝트 생성을 완료했어요. 

2) 빌드 & 배포 (Build & Deploy)

초기 설정이 완료되었다면 이제 "딸깍"만 하면 되는 상태예요. 우리의 프로젝트에서 deploy 버튼을 클릭하면 아래의 이미지와 같이 순차적으로 진행될 텐데요. 그 단계에서 가장 먼저 진행하는 작업이 Build예요. 이 Build 작업 중 하나라도 실패하면 서비스 배포를 할 수 없으며, 혹여나 에러가 발생하더라도 Build Logs에서 확인 가능하니 참고하여 코드 수정을 해주세요.

모든 빌드 작업이 완료되면 아래와 같은 화면이 보여질 거예요. 친절하게도 현재 사이트 상태를 이미지로 제공해주고 있으며, 우리가 개발한 사이트로 접속 가능한 도메인({project-name}.vercel.app)도 적혀 있네요. 해당 도메인으로 접속해서 개발한 결과물을 볼 수 있어요.

3) 개인 도메인 연결

저는 Vercel에서 제공하는 기본 도메인이 아닌, 저만의 도메인을 [후이즈]에서 구입하여 사용하고 있는데요. 이 도메인을 Vercel에 배포된 서버에 연결해 두었어요. 혹시라도 개인 도메인을 Vercel에 연결하고자 한다면 아래의 이미지들을 참고해 보세요 :)

[Vercel] Project > Domains > Add Domain

[후이즈] DNS 고급 설정 > 타입별 정보 수정

[Vercel] 도메인 연결되었음을 확인

3. 대망의 서비스 오픈 (Beta)

바이브 코딩 초반에 Gemini로 개발했던 사이트가 기억나나요? 지금 와서 돌이켜보면 꽤나 처참했죠. 물론, Gemini의 문제가 아니라 제가 입력한 프롬프트와 개발 과정이 꼬여버린 탓이지만 ㅠㅠ

그 후 Claude Code로 다시 개발을 하였고, 약 1개월채 되지 않아서 하나의 서비스를 완성했어요. 하루에 3~5시간정도 할애했고, 개발하지 않은 날도 있음에도 이정도 기간에 오픈을 할 수 있네요.

이제 자잘하게 다듬고 결제모듈 연동이라는 큰 산이 남아있는 상태이지만, 여기까지 해서 BETA 오픈을 하기로 했어요. 많이들 사용해보시고 피드백 주실 게 있다면 언제든 아래 메일로 보내주세요 😉

• hello.stranger1337@gmail.com

• 참고: BETA 오픈이라 유료로 적힌 MCP server도 무료로 다운로드가 됩니다!!

서비스 이용해보기 > MCP Hub - MCP 서버 마켓플레이스

오늘의 바이브코딩 다이어리는 여기서 끝내고, 다음에 또 새로운 주제로 찾아뵐게요!