AI 초급자 실습

AI에게 일을 맡기고 결과를 확인하는 첫 경험

완벽한 이해보다 중요한 것은 작게 요청하고, 화면을 보고, 다시 고쳐달라고 말하는 감각

안영근 소프트웨어 개발자 AI와 작은 결과물 만들기 youngkeunahn.github.io/presentation

오늘의 흐름

오늘 익힐 AI 활용 흐름

1 덜 막막해지기 AI에게 무엇을 맡길 수 있는지 감을 잡습니다.
2 잘 요청하기 상황, 목표, 결과물, 조건을 담아 요청합니다.
3 작게 만들기 기획 → 설계와 문서화 → 구현 → 검증을 경험합니다.
4 다시 개선하기 부족한 결과와 에러를 AI에게 다시 전달합니다.

1부 · 도구 역할

도구 이름보다 역할을 먼저 본다

AI 작업자

생각 정리, 요구사항 정리, 코드 작성, 수정 방향 제안을 맡깁니다.

코드 작업 공간

파일을 보고, 코드를 만들고, 실행 결과를 확인하는 장소입니다.

중요한 질문은 “누구에게 맡기고, 어디서 확인하는가”입니다.

2부 · 프롬프트 핵심

좋은 프롬프트는 멋진 문장이 아니라 분명한 요청

AI에게 잘 맡긴다는 것은 원하는 결과를 알아볼 수 있게 건네는 일입니다.

1 상황 지금 무엇을 하려는지 말합니다.
2 목표 왜 이 결과가 필요한지 말합니다.
3 결과물 무엇을 받아야 하는지 말합니다.
4 조건 범위와 형식을 함께 정합니다.

2부 · 비교

대략 말하면 대략 나오고, 구체적으로 말하면 쓸 만해진다

아쉬운 요청

노트 만들어줘.

좋은 요청

데일리 노트 웹페이지를 만들려고 해.
사용자가 날짜, 제목, 내용을 입력하고,
저장한 기록을 다시 볼 수 있는 화면이 필요해.

초보자가 실습으로 만들 수 있도록
필요한 핵심 기능 5가지를 표로 정리해줘.

2부 · 역할

역할은 필요할 때 답변의 관점을 맞춘다

역할은 꼭 넣어야 하는 공식이 아니라, 설명 방식이나 관점이 필요할 때 덧붙이는 옵션입니다.

초보자 기준

초보자 기준으로 쉽게 설명해줘.

서비스 기획자 관점

가능하면 서비스 기획자 관점에서 기능의 우선순위도 함께 정리해줘.

개발자 기준

개발자가 바로 화면을 만들 수 있게 항목을 정리해줘.

2부 · 기본 틀

초급자는 이 틀 하나로 시작하면 된다

[상황]에서, [목표]를 위해,
[필요한 결과물]을 [조건과 형식]에 맞춰 정리해줘.

2부 · AI 에이전트와 Plan 모드

프롬프트를 쓰기 전에 Plan 모드로 전환한다

AI 에이전트는 파일을 읽고 만들고 수정하며 작업을 진행합니다.

진행 순서: Plan 모드로 전환 → 프롬프트 작성 → AI가 제안한 계획 확인 → 작업 진행

1. 할 일 체크리스트

할 일을 추가하고, 완료 표시하고, 삭제합니다.

2. 간단 가계부

날짜, 항목, 금액을 입력하고 총지출을 확인합니다.

3. 나만의 링크 모음

제목, 주소, 분류를 저장하고 다시 열어봅니다.

계획이 어렵거나 기능이 많으면, 작업 전에 범위를 더 작게 줄여달라고 요청합니다.

쉬는 시간

쉬는 시간 & 실습 환경 점검

이제부터는 설명보다 직접 해보는 시간이 많아집니다.

  • AI 채팅 도구 열기
  • Supabase 화면 준비
  • 브라우저 준비
  • 실습 프롬프트 모음 열기
  • 막히면 바로 질문하기

3부 · 공통 예제

공통 예제: 데일리 노트

입력하고, 저장하고, 다시 확인하는 작은 웹페이지입니다.

넣을 것

  • 오늘의 기록 입력
  • 저장 버튼
  • 저장된 기록 목록
  • 기록 수정과 삭제
  • 키워드 검색
  • Supabase DB 저장
  • 새로고침 후 다시 불러오기

이번에는 제외

  • 로그인
  • 통계
  • 관리자 기능
  • 복잡한 권한 관리
작은 예제로 저장과 불러오기를 경험합니다.

3부 · 순서

데일리 노트를 만드는 순서

1 기획 오늘 만들 것을 작게 정합니다.
2 문서화 AI에게 짧은 기획 문서를 만들게 합니다.
3 구현 문서와 SQL을 기준으로 AI가 구현 방식을 정합니다.
4 검증 문서, 화면, DB, 새로고침을 확인합니다.

3부 · 핵심 프롬프트 1

먼저 짧은 기획 문서를 만든다

데일리 노트 웹페이지를 만들기 위한 짧은 기획 문서를 만들어줘.
목적, 입력 항목, 저장 동작, 수정·삭제, 검색, 화면 결과, 검증 체크리스트를 포함해줘.

자세한 프롬프트는 실습 프롬프트 모음에서 복사합니다.

3부 · 문서 점검

AI가 만든 문서는 먼저 확인하고 다듬는다

먼저 확인할 질문

  • 이 웹페이지의 목적과 일치하는가?
  • 사용자가 입력할 정보가 너무 많지는 않나?
  • 저장 버튼을 눌렀을 때의 동작이 이해되나?
  • Supabase에 저장될 데이터가 데일리 노트에 어울리나?
  • 검증 체크리스트가 실제로 확인할 수 있는 내용인가?

다시 요청할 문장

