> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lumi.new/llms.txt
> Use this file to discover all available pages before exploring further.

# 용어집

> Lumi를 효과적으로 탐색하고 빌드하는 데 필요한 주요 용어를 이해하세요.

## 주요 개념

* AI (인공 지능): 기계가 인간의 지능을 시뮬레이션하여 학습, 추론, 문제 해결을 할 수 있게 하는 기술입니다.
* 프롬프트: AI 모델에 지시를 내리는 데 사용되는 텍스트 기반 명령어입니다. Lumi 내에서 프롬프트는 애플리케이션의 모든 구성 요소를 생성하고 수정하는 데 사용하는 기본 도구입니다.

## Lumi 관련 용어

* **Discuss 모드:** 단순한 코드 생성기를 넘어, Lumi는 대화형 개발 파트너 역할을 합니다. 계획, 디버깅, 배포 과정을 안내하여 자신감을 갖고 빌드할 수 있도록 돕습니다.
* **Edit 모드:** 애플리케이션의 코드와 콘텐츠를 직접 변경하는 환경입니다.
* **Edit:** Tailwind 네이티브 시각적 컨트롤을 갖춘 AI 기반 도구로, 정밀하고 직관적인 미세 조정을 지원합니다.
* **Remix:** 모든 프로젝트를 복제하여 새로운 시작점으로 사용할 수 있습니다. Remix를 사용하면 원본 버전을 보존하면서 변경 사항을 실험하고 아이디어를 탐색할 수 있습니다.
* **Preview:** 변경 사항을 게시하기 전에 기능과 콘텐츠를 테스트할 수 있는 실시간 대화형 보기입니다.

## 제품 및 개발

### **제품 관리 및 전략**

* **MVP (최소 기능 제품):** 초기 사용자를 유치하고 핵심 아이디어를 검증하기에 충분한 최소한의 기능만 갖춘 가장 간단한 버전의 제품입니다.
* **로드맵:** 제품의 비전, 방향 및 향후 기능을 시간에 따라 개괄적으로 설명하는 상위 수준의 계획입니다.
* **기능 요청:** 사용자나 이해관계자가 제안하는 새로운 기능이나 개선 사항입니다.
* **사용자 스토리:** 최종 사용자의 관점에서 작성된 간단하고 간결한 기능 설명입니다.
* **사용자 여정:** 사용자가 제품 내에서 목표를 달성하기 위해 거치는 경로입니다.
* **페르소나:** 디자인 및 개발 결정을 안내하기 위해 연구를 통해 생성된, 대상 사용자에 대한 상세하고 가상적인 프로필입니다.

### **엔지니어링 개념**

* **PRD (제품 요구사항 명세서):** 개발팀을 안내하기 위해 제품의 목적, 기능 및 기술 사양을 상세히 기술한 문서입니다.
* **API (애플리케이션 프로그래밍 인터페이스):** 서로 다른 소프트웨어 애플리케이션이 통신하고 데이터를 교환할 수 있도록 하는 규칙 집합입니다. 일반적인 유형으로는 REST 및 GraphQL API가 있습니다.
* **리팩터:** 코드의 기능을 변경하지 않고 품질과 유지보수성을 향상시키기 위해 코드를 재구성하는 과정입니다.
* **GitHub:** 버전 관리 및 협업 소프트웨어 개발을 위한 인기 있는 플랫폼입니다.

### **데이터 및 분석**

* **A/B 테스트:** 웹페이지나 기능의 두 가지 버전을 비교하여 어느 것이 더 나은 성과를 내는지 확인하는 것입니다.
* **전환율:** 가입이나 구매와 같은 특정 목표를 완료한 사용자의 비율입니다.
* **이탈률:** 특정 기간 동안 제품 사용을 중단한 사용자의 비율입니다.
* **유지율:** 시간이 지나도 제품을 계속 사용하는 사용자의 비율입니다.
* **이벤트 추적:** 참여도를 이해하기 위해 특정 사용자 행동(클릭 또는 양식 제출 등)을 모니터링하는 것입니다.

## **UI/UX 및 프론트엔드 개발**

### **프론트엔드 개발**

* **프론트엔드:** 사용자가 보고 상호작용하는 애플리케이션의 부분으로, 사용자 인터페이스와 전반적인 경험을 포함합니다.
* **React:** 동적 사용자 인터페이스, 특히 단일 페이지 애플리케이션을 구축하기 위한 인기 있는 JavaScript 라이브러리입니다.
* **그라데이션:** 두 가지 이상의 색상 사이의 부드러운 전환입니다.
* **Tailwind CSS:** HTML에서 직접 맞춤형 디자인을 신속하게 구축하기 위한 유틸리티 우선 CSS 프레임워크입니다.
* **디자인 시스템:** 제품 전반에 걸쳐 디자인 일관성을 보장하는 재사용 가능한 구성 요소 및 가이드라인의 표준화된 모음입니다.

