@extends('layouts.app') @section('title', '프론트엔드 개발') @push('styles') @endpush @section('content')
아카데미 프론트엔드 개발

프론트엔드 개발

HTML, CSS, JavaScript부터 프레임워크, 성능 최적화까지 — 비개발자도 이해하는 프론트엔드 가이드

코드 에디터와 브라우저 프리뷰
목차 보기
{{-- ============================================================ --}} {{-- 1. 프론트엔드란? --}} {{-- ============================================================ --}}

1 프론트엔드란?

프론트엔드 vs 백엔드 ?프론트엔드는 사용자의 브라우저에서 실행되는 코드(HTML, CSS, JS)이고, 백엔드는 서버에서 실행되는 코드(PHP, Python 등)다. 둘은 API를 통해 데이터를 주고받는다.

프론트엔드(Front-end)란 사용자가 직접 보고, 클릭하고, 입력하는 화면 전체를 말한다. 웹 브라우저에 표시되는 버튼, 메뉴, 입력창, 표, 이미지 등 눈에 보이는 모든 것이 프론트엔드의 영역이다.

비유: 식당의 홀과 주방

프론트엔드는 식당의 홀이다. 손님이 메뉴판을 보고, 주문하고, 음식을 받는 공간이다. 백엔드는 주방이다. 손님은 보지 못하지만, 주문을 받아 요리하고 결과를 내보내는 곳이다. 홀이 예쁘고 편해야 손님이 만족하듯, 프론트엔드가 잘 만들어져야 사용자가 편하게 시스템을 쓸 수 있다.

프론트엔드 (홀)

사용자가 보는 화면
HTML, CSS, JavaScript
버튼, 폼, 메뉴, 테이블

백엔드 (주방)

서버에서 처리하는 로직
PHP, Python, Java
데이터 저장, 인증, 계산

웹의 3요소

프론트엔드는 세 가지 기술로 구성된다. 이 셋은 항상 함께 작동한다.

HTML (구조)

건물의 뼈대
방, 거실, 주방의 위치를 정한다

CSS (디자인)

인테리어
벽지, 가구 배치, 조명을 결정한다

JavaScript (동작)

전기 배선
스위치를 누르면 조명이 켜진다

SAM 시스템의 프론트엔드: SAM도 프론트엔드와 백엔드로 분리되어 있다. MNG(관리자 웹)는 Blade + HTMX로, React 앱은 Next.js로 화면을 구성하고, API 서버(Laravel)가 데이터를 처리한다.

프론트엔드 vs 백엔드 비교 다이어그램

프론트엔드와 백엔드 — 식당의 홀과 주방

{{-- ============================================================ --}} {{-- 2. HTML — 웹의 뼈대 --}} {{-- ============================================================ --}}

2 HTML — 웹의 뼈대

태그와 구조

비유: 건물의 설계도

HTML은 건물의 설계도와 같다. 여기는 거실, 저기는 주방, 위층은 침실 — 이렇게 공간의 위치와 구조를 정한다. HTML 태그가 바로 이 역할을 한다. <div>는 방, <p>는 메모지, <img>는 액자다.

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어다. 모든 웹 페이지는 HTML 태그로 구성된다.

<!-- HTML 기본 구조 --> <html> <head> <title>페이지 제목</title> </head> <body> <h1>안녕하세요</h1> <p>첫 번째 문단입니다.</p> <button>클릭</button> </body> </html>
태그 비유 역할
<div> 빈 방 영역을 나누는 범용 컨테이너
<p> 메모지 문단(paragraph)
<h1>~<h6> 간판(크기순) 제목(heading), h1이 가장 큼
<a> 문 (다른 방으로) 링크(anchor)
<img> 액자 이미지 표시
<form> 주문서 사용자 입력 양식
<table> 엑셀 표 표 형식 데이터
<ul> / <li> 목록 메모 순서 없는 목록
<button> 누름 버튼 클릭 가능한 버튼
<input> 빈 칸 텍스트 입력 필드

