AI에게 정확하게 말하는 법
1. 들어가며: "저거… 위에… 그거 좀 바꿔줘!"라고 말하고 있나요?
혹시 AI 개발 도구에게 웹페이지 수정을 요청하면서 "저 위에 있는 그거 색 좀 바꿔줘" 혹은 "옆에 있는 저거 좀 옮겨줘"와 같은 말을 해본 적 있으신가요?
웹 개발을 처음 접하면 화면 속 요소들을 뭐라고 불러야 할지 몰라 "저거", "위에", "옆에" 같은 표현을 자주 쓰게 됩니다. 하지만 AI는 사람처럼 눈치가 빠르지 않아서, 우리가 말하는 '저거'가 정확히 무엇인지 알아듣지 못해요. 그래서 원하는 결과물을 얻기까지 몇 번이고 다시 설명해야 하는 답답한 상황이 벌어지곤 하죠.
이 문제를 해결할 열쇠는 바로 **'컴포넌트(Component)'**의 이름을 아는 것입니다. 컴포넌트란 웹페이지를 이루는 크고 작은 '조각들'을 의미합니다. 마치 집을 지을 때 쓰는 '벽돌'과 같아요. 벽돌이 모여 벽이 되고, 벽이 모여 방이 되고, 방이 모여 하나의 집이 완성되듯, 수많은 컴포넌트가 모여 우리가 보는 웹페이지가 만들어집니다.
이 가이드는 웹 개발 지식이 전혀 없는 초보 학습자도 웹페이지의 각 조각(컴포넌트)을 정확한 이름으로 부를 수 있도록 돕기 위해 만들어졌습니다. 단순히 이름을 외우는 것을 넘어, AI와 원활하게 소통하며 원하는 웹페이지를 빠르고 정확하게 만들어내는 능력을 갖추게 될 것입니다.
이제 웹사이트의 가장 큰 뼈대부터 차근차근 살펴보도록 하겠습니다.
2. 웹페이지 뼈대 요소
이 섹션에서는 웹사이트의 전체적인 구조와 레이아웃을 결정하는 가장 크고 기본적인 구성 요소들을 다룹니다. 마치 집을 지을 때 '방'이나 '거실'처럼 가장 먼저 눈에 들어오는 큰 틀에 해당하죠. 이 요소들의 이름을 알면 웹페이지의 전체적인 모습을 바꾸는 데 큰 도움이 됩니다.
| 컴포넌트 (영어 / 한국어) | 역할 | AI 활용 예시 |
|---|---|---|
| Hero Section / 히어로 섹션 | 방문자의 시선을 사로잡는 첫 화면 | "히어로 섹션 배경 이미지를 제주도 풍경으로 바꿔줘." |
| Header / 헤더 | 로고, 메뉴, 로그인 버튼 등 상단 영역 | "헤더 오른쪽에 로그인 버튼 추가해줘." |
| Navigation Bar / 네비게이션 바 | 주요 페이지 이동을 돕는 메뉴 | "네비게이션 바 배경색을 흰색으로 바꿔줘." |
| Footer / 푸터 | 회사 정보, 저작권, SNS 링크 등 하단 영역 | "푸터 배경색을 진회색(#333)으로 바꿔줘." |
| Container / 컨테이너 | 관련 요소들을 담는 레이아웃 박스 | "본문 컨테이너 폭을 1200px로 넓혀줘." |
| Card / 카드 | 이미지, 텍스트, 버튼 등 정보를 하나로 묶음 | "상품 카드 안 이미지 크기를 200px로 키워줘." |
3. 웹사이트를 탐험하는 길잡이 요소들
이 파트에서는 사용자가 웹사이트 내에서 길을 잃지 않고 원하는 정보로 쉽게 이동할 수 있도록 돕는 '안내판' 역할을 하는 요소들을 소개합니다. 이 요소들을 잘 활용하면 사용자 경험을 크게 향상시킬 수 있습니다.
| 컴포넌트 (영어 / 한국어) | 역할 | AI 활용 예시 |
|---|---|---|
| Breadcrumbs / 브레드크럼 | 현재 위치 표시 | "브레드크럼 마지막 단계 글씨 크기 16px로 키워줘." |
| Tabs / 탭 | 같은 공간 안에서 콘텐츠 전환 | "활성 탭 밑줄 두께 3px로 만들어줘." |
| Pagination / 페이지네이션 | 페이지 이동 버튼 | "페이지네이션 버튼을 동그랗게 바꿔줘." |
| Hamburger Menu / 햄버거 메뉴 | 모바일용 메뉴 아이콘 | "햄버거 메뉴 아이콘 색상을 흰색으로 바꿔줘." |
4. 사용자와 소통하는 상호작용 요소들
이 섹션에서는 사용자가 단순히 정보를 보는 것을 넘어, 직접 정보를 입력하고, 선택하고, 다양한 반응을 얻어내는 데 사용되는 중요한 요소들을 다룹니다. 사용자와 웹사이트 간의 '소통'을 담당하는 핵심 부품들이죠.
| 컴포넌트 (영어 / 한국어) | 역할 | AI 활용 예시 |
|---|---|---|
| Input Field / 인풋 필드 | 텍스트 입력칸 | "인풋 필드에 '검색어를 입력하세요' 플레이스홀더 넣어줘." |
| Search Bar / 검색창 | 사이트 내 검색 입력창 | "검색창 오른쪽에 돋보기 아이콘 추가해줘." |
| Dropdown / Select / 드롭다운 / 셀렉트 | 여러 옵션 중 선택 | "드롭다운 메뉴 옵션에 'L 사이즈' 추가해줘." |
| Checkbox / Radio Button / 체크박스 / 라디오 버튼 | 선택 기능 | "이용약관 동의 체크박스 기본값 해제", "성별 라디오 버튼 사각형으로 변경" |
| Filter / 필터 | 조건 선택 기능 | "필터에 '애완동물 동반 가능' 체크박스 추가" |
| Dialog / Modal / 다이얼로그 / 모달 | 팝업창, 알림, 확인 | "로그인 다이얼로그 버튼 색 파란색으로 변경" |
| Accordion / 아코디언 | 접었다 펼치는 메뉴 | "FAQ 아코디언 첫 항목 기본 펼침" |
| Stepper / 스텝퍼 | 단계 진행 표시 | "현재 단계 아이콘 초록색 강조" |
| Snackbar / Toast / 스낵바 / 토스트 | 짧은 알림 메시지 | "토스트 3초 후 자동 사라지게 설정" |
| Tooltip / 툴팁 | 마우스 오버 설명 | "저장 버튼에 '클릭하면 저장됩니다' 툴팁 추가" |
5. 콘텐츠를 효과적으로 보여주는 요소들
이 섹션에서는 이미지, 상품 목록, 데이터, 사용자 후기 등 다양한 종류의 콘텐츠를 사용자에게 보기 좋고 이해하기 쉽게 전달하는 데 사용되는 시각적 요소들을 소개합니다.
| 컴포넌트 (영어 / 한국어) | 역할 | AI 활용 예시 |
|---|---|---|
| Carousel / 캐러셀 | 이미지/콘텐츠 슬라이드 | "캐러셀 자동 전환 시간 5초로 설정" |
| Table / 테이블 | 데이터 행·열 정리 | "테이블 첫 행 굵게 표시" |
| Progress Bar / 프로그레스 바 | 진행 상황 표시 | "프로그레스 바 색상 초록색으로 변경" |
| Testimonial Section / 테스티모니얼 섹션 | 고객 후기, 추천사 | "테스티모니얼 인용구 글씨 이탤릭체로 변경" |
6. 이제 당신도 'AI 개발자'처럼 말할 수 있습니다!
지금까지 웹페이지를 구성하는 다양한 컴포넌트의 이름을 배웠습니다. 이제 더 이상 "저거", "그거" 같은 모호한 표현 대신, AI가 정확히 알아들을 수 있는 언어로 대화할 수 있게 되었습니다.
AI에게 명확하게 지시하는 핵심 공식은 바로 이것입니다.
무엇(컴포넌트) + 어디(위치/섹션) + 어떻게(변경 내용)
이 공식만 기억하면, AI와의 소통이 훨씬 명확해지고 원하는 웹페이지를 놀랍도록 빠르고 정확하게 만들 수 있습니다.
이제 여러분은 아래와 같이 구체적이고 수준 높은 명령을 내릴 수 있습니다.
"히어로 섹션의 제목 글씨 크기를 40px로 키워줘.""상품 카드의 그림자 효과를 없애줘.""푸터의 아이콘 정렬을 오른쪽으로 옮겨줘."
이 가이드를 통해 여러분은 단순히 웹 컴포넌트의 이름을 아는 것을 넘어, AI 개발 도구를 내 손발처럼 부릴 수 있는 강력한 소통 능력을 갖추게 되었습니다. 이제 AI와 함께 여러분이 상상하는 어떤 웹페이지든 자유자재로 만들어보세요!
7. 부록: 웹페이지 구성 요소 가이드
여러분을 위해 위니브 디자이너가 바이브코딩으로 제작한 웹 가이드 페이지를 준비했습니다.
👉 https://weniv.link/webpageguide
책에서 배운 컴포넌트를 웹으로 직접 확인해 보세요. 눈으로 확인하며 따라 하면, 나만의 웹페이지를 바이브코딩으로 훨씬 빠르게 완성할 수 있습니다.