### **UI/UX 디자인 개념**

* **강조 색상:** 버튼이나 링크와 같은 주요 요소를 강조하는 데 사용되는 대조적인 색상입니다.
* **테마:** 색상 구성, 타이포그래피, 레이아웃으로 정의되는 애플리케이션의 전반적인 모양과 느낌입니다.
* **반응형 디자인:** 데스크톱에서 모바일 폰에 이르기까지 모든 기기에서 애플리케이션이 멋지게 보이고 잘 작동하도록 보장하는 접근 방식입니다.
* **Above the Fold:** 스크롤하지 않고 웹페이지에서 볼 수 있는 콘텐츠입니다. 중요한 정보를 위한 최적의 공간입니다.
* **CTA (콜투액션):** 사용자가 특정 행동("가입하기", "지금 구매")을 하도록 유도하는 버튼이나 링크와 같은 프롬프트입니다.

### **페이지 구조 및 탐색**

* **헤딩:** 콘텐츠를 구조화하고 명확한 시각적 계층을 설정하는 제목(H1, H2 등)입니다.
* **푸터:** 웹페이지 하단 섹션으로, 일반적으로 링크, 연락처 정보, 법적 고지가 포함됩니다.
* **브레드크럼:** 사이트에서 사용자의 현재 위치를 보여주는 탐색 경로입니다(예: 홈 > 제품 > 노트북).
* **파비콘:** 브라우저 탭이나 북마크에서 웹사이트를 나타내는 작은 아이콘입니다.
* **메타 제목:** 검색 엔진 결과 및 브라우저 탭에 표시되는 페이지 제목으로, SEO에 매우 중요합니다.
* **메타 설명:** 클릭을 유도하기 위해 검색 결과에 표시되는 웹페이지의 짧은 요약입니다.
* **캐노니컬 URL:** 중복 콘텐츠 문제를 피하기 위해 검색 엔진에 페이지의 선호 버전을 알려주는 태그입니다.
* **URL 슬러그:** 특정 페이지를 식별하는 URL의 사용자 친화적인 부분입니다(예: `/about-us`).
* **사이트맵:** 검색 엔진이 웹사이트의 모든 페이지를 효과적으로 인덱싱하는 데 도움이 되도록 나열한 파일입니다.
* **탐색 모음 (네비게이션 바):** 웹사이트의 주요 섹션으로 연결되는 링크를 제공하는 주 메뉴입니다.
* **스킵 링크:** 사용자가 탐색을 건너뛰고 주 콘텐츠로 바로 이동할 수 있게 하는 접근성 링크입니다.
* **페이지네이션:** 긴 콘텐츠 목록을 여러 페이지로 나누는 시스템입니다.
* **앵커 링크:** 사용자를 동일한 페이지의 특정 섹션으로 스크롤하는 링크입니다.
* **404 페이지:** 사용자가 존재하지 않는 URL에 접근하려고 할 때 표시되는 맞춤형 오류 페이지입니다.

### **알림 및 피드백**

* **토스트:** 작업에 대한 간략한 피드백을 제공하는 작고 일시적인 알림입니다.
* **스낵바:** 토스트와 유사하지만, 종종 화면 하단에 나타나며 "실행 취소"와 같은 작업 버튼을 포함할 수 있습니다.
* **툴팁:** 요소 위에 마우스를 올렸을 때 나타나는 추가 정보가 담긴 팝업 상자입니다.
* **배지:** 아이콘이나 버튼에 개수, 상태 또는 알림을 나타내는 작은 시각적 표시입니다.
* **로딩 스피너:** 백그라운드에서 프로세스가 실행 중임을 나타내는 애니메이션 아이콘입니다.
* **진행률 표시줄:** 작업의 완료 진행 상황을 보여주는 시각적 막대입니다.
* **스켈레톤 로더:** 최종 콘텐츠의 레이아웃을 모방하여 로딩 속도에 대한 인식을 개선하는 플레이스홀더 UI입니다.

### **오버레이 및 팝업**

* **팝오버:** 특정 요소와 관련된 추가적인 맥락이나 옵션을 제공하는 오버레이입니다.
* **다이얼로그 (모달):** 주 콘텐츠 위에 나타나며, 닫으려면 사용자 상호작용이 필요한 창입니다.
* **드로어 (사이드바 패널):** 일반적으로 탐색이나 설정을 포함하며 측면에서 슬라이드되어 들어오는 패널입니다.
* **라이트박스:** 이미지와 같은 미디어를 집중되고 확대된 보기로 표시하는 모달 창입니다.
* **알림 상자:** 사용자에게 중요한 정보, 오류 또는 경고를 알리는 시스템 메시지입니다.

