[어디에] + [컴포넌트 이름] + [개수] + [세부 조건]
| ❌ | ⭕️ |
|---|---|
| FAQ 만들어줘 | 「푸터 위 섹션에 아코디언 5개. 처음엔 다 접혀 있고, 하나 열면 나머지 닫히게」 |
| 신청 폼 만들어줘 | 폼. 인풋 3개(이름·이메일·연락처), 셀렉트 1개, 체크박스 1개. 유효성 검사 넣고, 제출하면 토스트로 완료 알림 |
| 순서 | 사이트명 | 바로가기 링크 |
|---|---|---|
| 1 | Mobbin | https://mobbin.com/discover/apps/ios/latest |
| 2 | 60fps.design | https://60fps.design/ |
| 3 | MotionSites AI | https://motionsites.ai/ |
| 4 | Framer | https://www.framer.com/ |
📌 대학생이신 경우 Framer 학생 플랜이 있어요! 꼭 사용해보세요 (포트폴리오·수업 과제·이력서 등 개인 학생 웹사이트에만 사용)
「저기 접었다 폈다 되는 거 있잖아요」 ❌ 「아코디언으로 해줘」 ⭕️
이름을 아는 순간 수정 시간을 줄일 수 있어요 ☺️
| 한글 | 영문 | 한 줄 |
|---|---|---|
| 헤더 | Header | 맨 위 가로 줄 |
| GNB / 네비게이션 바 | Navbar / Global Navigation Bar | 헤더 안 메뉴 부분 |
| 히어로 | Hero / Hero Section | 맨 위 큰 첫 화면 |
| 사이드바 | Sidebar | 옆에 세로로 붙은 메뉴 |
| 푸터 | Footer | 맨 아래 정보 줄 |
| 섹션 | Section | 가로로 잘린 한 덩어리 |
| 컨테이너 | Container | 좌우 여백 잡아주는 틀 |
| 그리드 | Grid | 격자 배치 |
| 카드 | Card | 네모 상자 하나 |
| 카드 그리드 | Card Grid | 카드를 격자로 |
| 테이블 | Table | 표 |
| 레이아웃 | Layout | 전체 배치 방식 |
| 한글 | 영문 | 한 줄 |
|---|---|---|
| 탭 | Tabs | 위에서 골라 아래를 바꾸는 것 |
| 아코디언 | Accordion | 접었다 폈다 |
| 브레드크럼 | Breadcrumb | 홈 / 제품 / 노트북 |
| 스텝퍼 (단계) | Stepper / Progress Steps | 1 — 2 — 3 진행 표시 |
| 페이지네이션 | Pagination | 1 2 3 ▶ |
| 무한 스크롤 | Infinite Scroll | 내리면 계속 나옴 |
| 더보기 버튼 | Load More | 눌러야 더 나옴 |
| 캐러셀 / 슬라이더 | Carousel / Slider | 옆으로 넘기는 것 |
| 드롭다운 메뉴 | Dropdown / Dropdown Menu | 눌러서 펼치는 메뉴 |
| 햄버거 메뉴 | Hamburger Menu | ☰ 아이콘 |
| 드로어 | Drawer / Side Panel | 옆에서 밀려 나오는 판 |
| 목차 | Table of Contents (TOC) | 긴 글 옆 소제목 목록 |
| 하단 탭바 | Bottom Navigation / Tab Bar | 앱 맨 아래 메뉴 |
| 앵커 링크 | Anchor Link | 페이지 안 특정 위치로 이동 |