시맨틱 태그 ?시맨틱(Semantic)은 "의미를 가진"이라는 뜻이다. <div> 대신 <header>, <nav>, <main> 등을 사용하면 검색엔진과 스크린리더가 페이지 구조를 이해할 수 있다.

시맨틱(Semantic) 태그는 "의미가 있는" 태그다. <div>만 쓰면 검색엔진이나 스크린리더가 내용을 이해하기 어렵다. 시맨틱 태그를 사용하면 "여기가 메뉴 영역이고, 여기가 본문이고, 여기가 푸터"라고 알려줄 수 있다.

<!-- 시맨틱 태그로 구성한 페이지 --> <header> 로고, 네비게이션 (건물 입구) </header> <nav> 메뉴 목록 (안내 표지판) </nav> <main> 핵심 콘텐츠 (본관) </main> <section> 주제별 구역 (각 층) </section> <article> 독립 콘텐츠 (개별 사무실) </article> <footer> 하단 정보 (건물 로비 안내판) </footer>

DOM 트리 구조 (문서 객체 모델)

document
 └── html
      ├── head
      │    └── title
      └── body
           ├── header
           │    └── nav
           ├── main
           │    ├── section
           │    └── section
           └── footer

브라우저는 HTML을 읽어 위와 같은 트리(나무) 구조로 변환한다. 이를 DOM(Document Object Model)이라 한다.

HTML DOM 트리 구조 다이어그램

DOM 트리 — HTML 문서의 구조

{{-- ============================================================ --}} {{-- 3. CSS — 웹의 옷 --}} {{-- ============================================================ --}}

3 CSS — 웹의 옷

선택자와 박스모델 ?선택자(Selector)는 "어떤 HTML 요소에 스타일을 적용할지" 지정하는 규칙이다. 박스모델은 모든 요소가 content → padding → border → margin 4겹 상자로 구성된다는 개념이다.

비유: 인테리어 디자인

CSS는 인테리어와 같다. HTML이 방의 위치를 정했다면, CSS는 벽지 색, 가구 크기, 조명 밝기를 결정한다. "거실 벽은 흰색, 소파는 가운데 배치" 같은 지시서가 CSS인 셈이다.

CSS(Cascading Style Sheets)는 HTML 요소의 외양을 꾸미는 스타일 언어다. 선택자로 "어떤 요소를" 지정하고, 속성으로 "어떻게" 꾸밀지 정한다.

/* CSS 선택자 기초 */ p { color: blue; } /* 태그 선택자 — 모든 <p> */ .warning { color: red; } /* 클래스 선택자 — class="warning" */ #header { color: green; } /* ID 선택자 — id="header" */

박스모델: 모든 HTML 요소는 상자(box)로 취급된다. 상자 안쪽부터 바깥쪽 순서로 구성된다. 

┌──────────────── margin (바깥 여백) ────────────────┐
│  ┌──────────── border (테두리) ──────────────┐     │
│  │  ┌──────── padding (안쪽 여백) ────────┐  │     │
│  │  │                                     │  │     │
│  │  │          content (내용물)            │  │     │
│  │  │                                     │  │     │
│  │  └─────────────────────────────────────┘  │     │
│  └───────────────────────────────────────────┘     │
└────────────────────────────────────────────────────┘
CSS 박스모델 다이어그램

CSS 박스모델 — margin, border, padding, content

Flexbox와 Grid ?Flexbox는 한 방향(가로 또는 세로)으로 요소를 나열할 때 사용하고, Grid는 가로+세로 2차원으로 배치할 때 사용한다. SAM에서는 Tailwind CSS의 flex/grid 클래스를 활용한다.

현대 CSS 레이아웃의 두 기둥이다. 요소를 가로/세로로 배치하는 강력한 도구다.

Flexbox (1차원 배치)

한 줄(가로 또는 세로)로 요소를 나란히 배치할 때 사용한다.

