용어집

Lovable 기능, UI/UX 용어, frontend 및 backend 개념, Supabase 용어, 디자인 패턴에 대한 정의.

일반 개념

AI (Artificial Intelligence): 기계, 특히 컴퓨터 시스템에 의한 인간 지능 프로세스의 시뮬레이션으로, 학습, 추론, 문제 해결과 같은 작업을 가능하게 합니다.
Prompt: AI 모델이 출력을 생성하거나 특정 작업을 수행하도록 안내하는 텍스트 또는 입력. Lovable의 핵심 기능 내에 있으며, 프롬프트로 애플리케이션의 특정 컴포넌트나 요소를 생성하고 수정합니다.

Lovable 관련 용어

Plan mode: Lovable은 단순히 코드를 생성하는 것을 넘어 개발의 모든 단계를 안내하는 인터랙티브 어시스턴트가 됩니다. 창업자들이 비판적으로 생각하고, 효과적으로 계획하고, 지능적으로 디버깅하고, 자신 있게 배포할 수 있도록 도와줍니다.
Edit Mode: 콘텐츠나 코드를 변경하거나 수정하는 작업.
Edit: Tailwind 네이티브 비주얼 컨트롤을 사용한 AI 기반 개발을 통해 쉽게 다듬을 수 있는 도구.
History: 시간에 따른 앱과 코드의 변경 사항을 추적하고 관리하는 시스템.
Knowledge: 앱과 함께 발전하는 살아있는 문서에서 필수적인 프로젝트 세부 정보를 캡처합니다.
Labs: 새롭거나 혁신적이거나 개발 중인 기능을 테스트하고 선보이는 Lovable 내의 실험적 기능. 언제든지 수정되거나 제거될 수 있습니다.
Remix: 기존의 공개 프로젝트나 자신의 프로젝트를 리믹스할 수 있습니다. 리믹스를 통해 프로젝트의 현재 상태를 시작점으로 재사용하고 그 위에 빌드할 수 있습니다. 원본 버전을 보존하면서 새로운 아이디어를 탐색하거나, 조정하거나, 다른 변경 사항으로 반복하는 좋은 방법입니다. Supabase가 연결된 경우 프로젝트를 리믹스할 수 없습니다.
Preview: 사용자가 콘텐츠나 기능이 최종 확정되거나 게시되기 전에 인터랙티브 방식으로 라이브로 보거나 경험할 수 있게 합니다.
Diff: 파일이나 코드의 두 버전 간의 차이를 보여주는 비교.
/index: 종종 "index.html" 또는 "index.js"로 명명되는 웹사이트나 앱의 메인 또는 기본 페이지를 지칭합니다.
Lovable API - Build with URL: Lovable API Build with URL 기능을 사용하면 URL 파라미터를 통해 프롬프트와 이미지를 전달하여 프로그래밍 방식으로 애플리케이션을 만들 수 있습니다. 이를 통해 웹사이트, 내부 도구 또는 자동화 워크플로우와 원활하게 통합하여 사용자가 한 번의 클릭으로 Lovable 앱을 생성할 수 있습니다.

제품 & 개발 개념

제품 관리 & 전략

MVP (Minimum Viable Product) – 본격적인 개발 전에 아이디어를 검증하고 얼리 어답터를 만족시키기에 충분한 기능만 갖춘 제품 버전.
Roadmap – 시간에 따른 제품의 비전, 방향, 계획된 기능을 설명하는 상위 수준의 전략적 계획.
Feature Request – 사용자나 이해관계자가 제품에 새로운 기능을 요청하는 공식적 또는 비공식적 제안.
User Story – 최종 사용자의 관점에서 작성된 기능이나 요구 사항에 대한 짧고 간단한 설명.
User Journey: 사용자가 제품이나 서비스 내에서 특정 목표를 달성하기 위해 거치는 일련의 단계.
Persona: 디자인 및 개발 결정을 안내하기 위해 연구를 기반으로 한 대상 사용자의 가상 표현.

엔지니어링 개념

