목적 바이브 코딩 시 개발자·디자이너·AI와 정확하게 소통하기 위한 표준 웹 UI 명칭 정리.
디지털 아카이브 프로젝트의 실제 화면을 기준으로 작성. (수원학 아카이브)
1. 홈 와이어프레임
모든 페이지에 공통으로 등장하는 뼈대 구조입니다.
페이지의 세로 흐름에 따라 Header → 본문 → Footer 3단으로 나뉩니다.
용어 | 분류 | 설명 |
Header | Navigation | 모든 페이지 상단에 고정되는 띠. 로고 + 전역 내비게이션 + 검색을 담는다. |
Site logo / Wordmark | Navigation | 브랜드 로고 또는 텍스트 로고. 클릭 시 홈으로 이동. Omeka S: site_logo 설정. |
Global nav | Navigation | 헤더 안의 메뉴 링크 묶음. 사이트 전체를 가로지르는 최상위 내비게이션. |
Hero / Banner | Hero / CTA | 페이지 최상단의 시각적으로 큰 소개 영역. Omeka S Page Block의 hero 블록. |
CTA button | Hero / CTA | Call To Action — 사용자의 행동을 유도하는 주요 버튼. "Start Exploring →" 등. |
Breadcrumb nav | Layout | 현재 위치를 계층 구조로 보여주는 경로 표시. Home › Collections › Photographs 형태. Omeka S: breadcrumbs.phtml. |
Sidebar / Facets | Layout | 필터·분류 패널. 날짜·주제·형식 등으로 Browse 결과를 좁힌다. "faceted filter", "filter panel" 이라고도 한다. |
Main content | Content | 사이드바를 제외한 본문 영역. HTML <main> 태그. |
Item card | Content | 아이템 목록에서 개별 아이템을 표시하는 카드 컴포넌트. Omeka S: item/browse.phtml의 반복 단위. |
Thumbnail | Content | 아이템 카드 상단의 미리보기 이미지. Omeka S: Media의 thumbnail() 메서드. |
Pagination | Footer / Utils | 목록 하단의 페이지 이동 컨트롤. Omeka S: pagination.phtml. |
Footer | Footer / Utils | 모든 페이지 하단 영역. 저작권·기관 정보·추가 링크를 담는다. |
Footer nav | Footer / Utils | 푸터 내 링크 묶음. 사이트맵·연락처 등 보조 내비게이션. |
Inline form | Footer / Utils | 페이지 내에 삽입된 폼. 뉴스레터 구독 등. 팝업 없이 콘텐츠 내부에 위치. |
Back to top button | Footer / Utils | 페이지 하단에서 최상단으로 스크롤하는 유틸리티 버튼. |