가이드 목록으로
중급
디자인 시스템 한 장 요약
지금까지 배운 모든 규칙을 하나로! 컬러/타이포/간격 토큰, 컴포넌트 규칙, 네비게이션 패턴을 정리하는 캡스톤 가이드입니다.
네비게이션 패턴 5종 — 사용자를 안내하는 길잡이
사용자가 원하는 곳에 빠르게 도착하도록 도와주는 네비게이션 패턴이에요.
이 상품은 바이브코딩으로 만든 웹서비스입니다...
탭 (Tabs)
같은 페이지에서 관련 콘텐츠를 전환하는 패턴이에요. 탭을 클릭하면 아래 콘텐츠만 바뀌어요.
활용처:상품 설명/리뷰/문의
바이브코딩 팁
AI에게 "대시보드에는 사이드바, 모바일 앱에는 하단 탭 바를 써줘"
신뢰 컴포넌트 5종 — 방문자를 고객으로 바꾸는 장치
사회적 증거와 권위를 보여주는 컴포넌트로 방문자의 신뢰를 얻어요.
FAQ (FAQ Accordion)
질문을 클릭하면 답변이 펼쳐지는 아코디언 패턴이에요. 스캔 효율을 극대화해요.
활용처:랜딩 페이지, 서비스 소개, 결제 전 안내
바이브코딩 팁
AI에게 "랜딩 페이지에 후기 + 로고월 + 수치 강조 중 2개 이상 넣어줘"
언제 뭘 쓸까? — 용도별 매칭 가이드
상황에 맞는 컴포넌트를 골라보세요. 클릭하면 추천 이유를 알려줘요.
왼쪽 상황을 클릭하면 추천 컴포넌트를 보여줘요
바이브코딩 팁
AI에게 "랜딩 페이지를 만들 때 이 표를 보고 필요한 컴포넌트를 골라서 AI에게 요청해줘"
퀴즈 — 문제 있는 UI에서 빠진 걸 찾기
결함이 있는 UI에서 빠진 요소를 찾아보세요.
모바일 메뉴 넘침
모바일에서 상단 가로 메뉴 7개가 넘쳐서 잘림
후기 신뢰 부족
후기 섹션에 별점/이름 없이 '좋아요' 텍스트만
사회적 증거 없음
랜딩 페이지에 고객 수, 수상 이력이 아무것도 없음
바이브코딩 팁
AI에게 "랜딩 페이지를 만들 때 네비게이션, 신뢰 컴포넌트, 사회적 증거 3가지를 꼭 체크해줘"