쓸데없는 IT 쓸데없는 IT

바이브 코딩 시리즈에서 다룬 개념을 하나의 프로젝트로 실습합니다. 아이디어를 정하고 AI에게 주문을 넣어 배포까지 완료하는 전 과정을 따라갑니다. 예시 프로젝트는 링크 저장 앱입니다. 실습 프로젝트 개요localStorage를 사용하면 새로고침 후에도 데이터가 유지됩니다. 단, localStorage는 사용자 브라우저에 데이터를 저장하기 때문에 다른 사용자와 데이터를 공유할 수는 없습니다. 별도 서버나 데이터베이스 없이 구성할 수 있어 첫 실전 프로젝트에 적합합니다. 실습 프로젝트프로젝트명링크 저장 앱기능URL 입력 > 저장 > 목록 표시 > 삭제저장 방식localStorage (브라우저 저장, 별도 서버 불필요) 로컬 실행 환경Docker배포 플랫폼GitHub + Vercel전체 흐름Dock..

처음 AI와 함께 코딩할 때는 Git이 정말 어렵게 느껴집니다. 커밋, 브랜치, 푸시 같은 용어가 어렵게 다가옵니다. 하나씩 알고 보면 Git은 생각보다 어렵지 않습니다. 미리 알아두면 훨씬 수월해집니다. Git은 파일과 코드의 변경 이력을 관리하는 분산 버전 관리 시스템입니다. 언제 무엇이 변경됐는지 기록하고 필요하면 이전 상태를 확인하거나 되돌릴 수 있습니다. Git코드의 변경 이력을 관리하는 도구입니다. 언제 무엇을 어떻게 바꿨는지 기록하고 언제든 되돌릴 수 있습니다. 바이브 코딩에서는 AI가 만든 코드를 안전하게 보관하고 관리하는 역할을 합니다. 바이브 코딩을 시작한다면 우선 commit → branch → push → pull → revert 정도부터 익혀도 충분합니다. AI에게 코드를 ..

AI가 만든 음식이라고 해서 무조건 안전한 것은 아닙니다. 맛있어 보여도 재료에 문제가 있을 수 있습니다. 배포 전에 재료는 신선한지 위생은 괜찮은지 독은 없는지 반드시 확인해야 합니다. AI가 만든 코드는 편리하지만 보안 위험이 숨어있을 수 있습니다. AI 생성 코드의 보안 위험AI는 동작하는 코드를 만드는 데 집중합니다. 보안을 우선순위로 두지 않는 경우가 많습니다. 식당위험설명식당 열쇠 방치API 키 노출코드 안에 API 키를 그대로 넣는 경우하드코딩된 비밀번호코드 안에 DB 비밀번호를 그대로 넣는 경우상한 식재료 그대로 쓰기입력값 검증 누락사용자 입력을 그대로 처리해 악의적 입력에 취약한 경우출처 불명의 조리 도구보안 라이브러리 미사용인증, 암호화 없이 데이터를 처리하는 경우오래된 라이브..

식당도 문을 열었다고 끝나는 것이 아닙니다. 손님이 불편 없이 먹을 수 있도록 점검하고 관리해야 합니다. 고장 난 기계를 수리해야 오래 운영할 수 있습니다. 운영주기적으로 모니터링하면서 유지보수를 하면서 업데이트도 합니다. 운영모니터링식당에 문제가 생겼는지 실시간으로 확인합니다.업데이트메뉴를 바꾸거나 추가할 때 기존 음식 맛을 유지합니다.유지보수주방 설비를 정기적으로 점검하고 교체합니다. 모니터링: 식당에 문제가 생겼는지 확인하기모니터링은 식당에서 주방 CCTV와 화재경보기를 설치하는 것과 같습니다. 배포된 서비스가 정상 작동하는지 주기적으로 확인합니다. 문제가 생겼을 때 빠르게 발견할수록 손님 피해가 줄어듭니다. 모니터링직접 접속 확인하루 한 번 실제 URL에 접속해 화면이 정상인지 확인합니..

AI가 만든 코드는 배포해야 손님이 먹을 수 있습니다. 로컬에서만 돌아가는 코드는 주방 안에서만 맛본 음식입니다. 주방의 음식을 손님이 있는 테이블까지 가져다줘야 합니다. 그것이 배포입니다. 다른 사람도 사용할 수 있으려면 인터넷에 공개해야 합니다. 배포로컬에서만 돌아가는 음식은 손님이 먹을 수 없습니다. 배포를 해야 세상에 공개되고 누구나 접속해서 사용할 수 있습니다. 주방 > 손님 테이블 배포는 내 컴퓨터에서만 실행되던 코드를 인터넷으로 옮깁니다. 인터넷 주소로 접근 가능하게 만드는 것입니다. 배포가 완료되면 누구나 URL로 접속할 수 있습니다. 배포 플랫폼서버리스는 거창한 건물을 짓지 않고 유동 인구가 많은 곳에서 푸드트럭을 대고 음식을 파는 방식입니다. 필요할 때만 조리 공간과 화구를 빌려..

