Luna Whale AI Web Class · Web Brief 05

콘텐츠 목록 만들기 Content List

Big Idea

콘텐츠 목록은 카드 안에 무엇이 들어갈지 AI보다 먼저 사람이 정리해 두는 표입니다

페이지가 예뻐 보여도 카드 내용이 비어 있으면 금방 허술해집니다. 제목, 설명, 이미지, 태그, 링크처럼 카드 재료를 먼저 적어 두면 AI가 반복 카드도 훨씬 정확하게 채웁니다.

Goal카드 안에 들어갈 내용을 한 줄씩 적을 수 있게 됩니다.
Output내 페이지에 들어갈 카드 목록 표를 만듭니다.
Check카드마다 제목, 설명, 태그, 링크가 빠지지 않았는지 봅니다.
Next다음에는 각 카드에 들어갈 이미지 계획을 더 자세히 정합니다.
콘텐츠 목록은 카드 안에 무엇이 들어갈지 AI보다 먼저 사람이 정리해 두는 표라는 수업용 화면
Content First카드 틀보다 먼저 카드 안 내용 재료를 준비해야 결과가 살아납니다
Page 02

Notion의 카드 목록도 제목과 소개와 버튼처럼 카드 재료가 반복되며 읽히게 되어 있습니다

카드가 여러 장일수록 공통 구조가 필요합니다. Notion의 컨설턴트 카드들은 제목, 소개, 행동 버튼이 같은 틀 안에서 반복되기 때문에 방문자가 빠르게 비교하고 고르기 쉽습니다.

  • 1카드마다 이름과 소개가 같은 자리에 놓입니다.
  • 2버튼도 같은 위치에 반복되어 행동이 쉬워집니다.
  • 3같은 틀 안에 다른 내용만 바뀌는 구조를 볼 수 있습니다.
Notion 카드 목록 스크린샷
Notion여러 장의 카드는 같은 틀 안에서 제목과 설명과 버튼이 반복되는 구조를 가집니다
Page 03

Behance는 프로젝트 썸네일 아래에 제목과 작성자와 숫자 정보를 붙여 카드 내용을 정리합니다

카드 안에 무엇을 보여 줄지 정해 두면 목록이 훨씬 읽기 쉬워집니다. Behance 카드들은 이미지뿐 아니라 프로젝트 이름, 작성자, 반응 숫자가 붙어 있어 카드마다 다른 정보를 빠르게 비교하게 해 줍니다.

Visual썸네일이 카드의 첫인상을 만듭니다.
Meta이름, 작성자, 숫자 정보가 카드 내용을 더 분명하게 합니다.
Behance 프로젝트 카드 목록 스크린샷
Behance썸네일 아래에 제목과 작성자와 숫자 정보가 반복되는 카드 구조입니다
Page 04

Framer 마켓플레이스도 카드마다 썸네일, 이름, 가격, 반응 수를 일정한 순서로 보여 줍니다

카드 내용은 무조건 길게 적는 것이 아니라, 반복해서 빠르게 읽힐 정보부터 고르는 것이 중요합니다. Framer 카드들은 썸네일, 템플릿 이름, 가격, 반응 수처럼 필요한 정보만 정돈해서 보여 줍니다.

  • 1카드마다 어떤 정보가 반복될지 먼저 정해져 있습니다.
  • 2가격이나 숫자처럼 짧은 메타 정보도 목록의 중요한 재료입니다.
  • 3모든 카드가 같은 정보 순서를 가져 비교가 쉽습니다.
Framer 템플릿 카드 목록 스크린샷
Framer이름, 가격, 반응 같은 반복 메타 정보가 카드 목록을 안정적으로 읽히게 합니다
Page 05

같은 카드 틀이라도 내용 목록이 없으면 비어 보이고, 목록이 있으면 바로 살아납니다

디자인보다 먼저 카드 안 내용이 준비되어 있어야 합니다. 카드 개수만 말하는 것과, 카드마다 들어갈 제목과 설명과 링크를 함께 적는 것은 결과 차이가 큽니다.

Empty내용 없이 틀만 만들면 비슷비슷한 카드가 늘어납니다.
Filled제목과 설명과 태그가 있으면 카드가 바로 쓸모 있어집니다.
내용이 비어 있는 카드와 내용이 준비된 카드를 비교하는 수업용 장면
Blank Vs Filled카드 틀보다 카드 안 내용 목록이 먼저 준비되어야 페이지가 살아납니다
Page 06

카드 한 장에는 제목, 설명, 이미지, 태그, 링크 같은 정보가 빠짐없이 적혀 있어야 합니다

처음에는 멋진 문장보다 빠뜨리지 않는 것이 더 중요합니다. 카드 한 장에 무엇이 들어가야 하는지 칸으로 나누어 적어 두면, 나중에 카드가 많아져도 훨씬 편합니다.

  • 1제목은 가장 크게 읽히는 핵심 문장입니다.
  • 2설명은 한두 줄로 무엇인지 알려 주는 보조 문장입니다.
  • 3태그와 링크도 카드 재료의 중요한 일부입니다.