display: flex; justify-content: space-between; align-items: center;

Grid (2차원 배치)

행과 열을 동시에 제어하는 바둑판식 레이아웃에 사용한다.

display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;

SAM에서는 Tailwind CSS를 사용한다. Tailwind는 CSS를 파일에 따로 작성하지 않고, HTML 클래스명으로 직접 스타일을 적용하는 방식이다. 예: class="flex items-center gap-2 bg-white rounded-lg p-4"

{{-- ============================================================ --}} {{-- 4. JavaScript — 웹의 두뇌 --}} {{-- ============================================================ --}}

4 JavaScript — 웹의 두뇌

변수와 함수

비유: 전기 배선

JavaScript는 전기 배선과 같다. HTML이 방을 만들고 CSS가 꾸몄다면, JavaScript는 스위치를 누르면 조명이 켜지고, 리모컨을 누르면 TV가 켜지는 동작을 담당한다.

// 변수 — 값을 담는 상자 let userName = '홍길동'; // 변경 가능 const MAX_COUNT = 100; // 변경 불가 (상수) // 함수 — 재사용 가능한 명령 묶음 function greet(name) { return '안녕하세요, ' + name + '님!'; } greet('김사원'); // → "안녕하세요, 김사원님!"

이벤트 처리

클릭, 입력, 스크롤 등 사용자 행동을 감지하여 반응한다.

JSON (데이터 형식)

서버와 데이터를 주고받을 때 사용하는 텍스트 형식이다.

DOM 조작과 비동기 통신 ?DOM 조작은 JavaScript로 화면의 내용을 동적으로 변경하는 것이다. 비동기 통신(fetch)은 페이지 새로고침 없이 서버에서 데이터를 가져오는 기술이다.

JavaScript는 DOM(문서 객체)을 조작하여 화면을 동적으로 변경할 수 있다. 또한 fetch()를 사용하면 페이지 새로고침 없이 서버 데이터를 가져올 수 있다.

// 버튼 클릭 → API 호출 → 화면 업데이트 예시 const btn = document.querySelector('#load-btn'); const result = document.querySelector('#result'); btn.addEventListener('click', async () => { const response = await fetch('/api/orders'); const data = await response.json(); result.textContent = `주문 ${data.length}건 로드 완료`; });

비동기 통신이란? 서버에 데이터를 요청하면서도 화면이 멈추지 않는 방식이다. 마치 식당에서 주문을 넣고 기다리는 동안 물을 마시거나 대화를 할 수 있는 것과 같다. fetch(), async/await, Promise가 이 역할을 한다.

JavaScript 이벤트 흐름과 DOM 조작

JavaScript 이벤트 처리와 DOM 조작 흐름

{{-- ============================================================ --}} {{-- 5. 프레임워크와 라이브러리 --}} {{-- ============================================================ --}}

5 프레임워크와 라이브러리

프레임워크 vs 라이브러리 ?프레임워크는 전체 구조를 제공하고 개발자가 그 안에서 코드를 작성한다. 라이브러리는 필요한 기능만 골라 쓸 수 있는 도구 모음이다.

비유: 반조립 가구 vs 공구 세트

프레임워크는 이케아의 반조립 가구 — 설계도와 부품이 정해져 있어서 순서대로 조립하면 완성된다. 라이브러리는 공구 세트 — 필요할 때 원하는 도구만 꺼내 쓴다. 설계는 내가 한다.

R React

Meta(Facebook) 개발

  • • 컴포넌트 기반 설계
  • • 가상 DOM으로 빠른 렌더링
  • • 생태계가 가장 큼
V Vue

Evan You 개발

  • • 학습 곡선이 완만
  • • 양방향 데이터 바인딩
  • • 한국에서 인기
A Angular

Google 개발

  • • 풀(Full) 프레임워크
  • • TypeScript 기본
  • • 대규모 엔터프라이즈
