Devin(데빈)으로 웹사이트 제작을 자동화하는 3단계【초보자용】
機械翻訳 / Machine-translated
A
AI Friends
2時間前・6分で読める
機械翻訳 / Machine-translated
@aifriends
AI Friends（https://aifriends.jp）のクロスポスト公式アカウント。AIツールの紹介・使い方・できることを、中学生でもわかるやさしい日本語で届けます。
이 글에서 알 수 있는 것
Devin(데빈)은 Cognition Labs가 개발한 자율형 AI 소프트웨어 엔지니어입니다. 일반적인 AI 챗봇과 달리, 코드를 작성하는 것에 그치지 않고 계획을 세우고, 테스트하고, 실제로 동작하는 웹사이트까지 만들어 줍니다. 프로그래밍 초보자도 "이런 사이트를 원해요"라고 말하는 것만으로, HTML이나 CSS 같은 전문 지식 없이도 본격적인 웹사이트를 만들 수 있습니다. 2026년 4월에 요금제가 새로워져 월 20달러부터 이용할 수 있게 되었기 때문에, 개인도 부담 없이 시도해볼 수 있습니다. 기존에는 월 500달러로 고가였던 만큼 큰 변화입니다. 직접 코드를 작성하는 시간이 대폭 줄어들기 때문에, 디자인이나 콘텐츠 제작에 집중할 수 있다는 점이 가장 큰 장점입니다.
먼저 Devin 공식 사이트(cognition.com)에 접속하여 계정을 생성합니다. GitHub 계정으로 로그인하는 것이 권장됩니다. Devin이 작성한 코드를 자동으로 GitHub 리포지토리(코드 저장소)에 저장해 주기 때문입니다. 로그인 후 요금제를 선택합니다. 처음 시작하는 분은 Free 플랜으로도 기본 기능을 체험할 수 있지만, 본격적으로 사용하려면 Pro 플랜(월 20달러)을 추천합니다. 다음으로 GitHub 연동 설정을 진행합니다. 화면의 안내에 따라 "Connect GitHub" 버튼을 클릭하고, 접근 권한을 승인하기만 하면 됩니다. 이 작업을 통해 Devin이 여러분의 리포지토리에 코드를 저장하거나, 기존 코드를 읽을 수 있게 됩니다. 설정이 완료되면 Devin의 작업 화면(워크스페이스)이 표시됩니다.
워크스페이스 하단에 채팅 입력창이 있습니다. 여기에 "심플한 자기소개 사이트를 만들어 주세요. 프로필, 스킬, 연락처 섹션을 포함해서"라고 입력해 보세요. 포인트는 가능한 한 구체적으로 지시하는 것입니다. 지시가 모호하면 의도와 다른 결과가 나올 수 있습니다. 예를 들어 "멋진 사이트를 만들어 줘"만으로는 Devin이 무엇을 멋지다고 판단할지 알 수 없으므로, "파란색 계열의 심플한 디자인으로"와 같이 구체적인 조건을 추가하는 것이 좋습니다. 입력 후 Enter 키를 누르면 Devin이 자동으로 플랜(작업 계획)을 작성합니다. 2026년의 새 기능인 "Interactive Planning"을 통해 몇 초 만에 플랜 안이 표시됩니다. 화면에는 "HTML 파일 생성", "CSS로 디자인 조정", "동작 확인" 같은 단계가 목록으로 나타납니다. 이 플랜이 괜찮으면 "승인" 버튼을 누릅니다. 수정하고 싶은 경우에는 채팅으로 "더 컬러풀하게 해줘" 등의 추가 지시를 내릴 수 있습니다.
플랜을 승인하면 Devin이 자율적으로 작업을 시작합니다. 화면 오른쪽에 Devin이 지금 무엇을 하고 있는지 실시간으로 표시됩니다. "index.html 작성 중", "styles.css 편집 중"과 같은 메시지가 흘러갑니다. 코드 에디터 화면도 볼 수 있어서, 실제로 어떤 코드가 작성되고 있는지 확인할 수 있습니다. 작업이 완료되면 Devin이 "프리뷰를 확인해 주세요"라고 알려줍니다. 프리뷰 버튼을 클릭하면 브라우저에서 실제 웹사이트가 표시됩니다. 이미지와 다른 부분이 있으면 "헤더 색상을 녹색으로 변경해 줘"라고 채팅으로 지시하면 바로 수정해 줍니다. 만족스러운 결과물이 완성되면 "배포(공개)해 주세요"라고 지시하면, Devin이 자동으로 GitHub에 코드를 업로드하고, 필요에 따라 호스팅 서비스(Vercel 등)에 공개하는 것까지 대응해 줍니다. 이것으로 여러분의 웹사이트가 전 세계에서 볼 수 있는 상태가 됩니다.
초보자가 자주 막히는 포인트를 세 가지 소개합니다. 첫 번째는 지시가 너무 모호해서 기대와 다른 결과가 나오는 것입니다. 대처법으로는 "빨간색 배경", "3열 레이아웃", "모바일 대응 필수" 등 가능한 한 구체적인 조건을 전달하세요. 두 번째는 GitHub 연동이 잘 되지 않는 것입니다. 이는 GitHub 접근 권한이 부족한 경우가 많습니다. GitHub 측에서 "Settings" → "Applications"에서 Devin의 권한을 다시 확인해 보세요. 세 번째는 Devin이 작업 도중에 멈추는 것입니다. 지시가 너무 복잡해서 처리하지 못하는 경우에 발생합니다. 대처법으로는 큰 태스크를 작게 나눠서 "우선 상단 페이지만 만들어 줘", "다음으로 문의 폼을 추가해 줘"와 같이 단계적으로 지시하면 원활하게 진행됩니다. 에러 메시지가 나타나면 그대로 Devin에게 복사해서 붙여넣고 "이 에러를 수정해 줘"라고 부탁하면, 대부분 스스로 해결해 줍니다.
기본 조작에 익숙해졌다면, 더 편리한 사용법을 시도해 보세요. 첫 번째는 "Devin Search" 기능의 활용입니다. 기존 코드베이스에 대해 "로그인 기능은 어디에 있나요?"라고 질문하면, 해당 파일이나 라인을 알려줍니다. 복잡한 프로젝트에서 코드를 찾는 시간을 대폭 줄일 수 있습니다. 두 번째는 "Devin Wiki" 기능입니다. Devin이 자동으로 프로젝트 문서를 작성해 주는 기능으로, "이 프로젝트의 wiki를 만들어 줘"라고 지시하는 것만으로 각 파일의 역할과 사용법을 정리한 문서가 생성됩니다. 팀 개발에서 매우 유용합니다. 세 번째는 템플릿처럼 사용할 수 있는 지시문 저장입니다. 자주 쓰는 지시문(예: "반응형 디자인으로, SEO 최적화된 랜딩 페이지를 작성")을 메모장 등에 저장해 두면 다음번부터 간편하게 복사해서 재사용할 수 있습니다. 또한 2026년 2월 이후의 새 기능으로, 여러 Devin을 동시에 실행하여 대규모 프로젝트를 분담시키는 것도 가능합니다.
이 글은 AI Friends 의 크로스포스트입니다.
