카드 제목
이미지 · 제목 · 설명 한 덩어리
스크롤해도 위에 고정 (position: sticky)
``` ### 네비게이션 바 (Navbar / GNB) - 별칭: "메뉴 줄" · "카테고리 바" · "GNB" - 정의: 사이트의 큰 메뉴를 모아 둔 이동 줄. 보통 헤더 안에 산다. - 구분: 사이트 전체 메뉴 줄이면 네비게이션 바, 그 줄을 담는 전체 띠가 헤더 - shadcn: NavigationMenu - 요청 문장: 헤더 안에 홈·소개·가격·문의 네비게이션 바를 넣어줘. 현재 페이지는 진하게. - 레퍼런스: https://raw.githubusercontent.com/hanmariyang/giting-skills/main/plugins/ui-menu/components/navbar.html ```html현재 페이지는 aria-current="page" + 진하게
``` ### 히어로 (Hero) - 별칭: "첫 화면에 크게 나오는 거" · "메인 배너" · "대문" - 정의: 들어오자마자 보이는 큰 제목과 버튼 구역. 페이지의 첫인상. - 구분: 첫 화면의 큰 구역이면 히어로, 가로로 긴 알림 띠면 배너 - 요청 문장: 히어로 섹션을 만들어줘. 큰 제목, 한 줄 설명, 시작하기 버튼 순서로. - 레퍼런스: https://raw.githubusercontent.com/hanmariyang/giting-skills/main/plugins/ui-menu/components/hero.html ```html누구나 할 수 있어요
점선 상자가 컨테이너. max-width + margin: 0 auto 로 가운데 정렬. 바깥 회색이 화면.
3열 그리드 · 간격은 gap으로
이미지 · 제목 · 설명 한 덩어리
카드를 격자로 반복
| 이름 | 날짜 | 상태 |
|---|---|---|
| 이지우 | 09.09 | 완료 |
| 김하나 | 09.08 | 대기 |
| 박서준 | 09.07 | 완료 |
☰ 아이콘: 모바일에서 메뉴를 접는 버튼. 누르면 보통 드로어가 열린다
``` ### 드로어 (Drawer / Side Panel) - 별칭: "옆에서 미끄러져 나오는 메뉴" · "햄버거 누르면 나오는 거" · "슬라이드 패널" - 정의: 화면 옆에서 서랍처럼 밀려 나오는 판. - 구분: 옆에서 밀려 나오면 드로어, 아래에서 올라오면 바텀 시트, 항상 붙어 있으면 사이드바 - shadcn: Sheet (하단이면 Drawer) - 요청 문장: 햄버거 버튼을 누르면 오른쪽에서 드로어 메뉴가 나오게 해줘. 배경 누르면 닫히게. - 레퍼런스: https://raw.githubusercontent.com/hanmariyang/giting-skills/main/plugins/ui-menu/components/drawer.html ```html오른쪽에서 서랍처럼 밀려 나옵니다
``` ### 목차 (Table of Contents (TOC)) - 별칭: "긴 글 옆에 소제목 목록" · "글 목차" · "이 페이지에서 보기" - 정의: 긴 글 옆에 붙는 소제목 목록. 지금 읽는 위치가 표시되면 더 좋다. - 요청 문장: 글 오른쪽에 목차를 붙여줘. 스크롤하면 지금 읽는 소제목이 진해지게. - 레퍼런스: https://raw.githubusercontent.com/hanmariyang/giting-skills/main/plugins/ui-menu/components/toc.html ```html기본 기능
월 3회
전체 기능
무제한
전담 지원
보안
"코딩 하나도 모르는데 이틀 만에 신청 페이지를 만들었어요."
이런 곳에서 쓰고 있어요
사진 격자 · 누르면 라이트박스로 크게
사진 눌러서 크게 보기
이름을 아는 순간
수정 요청이 한 번에 통해요.
// AI한테 그대로 붙여넣기
신청 페이지 만들어줘
인풋 3개, 셀렉트 1개
유효성 검사 넣고
가로로 긴 알림 띠 · 페이지 맨 위에 걸린다
``` ## ④ 입력받는 것 ### 폼 (Form) - 별칭: "신청서 전체" · "입력칸 묶음" · "제출하는 양식" - 정의: 입력칸들과 제출 버튼을 묶은 양식 전체. - shadcn: 조합: Form + FieldGroup + Field - 요청 문장: 신청 폼을 만들어줘. 인풋 3개(이름·이메일·연락처), 유효성 검사 넣고, 제출하면 토스트로 완료 알림. - 레퍼런스: https://raw.githubusercontent.com/hanmariyang/giting-skills/main/plugins/ui-menu/components/form.html ```html여러 개 고를 수 있어요
하나만 골라져요
타이핑하면 후보가 뜸
끌어다 놓기
카운터라고도 해요
한 칸씩 자동으로 넘어가게
↑ 입력칸 위 이름표가 라벨이에요
↑ 흐리게 미리 써 있는 예시 글자
↑ 칸 아래 회색 안내 문구
별표(*)가 필수 표시 · input에는 required
형식이 맞는지 확인하는 것
그 칸 아래 빨간 글씨 · 얼럿보다 이게 나아요
누르는 것 전부를 버튼이라고 해요
꽉 찬 색 · 한 화면에 하나만
테두리만 · 두 번째로 중요한 것
배경 없이 글자만
아이콘만 · aria-label 필수
되돌릴 수 없는 것만 빨강
제일 중요한 행동 하나
오른쪽 아래 떠 있는 동그란 버튼
``` ### 링크 (Link) - 별칭: "글자 링크" · "밑줄 있는 파란 거" · "눌러서 이동하는 글자" - 정의: 버튼이 아니라 글자로 된 이동 수단. 이동은 링크, 동작은 버튼. - shadcn: Button (variant=link) - 요청 문장: '자세히 보기'는 버튼 말고 텍스트 링크로 바꿔줘. - 레퍼런스: https://raw.githubusercontent.com/hanmariyang/giting-skills/main/plugins/ui-menu/components/link.html ```html자세한 내용은 이 문서를 봐주세요.
버튼이 아니라 글자 링크
버튼 여러 개를 붙여놓은 것
마우스를 올려 보세요
불러오는 중…
숫자 또는 점
눌러서 거르는 필터로 많이 써요
사진 없으면 첫 글자로
겹쳐 놓은 아바타들
"아이콘은 Lucide로"라고 말하면 통일돼요
검색은 ⌘ K
단축키를 키 모양으로 보여주는 것
아무것도 안 한 상태
마우스를 올려 보세요 (:hover)
누르고 있는 순간 (:active)
Tab 키로 선택했을 때 (:focus-visible)
못 누르게 회색 (disabled)
처리 중 · 두 번 못 누르게
틀린 상태 · 빨간 테두리 + 안내
스크롤하면 뒤쪽 산일수록 천천히 움직여요
아래로 내려 보세요
내려도 헤더는 위에 남고, 아래에 그림자가 생겨요
사진 한 장을 고른다
세 단계가 끝나야 고정이 풀리고 다음으로 넘어가요
세로로 내렸는데 카드는 옆으로 흘러가요
위의 선이 읽은 만큼 늘어나요
바쁜 사람을 위한 부엌 도우미예요.
레시피를 많이 담는 건 쉽지만, 정작 요리할 때는 잘 안 꺼내 보게 돼요.
그래서 이 앱은 요리하는 순간에 먼저 꺼내 줍니다.
손이 젖어 있어도 화면을 만질 필요가 없어요.
장 볼 때는 있는 재료부터 보여 줘요.
동그라미가 커서를 한 박자 늦게 따라와요
근처에 커서가 오면 버튼이 끌려와요
누른 자리에서 물결이 퍼져요
올린 메뉴 밑줄이 왼쪽부터 그어져요
경계를 끌어서 전과 후를 견줘요
커서를 위쪽 바깥으로 빼면 한 번만 떠요
첫 달은 무료로 써 볼 수 있어요
다 불러오면 덮개가 위로 걷혀요
갤러리 · 화면에 들어온 사진만 불러와요
글자가 한 자씩 써지고 지워지며 바뀌어요
메뉴를 누르면 그 칸까지 미끄러져 가요
띠가 끝없이 흐르고, 올리면 멈춰요
배경 색이 천천히 섞이며 흘러가요
장식이 제각각 박자로 둥실 떠요