기술 유형 특징
Next.js React 기반 프레임워크 서버사이드 렌더링(SSR), 파일 기반 라우팅
HTMX 경량 라이브러리 HTML 속성만으로 AJAX 요청 처리
jQuery 라이브러리 (레거시) DOM 조작 간소화, 2006년 등장 후 한 시대를 풍미

SAM의 프론트엔드 구조

SAM은 이중 프론트엔드 구조를 사용한다.

MNG (관리자 웹)

Laravel Blade + HTMX + Tailwind CSS

서버에서 HTML을 생성하여 전달

React 앱 (모바일/대시보드)

Next.js + React 18

브라우저에서 JavaScript로 화면 구성

프레임워크 비교: React, Vue, Angular

React / Vue / Angular 비교와 SAM 아키텍처

{{-- ============================================================ --}} {{-- 6. 반응형 디자인 --}} {{-- ============================================================ --}}

6 반응형 디자인

브레이크포인트와 모바일 퍼스트 ?브레이크포인트는 화면 너비에 따라 레이아웃이 바뀌는 기준점이다. 모바일 퍼스트는 작은 화면부터 디자인한 후 큰 화면으로 확장하는 접근법이다.

비유: 물은 그릇 모양에 따라 변한다

반응형 디자인은 물과 같다. 컵에 담으면 컵 모양, 접시에 부으면 접시 모양이 된다. 화면 크기(모바일, 태블릿, 데스크톱)에 따라 레이아웃이 자동으로 바뀌는 것이 반응형이다.

브레이크포인트(Breakpoint)는 레이아웃이 전환되는 화면 너비 기준점이다.

기기 너비 Tailwind 접두사 예시
모바일 ~639px (기본) 스마트폰
태블릿 640px~ sm: 아이패드
중간 768px~ md: 태블릿 가로
데스크톱 1024px~ lg: 노트북
대형 1280px~ xl: 대형 모니터
/* 모바일 퍼스트 — 작은 화면부터 설계 */ .card { width: 100%; /* 모바일: 전체 너비 */ } @media (min-width: 768px) { .card { width: 50%; } /* 태블릿: 2열 */ } @media (min-width: 1024px) { .card { width: 33.3%; } /* 데스크톱: 3열 */ }

디자인 흐름 (모바일 퍼스트)

1 모바일 레이아웃 → 2 태블릿 확장 → 3 데스크톱 완성

viewport 메타 태그: <meta name="viewport" content="width=device-width, initial-scale=1"> — 이 한 줄이 없으면 모바일에서 데스크톱 크기로 축소되어 보인다. 모든 반응형 페이지의 필수 태그다.

반응형 디자인: 모바일, 태블릿, 데스크톱

모바일 / 태블릿 / 데스크톱 반응형 레이아웃

{{-- ============================================================ --}} {{-- 7. 브라우저 동작 원리 --}} {{-- ============================================================ --}}

7 브라우저 동작 원리

렌더링 파이프라인 ?렌더링 파이프라인은 브라우저가 HTML/CSS/JS 코드를 화면의 픽셀로 변환하는 일련의 처리 과정이다.

비유: 통역사

브라우저는 통역사와 같다. HTML/CSS/JavaScript라는 "외국어"를 읽고, 우리가 볼 수 있는 화면으로 번역해준다. 이 번역 과정을 렌더링(Rendering)이라 한다.

렌더링 과정 (6단계)

1
HTML 파싱 — HTML 코드를 읽어 DOM 트리를 생성한다
2
CSS 파싱 — CSS를 읽어 CSSOM(스타일 트리)을 생성한다
3
렌더 트리 — DOM + CSSOM을 합쳐 실제 화면에 표시할 요소를 결정한다
4
레이아웃 — 각 요소의 정확한 위치와 크기를 계산한다
5
페인트 — 계산된 결과를 실제 픽셀로 그린다
6
합성 — 여러 레이어를 합쳐 최종 화면을 완성한다

개발자 도구 (F12)

