ㅁ 웹 배포 및 서버리스

ㅇ 정의:
웹 UI(Web User Interface)는 사용자가 웹 브라우저를 통해 애플리케이션과 상호작용할 수 있도록 하는 시각적 인터페이스를 의미하며, HTML, CSS, JavaScript 등을 기반으로 구현된다.

ㅇ 특징:
– 플랫폼 독립적으로 동작하며, 브라우저만 있으면 접근 가능
– 서버와의 통신을 위해 REST API, GraphQL 등을 활용
– 반응형 디자인을 적용해 다양한 화면 크기 지원
– 배포 시 CDN(Content Delivery Network)과 연계 가능

ㅇ 적합한 경우:
– 다수의 사용자에게 동일한 기능을 제공해야 하는 서비스
– 클라이언트 설치 없이 접근이 필요한 경우
– 빠른 기능 업데이트와 배포가 요구되는 프로젝트

ㅇ 시험 함정:
– 웹 UI 자체는 서버리스 아키텍처가 아님에도 서버리스 환경에서 동작할 수 있음
– 웹 UI는 프론트엔드 기술이며, API 서버나 데이터베이스와는 별도의 계층임
– 브라우저 호환성 이슈를 간과하는 경우

ㅇ 시험 대비 “패턴 보기” 예시:
O: “웹 UI는 브라우저를 통해 사용자와 상호작용하는 시각적 인터페이스이다.”
X: “웹 UI는 서버 측 데이터 처리를 직접 수행하는 백엔드 모듈이다.”

ㅁ 추가 학습 내용

웹 UI 배포 시 고려해야 할 보안 요소
– HTTPS: 데이터 전송 시 암호화를 통해 도청 및 변조 방지
– CSP(Content Security Policy): 스크립트, 스타일, 이미지 등의 로드 출처를 제한하여 XSS 등 공격 방지
– XSS 방지: 입력값 검증, 출력 시 이스케이프 처리, 신뢰할 수 없는 스크립트 차단

성능 최적화 기법
– 코드 스플리팅: 필요한 코드만 로드하여 초기 로딩 속도 향상
– 이미지 최적화: 용량 축소, WebP 등 최신 포맷 사용
– Lazy Loading: 화면에 필요한 시점에만 리소스 로드하여 초기 로딩 시간 단축

서버리스 환경에서의 웹 UI 호스팅 방식
– S3 + CloudFront: 정적 파일을 S3에 저장하고 CloudFront CDN으로 전 세계에 빠르게 배포
– Firebase Hosting: 구글 인프라 기반의 정적 및 동적 콘텐츠 호스팅, SSL 기본 제공

SPA와 MPA의 차이
– SPA(Single Page Application): 하나의 HTML 페이지에서 동적으로 콘텐츠를 로드, 빠른 화면 전환, 초기 로딩이 길 수 있음
– MPA(Multi Page Application): 요청마다 새로운 페이지 로드, 초기 로딩 빠름, 페이지 전환 시 새로고침 발생

웹 UI 테스트 자동화 도구와 CI/CD 연계
– Selenium: 다양한 브라우저 자동화 지원, UI 동작 검증 가능
– Cypress: 빠른 실행 속도, 개발자 친화적 API 제공, 실시간 리로딩 지원
– CI/CD 연계: GitHub Actions, Jenkins, GitLab CI 등과 통합하여 코드 변경 시 자동으로 테스트 실행 및 배포