왜 용어 통일이 필요한가
AI에게 “메인 화면 위쪽에 로고 넣어줘”라고 요청하면, AI는 이것이 Header인지, Hero 섹션인지, Navigation Bar인지 판단해야 합니다. “위쪽”이라는 모호한 표현 대신 Header라고 말하면 한 번에 원하는 결과를 얻습니다.
AI와 소통할 때 정확한 용어를 사용하면:
- 프롬프트 재시도 횟수가 줄어듭니다
- 생성되는 코드의 구조가 일관됩니다
- HTML/CSS 클래스 네이밍까지 깔끔해집니다
레이아웃 영역
페이지의 큰 뼈대를 구성하는 용어입니다.
| 영어 | 한글 | 설명 |
|---|---|---|
| Header | 헤더 | 페이지 최상단 영역. 로고, 네비게이션 포함 |
| Navigation (Nav) | 네비게이션 | 메뉴 링크 모음. Header 안에 포함되거나 독립 |
| Sidebar | 사이드바 | 좌/우측 보조 영역. 필터, 메뉴, 목차 등 |
| Main Content | 메인 콘텐츠 | 페이지의 핵심 내용이 표시되는 중앙 영역 |
| Footer | 푸터 | 페이지 최하단. 저작권, 링크, 연락처 등 |
| Hero Section | 히어로 섹션 | 랜딩 페이지 상단의 대형 배너/소개 영역 |
| Breadcrumb | 브레드크럼 | 현재 위치를 계층으로 보여주는 경로 표시 (Home / Blog / 글제목) |
| Container | 컨테이너 | 콘텐츠 최대 너비를 제한하는 감싸기 요소 |
| Grid | 그리드 | 행/열 기반 격자 배치 시스템 |
| Wrapper | 래퍼 | 특정 요소들을 묶어주는 감싸기 요소 |
<!-- AI에게 요청할 때 이렇게 말하세요 -->
<!-- "Header에 로고와 Navigation을 넣고, 오른쪽에 Sidebar, 하단에 Footer 배치해줘" -->
<header>
<nav><!-- 네비게이션 --></nav>
</header>
<div class="container">
<main><!-- 메인 콘텐츠 --></main>
<aside><!-- 사이드바 --></aside>
</div>
<footer><!-- 푸터 --></footer>UI 컴포넌트
사용자와 상호작용하는 개별 요소들입니다.
| 영어 | 한글 | 설명 |
|---|---|---|
| Button | 버튼 | 클릭 가능한 동작 트리거 |
| Modal (Dialog) | 모달 (다이얼로그) | 화면 위에 띄우는 오버레이 팝업 |
| Dropdown | 드롭다운 | 클릭하면 아래로 펼쳐지는 선택 목록 |
| Tooltip | 툴팁 | 요소에 마우스를 올리면 나타나는 짧은 설명 |
| Toast (Snackbar) | 토스트 | 화면 구석에 잠깐 나타났다 사라지는 알림 |
| Accordion | 아코디언 | 클릭하면 접었다 펼치는 콘텐츠 패널 |
| Tabs | 탭 | 같은 영역에서 콘텐츠를 전환하는 탭 메뉴 |
| Carousel (Slider) | 캐러셀 (슬라이더) | 좌우로 넘기는 이미지/카드 슬라이드 |
| Badge | 뱃지 | 상태나 개수를 표시하는 작은 라벨 (알림 3) |
| Avatar | 아바타 | 사용자 프로필 이미지 (원형 썸네일) |
| Skeleton | 스켈레톤 | 로딩 중 콘텐츠 자리를 보여주는 회색 뼈대 |
| Spinner (Loader) | 스피너 (로더) | 로딩 상태를 표시하는 회전 아이콘 |
| Chip (Tag) | 칩 (태그) | 카테고리나 필터를 나타내는 작은 라벨 |
| Card | 카드 | 이미지+텍스트를 묶은 콘텐츠 블록 |
| Pagination | 페이지네이션 | 목록을 여러 페이지로 나누는 번호 네비게이션 |
<!-- "카드 리스트를 Grid로 배치하고, 각 카드에 Badge와 Avatar를 넣어줘" -->
<div class="grid grid-cols-3 gap-4">
<div class="card">
<img class="avatar" src="/user.jpg" alt="사용자" />
<span class="badge">New</span>
<h3>제목</h3>
<p>설명</p>
</div>
</div>폼 요소
데이터를 입력받는 요소들입니다.
| 영어 | 한글 | 설명 |
|---|---|---|
| Input (Text Field) | 인풋 (텍스트 필드) | 한 줄 텍스트 입력 |
| Textarea | 텍스트에리어 | 여러 줄 텍스트 입력 |
| Select (Combobox) | 셀렉트 (콤보박스) | 드롭다운 선택 목록 |
| Checkbox | 체크박스 | 다중 선택 (ON/OFF) |
| Radio Button | 라디오 버튼 | 단일 선택 (그룹 중 하나) |
| Toggle (Switch) | 토글 (스위치) | ON/OFF 슬라이드 스위치 |
| Date Picker | 데이트 피커 | 달력에서 날짜를 선택하는 UI |
| File Upload | 파일 업로드 | 파일 첨부 영역 (드래그 앤 드롭 포함) |
| Search Bar | 검색바 | 검색 전용 입력 필드 |
| Form Validation | 폼 검증 | 입력값 유효성 검사 (필수 입력, 형식 등) |
| Placeholder | 플레이스홀더 | 입력 전 안내 텍스트 (“이메일을 입력하세요”) |
| Label | 라벨 | 입력 필드의 이름/설명 텍스트 |
<!-- "로그인 폼에 이메일 Input, 비밀번호 Input, Submit 버튼을 만들어줘.
Validation으로 이메일 형식 체크하고, 에러 시 Input 아래에 빨간 텍스트 표시해줘" -->
<form>
<label for="email">이메일</label>
<input type="email" id="email" placeholder="이메일을 입력하세요" required />
<span class="error">올바른 이메일 형식이 아닙니다</span>
<label for="password">비밀번호</label>
<input type="password" id="password" required />
<button type="submit">로그인</button>
</form>스타일/디자인 용어
시각적 표현과 관련된 용어입니다.
| 영어 | 한글 | 설명 |
|---|---|---|
| Responsive | 반응형 | 화면 크기에 따라 레이아웃이 변하는 디자인 |
| Breakpoint | 브레이크포인트 | 반응형 전환 기준 너비 (768px, 1024px 등) |
| Dark Mode | 다크 모드 | 어두운 배경의 색상 테마 |
| Theme | 테마 | 색상/폰트/간격 등 디자인 시스템 변수 모음 |
| Padding | 패딩 | 요소 안쪽 여백 |
| Margin | 마진 | 요소 바깥쪽 여백 |
| Border Radius | 보더 레디어스 | 모서리 둥글기 (rounded) |
| Box Shadow | 박스 섀도우 | 요소의 그림자 효과 |
| Opacity | 오파시티 | 투명도 (0 = 완전 투명, 1 = 불투명) |
| Z-index | Z 인덱스 | 요소의 쌓임 순서 (높을수록 위에 표시) |
| Transition | 트랜지션 | CSS 속성 변화 시 애니메이션 효과 |
| Hover State | 호버 상태 | 마우스를 올렸을 때의 스타일 변화 |
| Focus State | 포커스 상태 | 키보드 탭으로 선택했을 때의 스타일 |
상태/동작 용어
앱의 동작과 상태를 설명하는 용어입니다.
| 영어 | 한글 | 설명 |
|---|---|---|
| Loading State | 로딩 상태 | 데이터를 불러오는 중 |
| Empty State | 빈 상태 | 데이터가 없을 때 표시하는 화면 |
| Error State | 에러 상태 | 오류 발생 시 표시하는 화면 |
| Disabled State | 비활성 상태 | 클릭/입력이 불가능한 상태 |
| Active State | 활성 상태 | 현재 선택되어 있는 상태 |
| Infinite Scroll | 무한 스크롤 | 스크롤하면 자동으로 다음 데이터를 불러오는 패턴 |
| Lazy Loading | 지연 로딩 | 화면에 보일 때만 리소스를 불러오는 기법 |
| Debounce | 디바운스 | 연속 입력 중 마지막 입력 후 일정 시간 뒤 실행 |
| Throttle | 쓰로틀 | 일정 시간 간격으로만 실행을 허용 |
| CRUD | CRUD | Create(생성), Read(조회), Update(수정), Delete(삭제) |
| SPA | SPA | Single Page Application. 페이지 새로고침 없이 동작 |
| SSR | SSR | Server-Side Rendering. 서버에서 HTML을 생성하여 전달 |
| SSG | SSG | Static Site Generation. 빌드 시 HTML을 미리 생성 |
| CSR | CSR | Client-Side Rendering. 브라우저에서 JS로 화면 생성 |
실전 프롬프트 예시
용어를 활용한 좋은 프롬프트와 나쁜 프롬프트를 비교합니다.
| 나쁜 프롬프트 | 좋은 프롬프트 |
|---|---|
| ”위에 메뉴 만들어줘" | "Header에 Navigation을 추가하고 로고는 왼쪽, 메뉴 링크는 오른쪽에 배치해줘" |
| "팝업 띄워줘" | "삭제 확인용 Modal을 만들어줘. 취소/확인 Button 2개 포함" |
| "목록 예쁘게 해줘" | "Card 컴포넌트를 3열 Grid로 배치하고, 각 Card에 Avatar, Badge, 제목을 넣어줘" |
| "폰 에서도 보이게" | "Responsive 레이아웃으로 만들어줘. Breakpoint 768px 이하에서 Grid를 1열로 변경" |
| "로딩 중 표시해줘" | "Loading State에서 Skeleton UI를 보여주고, 데이터 로드 완료 후 카드 리스트로 전환해줘" |
| "아래로 내리면 더 보여줘" | "Infinite Scroll로 구현해줘. 하단 도달 시 다음 10개 아이템을 Lazy Loading” |
# 실제 프롬프트 예시
"Header에 반응형 Navigation을 만들어줘.
- 데스크톱: 로고 왼쪽, 메뉴 링크 오른쪽 가로 배치
- 모바일(Breakpoint 768px 이하): 햄버거 버튼 + Sidebar 형태 드롭다운
- Dark Mode 지원
- 현재 페이지 링크에 Active State 하이라이트
- Transition으로 모바일 메뉴 슬라이드 애니메이션"정리
AI에게 웹 개발을 요청할 때 기억할 핵심 원칙:
| 원칙 | 설명 |
|---|---|
| 영어 용어 우선 | ”위쪽 메뉴” 대신 “Header Navigation” |
| 구체적인 컴포넌트명 | ”팝업” 대신 “Modal” 또는 “Toast” |
| 상태를 명시 | ”로딩”, “에러”, “빈 상태” 각각의 UI를 지정 |
| 레이아웃 구조 지정 | ”Grid 3열”, “Sidebar 왼쪽”, “Container max-width 1200px” |
| 반응형 기준 명시 | Breakpoint 숫자를 포함하여 요청 |
모호한 한국어 표현 대신 정확한 영어 용어를 사용하면, AI가 생성하는 코드의 품질이 확연히 달라집니다. 이 용어 사전을 북마크해두고 프롬프트 작성 시 참고하세요.