브라우저에서 F12 키를 누르면 개발자 도구가 열린다.

  • Elements — HTML 구조 확인/수정
  • Console — JavaScript 실행/오류 확인
  • Network — API 요청/응답 확인
  • Performance — 성능 분석

주요 브라우저

  • Chrome — 점유율 1위, V8 엔진
  • Safari — Apple 기기 기본 브라우저
  • Firefox — Mozilla 재단, 개인정보 보호
  • Edge — Microsoft, Chromium 기반
CORS 에러가 발생하는 이유

CORS(Cross-Origin Resource Sharing)는 브라우저의 보안 정책이다. A 도메인의 웹페이지에서 B 도메인의 API를 호출하면, 브라우저가 "이거 허가받은 요청이야?" 하고 확인한다.

서버가 응답 헤더에 Access-Control-Allow-Origin을 포함하지 않으면 브라우저가 요청을 차단한다. 이때 콘솔에 빨간 CORS 에러가 표시된다.

해결법: 서버(백엔드) 쪽에서 CORS 헤더를 설정해야 한다. 프론트엔드만으로는 해결할 수 없다.

브라우저 렌더링 파이프라인

HTML 코드가 화면의 픽셀로 변환되는 6단계 과정

{{-- ============================================================ --}} {{-- 8. API 연동 --}} {{-- ============================================================ --}}

8 API 연동

REST API와 HTTP 메서드 ?REST API는 URL과 HTTP 메서드(GET/POST/PUT/DELETE)를 조합하여 서버 자원을 조작하는 규약이다. 웹에서 가장 널리 쓰이는 API 설계 방식이다.

비유: 식당의 주문서

API는 주문서와 같다. 프론트엔드(홀)가 백엔드(주방)에 "이 데이터를 주세요"라고 정해진 양식으로 요청하는 것이다. 주문서에는 "무엇을(URL) 어떻게(메서드) 해달라"고 적는다.

HTTP 메서드 비유 용도 예시
GET 메뉴판 보기 데이터 조회 GET /api/orders
POST 새 주문하기 데이터 생성 POST /api/orders
PUT 주문 변경 데이터 수정 PUT /api/orders/1
DELETE 주문 취소 데이터 삭제 DELETE /api/orders/1

JSON 데이터 형식

{ "id": 1, "customer": "홍길동", "amount": 150000, "status": "진행중" }

fetch()로 API 호출

const res = await fetch( '/api/orders', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ customer: '홍길동' }) } );
상태 코드 의미 비유
200 성공 주문한 음식이 나왔다
400 잘못된 요청 주문서를 잘못 작성했다
401 인증 실패 회원증 없이 회원 전용 식당에 왔다
404 찾을 수 없음 해당 메뉴가 없다
500 서버 오류 주방에서 화재가 났다

SAM의 API 통신: SAM React 앱은 api.sam-erp.com의 API 서버와 통신한다. MNG에서는 HTMX가 서버에 요청을 보내고 HTML 조각을 받아 화면을 업데이트한다.

API 요청과 응답 흐름

프론트엔드와 백엔드 간 API 요청/응답 흐름

{{-- ============================================================ --}} {{-- 9. 개발 도구와 워크플로우 --}} {{-- ============================================================ --}}

9 개발 도구와 워크플로우

핵심 도구와 개발 흐름 ?프론트엔드 개발에는 코드 에디터(VS Code), 패키지 관리자(npm), 버전 관리(Git), 번들러(Vite) 등 여러 도구를 조합하여 사용한다.

VS Code

가장 널리 쓰이는 코드 에디터. 확장 프로그램으로 기능을 무한히 추가할 수 있다. 무료.

npm (Node Package Manager)

JavaScript 패키지(라이브러리)를 설치·관리하는 도구. npm install로 의존성을 설치한다.

Git

코드 버전 관리. 변경 이력 추적, 협업, 되돌리기가 가능하다. (→ 서버지식 참고)

