[Tips] Lovable 바이브-코딩 용어집

원본 게시글: https://velog.io/@euisuk-chung/Lovable-바이브-코딩-용어집

Lovable 개발 용어집

본 포스트는 Lovable을 효과적으로 탐색하고 사용하기 위해, 그리고 바이브코딩을 효과적으로 수행하기 위해 필요한 핵심 개발 용어들을 쉽게 설명합니다.

https://docs.lovable.dev/glossary

일반 개념

AI, 프롬프트 같은 기초적인 개발·AI 개념을 설명하는 섹션입니다.
Lovable을 처음 접하는 사람도 기본 용어부터 이해할 수 있도록 돕습니다.

AI (Artificial Intelligence, 인공지능)

쉬운 설명: 컴퓨터가 사람처럼 생각하고 학습할 수 있게 만든 기술입니다.
예시: ChatGPT처럼 질문에 답하거나, 코드를 작성하거나, 이미지를 만들어주는 프로그램들이 AI입니다.
왜 중요한가: Lovable에서는 AI가 당신의 설명을 듣고 실제로 작동하는 웹사이트나 앱을 만들어줍니다.

Prompt (프롬프트)

쉬운 설명: AI에게 “이렇게 해줘”라고 말하는 지시문이나 요청문입니다.
예시: “로그인 페이지를 만들어줘”라고 입력하는 것이 프롬프트입니다.
팁: 구체적으로 설명할수록 원하는 결과를 얻을 수 있습니다.
(예: “파란색 버튼이 있는 로그인 페이지”)

Lovable 전용 용어

Lovable에서만 등장하는 특화 기능과 모드를 설명하는 섹션입니다.
Chat Mode, Edit Mode 같은 개념을 알면 Lovable의 작동 방식을 빠르게 익힐 수 있습니다.

Chat Mode (채팅 모드)

쉬운 설명: AI와 대화하듯이 소통하면서 아이디어를 발전시키는 모드입니다.
언제 사용하나: 기능을 고민할 때, 오류를 분석할 때, 계획을 세울 때
실제 예시: “내 쇼핑몰 사이트에 어떤 기능이 더 필요할까?”

Edit Mode (편집 모드)

쉬운 설명: 실제로 코드를 수정하고 웹사이트를 변경하는 모드입니다.
언제 사용하나: 구체적인 변경사항을 적용할 때
주의사항: 채팅 모드에서 계획 후 편집 모드로 넘어가는 것이 좋습니다.

History (히스토리)

쉬운 설명: 지금까지 만든 변경사항들의 기록입니다.
왜 유용한가: 실수했을 때 이전 버전으로 되돌릴 수 있습니다.

Knowledge (지식 베이스)

쉬운 설명: 프로젝트에 대한 모든 중요한 정보를 정리해둔 메모장입니다.
포함될 내용: 어떤 웹사이트를 만드는지, 원하는 색상·디자인, 필요한 기능
왜 중요한가: AI가 프로젝트를 더 잘 이해하고 일관된 결과를 만들어줍니다.

Labs (랩스)

쉬운 설명: 아직 실험 중인 새로운 기능들입니다.
주의사항: 변경되거나 사라질 수 있으므로 중요한 프로젝트에는 신중히 사용하세요.

Remix (리믹스)

쉬운 설명: 다른 사람이 만든 프로젝트나 내가 만든 프로젝트를 복사해 새롭게 시작하는 것
비유: 친구 레시피를 받아서 내 입맛에 맞게 바꾸는 요리와 같습니다.
활용법: 좋은 예제를 찾아서 내 프로젝트 출발점으로 활용 가능

Preview (미리보기)

쉬운 설명: 만들고 있는 웹사이트가 실제로 어떻게 보일지 확인하는 기능
비유: 옷을 사기 전 거울에서 입어보는 것과 같습니다.

Diff (차이점)

쉬운 설명: 수정 전과 후의 차이를 보여주는 기능
표시 방법: 빨간색 = 삭제, 초록색 = 추가
왜 유용한가: 무엇이 바뀌었는지 명확히 알 수 있습니다.

제품 및 개발 개념

MVP, Roadmap, User Story 등 제품 전략 및 기획 단계에서 쓰이는 용어를 정리한 섹션입니다.
단순한 개발 용어가 아니라, 어떤 기능을 우선 만들고 어떻게 발전시킬지의 사고방식을 이해하는 데 도움을 줍니다.

MVP (Minimum Viable Product, 최소 기능 제품)

