Luna Whale AI Web Class · Web Brief 10

AI 웹 의뢰서 AI Web Brief

Big Idea

AI 웹 의뢰서는 “멋지게 만들어줘”를 한 장짜리 설계 문서로 바꾸는 일입니다

좋은 웹 의뢰서는 방문자, 목적, 섹션 순서, 넣을 콘텐츠, 디자인 톤, 모바일과 완성 기준을 한 장에 모아 둡니다. 이 한 장이 있으면 AI가 추측할 빈칸이 훨씬 줄어듭니다.

GoalAI가 이해할 수 있는 한 장짜리 웹 의뢰서를 쓸 수 있게 됩니다.
Output내 페이지용 의뢰서 1장과 마지막 검사 문장을 적습니다.
Check방문자, 목적, 섹션, 자료, 톤, 모바일 기준이 있는지 봅니다.
Next다음에는 이 의뢰서를 실제 웹 명령문으로 바꾸는 감각과 이어집니다.
AI 웹 의뢰서는 한 장짜리 설계 문서라는 수업용 장면
AI Web Brief방문자, 목적, 섹션, 자료, 디자인 톤, 모바일과 완성 기준을 한 장에 모읍니다
Page 02

Notion 같은 문서 화면을 보면, 한 장에 핵심 조건을 정리해 두는 감각이 왜 중요한지 바로 느껴집니다

의뢰서는 길게 장황한 글이 아니라, 한눈에 다시 찾을 수 있는 문서여야 합니다. 제목과 카드와 문단이 분명하면 다음 수정과 추가 요청도 훨씬 쉬워집니다.

  • 1한 장 문서 안에서 핵심 조건을 다시 찾기 쉽습니다.
  • 2카드와 항목이 정리되어 있으면 빠진 칸을 발견하기 쉽습니다.
  • 3AI에게 다시 맡길 때도 같은 문서를 기준으로 이어 갈 수 있습니다.
Notion 문서와 템플릿 카드가 보이는 스크린샷
Notion좋은 의뢰서는 메모가 아니라 다시 꺼내 보기 쉬운 문서 구조여야 합니다
Page 03

질문형 폼처럼 필요한 항목을 한 칸씩 나누면, 의뢰서도 훨씬 빠짐없이 채울 수 있습니다

방문자, 목적, 콘텐츠, 문의 방식처럼 필요한 조건을 한 칸씩 나누어 생각하면 막연한 요청이 줄어듭니다. 빈칸이 보이는 형식은 초심자에게 특히 유리합니다.

Question By Question한 번에 다 설명하려 하지 않고 칸마다 한 가지를 적습니다.
Missing Fields비어 있는 칸이 보이면 어떤 정보가 빠졌는지 바로 알 수 있습니다.
Tally 폼 템플릿 목록과 웹 프로젝트 질문지가 보이는 스크린샷
Tally좋은 의뢰서는 질문형 폼처럼 필요한 항목이 빠짐없이 보이는 구조를 가집니다
Page 04

OpenAI의 프롬프트 가이드처럼, 좋은 요청은 모호한 감상보다 구조와 맥락과 조건을 먼저 줍니다

AI는 분위기를 읽는 것보다 조건을 읽는 데 훨씬 강합니다. 그래서 좋은 웹 의뢰서는 예쁜 말보다 맥락과 요구와 검사 기준을 분명하게 적습니다.

  • 1무엇을 만들지보다 먼저 어떤 맥락인지 알려 줍니다.
  • 2추측하지 않도록 필요한 자료와 조건을 적습니다.
  • 3마지막에는 어떤 기준으로 끝낼지도 붙여 줍니다.
OpenAI Prompt engineering 문서 스크린샷
OpenAI Docs좋은 프롬프트는 감상보다 구조와 맥락과 명확한 조건을 먼저 줍니다
Page 05

의뢰서는 방문자와 목적부터 시작합니다. 이 두 칸이 흐리면 나머지도 모두 흔들립니다

누가 보는지와 왜 만드는지는 페이지 전체 톤을 정하는 출발점입니다. 초등학생 부모님을 위한 수업 페이지와 작가 포트폴리오는 첫 화면부터 완전히 달라야 합니다.

Visitor처음 수업을 알아보는 부모님
Purpose수업 정보와 신청 방법을 한눈에 알리기
Effect글자 크기, 설명 방식, 버튼 위치가 달라집니다.
Start의뢰서 첫 줄은 항상 방문자와 목적입니다.
방문자와 목적 칸을 설명하는 수업용 장면
Visitor & Purpose누가 보고 왜 보는지 정해야 의뢰서 전체 방향이 흔들리지 않습니다
Page 06

섹션 순서는 방문자가 페이지를 읽는 길입니다. 의뢰서에는 위에서 아래로의 흐름이 보여야 합니다

AI가 섹션 순서를 모르면 카드와 이미지와 문의 영역을 제멋대로 섞기 쉽습니다. 먼저 첫 화면, 소개, 목록, 행동의 순서를 적어 두면 전체 구조가 훨씬 안정적입니다.

Order첫 화면, 특징 카드, 커리큘럼, 사진, 문의처럼 읽는 길을 적습니다.
Stability흐름이 보이면 AI가 섹션을 섞거나 빠뜨릴 가능성이 줄어듭니다.
섹션 순서와 페이지 흐름을 설명하는 수업용 장면
Section Flow웹 의뢰서에는 방문자가 위에서 아래로 읽는 순서가 보여야 합니다
Page 07

좋은 의뢰서는 모양만 말하지 않고, 실제로 넣을 제목과 설명과 이미지 자료를 함께 줍니다

