01노트 4편 · 예제 12종
왜 어떤 화면은 단정하고 세련돼 보이고, 어떤 화면은 어수선할까?
8pt 여백 리듬, 게슈탈트 정렬, 타이포그래피 스케일, 60-30-10 컬러 토큰, 다크 표면 깊이감과 AI 클리셰 탈피까지 화면 전체의 품격을 결정하는 시각 설계 원칙
레이아웃·여백시각 위계타이포그래피컬러·토큰깊이·시스템
MINLAB · PERSONAL DESIGN & PROMPT ARCHIVE필요한 기준을 정리해 두고,
필요한 기준을 정리해 두고,
꺼내 쓰는 설계 & 프롬프트 노트
작업할 때마다 다시 찾게 되는 UI 시각 설계 · UX 사용성 · AI 바이브코딩의 핵심 원리·수치표 개념 정리 노트와 바로 복사해 쓰는 활용 예제, 그리고 179종 컴포넌트 도감을 한곳에 정리했습니다.
NOTES · SPECS · PROMPTSUI · UX · AI · 179 COMPONENTS
01
02노트 4편 · 예제 10종
사용자가 어떻게 느끼고, 얼마나 막힘없이 과업을 끝낼까?
로딩 체감 속도, 5대 상태 매트릭스(Empty/Error), 알림 피드백, 단축키 동선, 모바일 터치 등 사용성을 결정짓는 인터랙션 설계 원칙
로딩·반응성상태·예외처리피드백·알림탐색·단축동선모바일·접근성
03노트 4편 · 예제 12종
AI 에이전트에게 어떻게 지시해야 의도대로 한 번에 구현할까?
컨텍스트 윈도우, MCP, RAG 등 AI 필수 개념부터 지시문 4요소 템플릿, 에러 루프 탈출법, 범위 잠금 등 실전 바이브코딩 노하우
프롬프트 설계컨텍스트·기억에이전트·도구디버깅·안전장치
SHADCN/UI 62 INCLUDED11 CATEGORIES · 179 MODULES
UI 컴포넌트 도감 — 개별 부품 179종 실물 백과사전
위 3개 노트가 화면을 설계하는 기준 수치와 활용 예제라면, 컴포넌트 도감은 “옆에서 나오는 창(Sheet)”, “알약 스위치(Segmented)”, “명령 팔레트(Command)” 등 개별 부품 179종을 실물 모양으로 찾고 수치 프롬프트를 복사하는 부품 사전입니다.
버튼 · 액션텍스트 입력선택 컨트롤오버레이내비게이션피드백 · 상태데이터 표시레이아웃 · 섹션고급 패턴
도감 전체 열기
