부록 / 기타

용어 사전

낯선 말을 한글 또는 영문 첫 글자로 찾아보세요.

전체 78개 용어

개인정보 Personal Data

누군지 알아볼 수 있게 하는 이름, 연락처 등의 정보입니다.

검토용 배포 Preview Deployment

운영 사이트에 반영하기 전 확인하도록 배포한 버전입니다. AI 도구 안의 미리보기와 다르며 접근 권한은 배포 설정에 따릅니다.

결과물 패널 Artifact

Claude 대화에서 만든 문서나 웹페이지 같은 결과물을 별도 공간에서 여는 기능입니다. 이 책에서는 HTML 페이지를 확인할 때 사용합니다.

계정 Account

서비스에서 사용자를 구별하는 정보입니다. 같은 이메일을 써도 서비스별 작업이 자동 연결되지는 않습니다.

공개 저장소 Public

누구나 코드와 파일을 볼 수 있는 저장소 설정입니다. 저장소 공개와 웹사이트 배포는 별개입니다.

공개 주소 Public URL

다른 사람이 접속할 수 있는 웹 주소입니다.

권한 Permission

사용자가 어떤 자료를 보고 바꿀 수 있는지를 정한 허용 범위입니다.

깃허브 GitHub

프로젝트 파일과 변경 기록을 보관하는 서비스입니다.

내보내기 Export

현재 결과나 자료를 다른 곳에 보관할 파일로 받는 일입니다.

다운로드 Download

인터넷에 있는 파일을 내 컴퓨터로 가져오는 일입니다.

대체 텍스트 Alt Text

이미지의 의미를 글로 설명한 내용입니다. 그림을 보지 못하는 상황에서 내용을 이해하는 데 도움이 됩니다.

데이터 Data

프로그램이 다루는 자료입니다. 링크 모음에서는 제목·주소·분류가 데이터입니다.

데이터베이스 Database

링크 목록이나 게시글처럼 규칙적인 자료를 저장하고 찾는 곳입니다.

도메인 Domain

사이트를 찾을 때 쓰는 사람이 읽기 쉬운 이름입니다. 전체 URL에는 도메인 외에 경로 등이 포함될 수 있습니다.

되돌리기 Undo

실수한 변경을 이전 상태로 돌리는 일입니다.

랜딩페이지 Landing Page

방문자가 소개를 읽고 신청·문의 같은 특정 행동을 하도록 안내하는 페이지입니다.

로그인 Login

서비스가 사용자를 확인하고 그 계정으로 이용하게 하는 과정입니다.

로컬 스토리지 localStorage

같은 브라우저와 사이트 주소에서 다시 쓸 자료를 보관하는 공간입니다. 다른 기기와 자동으로 맞춰지지 않습니다.

롤백 Rollback

문제 있는 새 버전 대신 이전 정상 버전을 다시 사용하게 하는 일입니다.

루트 폴더 Root Directory

프로젝트 파일이 시작되는 기준 폴더입니다.

링크 Link

누르면 다른 페이지나 위치로 이동하는 글이나 그림입니다.

미리보기 Preview

AI 도구 안에서 만드는 중인 페이지를 열어 보는 화면입니다. 인터넷에 배포한 검토용 주소와 구분합니다. 도구에 따라 외부 링크·저장 기능이 제한될 수 있습니다.

바이브 코딩 Vibe Coding

원하는 결과를 말로 설명하고 AI의 도움을 받아 프로그램을 만드는 방식입니다.

반응형 화면 Responsive Layout

화면 너비에 맞춰 칸 수와 배치가 달라지는 화면입니다.

배포 Deploy

만든 페이지를 다른 사람이 주소로 열 수 있게 올리는 일입니다.

백업 Backup

문제가 생겼을 때 되찾을 수 있도록 자료를 다른 곳에도 보관한 것입니다.

백엔드 Backend

서버 쪽에서 요청을 처리하고 자료나 접근 권한을 확인하는 부분입니다.

버그 Bug

프로그램이 기대한 대로 움직이지 않는 문제입니다.

버셀 Vercel

프로젝트를 웹 주소로 실행할 수 있게 배포하는 서비스입니다.

버전 Version

특정 시점에 저장해 둔 결과물의 상태입니다.

변경 차이 Diff

수정하기 전과 후에 무엇이 바뀌었는지 보여주는 내용입니다.

불러오기 Import

파일 등에 보관한 자료를 현재 도구에서 다시 읽는 일입니다.

브라우저 Browser

웹페이지를 여는 프로그램입니다. Chrome, Safari, Edge 등이 있습니다.

브랜치 Branch

기존 자료를 기준으로 별도로 수정해 볼 수 있는 작업선입니다.

비공개 저장소 Private

권한이 있는 사람만 저장소에 접근하는 설정입니다. 여기서 배포한 웹사이트까지 자동으로 비공개가 되는 것은 아닙니다.

비밀키 Secret

남이 알면 내 서비스나 계정을 사용할 수 있어 공개하면 안 되는 값입니다.

빌드 Build

원본 파일을 사이트에서 사용할 결과물로 준비하는 과정입니다. 단순한 HTML 파일은 별도 빌드가 필요 없을 수 있습니다.

상대 경로 Relative Path

현재 파일을 기준으로 다른 파일의 위치를 적는 방식입니다.

새로고침 Refresh

브라우저가 페이지를 다시 읽게 하는 동작입니다.

서버 Server