쉬운 설명: 꼭 필요한 기능만 있는 가장 간단한 제품
비유: 자동차를 목표로 하지만 먼저 바퀴 2개짜리 자전거를 만드는 것
왜 중요한가: 큰 투자 전, 사람들이 정말 원하는지 확인 가능

Roadmap (로드맵)

쉬운 설명: 제품을 어떤 순서로 개발할지 계획한 지도
예시: 1월 로그인 → 2월 상품 목록 → 3월 결제
비유: 여행 계획표와 같습니다.

User Story (사용자 스토리)

쉬운 설명: 사용자 입장에서 “나는 ~을 원한다”라고 쓴 짧은 문장
예시: “쇼핑몰 고객으로서, 나는 장바구니에 상품을 담고 싶다”
왜 사용하나: 개발자가 사용자 관점에서 생각할 수 있도록 돕습니다.

엔지니어링 개념

API, Refactor처럼 코드 작성과 시스템 개발에서 자주 쓰이는 핵심 개념을 다룹니다.
기술적 구현과 관련된 부분을 더 잘 이해할 수 있도록 돕습니다.

API (Application Programming Interface)

쉬운 설명: 서로 다른 프로그램이 대화할 수 있게 해주는 번역기
비유: 한국어 ↔ 영어 통역사
실제 예시: 날씨 앱이 기상청 서버에서 정보를 가져올 때

Refactor (리팩토링)

쉬운 설명: 겉모습은 같지만 내부 코드를 깔끔하게 정리하는 작업
비유: 방 정리 – 물건은 그대로지만 더 정돈됨
왜 중요한가: 수정·기능 추가가 쉬워집니다.

UI/UX 및 프론트엔드 개발

웹사이트의 겉모습과 사용자 경험을 다루는 섹션입니다.
React, Tailwind CSS, 반응형 디자인 같은 용어가 포함되어 있어, 직접 보이는 화면을 어떻게 구성하고 꾸미는지를 설명합니다.

Frontend (프론트엔드)

쉬운 설명: 사용자가 보고 만지는 웹사이트의 앞면
포함되는 것: 버튼, 메뉴, 색, 글씨체, 이미지 등
비유: 상점의 진열장

React (리액트)

쉬운 설명: 웹사이트를 조립하듯 만들 수 있는 도구 세트
왜 인기있나: 재사용성, 안정성, 글로벌 사용

Tailwind CSS (테일윈드 CSS)

쉬운 설명: 웹사이트를 꾸미기 위한 스타일 모음집
비유: 포토샵 필터
장점: 빠르고 일관된 디자인

Responsive Design (반응형 디자인)

쉬운 설명: 어떤 기기에서도 예쁘게 보이도록 설계된 디자인
비유: 크기마다 잘 맞는 액자
왜 필요한가: 모바일 사용자가 많기 때문

페이지 구조 및 내비게이션

Header, Footer, Navigation Bar처럼 웹페이지의 기본 뼈대와 이동 구조를 다룹니다.
웹사이트가 어떤 식으로 조직되고 연결되는지를 이해하는 데 필요한 개념들입니다.

쉬운 설명: 웹사이트 맨 위 영역
포함되는 것: 로고, 메뉴, 검색창, 로그인 버튼
비유: 신문의 제목 부분

쉬운 설명: 웹사이트 맨 아래 영역
포함되는 것: 연락처, 회사 정보, 약관, 개인정보처리방침
비유: 책의 마지막 페이지

쉬운 설명: 다른 페이지로 이동하는 메뉴
비유: 건물 안내판, 지하철 노선도
예시: 홈, 소개, 상품, 고객센터

쉬운 설명: 현재 위치한 페이지의 경로 표시
예시: 홈 > 전자제품 > 스마트폰 > 아이폰
이름의 유래: 헨젤과 그레텔의 빵 부스러기

사용자 인터랙션 요소

Button, Modal, Toast 등 사용자가 직접 만지는 요소들을 설명합니다.
클릭, 입력, 알림 등 실제 인터랙션 경험과 연결되는 부분입니다.

Button (버튼)

쉬운 설명: 클릭 시 동작이 일어나는 요소
종류: 제출(회원가입), 이동(자세히 보기), 행동(좋아요)

쉬운 설명: 웹페이지 위에 뜨는 작은 창
언제 나오나: 로그인, 확인 메시지, 상세 정보 표시
비유: 팝업창

Toast (토스트)

쉬운 설명: 화면 구석에 잠깐 나타나는 알림
예시: “저장되었습니다”, “오류 발생”
이름의 유래: 토스터에서 빵 튀어나오듯

