AI에게 프로그램이나 웹사이트를 만들어 달라고 요청하면 정보가 길게 나열되는 경우가 있습니다. 필요한 내용은 모두 들어 있지만 어디부터 읽어야 할지 모르겠고 중요한 정보도 눈에 잘 들어오지 않습니다.
이럴 때 활용할 수 있는 디자인 방식이 Card Layout(카드 레이아웃)입니다. 서로 관련된 정보를 일정한 영역으로 묶어 카드 형태로 보여주는 화면 구성 방식입니다.
1. 카드 레이아웃은 어떤 모습일까?
병원 업무 프로그램을 예로 들어 보겠습니다. 환자 이름, 병실, 담당 의료진, 주의사항을 문장으로 길게 나열하면 필요한 정보를 찾기 어렵습니다. 반면 환자 한 명의 정보를 하나의 카드에 담으면 환자별 정보를 쉽게 구분하고 중요한 주의사항도 강조할 수 있습니다.
환자 관리, 업무 현황판, 상품 목록, 교육 과정, 콘텐츠 목록처럼 반복되는 정보를 보여주는 화면에 특히 유용합니다. 핵심은 단순히 상자를 만드는 것이 아니라 서로 관련된 정보를 하나의 단위로 묶는 것입니다.
2. 같은 정보도 배치에 따라 달라진다
단순한 정보 나열
환자 101호 / 김○○ / 주의사항 있음
환자 102호 / 이○○ / 관찰 중
환자 103호 / 박○○ / 특이사항 없음
카드 레이아웃으로 구성
각 환자를 독립된 카드로 표시합니다.
상단: 병실 번호와 환자 이름
중앙: 주요 상태와 업무 정보
하단: 주의사항 및 상세 정보 버튼
카드마다 동일한 정보 구조를 유지하면 사용자는 필요한 내용을 어디에서 찾아야 할지 쉽게 익힐 수 있습니다. 병원 업무 화면에서는 장식보다 가독성과 정확한 정보 전달이 우선입니다.
3. AI에게 어떻게 요청해야 할까?
막연한 요청: “업무 현황을 보기 좋게 만들어 줘.”
구체적인 요청: “업무 현황 화면을 Card Layout으로 구성해 줘. 각 업무를 하나의 카드로 표시하고 업무명, 담당자, 진행 상태, 마감일을 포함해 줘. 진행 상태는 색상으로 구분하고 카드를 클릭하면 상세 정보를 확인할 수 있도록 해 줘. PC에서는 한 줄에 3개, 태블릿에서는 2개, 모바일에서는 1개씩 표시해 줘.”
이렇게 요청하면 화면 구조와 정보, 화면 크기에 따른 배치까지 전달할 수 있습니다.
4. 바로 복사해서 사용하는 실전 프롬프트
업무 관리 화면을 만들어 줘.
전체 화면은 Card Layout으로 구성해 줘.
각 카드에는 제목, 간단한 설명, 상태, 상세 보기 버튼을 배치해 줘.
카드마다 제목과 본문의 글자 크기를 구분하고 카드 사이에는 충분한 여백을 줘.
PC에서는 한 줄에 3개, 태블릿에서는 2개, 모바일에서는 1개씩 표시해 줘.
카드의 높이와 내부 여백을 일관되게 유지해 줘.
마우스를 올렸을 때 카드 테두리나 그림자가 가볍게 변하도록 해 줘.
카드 클릭과 상세 보기 버튼의 동작은 혼동되지 않도록 설계해 줘.
실제 데이터가 없을 때도 화면을 확인할 수 있도록 예시 데이터를 넣어 줘.
이 프롬프트는 카드 모양뿐 아니라 정보 구조, 반응형 배치, 사용자 동작까지 지정합니다.
5. 결과가 마음에 들지 않을 때
카드가 빽빽하다면: “카드 사이 간격과 내부 여백을 넓혀 줘.”
카드 크기가 제각각이라면: “모든 카드의 제목과 정보 영역을 동일한 구조로 정리해 줘.”
중요한 정보가 눈에 띄지 않는다면: “제목, 상태, 부가 정보의 시각적 우선순위를 구분해 줘.”
모바일에서 카드가 잘린다면: “모바일에서는 카드를 한 열로 배치하고 가로 스크롤 없이 내용을 읽을 수 있게 해 줘.”
전체 화면을 다시 생성하기보다 문제가 되는 요소를 좁혀 수정하면 결과를 비교하기 쉽습니다.
6. 카드 레이아웃을 사용할 때 기억할 점
하나의 카드에 너무 많은 정보를 넣지 마세요.
가장 중요한 정보를 먼저 보이게 하세요.
카드 클릭과 버튼 동작을 명확히 구분하세요.
PC뿐 아니라 태블릿과 모바일에서도 확인하세요.
업무용 화면에서는 화려한 효과보다 글자 크기, 대비, 여백을 우선하세요.
특히 병원 업무 프로그램에서는 카드에 핵심 정보만 표시하고 나머지는 상세 화면에서 확인하도록 구성하는 편이 효율적입니다.
오늘 기억할 한 가지
Card Layout은 정보를 보기 좋게 꾸미는 기술이 아니라 관련된 정보를 묶어 빠르게 이해하고 활용하도록 만드는 화면 구성 방식입니다.
AI에게 “카드 형태로 만들어 줘”라고만 하지 말고 카드에 무엇을 넣을지, 어떤 순서로 보여줄지, 클릭하면 어떤 일이 일어날지까지 설명해 보세요.
다음 편에서는 서로 다른 크기의 카드를 조합해 대시보드나 서비스 소개 화면을 구성하는 **Bento Grid(벤토 그리드)**를 알아보겠습니다.