Luna Whale AI Web Class · Web Brief 09

완성 기준 정하기 Finish Standard

Big Idea

완성 기준은 “완벽하게 예뻐졌는가”가 아니라, 읽기 쉽고 눌러지고 작은 화면에서도 안 깨지는가를 확인하는 기준입니다

첫 버전의 페이지는 모든 장식을 다 끝내지 않아도 됩니다. 대신 제목과 버튼이 읽히는지, 링크가 진짜 작동하는지, 이미지가 깨지지 않는지, 모바일에서 튀어나오지 않는지를 먼저 통과하면 1차 완성이라고 볼 수 있습니다.

Goal언제 1차 완성이라고 말할지 기준을 정할 수 있게 됩니다.
Output내 페이지의 완료 체크리스트를 적습니다.
Check읽기, 작동, 깨짐 없음, 모바일 기준이 있는지 봅니다.
Next다음에는 AI 웹 의뢰서를 한 장으로 정리합니다.
완성 기준은 읽기와 작동과 모바일 안전을 확인하는 기준이라는 수업용 장면
Finish Standard좋은 첫 완성은 완벽함보다도 읽기와 작동과 모바일 안전을 먼저 통과하는 버전입니다
Page 02

Firefox 첫 화면처럼 제목과 설명과 대표 버튼이 바로 읽히면, 첫 인상 단계의 완성도는 이미 꽤 높다고 볼 수 있습니다

완성 기준의 첫 단계는 읽기입니다. 방문자가 들어오자마자 페이지 주제와 행동 버튼을 이해할 수 있으면 첫 화면은 이미 중요한 기준을 통과한 것입니다.

  • 1제목이 크고 분명해서 페이지 주제가 바로 보입니다.
  • 2대표 버튼이 한눈에 보여 첫 행동이 흐리지 않습니다.
  • 3불필요한 요소를 줄여 읽기 기준을 강하게 통과합니다.
Firefox 첫 화면의 읽기 쉬운 제목과 버튼 스크린샷
Firefox첫 화면 완성 기준의 핵심은 멋진 효과보다도 제목과 버튼이 얼마나 빠르게 읽히는가입니다
Page 03

Notion처럼 카드와 목록이 정리되어 있으면, 방문자는 내용이 완성된 페이지인지 훨씬 쉽게 느낍니다

완성된 페이지는 카드가 많아도 흐트러져 보이지 않습니다. 같은 간격과 같은 구조와 같은 정보 흐름이 있으면 목록이 훨씬 안정적으로 읽힙니다.

Organized Cards카드 구조가 반복되어야 방문자가 빠르게 비교할 수 있습니다.
Finished Feeling정돈된 목록은 아직 제작 중인 화면보다 훨씬 완성된 인상을 줍니다.
Notion 템플릿 목록의 정리된 카드 구조 스크린샷
Notion같은 카드 틀과 간격이 유지되면 페이지는 훨씬 더 다듬어진 상태로 느껴집니다
Page 04

Apple처럼 덜어 낸 첫 화면은 “이제 보여줘도 되는 버전”의 감각을 잘 보여 줍니다

완성은 더 많이 넣는 것이 아니라, 남겨야 할 것만 남겨 놓는 일이기도 합니다. 대표 이미지, 짧은 문장, 분명한 버튼만으로도 충분히 완성된 첫 화면이 될 수 있습니다.

  • 1핵심 이미지와 제목 외의 요소를 과감히 줄였습니다.
  • 2버튼 하나가 어디에 놓일지 명확합니다.
  • 3적게 보여 주지만 이미 충분히 마감된 느낌을 줍니다.
Apple MacBook Air 페이지의 단순한 첫 화면 스크린샷
Apple더 넣지 않고도 충분한 상태를 만드는 것이 완성 기준의 중요한 감각 중 하나입니다
Page 05

첫 화면에서 제목, 설명, 버튼이 바로 읽히면 이미 절반은 통과입니다

처음 보는 방문자는 몇 초 안에 이 페이지가 무엇인지 알아야 합니다. 제목이 너무 작거나 버튼이 묻히면 아직 완성이라고 말하기 어렵습니다.

Clear Title제목만 봐도 페이지 주제가 보여야 합니다.
Short Support설명 문장은 짧고 분명해야 합니다.
Visible CTA버튼 위치가 바로 보여야 합니다.
Fast Read몇 초 안에 이해되는지가 중요합니다.
읽기 쉬운 첫 화면과 읽기 기준 질문을 설명하는 수업용 장면
Readable First Screen첫 화면의 읽기 쉬움은 예쁜 장식보다 먼저 점검해야 하는 기본 완성 기준입니다
Page 06

버튼과 링크가 실제로 움직이지 않으면, 보기 좋아도 아직 완성은 아닙니다

신청하기 버튼이 아무 일도 하지 않거나, 카드 링크가 막혀 있거나, 다운로드 버튼이 파일을 주지 않으면 아직 제작 중인 화면입니다. 완성 기준에는 항상 작동 확인이 들어가야 합니다.

Not Enough보기에만 좋아도 클릭 뒤 아무 일도 안 일어나면 아직 미완성입니다.
Working State신청, 상세 보기, 문의 같은 핵심 행동이 실제로 이어지면 1차 완성에 가까워집니다.
작동 안 하는 버튼과 실제로 작동하는 버튼 기준을 비교하는 수업용 장면
Working Links페이지 완성은 장식보다 먼저 핵심 링크와 버튼이 진짜 작동하는지 확인하는 일입니다
Page 07

깨진 이미지, TODO 문구, 빈 박스가 남아 있으면 아직 “출시 전 화면”입니다

