웹페이지에는 반복되는 정보가 많습니다

강의, 작품, 상품, 공지처럼 여러 개를 비교해서 보여줄 때는 같은 구조가 반복됩니다. 오늘은 카드와 목록이 언제 쓰이고, AI에게 그 구조를 어떻게 말해야 하는지 배웁니다.

카드는 한 덩어리 정보를 담는 상자입니다

실제 디자인 시스템에서도 카드는 사진이나 아이콘, 제목, 설명, 행동 요소를 묶어 보여주는 기본 단위입니다. 웹에서 아주 자주 보이는 구조입니다.

• 1카드는 한 개를 설명하는 작은 화면입니다.
• 2여러 카드를 모으면 비교가 쉬워집니다.

좋은 카드는 같은 부품을 반복합니다

카드는 예쁘기만 한 상자가 아닙니다. 대표 이미지, 수업 이름, 짧은 설명, 행동 버튼처럼 정해진 부품이 있어야 읽기 쉽고 AI도 구조를 잘 이해합니다.

• 1카드마다 같은 자리에 같은 종류의 정보가 있어야 합니다.
• 2부품 이름을 말하면 AI가 구조를 더 안정적으로 만듭니다.

목록은 빠르게 훑어볼 때 좋습니다

공지 제목, 날짜, 제출 상태처럼 이미지를 크게 비교할 필요가 없고 빨리 읽는 것이 중요할 때는 목록이 더 잘 맞습니다. 카드와 목록은 서로 다른 역할이 있습니다.

• 1목록은 짧고 빠르게 읽는 정보에 어울립니다.
• 2정렬과 순서가 중요할수록 목록이 편합니다.

카드와 목록은 역할이 다릅니다

학생 작품, 수업 소개처럼 그림과 분위기를 같이 보여줘야 하면 카드가 좋습니다. 반대로 숙제 제출 상태, 공지 이름, 자료 이름처럼 빨리 확인해야 하면 목록이 좋습니다.

실제 카드 예시는 이런 모양입니다

공식 프레임워크 예시를 보면 카드에는 이미지 구역, 제목, 본문, 버튼이 한 묶음으로 들어갑니다. 우리가 AI에게 부탁할 때도 이 구조를 그대로 말하면 됩니다.

• 1카드는 내용 묶음 하나를 설명하는 작은 페이지처럼 볼 수 있습니다.
• 2버튼, 이미지, 설명이 흩어지지 않게 한 카드 안에 모입니다.

카드 데이터는 먼저 표로 정리할 수 있습니다

AI에게 바로 만들라고 하기 전에 카드 이름, 설명, 분류를 표로 적어두면 빠뜨리는 정보가 줄어듭니다. 표는 카드의 재료 창고 같은 역할을 합니다.

반응형에서는 카드 줄 수가 달라집니다

큰 화면에서는 세 장씩 보이던 카드가 화면이 좁아지면 두 장, 한 장으로 바뀝니다. 같은 카드라도 모바일에서는 읽기 편한 배열로 다시 정리되어야 합니다.

• 1큰 화면 3열, 중간 화면 2열, 작은 화면 1열처럼 줄 수를 말해줄 수 있습니다.
• 2모바일에서 가로 스크롤이 생기지 않게 쌓이는지 확인해야 합니다.

AI에게는 카드 개수와 부품을 같이 말합니다

“멋지게 만들어줘”는 너무 막연합니다. 카드 수, 들어갈 정보, 모바일 규칙을 같이 말하면 AI가 카드 목록을 훨씬 안정적으로 만듭니다.

나쁜 요청은 구조 요청으로 고칩니다

막연한 요청은 AI가 제멋대로 추측하게 만듭니다. 카드 수, 들어갈 정보, 화면 규칙을 붙이면 같은 주제라도 훨씬 정확해집니다.

카드 목록은 반복 규칙을 검사합니다

카드마다 길이, 버튼, 정보가 너무 다르면 목록이 어수선해집니다. 같은 부품이 있는지, 이름 길이가 너무 튀지 않는지, 작은 화면 1열이 되는지 확인합니다.

오늘의 실습: 내 카드 4개 설계하기

집에서는 만들고 싶은 목록을 하나 정하고 카드 4개에 들어갈 이름, 짧은 설명, 분류를 먼저 적어옵니다. 다음 시간에는 이 설계표를 AI 명령으로 바꿉니다.

• 1목록 주제를 먼저 정합니다.
• 2카드 4개 각각의 이름과 설명을 적습니다.
• 3모바일에서는 한 줄에 하나씩 쌓여야 한다는 규칙도 함께 적습니다.