📖 전문용어 풀이집 (모든 단어 — 직원·고객 공통)
답변·플로우·매뉴얼에 나오는 모든 전문용어를 카테고리별로 정리. 직원이 모르는 단어 나오면 여기서 찾기. 고객에게 답할 때도 답변에 괄호로 풀어쓰기.
🧱 페이지 구조 (직원이 가장 자주 듣는 단어)
헤더 (Header)페이지 맨 위 영역. 보통 로고·메뉴·연락처가 들어감. 모든 페이지 공통.
히어로 (Hero / Hero Section)메인 페이지 첫 화면의 큰 영역. 가게 핵심 메시지·대표 사진·CTA 버튼이 들어감. "메인 비주얼"이라고도 함.
네비게이션 (Nav / Navigation)사이트 메뉴. 보통 헤더 안에 가로로. 모바일에선 ☰ 햄버거로 접힘.
사이드바 (Sidebar)본문 옆 보조 영역. 메뉴·필터·광고 등. 모바일에선 보통 숨김.
푸터 (Footer)페이지 맨 아래 영역. 회사 정보·연락처·SNS·저작권.
메인 영역 (Main)페이지의 주요 콘텐츠 영역. 헤더·푸터 사이.
섹션 (Section)페이지 안의 구분된 영역. 예: "소개 섹션", "서비스 섹션".
컨테이너 (Container)콘텐츠를 감싸는 가로 폭 제한 영역. 보통 max-width 1200px.
그리드 (Grid)격자 형태 배치. 카드를 2열·3열로 깔끔하게.
래퍼 (Wrapper)여러 요소를 감싸는 바깥 박스. 정렬·여백 조절용.
🎨 UI 요소 (화면에 보이는 부품)
CTA (Call To Action)행동 유도 버튼. "예약하기" "문의하기" "구매하기" 등.
버튼 (Button)클릭하면 동작하는 요소. 기본 / 강조 / 보조 종류.
링크 (Link / Anchor)클릭 시 다른 페이지·앵커로 이동. 보통 밑줄.
폼 (Form)입력 양식. 이름·이메일·문의 내용. 제출 시 데이터 전송.
인풋 / 필드 (Input / Field)폼 안의 입력 칸 1개.
라벨 (Label)입력 칸 위의 설명 글. "이름", "전화번호".
플레이스홀더 (Placeholder)입력 칸 안 흐린 안내 글. 입력 시작하면 사라짐.
모달 (Modal)화면 위에 띄우는 작은 창. 닫기 전엔 다른 작업 못 함.
팝업 (Popup)별도 창으로 뜨는 알림. 모달보다 가볍게 떴다 사라짐.
토스트 (Toast)잠시 떴다 자동으로 사라지는 알림. "저장됨" 같은 짧은 메시지.
배너 (Banner)큰 광고·공지 영역.
카드 (Card)정보 묶음 박스. 이미지 + 제목 + 설명.
슬라이더 / 캐러셀 (Carousel)옆으로 넘기는 이미지·카드.
갤러리 (Gallery)사진 격자 영역. 클릭하면 크게.
탭 (Tab)같은 영역 안에서 내용 전환.
아코디언 (Accordion)접었다 펼쳤다 영역. FAQ에 자주.
드롭다운 (Dropdown)클릭하면 펼쳐지는 메뉴.
토글 / 스위치 (Toggle)켜기/끄기 스위치.
햄버거 메뉴 (☰)모바일 ☰ 모양 메뉴 버튼. 누르면 메뉴 펼침.
아이콘 (Icon)작은 그림 기호. 전화·카톡·SNS·메뉴 등.
플로팅 버튼 (FAB)화면 모서리에 항상 떠 있는 버튼. 카톡 상담·맨 위로 가기.
브레드크럼 (Breadcrumb)"홈 > 소개 > 회사 연혁" 위치 표시.
페이지네이션 (Pagination)"1 2 3 ... 10" 페이지 번호.
📐 디자인·레이아웃
반응형 (Responsive)PC·태블릿·모바일 자동 대응. 요즘은 기본.
모바일 우선 (Mobile-First)모바일 기준으로 만들고 PC 확장. 우리 표준.
뷰포트 (Viewport)사용자가 보는 화면 영역. 브라우저 창 크기.
픽셀 (px)화면의 가장 작은 점 단위. "44px 이상이어야 모바일 클릭 가능".
패딩 (Padding)요소 안쪽 여백. 박스 안 글자가 가장자리에 안 닿게.
마진 (Margin)요소 바깥쪽 여백. 박스끼리 거리.
보더 (Border)요소 테두리. 두께·색·스타일.
그림자 (Box Shadow)요소 뒤 그림자 효과. 입체감.
그라데이션 (Gradient)색상 점점 바뀌는 효과.
폰트 (Font)글꼴. Pretendard·Noto Sans KR 등.
라인 높이 (Line Height)한 줄과 다음 줄 간격. 1.5~1.8 권장.
자간 (Letter Spacing)글자 사이 간격.
정렬 (Align)왼쪽·가운데·오른쪽.
z-index요소 겹칠 때 누가 위. 숫자 클수록 위.
오버레이 (Overlay)다른 요소 위에 덮는 반투명 레이어. 모달 배경 등.
Flexbox / Grid요소 배치하는 CSS 기술. 가로·세로·격자.
스크롤 (Scroll)화면 밖 내용 이동. 가로 스크롤은 문제·세로는 OK.
스티키 (Sticky)스크롤해도 화면에 붙어있음. 헤더 자주.
픽스드 (Fixed)스크롤 무관 화면 고정. 우하단 채팅 버튼 등.
📄 페이지 종류·콘텐츠
페이지 (Page)사이트의 한 화면.
메인 페이지 (Home)첫 화면. URL은 그냥 / (도메인 끝).
서브 페이지 (Sub Page)메인 외 페이지. 소개·서비스·문의 등.
랜딩 페이지 (Landing Page)광고로 들어오는 1P 사이트. 특정 목적 (예약·구매·문의).
원페이지 / 1P모든 내용을 한 페이지에 세로로 나열. 작은 가게 적합.
멀티페이지 / 2P+여러 페이지 분리. 메뉴 클릭하면 이동.
슬라이드 (Slide)이미지 한 장이 한 화면. 슬라이더의 단위.
미리보기 (Preview)실제 만들기 전 시안 보기. [project].pages.dev
시안 (Mockup / Design)실제 코드 전 디자인 화면.
레퍼런스 (Reference)참고하는 다른 사이트.
🌐 인프라·호스팅·도메인·보안
호스팅 (Hosting)홈페이지가 올라가는 서버. 우리는 Cloudflare Pages → 0원.
도메인 (Domain)인터넷 주소 (예: yourshop.com). 가비아 등에서 연 1.5~2만원.
서브도메인 (Subdomain)도메인 앞 글자. shop.yourname.com 의 'shop'.
SSL (Secure Sockets Layer)주소창 자물쇠 🔒. 통신 암호화 + 사이트 신뢰성 인증.
TLSSSL 최신 버전. 둘이 거의 같음.
https / httphttps = 자물쇠 안전. http = 위험 경고.
DDoS 방어 (디도스)대량 트래픽 공격 자동 차단. Cloudflare 기본.
CDN (Content Delivery Network)전 세계 300곳+ 서버 분산. 어디서든 빠른 응답.
트래픽 (Traffic)방문자 데이터. 우리 호스팅 = 무제한.
DNS (Domain Name System)도메인(글자) → 서버(IP) 연결 시스템.
네임서버 (Name Server)DNS 관리 서버 주소.
A 레코드 / CNAMEDNS 설정 종류. A = IP / CNAME = 도메인 가리키기.
IP 주소서버의 숫자 주소.
가동률 (Uptime)다운되지 않는 시간 비율. 우리 = 99.99%.
FTP / SFTP호스팅 서버에 파일 올리는 통로.
SSH서버 원격 접속.
방화벽 (Firewall)의심 접속 차단. Cloudflare 자동.
⚙️ 기술 (코드·언어·도구)
HTML웹페이지 뼈대.
CSS디자인. 색·크기·여백·폰트.
JavaScript (JS)동작·상호작용. 버튼 클릭·폼 검증·애니메이션.
DB (Database)데이터 저장소.
API시스템 간 연결 통로. 카톡 API·결제 API.
JSON / XML데이터 형식. API 응답에 자주.
쿠키 (Cookie)브라우저 저장 데이터. 로그인 유지.
로컬 스토리지브라우저 큰 저장. 쿠키보다 큼.
캐시 (Cache)이전 파일 임시 저장 → 다음에 빠르게.
콘솔 (Console)F12 안 텍스트 창. 에러·로그.
버그 (Bug)코드 오류·의도와 다른 동작.
디버그 (Debug)버그 찾아 고치는 작업.
Git코드 변경 이력 관리. 이전 버전 복구.
GitHub코드 저장소. 백업·공유.
배포 (Deploy)코드를 서버에 올려 사용자가 볼 수 있게.
스테이징 (Staging)운영 전 테스트 서버. 우리 미리보기.
운영 (Production)실제 사용자 환경. 진짜 도메인.
🔍 검색·SEO·마케팅
SEO (Search Engine Optimization)검색 최적화. 검색 결과 위로 올리는 작업.
SERP (Search Engine Results Page)검색 결과 페이지.
메타 태그 (Meta Tag)검색 결과에 보일 제목·설명·이미지.
타이틀 태그 (Title)검색 결과 첫 줄 큰 글자 + 브라우저 탭 제목.
디스크립션 (Description)검색 결과 제목 아래 설명. 클릭률 영향 큼.
사이트맵 (Sitemap)페이지 목록 파일 (sitemap.xml).
robots.txt검색엔진에게 "이 페이지 검색 OK/NO" 알리는 파일.
색인 (Indexing)검색엔진이 사이트 읽어 DB에 저장.
크롤링 (Crawling)검색엔진 봇이 사이트 방문.
구조화 데이터schema.org 코드. 가게 정보·리뷰 별점 등 검색엔진이 이해.
키워드 (Keyword)사람들이 검색창에 입력하는 단어.
메인 키워드 (Head)짧고 경쟁 심한 검색어.
롱테일 키워드 (Long-tail)구체적 검색어. "강남 ○○ 잘하는 곳".
검색량 (Search Volume)월간 검색 횟수.
경쟁도 (Competition)같은 키워드 노리는 사이트 수.
CPC (Cost Per Click)클릭당 비용. 1회 클릭 시 차감.
CTR (Click Through Rate)클릭률. 노출 100 중 클릭 5면 5%.
전환율 (Conversion Rate)방문자 중 실제 구매·예약·문의 비율.
이탈률 (Bounce Rate)들어왔다 아무것도 안 하고 나간 비율.
ROI (Return On Investment)투자 수익률. 광고비 대비 매출.
ROAS (Return On Ad Spend)광고 수익률. 광고 100만 → 매출 500만 = 500%.
A/B 실험두 카피 동시에 띄워 더 잘 되는 쪽 채택.
리타게팅 (Retargeting)방문 이력자에게 다시 광고.
💳 결제·CRM·관리자
CMS (Content Management System)관리자 페이지. 직접 글·사진 수정. 네이버 블로그 글쓰기 수준.
관리자 페이지 (Admin)CMS와 같은 의미.
대시보드 (Dashboard)관리자가 한눈에 보는 화면. 매출·방문자.
PG사 (Payment Gateway)결제대행사. 이니시스·KCP·나이스페이먼츠 등.
가맹점 (Merchant)PG 등록 결제 받는 회사.
에스크로 (Escrow)안전결제. 제3자 보관 → 완료 후 정산. 크몽 안전결제가 이 구조.
크몽 안전결제크몽이 결제금 보관 → 작업 완료 확인 후 우리 정산.
비즈머니크몽 광고 충전금. 0원 시 광고 정지.
인보이스 (Invoice)청구서.
세금계산서법인·사업자 거래 시 발행. 부가세 환급.
리뷰 / 별점고객 평가. 4.9 유지가 CPC 효율 직결.
CS (Customer Service)고객 응대. 문의·불만 처리.
FAQ자주 묻는 질문.
🛠️ 자주 쓰는 서비스·플랫폼
Cloudflare Pages우리 표준 호스팅. 무료·트래픽 무제한·SSL·DDoS.
Netlify다른 무료 호스팅.
VercelNext.js 친화 호스팅.
Cloudflare D1Cloudflare 안에서 같이 쓰는 무료 DB. 신규 홈페이지 제작의 기본 데이터 저장소.
워드프레스 (WordPress)널리 쓰이는 CMS. 보안·속도 이유로 권장 안 함.
아임웹 (Imweb)한국 노코드 빌더. 연 36~120만원.
카페24한국 호스팅·쇼핑몰.
가비아한국 도메인·호스팅. 도메인 추천처.
후이즈한국 도메인 회사.
네이버 서치어드바이저네이버 검색 등록 도구. searchadvisor.naver.com
구글 서치콘솔구글 검색 등록 도구. search.google.com/search-console
네이버 스마트플레이스네이버 지도 가게 등록. smartplace.naver.com
구글 비즈니스 프로필구글 지도 가게 등록. business.google.com
크몽 (Kmong)우리 메인 영업 채널.
Gig (긱)크몽 등록 우리 서비스 상품 1건.
Figma디자인 시안 도구.
📏 단위·측정·도구
4뷰포트 검수모바일 작은(360px)·모바일 큰(414px)·태블릿(768px)·노트북(1280px) 4가지에서 확인.
375 / 414 / 768 / 1280표준 뷰포트 픽셀. iPhone SE / Pro Max / iPad / 노트북.
F12크롬 키보드 단축키. 개발자 도구 열기.
Ctrl+Shift+M크롬 단축키. 디바이스 모드 토글.
개발자 도구 (DevTools)F12로 여는 패널. 코드·콘솔·디바이스 모드.
디바이스 모드DevTools 안에서 모바일·태블릿 시뮬레이션.
PageSpeed Insights구글 페이지 속도 측정. pagespeed.web.dev / 90점+ 목표.
Lighthouse크롬 내장 자동 사이트 품질 점검.
🔧 audit 자동 검사 12종 (수정 의뢰 시)
h_scroll (가로 스크롤)모바일에서 옆으로 밀어야 보이는 상태. 가장 흔한 이슈.
header_overlap (헤더 겹침)상단 헤더가 본문 첫 줄 가림.
overflowing (요소 넘침)이미지·테이블이 화면 밖으로.
tap_targets (터치 영역 부족)모바일 버튼이 44×44px 미만.
tiny_text (작은 글자)본문이 12px 미만.
invisible_buttons (안 보이는 버튼)배경과 색 같음·테두리 없음.
element_overlap (요소 겹침)두 요소가 시각적으로 겹침.
section_align (섹션 정렬)섹션 가로 정렬·여백 불일치.
bad_text (깨진 텍스트)한글·이모지 □□ 표시. 인코딩.
broken_fa_icons (아이콘 깨짐)Font Awesome 빈 네모.
console_errors (콘솔 에러)F12 콘솔 빨간 에러. JS 안 돌아감.
failed_requests (로딩 실패)이미지·CSS·JS 404·timeout.
💼 비즈니스·운영
B2B (Business to Business)기업 간 거래.
B2C (Business to Consumer)기업 → 일반 소비자.
LTV (Lifetime Value)고객 생애 가치. 한 명이 평생 우리에게 쓰는 돈.
CAC (Customer Acquisition Cost)고객 1명 데려오는 광고비.
KPI (Key Performance Indicator)핵심 성과 지표.
UX (User Experience)사용자 경험.
UI (User Interface)사용자 인터페이스. 화면 디자인.
퍼널 (Funnel)방문 → 구매까지 단계. 깔때기처럼 좁아짐.
리텐션 (Retention)재방문·재구매 비율. 충성도.
리드 (Lead)잠재 고객. 문의·견적 받은 사람.
핫리드 (Hot Lead)결정 직전 고객. 빠른 응대.
콜드리드 (Cold Lead)관심만 있고 결정 멀리.