웹 용어 사전

웹 개발과 기획 전반에 걸쳐 자주 사용되는 핵심 용어들을 쉽게 찾아보고 학습해보세요.

검색된 용어: 총 109개 (페이지 1/8)항목을 클릭하여 설명을 확인하세요.

A/B Test

A/B 테스트

기획/PM

A/B Test (A/B 테스트)

A/B 테스트는 두 가지 이상의 서로 다른 UI/UX 시안(A안, B안)을 실 사용자에게 무작위로 보여준 후, 클릭률이나 전환율(Conversion Rate) 등 실제 데이터를 비교 분석하여 최적의 버전을 결정하는 데이터 기반 의사결정 기법입니다.

💡 핵심 목적

"버튼을 파란색으로 할까, 빨간색으로 할까?"와 같이 감이나 직관에 의존하는 것이 아니라, 실제 사용자의 행동 데이터를 바탕으로 더 나은 비즈니스 결과를 가져오는 디자인을 채택하기 위함입니다.

A/B 테스트의 기본 개념

시각적 비교: A안 vs B안 (버튼 색상 실험 예시)

A/B 테스트 진행 절차

단계	과정	설명
1	가설 수립	"버튼 색상을 빨간색으로 바꾸면 클릭률이 올라갈 것이다"와 같이 검증 가능한 가설을 세웁니다.
2	변수 설정 및 제작	기존 화면(대조군, Control)과 변경된 화면(실험군, Variant)을 준비합니다. 이때 변수는 1개만 설정하는 것이 좋습니다.
3	트래픽 분배 (테스트)	웹사이트 방문자를 50:50 등의 비율로 무작위 배정하여 각각 다른 화면을 보여줍니다.
4	데이터 분석 및 결정	수집된 데이터를 바탕으로 통계적 유의성을 검증하고, 더 성과가 좋은 버전을 최종 반영합니다.

⚠️ 주의: 통계적 유의성 (Statistical Significance)

테스트 기간이 너무 짧거나 표본(트래픽)이 충분하지 않은 상태에서 결론을 내리면, 우연에 의한 결과일 확률이 높습니다. A/B 테스트 결과를 신뢰하기 위해서는 충분한 모수 확보와 '통계적 유의성' 검증이 필수적입니다.

연관 검색어:

Agile

애자일

기획/PM

Agile (애자일 방법론)

'기민한, 날렵한'이라는 뜻으로, 소프트웨어 개발 시 처음부터 끝까지의 모든 계획을 완벽하게 세우고 시작하는 대신, 일정한 주기(Sprint)를 두고 끊임없이 시제품을 만들어 사용자 피드백을 반영하며 유연하게 수정/보완해 나가는 개발 방법론입니다.

전통적 방식(워터폴)과의 비교

특징 요약 테이블

구분	폭포수 (Waterfall)	애자일 (Agile)
유연성 (수정)	수정이 매우 어려움 (비용 큼)	수정이 용이함 (변화 환영)
출시 주기	모든 개발이 끝나야 1번 출시 (수개월~년 단위)	빠른 반복 출시 (1~4주 단위 Sprint)
위험 관리	출시 후 실패하면 리스크가 큼	작은 단위로 피드백을 받아 리스크 최소화

연관 검색어:

API

응용 프로그램 프로그래밍 인터페이스 (Application Programming Interface)

네트워크

API (Application Programming Interface)

API는 두 개의 소프트웨어가 서로 대화할 수 있도록 이어주는 '연결 고리' 또는 '심부름꾼'입니다. 프론트엔드(클라이언트)가 백엔드(서버)에 데이터를 요청할 때, 정해진 규칙에 따라 요청을 전달하고 결과를 받아오는 창구 역할을 합니다.

👨‍🍳 식당의 웨이터 비유

우리가 식당에 가면 주방장(서버)에게 직접 요리를 달라고 하지 않습니다. 손님(클라이언트)은 메뉴판(API 문서)을 보고 웨이터(API)에게 주문(요청)을 합니다. 웨이터는 주방에 주문을 전달하고, 요리가 완성되면 다시 손님에게 가져다 줍니다(응답).

API의 동작 흐름 시각화

API의 주요 종류

