Devin Desktop 사용법｜AI 에이전트로 웹페이지 만들고 오류까지 수정하기 (2026 최신판)

💡 한 줄 요약
Devin Desktop의 Plan 모드로 작업 순서를 확인한 뒤 Code 모드로 실행하면 코딩 경험이 적어도 간단한 웹페이지를 만들고 오류까지 수정할 수 있습니다.

안녕하세요.
IT세상입니다. 😊

지난 글에서는 Windsurf AI가 Devin Desktop으로 바뀌면서 무엇이 달라졌는지 살펴봤습니다.

이번에는 기능을 설명하는 데서 끝내지 않고 직접 결과물을 만들어 보겠습니다. 별도의 서버나 데이터베이스 없이 브라우저로 바로 확인할 수 있는 간단한 소개 웹페이지입니다.

Devin Desktop에는 프로젝트 파일을 직접 확인하고 수정하는 로컬 AI 에이전트가 들어 있습니다. 원하는 결과를 설명하면 필요한 파일을 만들고, 코드를 작성하고, 실행 과정에서 발생한 오류도 함께 확인할 수 있습니다.

다만 AI에게 한 번에 모든 작업을 맡기지는 않겠습니다. 먼저 계획을 확인하고, 파일을 만든 뒤, 브라우저에서 직접 테스트하는 순서로 안전하게 진행하겠습니다.

📌 이 글에서 알 수 있는 내용

• Devin Desktop을 설치하고 프로젝트를 만드는 방법
• Ask·Plan·Code 모드의 차이
• AI 에이전트에게 웹페이지 제작을 요청하는 방법
• 생성된 파일과 변경 내용을 확인하는 방법
• 브라우저에서 웹페이지를 실행하는 방법
• 디자인과 문구를 안전하게 수정하는 방법
• 오류가 발생했을 때 AI로 해결하는 방법

이번에 만들 웹페이지

이번 실습에서는 직장인이나 취업 준비생이 사용할 수 있는 간단한 개인 소개 페이지를 만듭니다.

완성할 화면 구성

① 이름과 한 줄 소개가 들어간 첫 화면
② 경험과 보유 기술을 보여주는 카드
③ 간단한 프로젝트 소개 영역
④ 이메일 문의 버튼
⑤ 메뉴를 누르면 해당 영역으로 이동하는 기능
⑥ 스마트폰에서도 보기 편한 반응형 디자인

웹페이지는 아래 세 개의 파일로 구성합니다.

파일	역할
index.html	문장과 버튼, 카드 등 웹페이지의 기본 구조를 만듭니다.
style.css	색상, 글자 크기, 여백과 카드 배치를 설정합니다.
script.js	메뉴 이동과 버튼 클릭 같은 동작을 처리합니다.

React나 Next.js 같은 개발 도구는 사용하지 않습니다. 처음 배우는 분도 파일 구조를 쉽게 이해할 수 있도록 HTML, CSS, JavaScript만 사용하겠습니다.

시작하기 전에 준비할 것

① 컴퓨터

Windows, macOS 또는 Linux가 설치된 컴퓨터를 준비합니다.

② Devin 계정

Devin Desktop의 AI 기능을 사용하려면 계정 로그인이 필요합니다.

③ 빈 작업 폴더

웹페이지 파일을 저장할 새로운 폴더를 하나 만듭니다.

💡 비용을 줄이는 방법
처음에는 작은 프로젝트로 시작하세요. 요청을 한 번에 너무 길게 작성하기보다 계획 확인, 기본 화면 생성, 디자인 수정 순서로 나누면 불필요한 AI 사용을 줄일 수 있습니다.

1단계. Devin Desktop 설치하기

Devin Desktop 공식 다운로드 페이지에서 사용 중인 운영체제에 맞는 설치 파일을 내려받습니다.

설치 순서

① 운영체제에 맞는 설치 파일을 내려받습니다.
② 설치 파일을 실행하고 안내에 따라 설치합니다.
③ 원하는 화면 테마와 단축키 방식을 선택합니다.
④ Devin 계정으로 로그인합니다.
⑤ 시작 화면이 표시되는지 확인합니다.

기존에 VS Code나 Cursor를 사용했다면 설정과 단축키를 가져오는 선택지가 표시될 수 있습니다. 처음 사용하는 분은 기본 설정으로 시작해도 괜찮습니다.

2단계. 새 프로젝트 만들기

바탕화면이나 문서 폴더에 새로운 폴더를 만듭니다.

추천 폴더 이름

devin-first-website

폴더 이름은 영문 소문자와 하이픈으로 작성하면 경로 문제를 줄일 수 있습니다.

Devin Desktop 시작 화면에서 Open Folder를 선택해 방금 만든 폴더를 엽니다. 시작 화면의 New Project 기능으로 빈 프로젝트를 생성해도 됩니다.

