Preview Deployment
운영 사이트에 반영하기 전 확인하도록 배포한 버전입니다. AI 도구 안의 미리보기와 다르며 접근 권한은 배포 설정에 따릅니다.
검토 배포 프리뷰 README
저장소의 목적과 사용법을 적어 두는 안내 파일입니다. 웹페이지 본문인 index.html과는 다릅니다.
리드미 README.md Public
누구나 코드와 파일을 볼 수 있는 저장소 설정입니다. 저장소 공개와 웹사이트 배포는 별개입니다.
퍼블릭 공개 Private
권한이 있는 사람만 저장소에 접근하는 설정입니다. 여기서 배포한 웹사이트까지 자동으로 비공개가 되는 것은 아닙니다.
프라이빗 비공개 Automatic Deployment
연결한 저장소에 변경을 기록하면 새 배포를 시작하는 방식입니다. 연결한 브랜치와 프로젝트 설정에 따라 동작합니다.
자동배포 .vercel.app
Vercel이 제공하는 웹사이트 주소의 끝부분입니다. 프로젝트에 연결된 주소와 특정 배포만 가리키는 주소를 구분해 사용합니다.
버셀 도메인 Private Browsing
일반 창과 분리된 비공개 탐색 창입니다. 저장 자료는 세션 종료 뒤 유지되지 않을 수 있으며, 인터넷에서 신원을 숨겨 주는 기능은 아닙니다.
비공개 탐색 시크릿 모드 Artifact
Claude 대화에서 만든 문서나 웹페이지 같은 결과물을 별도 공간에서 여는 기능입니다. 이 책에서는 HTML 페이지를 확인할 때 사용합니다.
아티팩트 Claude AI
인공지능을 뜻합니다. 이 책에서는 요청을 받아 글이나 코드를 만드는 생성형 AI를 사용합니다. 결과는 직접 확인해야 합니다.
AI 인공지능 Vibe Coding
원하는 결과를 말로 설명하고 AI의 도움을 받아 프로그램을 만드는 방식입니다.
AI 코딩 자연어 Prompt
AI에게 원하는 일과 조건을 설명하는 글입니다.
프롬프트 지시문 질문 Web Page
브라우저에서 열어 보는 웹 문서입니다. 내용이 길면 여러 화면 높이로 이어질 수 있습니다.
페이지 화면 Website
관련된 웹페이지와 자료가 모여 하나의 목적을 이루는 곳입니다. 한 페이지로 구성될 수도 있습니다.
사이트 여러 페이지 Browser
웹페이지를 여는 프로그램입니다. Chrome, Safari, Edge 등이 있습니다.
크롬 사파리 엣지 URL
웹페이지가 있는 위치를 나타내는 글자입니다.
웹 주소 링크 Link
누르면 다른 페이지나 위치로 이동하는 글이나 그림입니다.
연결 주소 File
컴퓨터에 이름을 붙여 저장한 내용 한 묶음입니다.
문서 저장 Folder
파일을 모아 두는 공간입니다.
디렉터리 파일 묶음 Extension
파일 이름 끝의 .html, .txt처럼 파일 종류를 알려주는 부분입니다.
파일 이름 끝 html txt HTML
웹페이지의 제목, 문단, 버튼 같은 내용을 담는 형식입니다.
에이치티엠엘 화면 구조 CSS
웹페이지의 색, 간격, 글자 크기 같은 모양을 정합니다.
씨에스에스 색 배치 JavaScript
버튼을 눌렀을 때 반응하는 등 웹페이지의 동작을 만듭니다.
JS 동작 Code
컴퓨터가 따를 규칙을 정해진 형식으로 쓴 글입니다.
프로그램 명령 Preview
AI 도구 안에서 만드는 중인 페이지를 열어 보는 화면입니다. 인터넷에 배포한 검토용 주소와 구분합니다. 도구에 따라 외부 링크·저장 기능이 제한될 수 있습니다.
프리뷰 확인 Refresh
브라우저가 페이지를 다시 읽게 하는 동작입니다.
다시 불러오기 리로드 Save
작업이나 입력한 자료를 나중에 다시 사용할 수 있게 남기는 일입니다. 파일·브라우저 등 어디에 저장하는지에 따라 다시 찾는 방법이 다릅니다.
파일 저장 Download
인터넷에 있는 파일을 내 컴퓨터로 가져오는 일입니다.
내려받기 Upload
내 컴퓨터의 파일을 인터넷 서비스에 보내는 일입니다.
올리기 Bug
프로그램이 기대한 대로 움직이지 않는 문제입니다.
오류 문제 Reproduce
같은 순서로 문제를 다시 일으켜 원인을 찾기 쉽게 만드는 일입니다.
다시 일으키기 오류 Test
버튼이나 링크가 예상대로 작동하는지 직접 확인하는 일입니다.
시험 확인 Diff
수정하기 전과 후에 무엇이 바뀌었는지 보여주는 내용입니다.
디프 전후 비교 Version
특정 시점에 저장해 둔 결과물의 상태입니다.
이전 상태 기록 Undo
실수한 변경을 이전 상태로 돌리는 일입니다.
취소 복구 Deploy
만든 페이지를 다른 사람이 주소로 열 수 있게 올리는 일입니다.
공개 게시 Public URL
다른 사람이 접속할 수 있는 웹 주소입니다.
공유 링크 Personal Data
누군지 알아볼 수 있게 하는 이름, 연락처 등의 정보입니다.
이름 전화번호 이메일 Secret
남이 알면 내 서비스나 계정을 사용할 수 있어 공개하면 안 되는 값입니다.
시크릿 API 키 비밀번호 Data
프로그램이 다루는 자료입니다. 링크 모음에서는 제목·주소·분류가 데이터입니다.
자료 정보 Commit
특정 시점의 파일 변경을 남긴 기록입니다.
깃 저장 기록 Branch
기존 자료를 기준으로 별도로 수정해 볼 수 있는 작업선입니다.
작업선 가지 GitHub
프로젝트 파일과 변경 기록을 보관하는 서비스입니다.
저장소 코드 보관 Repository
한 프로젝트의 파일과 변경 기록을 모아 둔 공간입니다.
레포지토리 리포지터리 Vercel
프로젝트를 웹 주소로 실행할 수 있게 배포하는 서비스입니다.
버셀 호스팅 Hosting
페이지를 인터넷 주소에서 열 수 있도록 실행·제공하는 일입니다.
서버 웹 공개 localStorage
같은 브라우저와 사이트 주소에서 다시 쓸 자료를 보관하는 공간입니다. 다른 기기와 자동으로 맞춰지지 않습니다.
브라우저 저장 로컬스토리지 Login
서비스가 사용자를 확인하고 그 계정으로 이용하게 하는 과정입니다.
계정 접속 인증 Permission
사용자가 어떤 자료를 보고 바꿀 수 있는지를 정한 허용 범위입니다.
접근 허용 Export
현재 결과나 자료를 다른 곳에 보관할 파일로 받는 일입니다.
다운로드 백업 Import
파일 등에 보관한 자료를 현재 도구에서 다시 읽는 일입니다.
가져오기 복원 JSON
자료의 항목과 값을 정해진 글자 형식으로 담는 방식입니다. 예제의 링크 백업 파일에 사용합니다.
자료 파일 json Responsive Layout
화면 너비에 맞춰 칸 수와 배치가 달라지는 화면입니다.
휴대전화 작은 화면 배치 Accessibility
여러 방식으로 보고 입력하는 사람이 내용을 이해하고 기능을 쓸 수 있게 하는 성질입니다.
키보드 읽기 도구 Cache
빨리 다시 보여 주기 위해 이전 자료를 잠시 보관하는 방식입니다.
예전 화면 임시 보관 Server
인터넷에서 요청을 받아 페이지나 자료를 제공하는 컴퓨터나 프로그램입니다.
인터넷 컴퓨터 요청 처리 Backup
문제가 생겼을 때 되찾을 수 있도록 자료를 다른 곳에도 보관한 것입니다.
별도 보관 복구 Rollback
문제 있는 새 버전 대신 이전 정상 버전을 다시 사용하게 하는 일입니다.
이전 배포 되돌리기 Production
실제 사용자에게 제공하는 버전의 배포입니다. 검토용 배포와 구분합니다.
프로덕션 메인 실제 공개 UTF-8
한글을 포함한 글자를 파일에 저장하는 방식 중 하나입니다.
인코딩 한글 글자 저장 Relative Path
현재 파일을 기준으로 다른 파일의 위치를 적는 방식입니다.
파일 위치 이미지 폴더 Root Directory
프로젝트 파일이 시작되는 기준 폴더입니다.
루트 디렉터리 최상위 Supabase
자료 저장·사용자 확인·업로드 파일 보관 등에 쓸 기능을 제공하는 서비스입니다. 이번 실습의 필수 도구는 아닙니다.
수파베이스 데이터 인증 파일 Database
링크 목록이나 게시글처럼 규칙적인 자료를 저장하고 찾는 곳입니다.
DB 디비 자료 저장 Authentication
지금 접속한 사람이 누구인지 확인하는 과정입니다. 어떤 자료에 접근해도 되는지 정하는 권한과는 구분합니다.
사용자 확인 로그인 Landing Page
방문자가 소개를 읽고 신청·문의 같은 특정 행동을 하도록 안내하는 페이지입니다.
홍보 소개 신청 페이지 Frontend
사용자가 보는 화면과 브라우저에서 실행하는 동작을 만드는 부분입니다.
화면 브라우저 동작 Backend
서버 쪽에서 요청을 처리하고 자료나 접근 권한을 확인하는 부분입니다.
서버 자료 처리 Web App
브라우저에서 입력·검색·계산 같은 일을 하는 프로그램입니다. 정보를 읽는 웹페이지와 기능이 함께 있을 수 있습니다.
웹앱 웹 애플리케이션 Account
서비스에서 사용자를 구별하는 정보입니다. 같은 이메일을 써도 서비스별 작업이 자동 연결되지는 않습니다.
회원 가입 로그인 Workspace
개인이나 팀의 작업을 묶는 공간입니다. 도구마다 이름과 공유 범위가 다를 수 있습니다.
팀 워크스페이스 Project
하나의 결과물을 만들기 위해 관련 파일과 설정을 묶은 작업입니다.
작업 단위 Tab
한 브라우저 창에서 여러 페이지를 나누어 여는 자리입니다. 키보드의 Tab 키와는 문맥으로 구분합니다.
브라우저 창 Focus
키보드 입력이나 동작을 받을 현재 위치입니다. 선택된 링크나 버튼의 표시로 확인할 수 있습니다.
키보드 선택 위치 Alt Text
이미지의 의미를 글로 설명한 내용입니다. 그림을 보지 못하는 상황에서 내용을 이해하는 데 도움이 됩니다.
이미지 설명 Build
원본 파일을 사이트에서 사용할 결과물로 준비하는 과정입니다. 단순한 HTML 파일은 별도 빌드가 필요 없을 수 있습니다.
준비 변환 API
프로그램이 다른 프로그램이나 서비스에 요청을 보내고 결과를 받는 연결 방식입니다.
서비스 연결 요청 Domain
사이트를 찾을 때 쓰는 사람이 읽기 쉬운 이름입니다. 전체 URL에는 도메인 외에 경로 등이 포함될 수 있습니다.
사이트 이름 Input Validation
입력한 이름이나 주소가 정해 둔 조건에 맞는지 확인하고, 맞지 않으면 이유를 알려 주는 처리입니다.
유효성 검사 검색 결과가 없습니다. 다른 표현으로 다시 찾아보세요.