빈 페이지를 AI에게 맡기면 그럴듯한 가짜 문장과 임시 이미지가 들어갑니다. 그래서 의뢰서에는 어떤 자료가 들어갈지 먼저 적어 두는 칸이 필요합니다.

  • 1제목, 설명, 카드 이름, 버튼 문구를 실제 문장으로 적습니다.
  • 2이미지는 주제, 비율, 잘리면 안 되는 부분까지 적습니다.
  • 3버튼은 문구뿐 아니라 이동할 위치도 함께 적습니다.
콘텐츠 목록과 이미지 계획을 설명하는 수업용 장면
Content Plan좋은 의뢰서는 실제로 넣을 텍스트와 이미지와 버튼 자료를 먼저 줍니다
Page 08

디자인 톤도 “예쁘게”가 아니라, 색과 밀도와 금지 요소까지 보이는 문장으로 적어야 합니다

AI에게는 마음속 분위기가 아니라 눈으로 보이는 규칙이 필요합니다. 카드 수, 여백, 이미지 밝기, 금지할 스타일을 의뢰서에 같이 적어 두면 결과가 훨씬 안정됩니다.

Tone차분한 교육장 느낌, 흰 배경 중심
Density한 화면에 카드 4개 이하
Safety글자 겹침 금지, 큰 제목 우선
No어두운 사진과 과한 장식 금지
디자인 톤과 금지 요소를 설명하는 수업용 장면
Design Tone느낌도 감상으로 남기지 말고 눈에 보이는 규칙으로 적어야 합니다
Page 09

마지막 두 칸은 버튼 행동과 모바일, 그리고 완성 검사입니다. 여기까지 적어야 AI가 마무리까지 갑니다

좋은 의뢰서는 버튼이 어디로 가는지, 모바일에서 카드가 어떻게 쌓이는지, 무엇을 검사한 뒤 끝내야 하는지까지 적습니다. 이 칸이 빠지면 보기 좋은데 덜 끝난 결과가 나오기 쉽습니다.

Action신청 버튼은 폼 섹션 또는 외부 신청 링크로 이동하게 적습니다.
Finish모바일 1열, 버튼 잘림 없음, 깨진 이미지 없음까지 검사하게 적습니다.
버튼 행동과 모바일 검사 기준을 설명하는 수업용 장면
Last Conditions좋은 의뢰서는 버튼 행동과 모바일과 완성 검사까지 포함합니다
Page 10

한 줄 아이디어는 이렇게 한 장짜리 AI 웹 의뢰서로 정리할 수 있습니다

좋은 의뢰서는 길게 장황한 글이 아니라, AI가 놓치면 안 되는 칸이 빠짐없이 채워진 한 장 문서입니다. 이 문서를 바탕으로 프롬프트를 만들면 다음 단계가 훨씬 쉬워집니다.

방문자: 처음 수업을 알아보는 초등학생 부모님 목적: 수업 내용, 대상, 일정, 신청 방법을 한눈에 알리기 섹션: 첫 화면 → 특징 카드 → 커리큘럼 → 활동 사진 → 문의 콘텐츠: 제목 1개, 설명 1개, 카드 4개, 활동 사진 3장, 신청 버튼 디자인 톤: 차분한 교육장 느낌, 흰 배경, 카드 4개 이하, 어두운 사진 금지 모바일 / 완성: 모바일 1열, 버튼 잘림 없음, 깨진 이미지 없음, 끝나면 스스로 검사
한 장짜리 AI 웹 의뢰서 예시 장면
One Sheet Brief좋은 AI 웹 의뢰서는 빠짐없는 칸으로 정리된 한 장 문서에 가깝습니다
Page 11

막연한 의뢰서와 좋은 의뢰서를 비교하면, AI가 왜 전혀 다른 결과를 내는지 바로 보입니다

길이 차이보다 중요한 것은 빈칸의 수입니다. 좋은 의뢰서는 AI가 헷갈릴 여지를 줄이는 문장입니다.

Bad수업 소개 웹페이지 만들어줘. 예쁘고 깔끔하게 해줘. 모바일도 알아서 잘 되게 해줘.
Good초등학생 부모님이 보는 수업 소개 페이지를 만들고, 첫 화면, 특징 카드, 커리큘럼, 활동 사진, 문의 버튼 순서로 구성해줘. 모바일 1열과 깨진 이미지 없음까지 확인해줘.
Bad Result방문자와 섹션과 자료가 비어서 AI가 너무 많이 추측합니다.
Good Result누가 보고 무엇을 읽고 어떤 기준으로 끝낼지 분명해집니다.
나쁜 의뢰와 좋은 의뢰를 비교하는 수업용 장면
Bad vs Good좋은 의뢰서는 더 화려한 말이 아니라 빠진 칸이 적은 문장입니다
Page 12

오늘의 실습: 내 페이지를 위한 AI 웹 의뢰서 한 장을 직접 채워 봅니다

오늘의 결과는 완성된 코드가 아니라, 다음 제작과 수정에 계속 쓸 수 있는 한 장짜리 의뢰서입니다. 이 종이가 있으면 다음 세션에서도 흐름이 끊기지 않습니다.

  • 1방문자와 목적을 한 줄씩 적습니다.
  • 2섹션 순서와 핵심 콘텐츠를 채웁니다.
  • 3디자인 톤과 모바일, 완성 검사 기준을 마지막 칸에 적습니다.
AI 웹 의뢰서 기록표를 채우는 활동지 장면
Worksheet오늘의 목표는 내 페이지용 AI 웹 의뢰서 한 장을 끝내는 것입니다