왼쪽 파일 목록이 비어 있다면 정상입니다. 이제 AI 에이전트가 필요한 파일을 만들도록 요청하겠습니다.

3단계. Ask·Plan·Code 모드 이해하기

Devin Desktop에서 작업을 시작하기 전에 모드의 차이를 알아두면 실수를 줄일 수 있습니다.

모드	역할	추천 상황
Ask	프로젝트를 읽고 질문에 답하지만 파일은 수정하지 않습니다.	코드 설명, 구조 확인, 오류 원인 질문
Plan	작업 전에 필요한 파일과 실행 순서를 계획합니다.	새로운 기능, 여러 파일을 수정하는 작업
Code	파일 생성·수정과 터미널 명령 실행을 처리합니다.	계획을 실제 코드로 구현할 때

이번 실습에서는 Plan 모드로 계획 확인 → Code 모드로 제작 순서를 사용합니다.

⚠️ Ask 모드에서는 파일이 바뀌지 않습니다
AI가 수정 방법을 자세히 설명했는데도 실제 파일이 달라지지 않았다면 현재 모드가 Ask로 설정돼 있지 않은지 확인하세요.

4단계. Plan 모드에서 제작 계획 만들기

에이전트 입력창 아래에서 Plan 모드를 선택한 뒤 아래 프롬프트를 입력합니다.

Plan 모드 프롬프트 이 빈 폴더에 개인 소개 웹페이지를 만들 계획을 작성해줘.

사용할 파일은 아래 세 개로 제한해줘.
- index.html
- style.css
- script.js

웹페이지에는 아래 영역이 필요해.
- 이름과 한 줄 소개
- 자기소개
- 보유 기술 카드
- 프로젝트 카드
- 연락처 버튼

파란색과 흰색을 사용한 깔끔한 디자인으로 구성하고,
스마트폰에서도 보기 편한 반응형 화면으로 만들어야 해.

아직 파일을 만들거나 수정하지 말고,
먼저 파일별 역할과 작업 순서만 알려줘.

AI가 제시한 계획에서 세 개의 파일만 사용하는지, 요청한 영역이 모두 포함됐는지 확인합니다.

불필요한 로그인이나 데이터베이스, 외부 라이브러리가 계획에 들어갔다면 빼달라고 요청하세요.

💡 계획을 먼저 확인해야 하는 이유
AI가 코드를 작성하기 전에 방향을 수정할 수 있습니다. 잘못된 계획으로 여러 파일을 만든 뒤 다시 고치는 것보다 훨씬 간단합니다.

5단계. Code 모드로 웹페이지 만들기

계획이 마음에 들었다면 Plan 결과에 표시된 Implement 버튼을 사용하거나 Code 모드로 변경합니다.

그다음 아래 요청을 입력합니다.

Code 모드 실행 프롬프트 방금 작성한 계획대로 웹페이지를 만들어줘.

조건은 다음과 같아.
- 외부 라이브러리와 외부 이미지는 사용하지 마.
- HTML, CSS, JavaScript만 사용해.
- 예시 이름과 이메일을 사용하고 실제 개인정보는 넣지 마.
- 상단 메뉴를 누르면 해당 영역으로 부드럽게 이동하게 해줘.
- 모바일에서는 카드가 한 줄로 배치되게 만들어줘.
- 모든 작업이 끝나면 변경한 파일과 실행 방법을 설명해줘.

에이전트가 작업을 시작하면 왼쪽 파일 목록에 index.html, style.css, script.js가 생성됩니다.

사용 중인 버전에 따라 AI 에이전트가 Devin Local 또는 Cascade라는 이름으로 표시될 수 있습니다. 이름이 달라도 파일을 읽고 수정하는 로컬 에이전트라는 기본 역할은 비슷합니다.

6단계. 생성된 파일 확인하기

AI가 작업을 완료했다고 표시해도 바로 끝난 것은 아닙니다. 생성된 파일을 직접 확인해야 합니다.

확인할 항목

① 요청한 파일 세 개가 모두 만들어졌는지
② index.html에서 style.css와 script.js를 연결했는지
③ 실제 개인정보가 들어가지 않았는지
④ 요청하지 않은 프로그램이나 패키지가 설치되지 않았는지
⑤ 다른 폴더의 파일을 수정하지 않았는지

파일이 너무 복잡하게 작성됐다면 “코딩 초보자도 이해할 수 있도록 구조를 단순하게 바꿔줘”라고 요청할 수 있습니다.

설명만 듣고 싶다면 Ask 모드로 바꾼 뒤 아래처럼 질문하세요.

현재 만든 파일은 수정하지 마.
index.html, style.css, script.js가 각각 어떤 역할을 하는지
코딩을 처음 배우는 사람도 이해할 수 있게 설명해줘.

7단계. 브라우저에서 실행하기