쉬운 설명: 마우스를 올리면 뜨는 도움말
예시: “?” 아이콘 → “도움말 클릭하세요”
언제 사용하나: 화면을 복잡하게 만들고 싶지 않을 때

양식 및 입력 요소

Form, Input Field, Checkbox 등 사용자가 정보를 입력하거나 선택하는 도구를 정리한 섹션입니다.
회원가입, 로그인, 문의하기 같은 기능의 기본 구성요소를 이해할 수 있습니다.

Form (양식)

쉬운 설명: 사용자가 정보를 입력하는 칸들의 모음
예시: 회원가입, 문의하기
포함되는 것: 입력칸, 버튼, 체크박스

Input Field (입력 필드)

쉬운 설명: 텍스트 입력 상자
종류: 한 줄(이름), 여러 줄(메모)

Checkbox (체크박스)

쉬운 설명: 여러 개 선택 가능한 작은 상자
예시: 이용약관 동의, 뉴스레터 구독

Radio Button (라디오 버튼)

쉬운 설명: 여러 선택지 중 하나만 고르는 버튼
예시: 성별(남/여), 결제 방법(카드/계좌이체)
이름의 유래: 옛날 라디오 주파수 버튼

백엔드 및 데이터베이스

Backend, Database, Supabase, Authentication 같은 보이지 않는 서버 영역을 설명합니다.
데이터 저장, 보안, 인증 같은 핵심 기능들이 어떻게 작동하는지 개념을 잡을 수 있습니다.

Backend (백엔드)

쉬운 설명: 사용자 눈에 보이지 않는 데이터 처리 영역
비유: 레스토랑의 주방
하는 일: 정보 저장, 로그인 확인, 데이터 계산

Database (데이터베이스)

쉬운 설명: 정보를 체계적으로 저장하는 디지털 창고
비유: 도서관
저장 내용: 사용자 정보, 상품, 주문 내역

Supabase (수파베이스)

쉬운 설명: 백엔드 구축을 쉽게 도와주는 서비스
비유: 집 기초공사를 대신하는 업체
제공 기능: DB, 로그인, 파일 저장, 보안

Authentication (인증)

쉬운 설명: “너 누구야?” 확인하는 과정
방법: ID/비밀번호, 소셜 로그인, 생체 인식
왜 필요한가: 개인정보 보호

디자인 스타일 및 트렌드

Minimalism, Dark Mode, Glassmorphism 같은 디자인 철학과 유행을 소개합니다.
단순히 기능이 아니라, 웹사이트가 어떤 느낌과 분위기를 줄지 결정하는 요소입니다.

Minimalism (미니멀리즘)

쉬운 설명: 단순함을 추구하는 디자인 철학
특징: 흰 배경, 간단한 글씨, 적은 색
예시: 애플 사이트, 구글 검색

Dark Mode (다크 모드)

쉬운 설명: 검은 배경, 흰 글씨 디자인
장점: 눈 피로 감소, 배터리 절약, 세련된 느낌
언제 사용하나: 밤, 개발 시

Glassmorphism (글래스모피즘)

쉬운 설명: 반투명 유리 같은 효과
특징: 뿌연 배경, 투명감, 부드러운 그림자
비유: 샤워실 유리문

성능 및 최적화

Loading, SEO처럼 웹사이트의 속도와 검색 노출에 영향을 주는 개념들을 다룹니다.
사용자 경험을 개선하고 더 많은 유입을 얻는 데 중요한 포인트입니다.

Loading (로딩)

쉬운 설명: 데이터를 불러오는 중이라는 표시
종류: 스피너, 진행바, 스켈레톤

SEO (검색 엔진 최적화)

쉬운 설명: 구글에서 상위 노출되게 하는 작업
방법: 명확한 제목, 좋은 콘텐츠, 빠른 속도
왜 중요한가: 더 많은 사용자 유입

보안

HTTPS, Password 등 사용자 정보를 안전하게 지키는 개념을 설명합니다.
서비스 신뢰성과 직결되는 중요한 요소들이 포함됩니다.

HTTPS

쉬운 설명: 인터넷에서 정보를 안전하게 주고받는 방법
확인 방법: 주소창 https:// + 자물쇠 아이콘
왜 중요한가: 개인정보 보호

Password (비밀번호)

쉬운 설명: 계정을 지키는 비밀 문자
좋은 비밀번호: 8자 이상, 대소문자+숫자+특수문자
나쁜 비밀번호: “123456”, “password”, 생년월일

이 용어집을 참고하면 Lovable에서 AI와 소통할 때 더 정확하고 효과적인 프롬프트를 작성할 수 있습니다.

읽어주셔서 감사합니다 🧸