PRD (Product Requirements Document): 개발을 안내하기 위해 제품의 목표, 기능, 사양을 설명하는 종합 문서.
API (Application Programming Interface): 서로 다른 서비스가 통신하는 방법. 시스템 간에 어떤 종류의 정보를 주고받을 수 있는지 알려주는 프로토콜로 생각하세요. 가장 일반적인 유형은 많은 사이트에서 사용하는 REST API와 데이터 쿼리에 더 유연한 접근 방식을 제공하는 GraphQL API입니다.
Refactor: 가독성, 유지 관리성 또는 성능을 개선하기 위해 외부 동작을 변경하지 않고 기존 코드를 재구조화하는 프로세스.
GitHub: Git을 사용한 버전 관리 및 협업 소프트웨어 개발을 위한 웹 기반 플랫폼.

데이터 & 분석

A/B Testing – 사용자 행동을 기반으로 어떤 버전이 더 나은 성능을 보이는지 확인하기 위해 웹페이지나 기능의 두 버전을 비교하는 방법.
Conversion Rate – 가입이나 구매와 같은 원하는 작업을 완료한 사용자의 비율.
Churn Rate – 특정 기간 동안 제품 사용을 중단한 사용자의 비율.
Retention Rate – 시간이 지남에 따라 제품을 계속 사용하는 사용자의 비율.
Event Tracking – 행동 및 참여에 대한 인사이트를 수집하기 위해 특정 사용자 작업(예: 버튼 클릭, 폼 제출)을 모니터링.

UI/UX 및 frontend 개발 플레이북

Frontend 개발

Frontend: 사용자가 직접 상호 작용하는 소프트웨어 애플리케이션의 부분으로, 사용자 인터페이스와 사용자 경험 요소를 포함.
React: Facebook이 개발한 사용자 인터페이스, 특히 단일 페이지 애플리케이션을 구축하기 위한 JavaScript 라이브러리.
Gradient: 디자인에서 두 개 이상의 색상이나 음영 사이의 점진적인 전환.
Tailwind CSS: 포괄적인 사전 정의된 클래스 세트를 제공하는 오픈 소스 유틸리티 우선 CSS 프레임워크로, 개발자가 이러한 유틸리티 클래스를 요소에 적용하여 HTML 내에서 직접 커스텀 디자인을 구축할 수 있게 합니다.
Design Systems: 제품이나 브랜드 전반에 걸쳐 디자인의 일관성과 응집성을 보장하는 재사용 가능한 컴포넌트, 가이드라인, 표준의 모음.

UI/UX 디자인 개념

Accent Color: 디자인에서 핵심 요소를 강조하기 위해 사용되는 독특한 색조로, 종종 브랜드의 기본 색상과 일치하거나 보완하여 시각적 흥미를 높입니다.
Theme: 애플리케이션이나 웹사이트의 전체적인 미학과 사용자 경험을 정의하는 색상, 폰트, 레이아웃을 포함한 일관된 디자인 선택 세트.
Responsive Design: 다양한 장치 크기와 방향에서 콘텐츠가 원활하게 적응하여 최적의 사용자 경험을 제공하는 웹 디자인 접근 방식.
Above the Fold: 스크롤 없이 사용자에게 보이는 웹페이지의 부분으로, 주의를 끌고 필수 정보를 즉시 전달하는 데 중요합니다.
CTA (Call to Action): "가입" 또는 "자세히 알아보기"와 같은 특정 작업을 수행하도록 사용자를 유도하는 버튼이나 링크 형태의 프롬프트.

페이지 구조 & 탐색

