가이드 목록으로
중급
카드/리스트/테이블
웹 UI의 대부분을 차지하는 패턴! 카드 구성, 리스트, 가격표, 그리고 Loading/Empty/Error/Success 상태까지 다룹니다.
카드 해부학 — 좋은 카드의 6가지 요소
제목 + 설명 + CTA는 필수. 이미지, 메타, 뱃지로 완성도를 높이세요.
New
디자인·2026.03.14
카드 디자인 완벽 가이드
좋은 카드를 만드는 6가지 요소를 배워보세요. 제목, 설명, CTA는 필수입니다.
바이브코딩 팁
AI에게 "카드에 제목, 한 줄 설명, CTA 버튼을 넣어줘. 이미지 비율은 16:9로 통일해줘"
리스트 패턴 — 블로그 / 상품 / 후기 / 알림
용도에 따라 레이아웃(세로/그리드)이 달라져요.
블로그 목록 (Blog List)
썸네일 + 제목 + 요약 + 메타 정보로 구성. 스캔하기 쉽게 세로로 쌓아요.
레이아웃:세로 쌓기
활용처:블로그, 뉴스, 공지사항
바이브코딩 팁
AI에게 "블로그 목록은 세로로 쌓고, 상품 목록은 3열 그리드로 배치해줘"
가격표 — 비교표 패턴
추천 플랜을 강조하면 사용자의 결정이 빨라져요 (폰 레스토프 효과).
무료
0원/월
- 기본 기능 사용
- 월 5회 내보내기
- 커뮤니티 지원
인기
프로
29,000원/월
- 모든 기능 사용
- 무제한 내보내기
- 우선 지원
- 커스텀 브랜딩
엔터프라이즈
문의
- 전체 기능 + API
- 무제한 내보내기
- 전담 매니저
- SLA 보장
- 커스텀 개발
프로 플랜이 강조되어 자연스럽게 시선이 집중돼요 (폰 레스토프 효과)
바이브코딩 팁
AI에게 "가격표에서 추천 플랜을 테두리와 배경색으로 강조하고, '인기' 뱃지를 달아줘"
데이터 상태 4종 — Loading / Empty / Error / Success
4가지 상태를 모두 디자인해야 완성된 UI예요.
전체디자인개발
최신순성공 (Success)
데이터가 정상적으로 로드된 상태예요. 실제 콘텐츠가 표시되고, 필터나 정렬 옵션도 함께 제공하세요.
반드시 포함해야 할 것
- 데이터 목록
- 필터/정렬 옵션
목록 상단에 필터와 정렬 옵션을 넣어줘
바이브코딩 팁
AI에게 "목록이 비었을 때 '아직 등록된 항목이 없어요' 메시지와 '첫 번째 항목 만들기' 버튼을 넣어줘"
카드 체크리스트 퀴즈
결함이 있는 카드에서 문제점을 찾아보세요.
레시피 카드
문제점을 골라보세요
상품 카드 3개
문제점을 골라보세요
블로그 목록
( 아무것도 안 보여요... )
문제점을 골라보세요
바이브코딩 팁
AI에게 "카드를 만들 때 제목, 설명, CTA가 있는지 체크하고, Loading/Empty/Error 상태도 만들어줘"