인터넷에서 요청을 받아 페이지나 자료를 제공하는 컴퓨터나 프로그램입니다.

수파베이스 Supabase

자료 저장·사용자 확인·업로드 파일 보관 등에 쓸 기능을 제공하는 서비스입니다. 이번 실습의 필수 도구는 아닙니다.

시크릿 창 Private Browsing

일반 창과 분리된 비공개 탐색 창입니다. 저장 자료는 세션 종료 뒤 유지되지 않을 수 있으며, 인터넷에서 신원을 숨겨 주는 기능은 아닙니다.

업로드 Upload

내 컴퓨터의 파일을 인터넷 서비스에 보내는 일입니다.

에이피아이 API

프로그램이 다른 프로그램이나 서비스에 요청을 보내고 결과를 받는 연결 방식입니다.

요청문 Prompt

AI에게 원하는 일과 조건을 설명하는 글입니다.

운영 배포 Production

실제 사용자에게 제공하는 버전의 배포입니다. 검토용 배포와 구분합니다.

웹 앱 Web App

브라우저에서 입력·검색·계산 같은 일을 하는 프로그램입니다. 정보를 읽는 웹페이지와 기능이 함께 있을 수 있습니다.

웹사이트 Website

관련된 웹페이지와 자료가 모여 하나의 목적을 이루는 곳입니다. 한 페이지로 구성될 수도 있습니다.

웹페이지 Web Page

브라우저에서 열어 보는 웹 문서입니다. 내용이 길면 여러 화면 높이로 이어질 수 있습니다.

유티에프팔 UTF-8

한글을 포함한 글자를 파일에 저장하는 방식 중 하나입니다.

인공지능 AI

인공지능을 뜻합니다. 이 책에서는 요청을 받아 글이나 코드를 만드는 생성형 AI를 사용합니다. 결과는 직접 확인해야 합니다.

인증 Authentication

지금 접속한 사람이 누구인지 확인하는 과정입니다. 어떤 자료에 접근해도 되는지 정하는 권한과는 구분합니다.

입력 검사 Input Validation

입력한 이름이나 주소가 정해 둔 조건에 맞는지 확인하고, 맞지 않으면 이유를 알려 주는 처리입니다.

자동 배포 Automatic Deployment

연결한 저장소에 변경을 기록하면 새 배포를 시작하는 방식입니다. 연결한 브랜치와 프로젝트 설정에 따라 동작합니다.

자바스크립트 JavaScript

버튼을 눌렀을 때 반응하는 등 웹페이지의 동작을 만듭니다.

작업 공간 Workspace

개인이나 팀의 작업을 묶는 공간입니다. 도구마다 이름과 공유 범위가 다를 수 있습니다.

재현 Reproduce

같은 순서로 문제를 다시 일으켜 원인을 찾기 쉽게 만드는 일입니다.

저장 Save

작업이나 입력한 자료를 나중에 다시 사용할 수 있게 남기는 일입니다. 파일·브라우저 등 어디에 저장하는지에 따라 다시 찾는 방법이 다릅니다.

저장소 Repository

한 프로젝트의 파일과 변경 기록을 모아 둔 공간입니다.

저장소 안내 파일 README

저장소의 목적과 사용법을 적어 두는 안내 파일입니다. 웹페이지 본문인 index.html과는 다릅니다.

접근성 Accessibility

여러 방식으로 보고 입력하는 사람이 내용을 이해하고 기능을 쓸 수 있게 하는 성질입니다.

제이슨 JSON

자료의 항목과 값을 정해진 글자 형식으로 담는 방식입니다. 예제의 링크 백업 파일에 사용합니다.

주소 URL

웹페이지가 있는 위치를 나타내는 글자입니다.

캐시 Cache

빨리 다시 보여 주기 위해 이전 자료를 잠시 보관하는 방식입니다.

커밋 Commit

특정 시점의 파일 변경을 남긴 기록입니다.

코드 Code

컴퓨터가 따를 규칙을 정해진 형식으로 쓴 글입니다.

탭 Tab

한 브라우저 창에서 여러 페이지를 나누어 여는 자리입니다. 키보드의 Tab 키와는 문맥으로 구분합니다.

테스트 Test

버튼이나 링크가 예상대로 작동하는지 직접 확인하는 일입니다.

파일 File

컴퓨터에 이름을 붙여 저장한 내용 한 묶음입니다.

포커스 Focus

키보드 입력이나 동작을 받을 현재 위치입니다. 선택된 링크나 버튼의 표시로 확인할 수 있습니다.

폴더 Folder

파일을 모아 두는 공간입니다.

프로젝트 Project

하나의 결과물을 만들기 위해 관련 파일과 설정을 묶은 작업입니다.

프론트엔드 Frontend

사용자가 보는 화면과 브라우저에서 실행하는 동작을 만드는 부분입니다.

호스팅 Hosting

페이지를 인터넷 주소에서 열 수 있도록 실행·제공하는 일입니다.

확장자 Extension

파일 이름 끝의 .html, .txt처럼 파일 종류를 알려주는 부분입니다.

CSS CSS

웹페이지의 색, 간격, 글자 크기 같은 모양을 정합니다.

HTML HTML

웹페이지의 제목, 문단, 버튼 같은 내용을 담는 형식입니다.

Vercel 제공 주소 .vercel.app

Vercel이 제공하는 웹사이트 주소의 끝부분입니다. 프로젝트에 연결된 주소와 특정 배포만 가리키는 주소를 구분해 사용합니다.