Headings (Titles): 콘텐츠 섹션을 소개하고 구성하는 텍스트 요소로, 일반적으로 다양한 수준(예: H1, H2)으로 형식화되어 명확한 콘텐츠 계층을 설정합니다.
Footer: 연락처 정보, 탐색 링크, 법적 고지 사항과 같은 보충 정보를 포함하는 웹페이지의 하단 섹션.
Breadcrumb: 사이트 계층 내에서 사용자의 현재 위치를 표시하는 탐색 보조 도구로, 종종 가로 링크 목록으로 표시됩니다.
Favicon – 브라우저 탭, 북마크, 검색 결과에 표시되는 작은 아이콘으로, 일반적으로 브랜드나 웹사이트를 나타냅니다.
Meta Title (Title Tag) – 검색 엔진 결과와 브라우저 탭에 나타나는 웹페이지의 제목으로, SEO와 사용자 클릭률에 영향을 미칩니다.
Meta Description – 검색 엔진 결과에 표시되는 웹페이지 콘텐츠의 짧은 요약으로, 검색 가능성과 사용자 참여를 개선하는 것을 목표로 합니다.
Canonical URL – 검색 엔진 인덱싱에서 중복 콘텐츠 문제를 피하기 위해 웹페이지의 선호 버전을 지정하는 데 사용되는 태그.
URL Slug – 읽기 쉬운 형식으로 특정 페이지를 식별하는 URL의 일부 (예: example.com/product-name).
Sitemap – 검색 엔진이 효율적으로 인덱싱하도록 돕는 웹사이트 페이지 목록을 제공하는 구조화된 파일 (XML 또는 HTML).
Navigation Bar (Nav Bar) – 쉬운 탐색을 위해 웹사이트의 필수 섹션에 대한 링크를 제공하는 가로 또는 세로 메뉴.
Skip Links – 사용자가 반복적인 콘텐츠를 건너뛰고 메인 콘텐츠로 직접 이동할 수 있게 하는 숨겨진 링크로, 접근성을 개선합니다.
Pagination – 사용자 경험을 개선하기 위해 블로그, 검색 결과, 제품 목록에서 일반적으로 사용되는 콘텐츠를 여러 페이지로 나누는 방법.
Anchor Link – 새 페이지를 로드하는 대신 같은 페이지 내의 특정 섹션으로 사용자를 안내하는 하이퍼링크.
404 Page – 사용자가 존재하지 않는 URL에 접근하려고 할 때 표시되는 커스텀 오류 페이지로, 관련 콘텐츠로 안내합니다.

알림 & 피드백 요소

Toast: 작업 결과를 알리거나 간단한 피드백을 제공하기 위해 일시적으로 나타나는 짧고 방해가 되지 않는 알림.
Snackbar – Toast와 유사하지만 일반적으로 화면 하단에 위치하며 선택적 작업이 있습니다 (예: 삭제된 항목에 대한 "실행 취소").
Tooltip – 요소 위에 마우스를 올리거나 포커스할 때 추가 정보를 제공하는 작은 팝업 상자.
Badge – 알림, 카운트 또는 상태 업데이트를 표시하기 위해 아이콘이나 버튼에 자주 사용되는 작은 시각적 표시기.
Loading Spinner (Loader) – 페이지 로딩이나 폼 제출과 같이 진행 중인 프로세스를 나타내는 시각적 표시기.
Progress Bar – 작업이나 프로세스의 완료 비율을 나타내는 가로 막대.
Skeleton Loader – 최종 콘텐츠가 로드되기를 기다리는 동안 레이아웃을 모방하는 플레이스홀더 UI로, 인지된 성능을 개선합니다.

오버레이 & 팝업

Popover: 특정 UI 요소와 관련된 추가 정보나 옵션을 제공하는 일시적인 오버레이로, 일반적으로 사용자 상호 작용 시 나타납니다.
Dialog (Modal): 사용자의 주의를 끌기 위해 메인 콘텐츠 앞에 나타나는 창으로, 종종 기본 인터페이스로 돌아가기 전에 작업이 필요합니다.
Drawer (Sidebar Panel) – 메인 콘텐츠를 방해하지 않고 탐색 옵션이나 설정을 표시하기 위해 화면 측면에서 슬라이드되어 나오는 패널.
Lightbox – 포커스를 위해 배경을 어둡게 하면서 이미지나 미디어를 확대된 보기로 표시하는 모달 창.
Alert Box – 오류나 경고와 같은 중요한 정보를 사용자에게 알리는 시스템 생성 또는 애플리케이션 트리거 메시지 상자.

탐색 & 선택 요소