보기 좋은 레이아웃이라도 이미지가 안 뜨거나, “제목 예시”, “카드 1”, “TODO” 같은 제작용 문구가 남아 있으면 완성이라고 보기 어렵습니다.

  • 1임시 문구와 제작 메모는 최종 화면에 남아 있으면 안 됩니다.
  • 2깨진 이미지와 빈 썸네일도 즉시 잡아야 합니다.
  • 3보여 주기 전에는 비어 있는 자리와 미연결 상자를 치워야 합니다.
깨진 이미지와 TODO 문구가 남은 화면을 설명하는 수업용 장면
No Placeholder임시 문구와 깨진 이미지가 사라져야 비로소 사람에게 보여 줄 수 있는 완성 화면에 가까워집니다
Page 08

모바일에서 글자와 버튼과 카드가 무너지지 않으면, 실제로 쓸 수 있는 첫 버전에 훨씬 가까워집니다

데스크톱만 멀쩡한 페이지는 아직 반쪽입니다. 작은 화면에서도 제목이 줄어들고 버튼이 잘리지 않고 카드가 한 줄씩 쌓이면 1차 완성 기준에 가까워집니다.

Fit Text긴 제목이 화면 밖으로 튀어나오지 않는지 봅니다.
Fit Button버튼이 잘리거나 겹치지 않는지 확인합니다.
One Column작은 화면에서는 카드가 한 줄씩 쌓이는 편이 안전합니다.
Mobile Pass모바일 확인도 완성 기준에 반드시 포함해야 합니다.
모바일에서 제목 버튼 카드가 안정적으로 보이는 상태를 설명하는 수업용 장면
Mobile Pass작은 화면에서도 읽기와 작동이 유지돼야 비로소 실제로 쓸 수 있는 버전에 가까워집니다
Page 09

모든 디테일을 다 끝내지 않았더라도, 읽기와 작동과 모바일이 통과하면 “1차 완성”이라고 말할 수 있습니다

처음부터 100점을 만들려고 하면 끝이 없습니다. 대신 지금 당장 누군가가 읽고 눌러 보고 모바일에서도 볼 수 있으면, 그 버전은 이미 좋은 첫 완성입니다.

Not Yet Needed모든 장식, 완벽한 문장 다듬기, 애니메이션은 나중에 올려도 됩니다.
Must Pass읽힌다, 눌린다, 안 깨진다는 세 기준은 먼저 통과해야 합니다.
아직 욕심내지 않아도 되는 것과 반드시 통과해야 할 것을 나눈 수업용 장면
Version One첫 완성은 완벽함이 아니라 실제로 읽고 누르고 보는 데 문제가 없는 버전이라고 생각하면 좋습니다
Page 10

AI에게는 페이지를 만들어 달라고만 하지 말고, 완성 검사 기준까지 같이 줘야 합니다

“완성해줘”라는 말은 너무 넓습니다. 읽기, 링크 작동, 깨짐 없음, 모바일 검사까지 함께 요청하면 AI가 훨씬 실제 마감에 가까운 결과를 내놓습니다.

메이커 캠프 모집 페이지를 만들어줘. 완성 기준은 첫 화면 제목과 버튼이 잘 읽히고, 신청 버튼과 카드 링크가 모두 작동해야 해. 깨진 이미지와 임시 문구가 없게 하고, 모바일에서는 제목과 버튼과 카드가 한 줄씩 읽히게 정리해줘. 마지막에 스스로 완성 체크도 해줘.
AI에게 완성 검사 기준까지 함께 요청하는 수업용 장면
Prompt With QAAI에게도 제작 요청만이 아니라 완료 검사 기준까지 함께 주는 편이 훨씬 좋은 마감 결과를 만듭니다
Page 11

막연한 “완성해줘”를 검사 기준이 있는 요청으로 바꾸면, 결과가 훨씬 쓸 만해집니다

완성이라는 말은 사람마다 다르게 생각합니다. 그래서 AI에게는 언제 완료로 볼지 체크 기준까지 같이 주는 편이 좋습니다.

Bad페이지 다 완성해줘. 깔끔하게 정리해줘. 잘 만들어줘.
Good제목과 버튼이 읽히고, 링크가 모두 작동하고, 깨진 이미지와 임시 문구가 없고, 모바일에서 안 깨지면 1차 완성으로 보고 마무리해줘.
Bad Result어디까지를 끝으로 볼지 모호해서 결과가 흐려지기 쉽습니다.
Good Result완료 기준이 있어 AI도 무엇을 점검해야 하는지 분명해집니다.
막연한 완성 요청과 검사 기준이 있는 요청을 비교하는 수업용 장면
Repair Prompt완성이라는 말은 넓기 때문에 읽기와 작동과 모바일 기준으로 구체화해야 좋은 결과가 나옵니다
Page 12

오늘의 실습: 내 페이지의 1차 완성 기준을 직접 적어봅니다

오늘은 더 꾸밀지 말지를 고민하기보다, 언제 “이 버전은 사람에게 보여줄 수 있다”고 말할지 기준을 적을 수 있으면 충분합니다.

  • 1제목과 버튼 읽힘 기준을 적습니다.
  • 2링크 작동과 깨짐 없음 기준을 적습니다.
  • 3모바일에서 꼭 통과할 조건과 AI 검사 문장을 적습니다.
내 페이지의 1차 완성 기준을 직접 적어보는 활동지 장면
Worksheet완성 기준을 먼저 적어 두면 멈출 시점이 분명해지고 다음 수정도 훨씬 쉬워집니다