업무 기술서를 항목별로 살펴보세요
각 항목은 이 역할의 일반적인 업무 기술서에 나오는 담당 업무입니다. 옆에는 에이전트가 해당 업무를 어떻게 처리하고 어디까지 스스로 수행하는지 표시했습니다.
- 직접 처리조사, 자료 검토, 초안 작성, 제작 작업입니다. 결과물을 회사 밖으로 보내지 않습니다.
- 승인 후 처리마지막 단계에서 전송, 게시, 결제 또는 기록 변경이 이루어지므로, 먼저 확인 카드를 보여드립니다.
- 준비는 에이전트가, 결정은 직접이 업무는 직접 판단하셔야 합니다. 에이전트가 관련 사실과 권장안을 정리해 드립니다.
- 직접 맡을 일전화, 대면 회의, 서명, 관계 관리는 직접 맡습니다.
| # | 업무 기술서의 항목 | 에이전트의 처리 방식 | 스스로 처리하는 범위 |
|---|---|---|---|
| 01 | 웹사이트와 웹 애플리케이션을 위해 깔끔하고 테스트된 코드를 작성합니다. | 자체 컴퓨터에서 HTML, CSS, JavaScript, TypeScript 코드를 작성하고, 구현한 기능의 테스트를 추가합니다. 보고하기 전에 테스트와 린터를 실행합니다. GitHub 푸시를 허용할 때까지 작업은 브랜치에 남습니다. | 직접 처리 |
| 02 | 디자인을 바탕으로 HTML, CSS, JavaScript를 사용해 반응형 페이지와 인터페이스를 만듭니다. | Figma 파일이나 스크린샷을 바탕으로 MonstarX 또는 코드로 각 페이지를 만듭니다. 390, 768, 1,440픽셀 너비에서 확인하고 디자인과 다른 부분을 정리합니다. MonstarX 프로젝트를 시작하거나 변경하기 전에는 승인을 요청합니다. | 승인 후 처리 |
| 03 | 프런트엔드를 백엔드 서비스, API, 데이터베이스에 연결합니다. | Stripe나 Supabase 같은 서비스의 문서를 읽고, 오류 처리를 포함한 호출 코드를 작성합니다. 자체 컴퓨터에서 테스트 키로 동작을 확인하고, 필요한 운영 키를 알려줍니다. 운영 키는 직접 추가합니다. | 직접 처리 |
| 04 | 브라우저와 기기별로 테스트하고 버그를 찾아 수정합니다. | 자체 데스크톱에서 Chrome과 Firefox로 모든 페이지를 열고 모바일, 태블릿, 데스크톱 화면 너비에서 확인합니다. 각 링크를 클릭하고 각 양식을 제출합니다. 버그를 재현해 브랜치에서 수정하고 수정 전후 스크린샷을 보여줍니다. | 직접 처리 |
| 05 | 페이지 속도와 성능, 기본적인 검색엔진 최적화를 개선합니다. | 자체 브라우저에서 각 페이지의 로딩 시간과 용량을 측정하고, 이미지를 압축하고 사용하지 않는 스크립트를 제거합니다. 페이지 제목, 설명, 대체 텍스트, 사이트맵도 추가합니다. 특정 점수를 보장하지 않고 개선 전후 수치를 보여줍니다. | 직접 처리 |
| 06 | 본격적인 개발 전에 디자이너와 함께 프로토타입과 목업으로 아이디어를 시험합니다. | Figma 프레임, 스케치 또는 글을 바탕으로 MonstarX에서 클릭 가능한 프로토타입을 만들고, 디자이너와 공유할 미리보기 링크를 전달합니다. 양식을 위로 옮겨 달라는 식으로 말하면 변경합니다. 빌드할 때마다 먼저 승인을 요청합니다. | 승인 후 처리 |
| 07 | 다른 개발자의 코드를 검토하고 버전 관리로 변경 사항을 관리합니다. | GitHub의 각 풀 리퀘스트를 자체 컴퓨터에 체크아웃해 실행하고, 문제가 생기는 부분과 불명확한 부분, 수정 제안을 검토 내용으로 작성합니다. 댓글을 게시하거나 직접 풀 리퀘스트를 열기 전에는 승인을 요청합니다. 병합은 팀이 담당합니다. | 승인 후 처리 |
| 08 | 기술 문서를 작성하고 최신 상태로 유지합니다. | README, 설정 절차, 컴포넌트별 문서와 변경 사항마다 작성한 변경 이력을 코드와 함께 저장소의 파일로 관리합니다. 코드가 바뀌면 같은 작업에서 해당 설명 문서도 업데이트합니다. | 직접 처리 |
| 09 | 업데이트, 새 기능, 수정 사항을 운영 사이트에 배포합니다. | 릴리스 노트, 테스트 결과, 미리보기 링크를 준비합니다. MonstarX 프로젝트는 공개 주소가 표시된 승인 카드를 허용하면 공개됩니다. GitHub의 코드는 풀 리퀘스트를 준비하며, 배포는 기존 절차를 따릅니다. | 승인 후 처리 |
| 10 | 사이트를 백업하고 보안 및 소프트웨어 업데이트를 적용합니다. | 매달 보안 업데이트가 있는 패키지와 플러그인을 정리하고, 릴리스 노트를 읽은 뒤 브랜치에 업데이트를 적용하고 테스트합니다. 변경하기 전에 최신 백업이 있는지 확인합니다. 운영 사이트를 업데이트하기 전에는 승인을 요청합니다. | 승인 후 처리 |
| 11 | 고객, 디자이너, 관리자와 요구사항, 범위, 우선순위를 합의합니다. | 회의록과 메시지를 바탕으로 Google Docs에 작업 범위 초안을 작성합니다. 페이지와 기능, 제외 항목, 미해결 질문, 항목별 작업량을 정리합니다. 고객과 직접 합의하면 에이전트가 그에 따라 작업합니다. | 준비는 에이전트가, 결정은 직접 |
| 12 | 프로젝트의 기술, 프레임워크, 아키텍처를 선택합니다. | 예를 들어 MonstarX와 GitHub 저장소의 자체 코드를 비교하는 등 두세 가지 선택지를 한 페이지에 정리합니다. 각각의 운영 비용, 팀의 기존 숙련도, 위험 요소를 살펴봅니다. 최종 선택은 직접 합니다. | 준비는 에이전트가, 결정은 직접 |
전체 12개 항목 중 10개를 에이전트가 처리하며, 일부는 승인이 필요합니다
담당 업무의 출처. 이 12개 항목은 공개된 웹 개발자와 프런트엔드 개발자 채용 공고에 가장 자주 등장하는 업무를 다시 정리하고, 웹 개발자를 위한 O*NET 업무 목록과 대조한 것입니다. O*NET OnLine과 대조해 확인했습니다: 15-1254.00 웹 개발자
AI 웹 개발 에이전트 에이전트와 함께하는 일주일
요청과 디자인을 읽고 불명확한 점을 질문한 뒤, 제작 전에 간단한 계획을 전달합니다.
보고된 버그, 검토를 기다리는 풀 리퀘스트, 이번 주에 완료할 페이지 등 남은 작업을 정리합니다.
자체 컴퓨터에서 열려 있는 풀 리퀘스트를 검토하고, 승인받을 검토 댓글 초안을 작성합니다.
이번 주 변경 사항을 모바일, 태블릿, 데스크톱 화면 너비에서 테스트하고 발견한 문제를 브랜치에서 수정합니다.
변경 내용, 테스트 결과, 미리보기 링크를 준비합니다. 승인을 받을 때까지 공개하지 않습니다.
보안 업데이트가 있는 패키지를 정리하고 브랜치에 적용한 뒤 테스트합니다.
첫날 제공할 정보
- 코드 접근 권한: GitHub 저장소 또는 사이트가 있는 MonstarX 프로젝트
- 디자인: Figma 파일, 스크린샷 또는 참고할 사이트
- 브랜드 자료와 문구: 로고, 글꼴, 색상, 사진, 페이지별 문구
- 작업 방식: 브랜치 규칙, 검토 담당자, 운영 사이트 배포 절차
- 사이트에서 사용하는 서비스의 테스트 키. 운영 키는 직접 관리합니다
- 방문자가 가장 많이 사용하는 브라우저와 화면 크기
직접 맡을 일
- 고객 및 관리자와의 범위, 우선순위, 마감일 합의
- 기술과 아키텍처 선택. 에이전트는 비교 자료를 준비합니다
- 코드 병합과 공개 여부 결정
- 실제 스마트폰과 태블릿에서의 테스트. 에이전트는 해당 화면 너비에서 테스트합니다
- 운영 환경의 비밀번호와 키 관리
세 단계로 에이전트 채용하기
- 01
역할 작성
에이전트를 만들고 이름을 정한 뒤, 새 개발자에게 설명하듯 업무를 적어주세요. 사이트의 목적, 코드 구성, 검토와 배포 방식, 절대 문제가 생겨서는 안 되는 부분을 포함합니다. 직무 설명이 있다면 붙여 넣어도 됩니다.
- 02
접근 권한 부여
MonstarX를 한 번 승인하고, GitHub와 Figma를 사용한다면 자신의 계정으로 연결하세요. 이 에이전트가 해당 도구를 사용하도록 설정합니다. 에이전트는 먼저 저장소와 디자인 파일, 사이트가 구성된 방식을 살펴봅니다.
- 03
첫 작업 정하기
내일 10:00까지 페이지 하나를 만들거나 버그 하나를 수정하고, 미리보기와 테스트 결과를 함께 달라고 요청하세요. 동료의 작업처럼 검토한 뒤, 매주 검토하고 배포하는 일정을 정합니다.
처음 요청해 볼 일
- Figma 파일을 바탕으로 Ridge의 대기자 등록 양식이 있는 출시 페이지를 만들어 주세요. 모바일 화면 너비에서 확인하고 공개하기 전에 미리보기를 보여 주세요.
- 우리 사이트의 문의 양식이 모바일에서 작동하지 않아요. 문제를 재현하고 브랜치에서 수정한 뒤 수정 전후를 보여 주세요.
- fieldwork-site 저장소에서 열려 있는 풀 리퀘스트를 검토하고 댓글 초안을 작성해 주세요. 게시하기 전에 승인을 요청해 주세요.
- 매월 첫째 월요일에 보안 업데이트가 있는 패키지를 정리하고, 브랜치에 적용한 뒤 테스트해 주세요.
작동 모습 보기
예시 데이터로 작업하는 과정을 빠르게 재생한 영상입니다. 일시 정지하거나 원하는 구간으로 이동하고, 직접 마우스를 조작해 볼 수도 있습니다.
화면에 나오는 앱
MonstarX
할 일을 골라보세요. 처리 과정을 보여드립니다.
- 이유
- 출시 페이지를 공개합니다.
- 위치
- MonstarX · 프로젝트 ridge-launch
- 예상 결과
- 이 주소로 페이지가 공개됩니다. 언제든 공개를 취소할 수 있습니다.
모든 것과 연결된 나의 팀.
정상까지 따뜻하게.
정상까지 오래 걸어도 든든한 500 ml 보틀.
가상 데이터로 작업 과정을 재현하고 배속으로 재생한 예시입니다. 일시 정지하거나 원하는 구간으로 이동할 수 있고, 직접 마우스를 잡을 수도 있습니다.
자주 묻는 질문
웹 개발 AI 에이전트란 무엇인가요?
웹 개발 AI 에이전트는 페이지 제작, 서비스 연결, 테스트, 버그 수정, 문서 작성 등 웹 개발자의 컴퓨터 업무를 수행하는 소프트웨어입니다. Monmo 에이전트는 같은 구독에 포함된 앱 빌더 MonstarX와 자체 컴퓨터의 개발 도구를 사용하며, 무엇이든 공개하기 전에는 승인을 요청합니다.
AI 에이전트가 웹 개발자를 대체할 수 있나요?
AI 에이전트는 디자인을 바탕으로 한 페이지 제작, 테스트, 버그 수정, 업데이트, 문서 작성을 맡습니다. 하지만 고객과 작업 범위를 합의하거나 아키텍처를 선택하지는 않으며, 공개되는 결과물에 대한 책임도 지지 않습니다. 사람이 작업을 검토하고 매번 배포를 승인합니다. 팀은 개발자가 쌓인 작은 작업 대신 어려운 문제에 집중할 수 있도록 에이전트를 활용합니다.
MonstarX는 무엇이고 꼭 필요한가요?
MonstarX는 Monmo에 포함된 앱 빌더로, 하나의 구독으로 둘 다 이용할 수 있습니다. 에이전트는 작업 설명을 바탕으로 MonstarX에서 사이트나 앱을 만들고 미리보기 링크를 전달할 수 있습니다. 프로젝트는 고객의 MonstarX 계정에 남습니다. 각 제품에는 별도의 사용 한도가 있습니다. 기존 코드베이스가 있다면 에이전트는 대신 자체 컴퓨터에서 Git을 사용해 작업합니다.
기존 웹사이트와 코드도 작업할 수 있나요?
네. 에이전트가 코드에 접근할 수 있다면 가능합니다. 사이트가 GitHub 저장소에 있으면 에이전트가 자체 컴퓨터로 코드를 복사하고, 브랜치에서 수정한 뒤 사이트를 실행해 확인하고 풀 리퀘스트를 준비합니다. 코드를 푸시하기 전에는 승인을 요청하며, 병합과 배포는 기존 절차에 따라 진행합니다.
승인 없이 사이트를 공개하거나 배포하나요?
아니요. 공개할 때는 항상 별도의 승인 카드가 표시되며, 카드에서 공개될 주소를 확인할 수 있습니다. MonstarX 프로젝트를 시작하거나 변경할 때, GitHub에 코드를 푸시할 때, 운영 사이트를 업데이트할 때도 먼저 승인을 요청합니다. 코드 읽기, 자체 컴퓨터에서 코드 작성, 테스트 실행, 스크린샷 촬영은 컴퓨터 외부를 변경하지 않으므로 승인이 필요하지 않습니다.
사이트 테스트는 어떻게 하나요?
에이전트는 자체 브라우저에서 각 페이지를 모바일, 태블릿, 데스크톱 화면 너비로 열어 모든 링크를 클릭하고 테스트 데이터로 양식을 제출하며 프로젝트의 자동화 테스트를 실행합니다. 실제 스마트폰이 아닌 스마트폰 화면 크기에서 테스트하므로, 배포를 승인하기 전에 직접 기기에서 미리보기를 열어 최종 확인해 주세요.