웹개발 핵심 개념 총정리 — UX·AX·프론트엔드·백엔드·GitHub까지

웹개발 핵심 개념 총정리 — UX·AX·프론트엔드·백엔드·GitHub까지

📌 이 글의 핵심 요약

• 웹개발은 사용자 경험(UX), 화면 구현(프론트엔드), 서버 처리(백엔드)가 함께 맞물려 동작한다
• AX(AI Experience)는 AI가 서비스에 개입하는 경험 설계 영역으로 최근 빠르게 부상하고 있다
• GitHub는 코드 버전 관리와 협업의 중심 플랫폼이다
• 각 개념의 역할 구분을 이해하면 팀 구조와 개발 흐름 전체가 한눈에 보인다

📋 목차

1. UX — 사용자 경험 설계
2. AX — AI 경험 설계
3. 프론트엔드 — 화면을 만드는 영역
4. 백엔드 — 서버와 데이터 처리
5. GitHub — 코드 관리와 협업
6. 개념 비교표와 정리

UX — 사용자 경험 설계

UX(User Experience)는 사용자가 서비스를 이용하면서 느끼는 경험 전체를 설계하는 영역이다. 버튼 위치, 텍스트 안내 문구, 화면 전환 흐름처럼 사람이 서비스와 상호작용하는 모든 접점을 다룬다. 코드를 직접 쓰지 않아도 되지만 개발 방향을 크게 좌우한다.

UX 설계가 먼저 잡혀 있어야 프론트엔드 개발자가 화면을 어떻게 구성할지 알 수 있다. 반대로 UX 없이 개발부터 시작하면 구현 도중 화면을 다시 뜯어고치는 일이 반복된다. UX 산출물로는 와이어프레임, 프로토타입, 사용자 플로우 다이어그램이 있다. 실무에서는 Figma가 가장 많이 쓰이는 UX·UI 설계 도구이며, 디자이너와 개발자가 동일한 파일을 함께 보면서 협업하는 방식이 일반적이다.

---

AX — AI 경험 설계

AX(AI Experience)는 서비스에 AI가 개입하는 지점을 설계하는 영역이다. 챗봇 응답 흐름, AI 추천 결과를 어떻게 보여줄지, 자동 완성이 언제 나타날지처럼 AI와 사용자가 만나는 순간의 경험을 다룬다.

🤖 AX가 중요해진 배경

• ChatGPT 등 LLM 기반 서비스가 일반화되면서 AI 인터페이스 설계 수요가 급증했다
• AI 응답은 결과가 확률적이라 기존 UX 설계 원칙만으로 커버하기 어렵다
• 로딩 대기, 오답 처리, 컨텍스트 유지 등 AI 특유의 인터랙션 패턴이 필요하다
• UX 디자이너가 AX를 함께 다루는 추세로 빠르게 이동하고 있다

---

프론트엔드 — 화면을 만드는 영역

프론트엔드(Frontend)는 사용자가 브라우저에서 직접 보고 조작하는 화면을 구현하는 영역이다. HTML로 구조를 잡고, CSS로 스타일을 입히고, JavaScript로 동작을 추가하는 것이 기본이다. 실무에서는 React, Vue, Next.js 같은 프레임워크를 많이 쓴다.

💻 프론트엔드 개발자가 다루는 것

• HTML / CSS / JavaScript 기반 UI 구현
• React, Vue, Next.js 등 컴포넌트 기반 개발
• API 호출로 백엔드 데이터를 받아 화면에 표시
• 반응형 레이아웃, 애니메이션, 웹 접근성 대응
• 브라우저 성능 최적화 및 번들 크기 관리

---

백엔드 — 서버와 데이터 처리

백엔드(Backend)는 사용자 눈에 보이지 않는 서버 쪽 로직을 담당한다. 로그인 인증, 데이터베이스 저장과 조회, 결제 처리, 이메일 발송처럼 실제 비즈니스 로직이 여기서 돌아간다. 프론트엔드가 API 요청을 보내면 백엔드가 처리 후 JSON 형태로 결과를 돌려주는 구조가 일반적이다.

🗄️ 백엔드 개발자가 다루는 것

• REST API 또는 GraphQL 설계와 구현
• MySQL, PostgreSQL, MongoDB 등 데이터베이스 설계
• 인증 / 인가 (JWT, OAuth, 세션 관리)
• Node.js, Python(Django/FastAPI), Java(Spring) 등 서버 언어
• 서버 배포, 도커, 클라우드 인프라(AWS, GCP, Vercel)

💡 풀스택이란?

프론트엔드와 백엔드를 모두 다루는 개발자를 풀스택 개발자라고 한다. 1인 개발이나 스타트업 초기 단계에서 자주 필요한 포지션이다. Next.js는 프론트엔드와 백엔드 API를 하나의 프로젝트에서 함께 구성할 수 있어 풀스택 개발에 많이 쓰인다.

---

GitHub — 코드 관리와 협업

GitHub는 Git 기반의 코드 저장소 호스팅 서비스다. 코드 변경 이력을 모두 기록하고, 여러 사람이 동시에 작업할 때 충돌을 관리하는 버전 관리 시스템 위에서 동작한다. 혼자 작업할 때도 롤백과 브랜치 관리가 가능하다. GitHub Actions를 활용하면 코드를 push할 때마다 자동으로 테스트를 실행하거나 서버에 배포하는 CI/CD 파이프라인을 구성할 수 있다.

🐙 GitHub의 주요 기능

• Repository — 프로젝트 코드를 저장하고 공유하는 공간
• Branch — 기능별로 작업을 분리해 안전하게 개발하는 흐름
• Pull Request — 코드 변경 사항을 검토하고 병합하는 협업 과정
• Issues — 버그 신고, 기능 요청, 작업 목록 관리
• Actions — 커밋·배포 시 자동으로 테스트·빌드를 실행하는 CI/CD

---

개념 비교표와 정리

영역	핵심 역할	주요 도구
UX	사용자 경험·흐름 설계	Figma, 와이어프레임
AX	AI 인터랙션 경험 설계	LLM API, 프롬프트 설계
프론트엔드	브라우저 화면 구현	React, Next.js, CSS
백엔드	서버·DB·비즈니스 로직	Node.js, Python, SQL
GitHub	코드 버전 관리·협업	Git, PR, Actions

웹개발 핵심 개념 한 줄 정리

• UX — 사용자가 어떤 경험을 할지 설계하는 단계
• AX — AI가 서비스에 개입하는 경험을 별도로 설계하는 영역
• 프론트엔드 — HTML·CSS·JS로 눈에 보이는 화면을 구현
• 백엔드 — 서버에서 데이터 처리, API 제공, 인증·보안 담당
• GitHub — 코드 이력 관리, 브랜치 협업, 자동 배포까지 처리

웹개발을 처음 배운다면 이 다섯 가지 영역의 역할을 머릿속에 먼저 정리해두는 게 중요하다. 어떤 도구를 배우든, 어떤 포지션을 맡든 이 구조 안에서 자신의 위치를 파악할 수 있어야 전체 그림이 보인다.