이번에 만든 웹페이지는 별도의 서버 없이 실행할 수 있습니다.

가장 쉬운 실행 방법

① 컴퓨터에서 devin-first-website 폴더를 엽니다.
② index.html 파일을 찾습니다.
③ index.html을 더블 클릭합니다.
④ 기본 브라우저에서 화면이 열리는지 확인합니다.
⑤ 메뉴와 버튼을 직접 눌러봅니다.

화면이 정상적으로 열리면 브라우저 창을 좁게 줄여봅니다. 카드가 한 줄로 바뀌는지, 글자가 화면 밖으로 넘어가지 않는지 확인하세요.

8단계. 원하는 부분만 수정하기

첫 번째 결과가 마음에 들지 않아도 처음부터 다시 만들 필요는 없습니다. 변경할 범위를 정확하게 지정하면 됩니다.

메인 색상 변경

전체 구조와 문구는 그대로 유지해줘.
메인 색상만 짙은 파란색과 하늘색 조합으로 변경해줘.
글자가 잘 보이도록 배경과 충분한 명암 차이를 만들어줘.

소개 문구 변경

다른 디자인과 기능은 수정하지 마.
첫 화면의 소개 문구만 아래 내용으로 바꿔줘.

새로운 기술을 배우고 실제 업무에 적용하는 직장인입니다.

프로젝트 카드 추가

프로젝트 영역에 새로운 카드 하나를 추가해줘.
제목은 ‘AI 업무 자동화’로 작성하고,
기존 프로젝트 카드와 같은 디자인을 사용해줘.
다른 영역은 변경하지 마.

“더 예쁘게 만들어줘”라고만 요청하면 여러 부분이 예상과 다르게 바뀔 수 있습니다.

변경할 부분과 유지할 부분을 함께 적는 것이 중요합니다.

9단계. 오류를 AI에게 전달하기

웹페이지가 정상적으로 작동하지 않을 때는 현재 나타나는 증상을 구체적으로 알려주세요.

문제	확인할 내용
디자인이 적용되지 않음	index.html과 style.css의 연결 경로를 확인합니다.
버튼이 작동하지 않음	script.js 연결과 버튼 선택자를 확인합니다.
한글이 깨짐	HTML 문서의 UTF-8 설정을 확인합니다.
모바일 화면이 잘림	viewport와 반응형 CSS 설정을 확인합니다.

index.html을 열면 글자는 나오지만 CSS 디자인이 적용되지 않아.

index.html과 style.css의 연결 상태를 확인해줘.
먼저 오류 원인을 설명한 뒤 필요한 부분만 수정해줘.
문구와 JavaScript 기능은 변경하지 마.

오류 메시지가 터미널이나 Problems 화면에 표시된다면 해당 내용을 선택해 에이전트에게 전달할 수도 있습니다.

💡 오류 해결 프롬프트 공식
현재 증상 + 확인할 파일 + 원하는 결과 + 변경하지 않을 부분을 함께 작성하세요.

10단계. 터미널 자동 실행 설정 확인하기

AI 에이전트는 필요한 경우 터미널 명령을 실행할 수 있습니다.

간단한 HTML 웹페이지에서는 별도의 명령이 거의 필요하지 않습니다. 그런데 Agent가 프로그램 설치나 파일 삭제 명령을 제안한다면 실행하기 전에 내용을 확인해야 합니다.

⚠️ 초보자는 자동 실행을 낮게 설정하세요
모든 터미널 명령을 자동으로 실행하는 설정은 편리하지만 위험할 수 있습니다. 처음에는 명령을 실행할 때마다 직접 승인하는 방식이 안전합니다.

명령어가 어떤 작업을 하는지 모르겠다면 바로 승인하지 말고 아래처럼 질문하세요.

지금 실행하려는 명령어가 어떤 작업을 하는지 설명해줘.
파일 삭제나 외부 프로그램 설치가 포함되어 있는지도 알려줘.
아직 명령어는 실행하지 마.

Agent Command Center는 언제 사용할까?

이번 실습처럼 작은 웹페이지 하나를 만드는 작업에는 로컬 에이전트 한 개로 충분합니다.

하지만 프로젝트가 커지면 디자인 수정, 오류 분석, 테스트처럼 작업을 나눌 수 있습니다. 이때 Agent Command Center에서 로컬·클라우드 에이전트의 진행 상태를 칸반 형태로 확인할 수 있습니다.

작업 규모	추천 방식
간단한 웹페이지	로컬 에이전트 하나로 제작과 수정
여러 기능이 있는 프로젝트	기능별로 작업을 나누고 진행 상태 확인
시간이 오래 걸리는 작업	클라우드 에이전트에 맡긴 뒤 결과 검토

처음부터 여러 에이전트를 동시에 사용하면 오히려 관리가 어려울 수 있습니다. 로컬 에이전트로 기본 작업 흐름을 익힌 뒤 확장하는 것이 좋습니다.

