team-requests.example · 화면 예시
TEAM REQUESTS
목록 화면팀 요청 관리
전체 요청검토할 항목처리 기록
| 요청 | 담당 | 상태 |
|---|---|---|
| 교육 자료 검토 | 운영팀 | 확인 대기 |
| 장비 반납 안내 | 지원팀 | 처리 완료 |
입력 검증 예시
제목이 비어 있으면 요청을 저장하기 전에 안내합니다.
실습 미리보기
요청을 입력하고, 변경된 화면을 확인합니다.
가상 업무 요청 앱과 기능 변경 기록을 나란히 둔 예시입니다. 화면을 만든 뒤 무엇을 테스트해야 하는지 함께 살펴보세요.
01기능을 화면과 동작으로 나눕니다.+
입력할 항목과 목록에 보여줄 내용, 오류일 때의 안내를 먼저 정합니다.
02생성된 코드의 변경을 읽습니다.+
파일과 수정 범위를 비교하고, 요청하지 않은 변경이 들어왔는지 확인합니다.
03작은 테스트로 다시 확인합니다.+
정상 입력과 빈 입력을 재현해 저장 여부와 안내 문구를 확인합니다.
화면과 자료는 교육 내용을 설명하기 위한 예시입니다. 실제 서비스에 접속하거나 자료를 전송하지 않습니다.
실습 결과물
수업에서 만들어 볼 것들
결과물을 직접 확인하며
내 업무에 맞게 고치는 연습을 합니다.
업무 앱 기능 명세
사용자와 필요한 입력·조회 흐름을 정합니다. 구현할 기능과 이번 실습에서 제외할 기능을 구분합니다.
입력·조회가 가능한 웹앱
예제 업무 데이터를 담는 화면을 구현합니다. 빈 입력과 잘못된 값, 처리 결과가 화면에 어떻게 보이는지 확인합니다.
검토한 코드와 테스트 기록
AI가 바꾼 파일을 비교하고 동작을 검증합니다. 수정 이유와 테스트 결과를 남겨 다음 변경을 이어갈 수 있게 합니다.
이런 분께 권합니다
우리 팀이 쓸 작은 업무 앱부터
- ✓HTML·JavaScript 기초를 읽고 수정할 수 있는 개발 입문자
- ✓HTML·JavaScript 기초를 익히고 업무용 프로토타입을 만들려는 기획·운영 담당자
- ✓AI가 작성한 코드의 변경과 동작을 함께 확인하려는 개발자
01업무 요청을 기능으로 나누기
사용자 흐름 · 입력·조회 · 범위+
팀의 반복 업무 중 웹앱으로 다룰 부분을 고릅니다. 화면별 입력과 결과, 구현 범위를 짧은 명세로 작성합니다.
실습 결과웹앱 기능 명세
02화면과 데이터 구조 잡기
화면 구성 · 데이터 항목 · 예제+
목록과 입력 화면을 그린 뒤 필요한 필드를 정의합니다. 가상 데이터를 넣어 화면의 정보 순서와 상태를 확인합니다.
실습 결과화면 초안과 예제 데이터
03AI와 작은 기능부터 구현하기
작업 지시 · 코드 수정 · Git+
기능을 작은 작업으로 나누어 AI에 요청합니다. 생성된 코드를 읽고 실행하며 변경 내용을 Git으로 관리합니다.
실습 결과입력·조회 웹앱
04정상 동작과 오류를 함께 검증
입력 검증 · 테스트 · 코드 리뷰+
빈 값, 잘못된 형식과 정상 입력을 각각 테스트합니다. 화면에서 확인한 문제를 코드 변경과 연결해 수정합니다.
실습 결과테스트 사례와 수정 기록
05공유 전에 점검할 것들
환경 설정 · 비밀값 · 배포 점검+
외부 서비스 키와 설정값을 코드에서 분리하는 방법을 살핍니다. 테스트용 배포 환경에서 기능을 확인하고 남은 작업을 기록합니다.
실습 결과공유용 프로토타입과 점검표
작은 기능을 만들고, 바뀐 동작을 확인합니다.
기능 명세 옆에 화면과 테스트를 놓고
코드가 생성됐는지보다 요청한 동작이 맞는지 확인합니다. 수정할 때마다 화면과 변경 내용을 비교하는 개발 흐름을 연습합니다.
교육 내용을 표현한 연출 이미지업무 앱 기능 명세
사용자와 필요한 입력·조회 흐름을 정합니다. 구현할 기능과 이번 실습에서 제외할 기능을 구분합니다.
입력·조회가 가능한 웹앱
예제 업무 데이터를 담는 화면을 구현합니다. 빈 입력과 잘못된 값, 처리 결과가 화면에 어떻게 보이는지 확인합니다.
검토한 코드와 테스트 기록
AI가 바꾼 파일을 비교하고 동작을 검증합니다. 수정 이유와 테스트 결과를 남겨 다음 변경을 이어갈 수 있게 합니다.
이미지는 교육 내용 이해를 위한 예시입니다.
- 입력·조회 흐름 명세
- AI와 기능 구현·코드 검토
- 오류 테스트와 공유 준비
내 업무에 맞춰 쓰는 연습
다음 변경에도 참고할 개발 기록
기능을 요청한 문장, 수정한 파일과 검증한 결과를 함께 남깁니다. 프로토타입의 범위와 남은 작업을 읽을 수 있게 정리합니다.
- 01웹앱 기능 명세
- 02코드 리뷰·테스트 기록
- 03배포 전 점검표
자료의 세부 구성과 제공 범위는 모집 공지에서 안내합니다.
참여 준비
수업 전에
확인해 주세요.
노트북과 HTML·JavaScript 기초, 파일 편집과 터미널 사용 경험을 권합니다. AI 코딩 도구 계정·API, 배포 서비스의 이용료와 제공 범위는 모집 공지에서 확정합니다. 로컬 GPU를 전제로 하지 않으며 회사 저장소나 실제 업무 데이터는 사용하지 않습니다.
준비 사항 문의자주 묻는 질문
참여 안내
개발 경험이 전혀 없어도 괜찮나요?
기초 문법을 처음부터 모두 다루는 과정은 아닙니다. HTML·JavaScript 코드를 읽고 간단히 수정할 수 있는 수준을 권하며, 구체적인 사전 준비는 모집 공지에서 안내합니다.
어떤 AI 코딩 도구를 사용하나요?
수업 목표와 호환성을 확인해 개강 전에 도구를 정합니다. 특정 유료 플랜을 지금 필수로 정하지 않았으며 계정·API 비용과 제공 범위도 함께 안내합니다.
완성한 앱을 바로 회사에서 써도 되나요?
수업 결과는 예제 데이터로 검증한 프로토타입입니다. 실제 업무 적용 전에는 회사의 보안·운영 기준에 맞춰 권한, 데이터와 배포 환경을 추가 검토해야 합니다.
일정과 수강료는 언제 안내하나요?
현재 개설 준비 중입니다. 일정·장소·수강료와 실습 환경, 신청 방법은 확정 후 이 페이지에 안내합니다.
AI 코딩으로 업무 웹앱 만들기
교육 내용과 참여 방법,
궁금한 점을 남겨주세요.
개인 참여와 팀 단위 교육 모두 문의할 수 있습니다.