Button: 폼 제출이나 대화 상자 열기와 같은 작업이나 이벤트를 시작하는 클릭 가능한 요소.
Switch (Toggle): 종종 물리적 스위치와 유사하게 사용자가 켜기 또는 끄기와 같은 두 상태 사이를 전환할 수 있게 하는 토글 컨트롤.
Tabs – 단일 인터페이스 내에서 콘텐츠를 별도의 보기로 구성하여 사용자가 탐색하지 않고 섹션 간에 전환할 수 있게 하는 컴포넌트.
Stepper (Wizard) – 다단계 프로세스에 사용되는 컴포넌트로, 사용자에게 현재 단계를 보여주고 완료까지 안내합니다.
Pagination – 콘텐츠를 페이지로 나누는 UI 패턴으로, 검색 결과나 콘텐츠가 많은 애플리케이션에서 자주 사용됩니다.
Breadcrumb – 사이트 계층 내에서 사용자의 현재 위치를 표시하는 탐색 보조 도구로, 종종 가로 링크 목록으로 표시됩니다.
Accordion – 콘텐츠를 동적으로 표시하거나 숨기기 위해 확장되거나 축소되는 접을 수 있는 섹션.
Dropdown Menu – 사용자가 버튼이나 필드를 클릭하거나 마우스를 올릴 때 나타나는 옵션 목록으로, 탐색이나 선택에 자주 사용됩니다.

폼 & 입력 요소

Form: 연락처 정보나 검색 쿼리와 같은 데이터를 제출할 수 있게 하는 구조화된 입력 필드 모음.
Radio Group: 사용자가 여러 선택 항목 중 하나만 선택할 수 있게 하는 관련 라디오 버튼 세트.
Checkbox: 세트 내에서 여러 선택이 가능하도록 옵션을 선택하거나 선택 해제하기 위해 사용자가 체크하거나 체크 해제할 수 있는 인터랙티브 상자.
Text Field (Input Field) – 검색 바, 로그인 폼, 댓글 등에서 사용자가 텍스트를 입력할 수 있는 기본 UI 요소.
Text Area – 메시지나 피드백 폼에서 일반적으로 사용되는 여러 줄 텍스트 입력을 위해 설계된 더 큰 입력 필드.
Select (Dropdown Select Box) – 사용자가 미리 정의된 목록에서 하나의 옵션을 선택할 수 있게 하는 UI 요소로, 종종 드롭다운으로 스타일링됩니다.
Date Picker – 수동으로 입력하는 대신 캘린더에서 날짜를 선택할 수 있게 하는 UI 요소.
Slider (Range Selector) – 트랙을 따라 핸들을 슬라이드하여 범위 내에서 값을 설정할 수 있게 하는 컨트롤.
File Upload Field – 사용자가 장치에서 파일을 선택하고 업로드할 수 있게 하는 컴포넌트.
Autocomplete (Typeahead Search) – 사용자가 입력할 때 일치하는 결과를 동적으로 제안하여 검색의 사용성을 개선하는 텍스트 입력.

디자인 스타일 & 트렌드

달성하려는 특정 스타일을 설명하기 위해 모든 프롬프트에서 이러한 용어를 사용할 수 있습니다.

Neobrutalism: 20세기 중반 브루탈리스트 건축에서 영감을 받아 가공되지 않은, 다듬어지지 않은 요소, 대담한 타이포그래피, 높은 대비가 특징인 웹 디자인 트렌드.
Retro: 향수와 빈티지 미학을 불러일으키는 과거 수십 년의 스타일, 모티프, 요소를 통합한 디자인.
Hacker: DIY 및 오픈 소스 문화를 반영하는 미학으로, 종종 고정폭 폰트, 어두운 배경, 터미널에서 영감을 받은 인터페이스가 특징입니다.
Glass (Glassmorphism): 깊이를 만들기 위해 미묘한 그림자와 테두리가 있는 반투명한 서리 유리 같은 요소를 사용하는 디자인 스타일.
Nudy: 부드럽고 절제된 미학을 만들기 위해 누드 또는 뉴트럴 색상 팔레트를 활용하는 미니멀리스트 디자인 접근 방식.

디자인 & 에셋 리소스

21st.dev: Tailwind CSS와 Radix UI로 구동되는 미니멀하고 현대적이며 재사용 가능한 React UI 컴포넌트를 제공하는 오픈 소스 커뮤니티 레지스트리로, 디자인 엔지니어가 세련된 사용자 인터페이스를 더 효율적으로 배포할 수 있도록 설계되었습니다.
Dribble: 디자이너와 크리에이티브 전문가들이 작업을 선보이고, 디자인 영감을 발견하고, 잠재 고객이나 협력자와 연결하는 선도적인 온라인 커뮤니티.
Noun Project: 다양한 프로젝트에 시각적 리소스에 접근할 수 있게 하는 무료 아이콘과 스톡 사진의 방대한 컬렉션을 제공하는 플랫폼.
SVG Repo: 500,000개 이상의 오픈 라이선스 SVG 벡터와 아이콘의 종합 라이브러리로, 다양한 프로젝트에 적합한 그래픽을 검색, 탐색, 편집, 다운로드할 수 있습니다.
Google Fonts: 디자이너와 개발자에게 프로젝트를 향상시키기 위한 다양한 타이포그래피 옵션을 제공하는 웹 최적화 폰트의 무료 라이브러리.
Typewolf: 트렌딩 서체를 선보이고 큐레이팅된 폰트 목록을 제공하여 디자이너가 프로젝트에 완벽한 폰트 조합을 선택하는 것을 돕는 리소스.

