Claude를 활용한 '바이브 코딩'으로 구축한 AI 앱 쇼케이스 사이트 AnyPlace 제작기

커뮤니티 반응

작성자의 도전에 대해 긍정적인 반응이 우세하며, 프레임워크 없이 바닐라 JS와 PHP로 구축한 점이 흥미롭다는 평가를 받았다.

합의점 vs 논쟁점

합의점

AI를 활용하면 전문 지식 없이도 실제 작동하는 제품을 만들 수 있다
보안과 서버 환경 설정은 개발자가 직접 챙겨야 할 핵심 영역이다

실용적 조언

설정 파일은 보안을 위해 반드시 웹 루트(Web Root) 상단에 배치하여 외부 노출을 차단할 것
파일 업로드 디렉토리에는 .htaccess 파일을 추가하여 PHP 스크립트 실행을 방지할 것
PHP 라우팅 시 match(true)를 사용한다면 구체적인 경로를 일반 경로보다 먼저 선언해야 함

섹션별 상세

작성자는 백엔드 개발 경험이 거의 없는 상태에서 Claude를 주력 코딩 어시스턴트로 활용해 PHP 8.2와 MySQL 기반의 웹사이트 'AnyPlace'를 구축했다. 사용자가 원하는 기능을 자연어로 설명하면 Claude가 코드를 생성하고, 이를 즉시 테스트하며 오류를 수정하는 '바이브 코딩' 방식을 통해 실제 작동하는 서비스를 완성했다. 이 사례는 전통적인 개발 지식의 장벽을 LLM이 어떻게 낮출 수 있는지를 실증했다.

웹사이트의 라우팅 시스템을 구현할 때 PHP의 match(true) 문법을 사용하면서 경로 우선순위 문제로 인해 의도치 않은 페이지가 로드되는 기술적 난관을 겪었다. 구체적인 경로(Specific routes)가 일반적인 경로(Generic routes)보다 코드상에서 먼저 위치해야 한다는 로직을 Claude와 함께 디버깅하며 해결했다. 이는 AI가 코드를 작성하더라도 프로그램의 실행 흐름과 언어적 특성에 대한 개발자의 최종 검토가 필수적임을 시사했다.

로컬 개발 환경과 실제 서버 환경 간의 MIME 타입 감지 방식 차이로 인해 스크린샷 업로드 기능이 서버에서만 실패하는 현상이 발생했다. AI는 사용자의 구체적인 서버 설정이나 설치된 라이브러리 환경을 완벽히 인지하지 못하므로, 환경 차이에서 오는 오류를 해결하기 위해 개발자가 정확한 컨텍스트를 제공해야 한다는 점이 확인됐다.

보안 측면에서는 CSRF 토큰 적용, 속도 제한(Rate Limiting), CSP 헤더 설정 등 초보자가 놓치기 쉬운 필수 보안 요소들을 Claude의 단계별 가이드를 통해 구현했다. 특히 설정 파일을 웹 루트 상단에 배치해 외부 접근을 차단하고, 업로드 디렉토리에 .htaccess 파일을 추가해 PHP 실행을 막는 등 실무적인 보안 모범 사례를 적용했다.

용어 해설

바이브 코딩(Vibe Coding): — AI에게 원하는 기능을 자연어로 설명하고 생성된 코드를 즉시 테스트하며 수정해 나가는 직관적인 개발 방식이다. 전통적인 설계 문서나 엄격한 아키텍처보다 AI와의 상호작용과 반복적 실험에 의존하여 빠르게 결과물을 만들어내는 것이 특징이다.
CSRF 토큰(CSRF Token): — 사이트 간 요청 위조 공격을 방지하기 위해 서버에서 생성하여 클라이언트에 전달하는 고유한 보안 토큰이다. 사용자의 의도하지 않은 요청이 실행되지 않도록 서버 측에서 매 요청마다 토큰의 유효성을 검증하는 필수 보안 메커니즘이다.
콘텐츠 보안 정책 헤더(CSP Headers): — 웹사이트에서 허용하는 리소스의 출처를 브라우저에 명시적으로 알려주는 보안 계층이다. 교차 사이트 스크립팅(XSS) 및 데이터 주입 공격의 위험을 효과적으로 줄이는 데 중요한 역할을 한다.
MIME 타입 감지(MIME Detection): — 파일의 실제 내용이나 확장자를 분석하여 해당 데이터가 어떤 형식인지 식별하는 과정이다. 로컬 환경과 서버 환경의 라이브러리 구성 차이로 인해 파일 업로드 시 동작이 달라질 수 있어 주의가 필요하다.

언급된 도구

Claude추천

주력 코딩 어시스턴트 및 개발 가이드

PHP 8.2중립

백엔드 서버 사이드 로직 구현

MySQL중립

데이터베이스 관리

claude-desktop-debian추천

Linux 환경에서 Claude 데스크톱 앱 실행 지원

언급된 리소스

GitHubaaddrick/claude-desktop-debian