용어집

​

주요 개념

• 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 (교차 출처 리소스 공유): 서버의 리소스가 다른 도메인에서 어떻게 접근될 수 있는지를 제어하는 보안 메커니즘입니다.