### **탐색 및 선택**

* **버튼:** 작업을 트리거하는 클릭 가능한 요소입니다.
* **스위치 (토글):** 사용자가 켜기/끄기와 같은 두 가지 상태 사이를 전환할 수 있게 하는 컨트롤입니다.
* **탭:** 사용자가 전환할 수 있는 여러 보기로 콘텐츠를 구성하는 구성 요소입니다.
* **스텝퍼 (마법사):** 사용자에게 진행 상황을 보여주는 안내된 다단계 프로세스입니다.
* **아코디언:** 콘텐츠를 정리하고 표시하는 데 사용되는 일련의 접을 수 있는 패널입니다.
* **드롭다운 메뉴:** 사용자가 버튼이나 필드와 상호작용할 때 나타나는 옵션 목록입니다.

### **양식 및 입력**

* **양식:** 가입 또는 연락처 양식과 같이 사용자 데이터를 수집하기 위한 필드 집합입니다.
* **라디오 그룹:** 사용자가 하나만 선택할 수 있는 옵션 집합입니다.
* **체크박스:** 사용자가 목록에서 하나 이상의 옵션을 선택할 수 있게 하는 컨트롤입니다.
* **텍스트 필드:** 한 줄 텍스트 입력을 위한 표준 입력 상자입니다.
* **텍스트 영역:** 댓글이나 메시지와 같은 여러 줄 텍스트를 위한 더 큰 입력 상자입니다.
* **선택 (드롭다운 선택 상자):** 미리 정의된 집합에서 하나의 옵션을 선택하기 위한 드롭다운 목록입니다.
* **날짜 선택기:** 사용자가 날짜를 쉽게 선택할 수 있게 하는 캘린더 인터페이스입니다.
* **슬라이더:** 연속적인 범위에서 값을 선택하기 위한 컨트롤입니다.
* **파일 업로드:** 사용자가 자신의 기기에서 파일을 업로드할 수 있게 하는 구성 요소입니다.
* **자동 완성:** 사용자가 입력할 때 결과를 제안하는 입력 필드입니다.

### **디자인 스타일 및 트렌드**

프롬프트에 이 용어들을 사용하여 원하는 미학적 스타일을 정의하세요.

* **네오브루탈리즘:** 대담한 타이포그래피와 정제되지 않은 요소를 특징으로 하는 원초적이고 고대비의 디자인 스타일입니다.
* **레트로:** 과거 수십 년의 스타일을 사용하여 향수를 불러일으키는 디자인입니다.
* **해커:** 어두운 배경과 고정폭 글꼴을 특징으로 하는 터미널 인터페이스에서 영감을 받은 미학입니다.
* **글래스모피즘:** 반투명하고 서리가 낀 유리 같은 레이어를 사용하여 깊이감을 만드는 스타일입니다.
* **누디:** 부드럽고 중성적인 색상 팔레트를 사용하여 절제된 느낌을 주는 미니멀리스트 접근 방식입니다.

## **백엔드 개발 및 데이터베이스**

### **백엔드 기본**

* **백엔드:** 데이터, 로직 및 핵심 작업을 처리하는 애플리케이션의 서버 측입니다.
* **웹훅:** 어떤 일이 발생했을 때 앱에서 전송되는 자동화된 메시지로, 실시간 데이터 교환을 가능하게 합니다.

### **데이터베이스 관리**

* **CRUD (생성, 읽기, 업데이트, 삭제):** 데이터 관리를 위한 네 가지 기본 작업입니다.
* **SQL (구조적 쿼리 언어):** 관계형 데이터베이스에서 데이터를 관리하고 쿼리하기 위한 표준 언어입니다.
* **PostgreSQL:** 신뢰성과 고급 기능으로 알려진 강력한 오픈 소스 관계형 데이터베이스입니다.

### **보안 및 인증**

* **OAuth:** 사용자가 Google이나 GitHub와 같은 타사 계정으로 로그인할 수 있게 하는 인증 표준입니다.
* **2단계 인증 (2FA):** 사용자가 로그인하기 위해 두 가지 형태의 신원 확인을 요구하는 보안 계층입니다.
* **CORS (교차 출처 리소스 공유):** 서버의 리소스가 다른 도메인에서 어떻게 접근될 수 있는지를 제어하는 보안 메커니즘입니다.