종류	특징
REST API	가장 흔하게 쓰이는 방식. 명사(URL)와 동사(HTTP 메서드: GET, POST 등)의 조합으로 자원을 조작합니다. (예: `GET /users`)
GraphQL	페이스북이 만든 방식. 클라이언트가 "나 이름과 이메일만 필요해!" 하고 원하는 데이터만 콕 집어서 요청할 수 있습니다.
Open API	구글 지도, 카카오 로그인, 날씨 정보 등 누구나 가져다 쓸 수 있도록 외부 개발자에게 공개된 API입니다.

연관 검색어:

Async/Await

비동기 함수

JavaScript

Promise를 더 가독성 좋게 사용하기 위해 ES8에 도입된 문법으로, 비동기 코드를 마치 동기 코드처럼 위에서 아래로 직관적으로 읽히게 작성할 수 있습니다.

연관 검색어:

Babel

바벨

JavaScript

최신 문법(ES6+)으로 작성된 자바스크립트 코드를 구형 브라우저에서도 정상적으로 작동할 수 있도록 이전 버전(ES5 등)의 코드로 변환해 주는 자바스크립트 컴파일러입니다.

연관 검색어:

BEM

BEM 방법론

CSS

Block, Element, Modifier의 약자로, HTML 클래스 이름을 지을 때 예측 가능하고 재사용성을 높이기 위해 만들어진 CSS 네이밍 컨벤션 방법론입니다. (예: .block__element--modifier)

연관 검색어:

Box Model

박스 모델

CSS

웹 페이지의 모든 요소를 사각형 박스로 간주하는 원리로, Content, Padding(안쪽 여백), Border(테두리), Margin(바깥 여백)으로 구성되며 레이아웃을 계산하는 기본 구조입니다.

연관 검색어:

CAC

고객 획득 비용 (Customer Acquisition Cost)

기획/PM

CAC (Customer Acquisition Cost)

고객 획득 비용입니다. 1명의 신규 결제 고객(또는 가입자)을 데려오기 위해 마케팅이나 영업에 얼마의 비용을 썼는지를 나타냅니다. 이 비용이 너무 높으면 아무리 물건을 많이 팔아도 회사는 적자를 보게 됩니다.

CAC 계산 시각화

CAC를 낮추는 전략

전략	설명
오가닉 트래픽 강화	돈을 쓰는 유료 광고 대신 SEO(검색엔진 최적화), 블로그, 유튜브 등 콘텐츠 마케팅을 통해 자연 유입을 늘립니다.
추천 프로그램 (Referral)	기존 유저가 친구를 초대하면 양쪽 모두에게 혜택을 주는 방식(예: 토스, 에어비앤비)으로 바이럴(입소문)을 유도합니다.
타겟팅 최적화	광고 집행 시 우리 제품에 관심 없는 사람들에게 노출되는 것을 줄이고, 진성 타겟에게만 예산을 집중합니다.

연관 검색어:

CDN

콘텐츠 전송 네트워크

네트워크

콘텐츠 전송 네트워크(Content Delivery Network). 지리적으로 분산된 서버들을 통해 정적 콘텐츠(이미지, 스크립트 등)를 사용자와 가장 가까운 위치에서 전송하여 로딩 속도를 크게 높여줍니다.

연관 검색어:

CI/CD

지속적 통합/지속적 배포

빌드/배포

CI/CD (지속적 통합 / 지속적 배포)

개발자들이 작성한 코드를 중앙 저장소에 통합하고(CI), 실제 서비스 서버에 반영하기까지의(CD) 전 과정을 사람의 손을 거치지 않게 '자동화'하는 파이프라인 관행입니다. GitHub Actions, Jenkins, CircleCI 등의 도구가 널리 쓰입니다.

CI와 CD의 구분

개념	주요 목적	파이프라인 단계 (Workflow)
CI (Continuous Integration)	코드 충돌 방지 및 품질 유지	1. 코드 Commit/Push 2. 자동 빌드 (Build) 3. 자동 단위 테스트 (Unit Tests) 4. 정적 코드 분석 (Lint)
CD (Continuous Deployment)	신속하고 안전한 기능 출시	5. 컨테이너(Docker) 이미지 생성 6. 스테이징 환경 배포 및 E2E 테스트 7. 프로덕션 환경 무중단 자동 배포

연관 검색어:

Clean Architecture

클린 아키텍처

아키텍처

소프트웨어의 의존성을 밖에서 안으로 향하게 설계하여, 비즈니스 로직(Core)이 외부 요소(UI, DB, 프레임워크)의 변경에 영향을 받지 않도록 독립성을 보장하는 설계 원칙입니다.

연관 검색어:

