Lovable 개발 용어집
본 포스트는 Lovable을 효과적으로 탐색하고 사용하기 위해, 그리고 바이브코딩을 효과적으로 수행하기 위해 필요한 핵심 개발 용어들을 쉽게 설명합니다.
일반 개념
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처럼 웹페이지의 기본 뼈대와 이동 구조를 다룹니다.
웹사이트가 어떤 식으로 조직되고 연결되는지를 이해하는 데 필요한 개념들입니다.
Header (헤더)
- 쉬운 설명: 웹사이트 맨 위 영역
- 포함되는 것: 로고, 메뉴, 검색창, 로그인 버튼
- 비유: 신문의 제목 부분
Footer (푸터)
- 쉬운 설명: 웹사이트 맨 아래 영역
- 포함되는 것: 연락처, 회사 정보, 약관, 개인정보처리방침
- 비유: 책의 마지막 페이지
Navigation Bar (내비게이션 바)
- 쉬운 설명: 다른 페이지로 이동하는 메뉴
- 비유: 건물 안내판, 지하철 노선도
- 예시: 홈, 소개, 상품, 고객센터
Breadcrumb (브레드크럼)
- 쉬운 설명: 현재 위치한 페이지의 경로 표시
- 예시: 홈 > 전자제품 > 스마트폰 > 아이폰
- 이름의 유래: 헨젤과 그레텔의 빵 부스러기
사용자 인터랙션 요소
Button, Modal, Toast 등 사용자가 직접 만지는 요소들을 설명합니다.
클릭, 입력, 알림 등 실제 인터랙션 경험과 연결되는 부분입니다.
Button (버튼)
- 쉬운 설명: 클릭 시 동작이 일어나는 요소
- 종류: 제출(회원가입), 이동(자세히 보기), 행동(좋아요)
Modal (모달)
- 쉬운 설명: 웹페이지 위에 뜨는 작은 창
- 언제 나오나: 로그인, 확인 메시지, 상세 정보 표시
- 비유: 팝업창
Toast (토스트)
- 쉬운 설명: 화면 구석에 잠깐 나타나는 알림
- 예시: "저장되었습니다", "오류 발생"
- 이름의 유래: 토스터에서 빵 튀어나오듯
Tooltip (툴팁)
- 쉬운 설명: 마우스를 올리면 뜨는 도움말
- 예시: "?" 아이콘 → "도움말 클릭하세요"
- 언제 사용하나: 화면을 복잡하게 만들고 싶지 않을 때
양식 및 입력 요소
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와 소통할 때 더 정확하고 효과적인 프롬프트를 작성할 수 있습니다.
읽어주셔서 감사합니다 🧸