린터 & 포매터

ESLint(코드 오류 검출), Prettier(코드 스타일 자동 정리). PHP에서는 Pint를 사용한다.

Vite (현대적 번들러)

차세대 프론트엔드 빌드 도구. 빠른 개발 서버와 효율적인 번들링을 제공한다.

  • • 즉시 시작되는 개발 서버
  • • 변경 사항 즉시 반영 (HMR)
  • • Rollup 기반 최적 빌드

Webpack (전통적 번들러)

오랫동안 표준이었던 번들러. 복잡하지만 강력한 설정이 가능하다.

  • • 풍부한 플러그인 생태계
  • • 세밀한 설정 가능
  • • 대규모 프로젝트에 적합

개발 워크플로우

1
코드 작성 — VS Code에서 HTML/CSS/JS 작성
2
린트 검사 — ESLint/Prettier로 코드 품질 확인
3
로컬 테스트 — 브라우저에서 동작 확인 (개발 서버)
4
Git 커밋 — 변경사항 저장 (버전 관리)
5
빌드 — 프로덕션용 최적화 코드 생성
6
배포 — 서버에 적용하여 사용자에게 서비스
개발 워크플로우

코드 작성부터 배포까지 — 개발 워크플로우

{{-- ============================================================ --}} {{-- 10. 성능 최적화 --}} {{-- ============================================================ --}}

10 성능 최적화

Lighthouse와 Core Web Vitals ?Lighthouse는 Google이 제공하는 웹 성능 측정 도구이다. Core Web Vitals는 LCP(로딩 속도), FID(반응 속도), CLS(레이아웃 안정성) 3가지 핵심 지표이다.

Lighthouse는 Google이 제공하는 웹 성능 측정 도구다. Chrome 개발자 도구(F12) → Lighthouse 탭에서 실행할 수 있다.

Performance

로딩 속도

Accessibility

접근성

Best Practices

모범 사례

SEO

검색 최적화

지표 이름 비유 좋은 기준
LCP Largest Contentful Paint 큰 간판이 보이는 시간 2.5초 이내
FID First Input Delay 버튼 눌렀을 때 반응 시간 100ms 이내
CLS Cumulative Layout Shift 화면 레이아웃이 튀는 정도 0.1 이내

최적화 방법

  • • 이미지: WebP 포맷, 적절한 크기, lazy loading
  • • 코드 분할: 필요한 코드만 로드
  • • 캐싱: 브라우저 캐시, CDN 활용
  • • 압축: gzip/brotli로 전송 크기 축소

성능 저하 원인

  • • 대용량 이미지 무압축 로드
  • • 사용하지 않는 JavaScript 번들
  • • 렌더링 차단 CSS/JS
  • • 너무 많은 API 요청
Lighthouse로 SAM 성능 측정하는 법

1. Chrome에서 SAM 페이지를 연다

2. F12를 눌러 개발자 도구를 연다

3. 상단 탭에서 Lighthouse를 클릭한다

4. "Analyze page load"를 클릭한다

5. 30초~1분 후 결과가 표시된다

각 항목에서 100점에 가까울수록 좋다. 90점 이상이면 녹색, 50~89점은 주황색, 49점 이하는 빨간색이다.

핵심 정리

프론트엔드는 "사용자가 보고 만지는 모든 것"이다. HTML로 뼈대를 만들고, CSS로 꾸미고, JavaScript로 동작을 넣는다. React, Vue 같은 프레임워크로 복잡한 화면을 효율적으로 관리하고, 반응형 디자인으로 모든 기기에서 잘 보이게 만든다. API를 통해 백엔드와 데이터를 주고받고, Lighthouse로 성능을 측정하여 최적화한다. SAM은 MNG(Blade+HTMX)와 React(Next.js) 이중 프론트엔드 구조로, 이 모든 기술을 활용하고 있다.

@include('components.academy-glossary', ['domain' => 'frontend-dev']) @endsection