Closure

클로저

JavaScript

함수와 그 함수가 선언될 당시의 렉시컬 환경의 조합으로, 외부 함수가 종료된 이후에도 내부 함수가 외부 함수의 변수(스코프)에 접근할 수 있는 자바스크립트의 특성입니다.

연관 검색어:

CloudFront

클라우드프론트

인프라/클라우드

Amazon CloudFront는 빠른 콘텐츠 전송 네트워크(CDN)입니다. 미국이나 유럽의 유저가 한국의 서버까지 접근하지 않아도 되도록, 전 세계에 흩어진 엣지 로케이션(Edge Location)에서 데이터를 캐싱(임시 저장)하여 빠르게 전달합니다.

CloudFront 글로벌 캐싱 원리

CloudFront 주요 개념

용어	설명
Edge Location (엣지 로케이션)	콘텐츠가 실제로 캐싱되고 유저에게 배포되는 전 세계의 AWS 서버 거점.
Origin (원본)	원본 데이터가 위치하는 곳. 주로 S3 버킷이나 EC2, 외부 서버가 될 수 있습니다.
TTL (Time To Live)	콘텐츠가 엣지 로케이션에 캐싱되어 유지되는 시간. TTL이 지나면 원본에서 다시 가져옵니다.

연관 검색어:

Component

컴포넌트

프레임워크/라이브러리

Component (컴포넌트)

컴포넌트(Component)는 UI를 독립적이고 재사용 가능한 조각으로 나눈 것입니다. 마치 레고 블록을 조립해 거대한 성을 만들 듯, 리액트에서는 작은 컴포넌트들을 조립하여 복잡한 웹 애플리케이션을 완성합니다.

💡 핵심 이점

재사용성(Reusability)과 유지보수성(Maintainability)이 극대화됩니다. 한 번 만들어둔 <Button /> 컴포넌트는 프로젝트 어디서든 다시 가져다 쓸 수 있습니다.

🧩 컴포넌트 아키텍처 다이어그램

연관 검색어:

Core Web Vitals

코어 웹 바이탈

웹 일반

구글이 웹사이트의 뛰어난 UX를 위해 필수적이라고 정의한 핵심 성능 지표로, LCP(로딩), FID(상호작용), CLS(시각적 안정성)가 포함되며 SEO에 직접적인 영향을 미칩니다.

연관 검색어:

용어 사전을 불러오는 중입니다...

최초 로딩 시 DB 연결로 인해 시간이 다소 소요될 수 있습니다.

단계

과정

설명

가설 수립

"버튼 색상을 빨간색으로 바꾸면 클릭률이 올라갈 것이다"와 같이 검증 가능한 가설을 세웁니다.

변수 설정 및 제작

기존 화면(대조군, Control)과 변경된 화면(실험군, Variant)을 준비합니다. 이때 변수는 1개만 설정하는 것이 좋습니다.

트래픽 분배 (테스트)

웹사이트 방문자를 50:50 등의 비율로 무작위 배정하여 각각 다른 화면을 보여줍니다.

데이터 분석 및 결정

수집된 데이터를 바탕으로 통계적 유의성을 검증하고, 더 성과가 좋은 버전을 최종 반영합니다.

구분

폭포수 (Waterfall)

애자일 (Agile)

유연성 (수정)

수정이 매우 어려움 (비용 큼)

수정이 용이함 (변화 환영)

출시 주기

모든 개발이 끝나야 1번 출시 (수개월~년 단위)

빠른 반복 출시 (1~4주 단위 Sprint)

위험 관리

출시 후 실패하면 리스크가 큼

작은 단위로 피드백을 받아 리스크 최소화

종류

특징

REST API

가장 흔하게 쓰이는 방식. 명사(URL)와 동사(HTTP 메서드: GET, POST 등)의 조합으로 자원을 조작합니다. (예: GET /users)

GraphQL

페이스북이 만든 방식. 클라이언트가 "나 이름과 이메일만 필요해!" 하고 원하는 데이터만 콕 집어서 요청할 수 있습니다.

Open API

구글 지도, 카카오 로그인, 날씨 정보 등 누구나 가져다 쓸 수 있도록 외부 개발자에게 공개된 API입니다.

전략

설명

오가닉 트래픽 강화

돈을 쓰는 유료 광고 대신 SEO(검색엔진 최적화), 블로그, 유튜브 등 콘텐츠 마케팅을 통해 자연 유입을 늘립니다.