기본 구조 만들기

자동화 도구를 만들 준비가 되었습니다. AI에게 첫 번째 부탁을 해봅시다.

새 프로젝트 시작하기

두 가지 방법이 있습니다:

방법 1: 새 프로젝트를 만든다 (추천)

• 이전 프로젝트들과 분리해서 깔끔하게 시작합니다
• Cursor에서 새 폴더를 만들고 시작하면 됩니다

방법 2: 기존 프로젝트에 페이지를 추가한다

• 이미 만든 웹사이트에 "도구" 페이지를 추가합니다
• 사이트를 하나로 관리하고 싶을 때 좋습니다

처음이라면 방법 1을 추천합니다. 나중에 익숙해지면 기존 프로젝트에 추가하는 것도 쉽습니다.

AI에게 첫 번째 부탁하기

선택한 프로젝트에 따라 AI에게 이렇게 말해보세요:

주간 보고서 생성기를 선택했다면:

"주간 보고서 생성기를 만들어줘. 이번 주 한 일을 입력하면 깔끔한 보고서가 나오는 도구야. Next.js로 만들어줘."

견적서 생성기를 선택했다면:

"견적서 생성기를 만들어줘. 고객명, 항목, 수량, 단가를 입력하면 합계가 자동 계산되는 견적서가 나오는 도구야. Next.js로 만들어줘."

안내 메일 발송기를 선택했다면:

"고객 안내 메일 생성기를 만들어줘. 고객 이름과 안내 유형을 선택하면 정중한 메일 본문이 만들어지는 도구야. Next.js로 만들어줘."

AI가 만들어준 것 살펴보기

AI가 코드를 생성하면 npm run dev로 실행해서 브라우저에서 확인합니다.

아마 이런 것들이 보일 겁니다:

완벽하지 않아도 괜찮습니다. 기본 뼈대가 만들어졌다는 것이 중요합니다.

기본 구조 이해하기

AI가 만들어준 구조는 대체로 이렇습니다:

1. 입력 영역 — 사용자가 정보를 적는 곳
2. 처리 버튼 — "생성하기"를 누르면 동작
3. 출력 영역 — 결과물이 보이는 곳

레스토랑에 비유하면 이렇습니다:

>

- 입력 = 주문서 (손님이 적는 것)

- 처리 = 주방 (요리하는 과정)

- 출력 = 완성된 요리 (테이블에 나오는 것)

지금은 주문서와 테이블이 준비된 상태입니다. 다음 절에서 주문서를 더 자세히 만들고, 그 다음에 주방(처리 로직)을 완성하겠습니다.

마음에 안 드는 부분이 있다면

AI가 만들어준 화면이 마음에 안 들 수 있습니다. 그럴 때는:

"제목을 '우리팀 주간 보고서'로 바꿔줘"

>

"배경색을 좀 더 밝게 해줘"

>

"글씨 크기를 좀 더 키워줘"

이렇게 하나씩 수정 요청을 하면 됩니다. 한꺼번에 많이 바꾸려고 하지 마세요.

이 절의 요약

• 새 프로젝트를 만들거나 기존 프로젝트에 추가할 수 있습니다
• AI에게 "무엇을 만들고 싶은지" 구체적으로 설명합니다
• AI가 입력-처리-출력 구조의 기본 화면을 만들어 줍니다
• 마음에 안 드는 부분은 하나씩 수정 요청하면 됩니다