너무 복잡할 때

초급자 실습용으로 너무 복잡해.
로그인, 통계 기능은 빼고 오늘의 기록을 저장하고 다시 보고, 수정·삭제·검색하는 핵심 기능만 남겨줘.
기획 문서를 다시 짧게 정리해줘.

너무 추상적일 때

문서가 조금 추상적이야.
사용자가 실제로 어떤 정보를 입력해야 하는지, 저장 후 화면에 무엇이 보여야 하는지 더 구체적으로 정리해줘.

3부 · Supabase 소개

Supabase는 내 웹페이지의 온라인 저장소

Supabase가 해주는 일

  • 엑셀 표 같은 테이블에 기록을 한 줄씩 저장
  • 저장·조회·수정·삭제·검색을 자동 처리
  • 브라우저에서 바로 호출할 수 있는 API 제공
  • 새로고침해도 데이터가 사라지지 않음

오늘 다루는 키 두 가지

  • Project URL — 내 프로젝트 주소
  • anon public key — 브라우저용 공개 키, 코드에서 사용
  • service_role key — 관리자 권한 키, 코드에 절대 넣지 않음

API KEY 확인하기

3부 · 핵심 프롬프트 2

문서를 기준으로 구현을 요청한다

이 기획 문서와 Supabase SQL을 기준으로 웹페이지를 만들어줘.
저장, 불러오기, 수정·삭제, 검색, 실행 방법, 전체 코드를 포함해줘.

Auto 모드

AI가 바로 파일을 보고 수정하며 작업을 진행합니다.

Plan 모드

먼저 구현 순서와 확인 방법을 계획으로 정리합니다.

오늘 방식

Plan 모드로 계획을 확인한 뒤 진행합니다.

계획이 어렵거나 복잡하면 구현 전에 더 단순하게 바꿔달라고 요청합니다.

3부 · 검증

AI가 만들었다고 끝난 것이 아니다

  • 문서와 화면이 같은가?
  • 저장 버튼이 동작하는가?
  • Supabase DB에 들어갔는가?
  • 기록을 수정·삭제할 수 있는가?
  • 키워드 검색이 되는가?
  • 새로고침 후 다시 보이는가?
  • 빈 입력값일 때 안내가 나오는가?
  • 화면이 너무 복잡하지 않은가?

3부 · 에러 대처

에러는 실패가 아니라 다시 물어볼 재료

아래 에러가 떴어.
원인을 쉽게 설명해주고, 고친 전체 코드를 다시 줘.

에러 메시지:
Uncaught SyntaxError: Unexpected token

에러 메시지

그대로 복사합니다.

현재 상황

언제, 어디서 났는지 말합니다.

원하는 결과

어떻게 되길 바라는지 말합니다.

3부 · 환경변수와 보안

API 키는 .env에 넣고, Git에는 올리지 않는다

왜 키를 코드에 그대로 쓰면 안 되는가

  • GitHub에 올라가면 누구나 그대로 볼 수 있다
  • 봇이 공개 저장소의 키를 자동으로 수집해 악용한다
  • 내 Supabase에 침입해 데이터가 삭제·변조될 수 있다
  • 요금이 부과되는 서비스라면 요금 폭탄으로 이어진다
  • 커밋 기록은 지워도 남아 키를 회수해도 늦은 경우가 많다

안전하게 쓰는 방법

  • .env 파일에 키와 URL을 따로 보관한다
  • .gitignore에 .env를 추가해 Git 추적에서 제외한다
  • 코드는 환경변수로만 키를 읽는다
  • 예시용 .env.example만 비어 있는 값으로 올린다
  • 커밋 직전에 키가 노출되지 않았는지 한 번 더 확인한다

3부 · GitHub 프롬프트

AI에게 GitHub에 올리는 방법을 물어본다

방금 만든 데일리 노트 웹페이지를 GitHub에 올리고 싶어.
나는 코딩과 GitHub를 잘 몰라.
계정 만들기, 새 저장소 만들기, 코드 올리기 순서를 알려주고,
민감한 정보가 없는지 확인하는 방법과 .gitignore도 함께 알려줘.

여유가 있으면 GitHub Pages로 공개 URL까지 만들어봅니다.

3부 · 확장

같은 흐름을 내 아이디어에 적용한다

1 주제 바꾸기 데일리 노트를 다른 소재로 바꿉니다.
2 입력 항목 기록할 내용을 2~3개로 정합니다.
3 문서 다시 만들기 목적, 입력, 저장, 화면을 다시 씁니다.
4 다시 구현하기 기준 문서를 AI에게 주고 변경을 요청합니다.
독서 기록장, 운동 루틴 기록, 상품 아이디어 메모장, 고객 상담 메모장

마무리 · 복습

오늘 한 일

  1. 1AI를 작업 파트너로 이해했다.
  2. 2상황, 목표, 결과물, 조건으로 요청했다.
  3. 3데일리 노트를 작게 기획했다.
  4. 4Supabase와 웹페이지를 연결해봤다.
  5. 5부족한 결과와 에러를 다시 AI에게 전달했다.
  6. 6완성된 결과물을 GitHub에 안전하게 올렸다.

마무리 · 다음 단계

다음에는 AI에게 더 큰 일을 맡기는 법을 배웁니다

1 Skills 반복 작업을 재사용 가능한 작업법으로 정리합니다.
2 Tool AI가 작업에 활용하는 기본 도구와 사용법을 배웁니다.
3 MCP AI가 파일, DB, 업무 도구와 안전하게 연결되는 방식을 배웁니다.
4 Plugins 필요한 기능을 붙여 나만의 AI 작업 환경을 확장합니다.
5 Hermes 자동화와 에이전트 흐름을 더 넓은 업무로 연결합니다.

Q&A 시간