카드 한 장의 기본 재료를 나눈 수업용 장면
Card Ingredients카드 한 장에 어떤 정보가 들어갈지 먼저 칸으로 나누어 두면 빠뜨리지 않습니다
Page 07

카드가 여러 장이면 한 줄씩 표로 적어 두는 방식이 가장 쉽고 튼튼합니다

카드 3장, 카드 6장처럼 반복 구조가 들어가는 페이지는 표로 먼저 정리하는 것이 가장 안전합니다. 줄마다 제목과 설명과 태그와 링크를 적어 두면 빠뜨릴 것이 거의 없습니다.

Row 1카드 1 제목, 설명, 태그, 링크를 한 줄에 정리합니다.
Repeat카드 수만큼 같은 형식으로 줄을 늘리면 됩니다.
카드 목록을 표로 정리하는 수업용 장면
Table First반복 카드가 들어가는 페이지는 표 한 줄씩 적어 두는 방식이 가장 안정적입니다
Page 08

콘텐츠 목록은 카드 종류별로 묶어서 쓰면 페이지 전체가 훨씬 정리됩니다

모든 카드가 같은 성격은 아닙니다. 수업 카드, 후기 카드, 자주 묻는 질문처럼 비슷한 것끼리 묶어서 목록을 따로 적으면 AI도 구조를 훨씬 더 잘 이해합니다.

  • 1수업 카드 목록과 후기 카드 목록을 나눕니다.
  • 2FAQ는 질문과 답변 목록으로 따로 적습니다.
  • 3같은 성격끼리 묶으면 페이지 구조도 정리됩니다.
카드 종류별로 콘텐츠 목록을 묶어 쓰는 수업용 장면
Grouped Lists비슷한 성격의 카드끼리 묶어서 적으면 페이지 전체 구조가 훨씬 깔끔해집니다
Page 09

같은 카드가 여러 장이면 한 줄씩 따로 적어야 카드마다 다른 내용이 살아납니다

“카드 6개 만들어줘”라고만 하면 카드마다 말이 비슷해지기 쉽습니다. 카드 번호를 붙여 한 줄씩 따로 적어 두면 각 카드가 다른 주제와 다른 설명을 가지게 됩니다.

Different카드마다 제목과 설명이 겹치지 않게 됩니다.
Balanced설명 길이와 정보량을 비슷하게 맞추기 쉬워집니다.
같은 카드가 여러 장일 때 한 줄씩 따로 적는 수업용 장면
One Row Per Card카드마다 다른 내용을 살리려면 한 줄씩 따로 적는 방식이 가장 좋습니다
Page 10

AI에게는 카드 개수만 말하지 말고, 카드마다 들어갈 내용 목록을 같이 줘야 합니다

좋은 결과는 예쁜 말보다 구체적인 재료에서 나옵니다. 제목과 설명과 태그와 링크를 함께 적은 카드 목록이 있으면 AI는 그 내용을 바탕으로 반복 카드를 정확히 만듭니다.

메이커 수업 소개 페이지를 만들어줘. 수업 카드 3장을 넣어줘. 1번 카드 제목은 "로봇 자동차 만들기" 설명은 "모터와 바퀴로 움직이는 첫 작품" 태그는 "초등 3-5" 링크는 "/robot-car" 2번, 3번 카드도 같은 형식으로 각각 다른 제목과 설명으로 넣어줘.
AI에게 카드마다 들어갈 내용 목록을 함께 주는 수업용 장면
Prompt With Content카드 개수보다 카드 안에 무엇을 넣을지 목록으로 주는 것이 훨씬 중요합니다
Page 11

막연한 요청을 카드 내용 목록까지 넣은 요청으로 고치면 결과가 훨씬 또렷해집니다

카드 디자인은 예뻐도 내용이 약하면 페이지가 비어 보입니다. 반대로 카드마다 무엇을 써야 하는지 목록을 같이 주면, AI는 훨씬 덜 흔들리고 훨씬 더 쓸모 있는 결과를 냅니다.

Bad수업 소개 카드 6개 만들어줘. 설명은 알아서 넣어줘.
Good각 카드마다 제목, 설명, 태그, 링크를 각각 다르게 넣어줘.
Bad카드 개수만 말하면 내용이 반복되기 쉽습니다.
Good카드 목록을 같이 주면 결과가 훨씬 또렷해집니다.
막연한 요청과 카드 내용 목록을 포함한 요청을 비교하는 수업용 장면
Repair Prompt카드마다 무엇을 넣을지 함께 주면 AI 결과의 내용 밀도가 훨씬 좋아집니다
Page 12

오늘의 실습: 내 페이지의 카드 내용을 직접 적어봅니다

다음 시간에는 이 카드들에 어떤 이미지가 들어가야 하는지 더 구체적으로 정리할 수 있습니다. 오늘은 카드 제목, 설명, 태그, 링크 정도만 채워도 충분합니다.

  • 1카드 1 제목과 설명을 적습니다.
  • 2카드 1 태그와 링크를 적습니다.
  • 3카드 2, 카드 3도 같은 방식으로 채워 봅니다.
내 페이지의 카드 내용을 직접 적어보는 활동지 화면
Worksheet카드 한 장씩 제목과 설명과 태그와 링크를 직접 적으며 내용 목록을 만듭니다