AI가 만든 코드를 바로 배포하면 안 됩니다. 주방에서 나온 음식을 손님 테이블에 올리기 전에 맛을 봐야 합니다. 그리고 AI가 만든 코드는 직접 실행해봐야 합니다. 코드를 만든 사람 눈으로 보면 문제가 잘 안 보입니다. 손님 입장에서 음식을 먹어봐야 진짜 문제가 드러납니다. 사용자 시나리오 테스트가 그 역할을 합니다. 로컬 실행로컬 실행은 내 컴퓨터에서 직접 코드를 돌려보는 것입니다. 배포 전에 문제를 찾는 가장 기본적인 단계입니다. 실행 방법을 모를 때는 AI에게 직접 묻습니다. 단계설명환경 준비AI가 알려준 실행 명령어를 터미널에 그대로 입력합니다.브라우저 확인localhost 주소를 열어 화면이 뜨는지 확인합니다.직접 눌러보기버튼, 입력창, 링크를 하나씩 눌러보며 반응을 확인합니다..

AI와 오래 대화를 나누다 보면 식당 요리사가 바빠서 주문을 헷갈려하는 것 같은 때가 있습니다. 아까 가르쳐준 내용을 잊어버리거나 엉뚱한 코드를 가져오기도 합니다. 이것은 AI의 기억 장부가 꽉 찼기 때문입니다. 이럴 때는 장부를 깨끗이 비우고 새 대화창을 열어주는 것이 좋습니다. 언제 장부를 닫고 새 대화창을 열어 새 주문을 넣어야 할 타이밍이 있습니다. 새 주문이 필요한 신호AI에게는 한 번에 기억하는 양(콘텍스트 윈도우)이 정해져 있습니다. 대화가 너무 길면 주방 조리대 위에 주문서가 쌓여서 요리가 뒤죽박죽이 됩니다. 이상한 신호예시똑같은 실수이미 고친 부분을 다시 틀리게 작성합니다.내 말 무시하기약속했던 이름이나 규칙을 따르지 않습니다.설명이 길어짐대답은 늦어지고 쓸데없는 말이 많아집니다엉뚱한..

주문했는데 음식이 잘못 나왔다면 어떻게 해야 할까요? 재주문을 하거나 환불을 받거나 해야할 것입니다. 코딩은 우선 에러 메시지 그대로 전달합니다. 단계적 수정 요청을 합니다. 그리고 AI가 짜준 코드를 검증하는 가장 좋은 방법은 로컬에서 직접 돌려보는 것입니다. 직접 실행해보는 게 제일 확실하고 빠릅니다. 재주문원하는 음식이 잘못 나왔으면 우선 재주문을 해야 합니다. 에러 로그는 문제의 원인을 알려주는 기록장입니다. 어떤 상황에서 문제가 생겼는지 알려줘야 합니다. 여러 문제를 한 번에 모아서 재주문하면 범위가 커집니다. 하나를 고치고 확인한 후 다음 문제를 재주문하는 것이 좋습니다. 재주문뭐가 문제인지 정확히 말합니다.에러 로그를 보여줍니다.문제 발생 순서를 설명합니다.필요한 부분만 수정 요청합니다...

웹 서비스의 구조를 식당에 대비해서 알았으니 이제는 AI 요리사에게 직접 첫 주문을 할 차례입니다. AI에게 무작정 코딩해 줘라고 하면 원하는 방향의 요리가 나오지 않습니다. 주문서(프롬프트)를 잘 쓰면 원하는 결과물이 바로 나옵니다. 주문AI에게 주문을 넣을 때 너무 모호하게 하지 말아야 합니다. 음식이 이상하면 피드백해야 합니다. 정확한 피드백이 빠른 수정을 합니다. 주문모호한 주문명확한 주문맛있는 요리 하나 해주세요.매콤한 소스에 소고기 스테이크를 웰던으로 해주세요.쇼핑몰 사이트 만들어 주세요.Next.js로 쇼핑몰 베스트 상품 사이트를 만들어 주세요.상품 검색 기능과 카테고리 필터를 넣고 모바일에서도 잘 보이게 만들어 주세요. 효과적인 주문서 3단계 주문서 3단계주방 환경사용할 언어와..

바이브 코딩은 AI에게 대략적인 방향과 느낌(Vibe)만 던져주면 코드를 알아서 짜주는 방식을 말합니다. 예전에는 직접 코드를 작성해야 했다면 이제는 요구사항을 설명하고 결과물을 만들어가는 방식으로 개발할 수 있습니다. 프로그램은 식당과 비슷합니다. 우리가 식당 구조를 알고 있어야 AI에게 정확히 일을 시킬 수 있습니다. 바이브 코딩 개념바이브 코딩(Vibe Coding)은 프로그래밍 문법을 직접 하는 대신에 사람이 일상적인 프롬프트로 AI에게 원하는 느낌(Vibe)과 기능만 지시하여 소프트웨어를 개발하는 방식을 뜻합니다. 전 OpenAI의 공동 창립자이자 AI 연구원인 안드레 카파시(Andrej Karpathy)가 처음 제시한 용어입니다. 바이브 코딩자연어 중심 개발같이 원하는 느낌과 의도를 말하면 A..