Backend 개발 & 데이터베이스

Backend 기초

Backend: 데이터 처리, 저장, 비즈니스 로직을 처리하는 애플리케이션의 서버 측 인프라.
Supabase: Postgres 데이터베이스, 인증, 즉각적인 API, 실시간 기능을 제공하는 오픈 소스 backend-as-a-service 플랫폼.
Webhooks – 특정 작업이 발생할 때 외부 애플리케이션에 알리는 이벤트 기반 HTTP 콜백.

데이터베이스 관리 & 쿼리

CRUD (Create, Read, Update, Delete): 데이터베이스나 애플리케이션에서 데이터에 수행되는 네 가지 기본 작업.
SQL (Structured Query Language): 관계형 데이터베이스를 관리하고 조작하기 위해 설계된 도메인 특화 프로그래밍 언어로, 쿼리, 업데이트, 데이터 구성과 같은 작업을 가능하게 합니다.
PostgreSQL – 확장성, 확장 가능성, ACID 준수로 알려진 강력한 오픈 소스 관계형 데이터베이스.

Supabase 관련 개념

Edge Function: 사용자와 가까운 엣지에 전역으로 배포된 서버 측 TypeScript 함수. webhook을 수신하거나 Supabase 프로젝트를 Stripe, Anthropic, Resend와 같은 타사와 통합하는 데 사용할 수 있습니다.
RLS (Row-Level Security): 사용자 역할이나 속성을 기반으로 테이블의 특정 행에 대한 접근을 제어할 수 있는 데이터베이스 기능 - 기본적으로 사용자가 세분화된 권한 부여 규칙을 설정할 수 있게 하여 고유한 비즈니스 요구에 맞는 복잡한 SQL 규칙을 작성할 수 있습니다.
Storage: 이미지, 비디오, 문서 및 기타 파일 유형과 같은 데이터를 저장하고 관리하는 서비스 또는 시스템.
Bucket: Supabase Storage에서 버킷은 파일과 폴더를 구성하고, 접근 모델(공개 또는 비공개)을 결정하고, 최대 파일 크기 및 허용된 콘텐츠 유형과 같은 업로드 제한을 설정하는 별도의 컨테이너입니다.
Endpoint: Supabase의 맥락에서 endpoint는 클라이언트가 RESTful API 호출을 통해 데이터베이스와 상호 작용할 수 있게 하는 특정 URL을 말하며, 데이터 생성, 읽기, 업데이트 또는 삭제 작업을 가능하게 합니다.
Authentication Provider: 사용자 자격 증명을 확인하여 애플리케이션이나 시스템에 대한 안전한 접근을 가능하게 하는 엔티티 또는 서비스. Supabase의 맥락에서 인증 제공자는 비밀번호 기반 로그인, 매직 링크, 일회용 비밀번호(OTP), 소셜 로그인, 싱글 사인온(SSO) 통합과 같은 다양한 방법을 포함하여 유연하고 안전한 사용자 인증을 용이하게 합니다.

보안 & 인증

OAuth – 사용자가 Google, Facebook, GitHub와 같은 타사 서비스를 사용하여 애플리케이션에 로그인할 수 있게 하는 널리 사용되는 인증 프로토콜.
Two-Factor Authentication (2FA) – 계정에 접근하기 전에 사용자가 두 가지 형태의 신원 확인을 제공하도록 요구하는 보안 조치.
CORS (Cross-Origin Resource Sharing) – 어떤 웹사이트나 애플리케이션이 서버의 리소스에 접근할 수 있는지 제어하는 보안 정책.

On this page