Devin Desktop 실제 활용 사례

취업 준비생

자기소개와 경력, 프로젝트를 정리한 포트폴리오 페이지를 만들 수 있습니다. 실제 정보를 넣기 전에는 예시 문구로 화면부터 완성하는 것이 좋습니다.

직장인

계산기, 파일 정리 도구, 간단한 데이터 입력 화면처럼 개인 업무에 필요한 작은 프로그램을 만들 수 있습니다.

학생

학습 기록 페이지를 만들고 생성된 HTML과 CSS의 역할을 설명받으며 코딩을 공부할 수 있습니다.

개발자

기능 개발 전에 Plan 모드로 작업 범위를 정리하고, Code 모드로 구현한 뒤 터미널과 오류 화면을 이용해 검증할 수 있습니다.

Devin Desktop 활용법의 장점

✅ 장점

• Plan 모드에서 작업 방향을 먼저 확인할 수 있습니다.
• 자연어로 파일 생성과 코드 수정을 요청할 수 있습니다.
• 프로젝트 파일과 오류를 같은 화면에서 확인할 수 있습니다.
• Ask 모드로 코드를 수정하지 않고 설명만 받을 수 있습니다.
• 작은 웹페이지부터 여러 에이전트를 활용한 개발까지 확장할 수 있습니다.

사용할 때 주의할 점

⚠️ 단점 및 주의사항

• AI가 만든 코드에 오류나 보안 문제가 포함될 수 있습니다.
• 요청이 모호하면 원하지 않는 파일까지 수정할 수 있습니다.
• 터미널 명령을 자동 승인하면 예상하지 못한 작업이 실행될 수 있습니다.
• 여러 에이전트를 동시에 사용하면 작업 충돌이 생길 수 있습니다.
• 회원가입과 결제가 포함된 서비스는 별도의 보안 검토가 필요합니다.
• 고성능 모델과 클라우드 에이전트 사용량에 따라 비용이 늘어날 수 있습니다.

자주 묻는 질문

Q1. Devin Desktop 무료 버전으로도 따라 할 수 있나요?

무료 요금제에서도 제공되는 사용량 안에서 로컬 AI 기능을 체험할 수 있습니다. 한도가 있다면 제작과 수정 요청을 여러 단계로 나누어 진행하세요.

Q2. 코딩을 전혀 몰라도 웹페이지를 만들 수 있나요?

간단한 소개 페이지는 만들 수 있습니다. 다만 오류를 확인하고 원하는 결과로 수정하려면 HTML과 CSS의 기본 개념을 함께 공부하는 것이 좋습니다.

Q3. Ask 모드와 Code 모드는 무엇이 다른가요?

Ask 모드는 프로젝트를 읽고 설명하지만 파일을 변경하지 않습니다. Code 모드는 파일을 만들거나 수정하고 터미널 명령을 실행할 수 있습니다.

Q4. Node.js를 설치해야 하나요?

이번 글처럼 HTML, CSS, JavaScript로 만든 정적 웹페이지는 Node.js 없이 실행할 수 있습니다. React나 Next.js 프로젝트를 만들 때는 필요할 수 있습니다.

Q5. 만든 웹페이지를 인터넷에 공개할 수 있나요?

가능합니다. 정적 웹 호스팅 서비스를 이용해 공개할 수 있습니다. 업로드하기 전 실제 개인정보와 비밀번호, API Key가 포함되지 않았는지 반드시 확인하세요.

마무리

Devin Desktop으로 웹페이지를 만드는 과정은 생각보다 복잡하지 않습니다.

빈 폴더를 열고 Plan 모드에서 작업 순서를 확인한 뒤 Code 모드로 실행하면 필요한 HTML, CSS, JavaScript 파일을 만들 수 있습니다.

완성된 index.html 파일을 브라우저로 열면 결과를 바로 확인할 수 있고, 문제가 생기면 현재 증상과 확인할 파일을 AI에게 전달해 수정할 수 있습니다.

처음부터 복잡한 프로그램을 만들기보다 작은 웹페이지 하나를 완성해 보는 것이 좋습니다. 그 과정에서 모드 변경, 파일 확인, 오류 전달 방법을 익히면 더 큰 프로젝트에도 같은 원리를 적용할 수 있습니다.

가장 중요한 것은 AI의 작업 완료 메시지를 그대로 믿지 않는 것입니다. 생성된 파일을 확인하고, 브라우저에서 실행하고, 버튼과 모바일 화면을 직접 테스트해야 합니다.

📌 핵심 한 줄 정리 Devin Desktop의 Plan 모드로 방향을 정하고 Code 모드로 실행하면 AI 에이전트와 함께 간단한 웹페이지를 만들고 오류까지 해결할 수 있습니다.