웹 기반 서비스 성능관리

문제 2) 최근에는 웹기반 서비스의 증가와 모바일 퍼스트(Mobile First) 에 따른 웹기반 서비스의 성능관리가 매우 중요하다. 다음에 대하여 설명하시오.

 

가. 웹 성능저하 요인

나. 프론트 엔드 관점에서의 웹 최적화 방안 6가지

 

답)

 

 

1. 웹 기반 서비스 성능관리의 개요

가. 웹기반 서비스 성능의 중요성

 

나. 웹기반 서비스 성능의 영향도

영향도	설명
사용자 유지 좌우	성능이 좋은 웹 서비스는 더 많은 사용자의 참여를 유도
전환율 향상 좌우	느린 사이트는 수익에 부정적인 영향을 미치고 빠른 사이트는 전환율을 높임
사용자 경험 좌우	웹 서비스가 로드되기 시작하면 사용자가 콘텐츠가 표시되기를 기다리는 시간
사람을 좌우	성능이 좋은 웹 서비스는 이를 사용하는 사람들에게 실질적인 이윤을 제공
웹기반 서비스 성능 향상을 위해 전 구간 별 상세 성능 진단을 실시하고 구간별 성능 지표 설정이 필요

 

2. 웹 성능저하 요인 설명

가. 웹 성능저하 주요 구간

 

웹 성능 개선을 위해 Client 부터 웹 서버/DB 까지 발생하는 성능 저하 요인을 상세히 도출 필요

 

나. 웹 성능 저하 요인 주요 구간별 상세 설명

분류	저하 요인	설명
유/무선 지연구간	Client 요청 증가	웹, 모바일 등 다양한 사용자 요청 수
	대용량 미디어 파일 전송	동양상, 음성 등 큰 사이즈의 파일 업/다운로드
	캐싱 기술 미 적용	웹 브라우저 캐싱 미적용으로 매번 서버에 요청
	CDN 미 적용	가까운 CDN 미 적용으로 원 서버가 있는 IDC 로 요청
보안점검 지연구간	IP, Port 점검	Client 의 접속 시도 IP 와 Port 를 점검하는 시간 소요
	IDS, IPS 점검	침입차단, 침입발견 등 보안 장비에서의 시간 소요
	요청 내용 점검	Client 의 요청에 부정한 data 가 있는지 점검
	반출 Data 점검	외부로 리턴되는 data에 기업 보안 위반 사항 점검
WEB,WAS,DB 연산 지연 구간	최적화 되지 않은 CSS	캐스케이딩 스타일 시트에 부정확한 마크업 사용
	부정한 코딩	개발자의 실수 또는 의도된 부정한 소스코드
	튜닝되지 않는 DB Query	인덱스 미 활용, 불필요 데이터 조회 등 시간 소요
	서버 설정 문제	커넥션 풀, 메모리 사이즈 등 미숙한 서버 설정
사용자 입장에서 직접 체감할 수 있는 프론트-엔드 관점에서의 최적화 방안 수립 필요

 

3. 프론트-엔드 관점에서의 웹 최적화 방안 6가지 설명

가. 프론트-엔드 관점에서의 웹 최적화 요구사항 및 해결방안

 

프론트-엔드 관점은 사용자가 이용하는 디바이스에서 실행되는 성능 측면을 고려한 최적화 접근 필요

 

나. 프론트-엔드 관점에서의 웹 최적화 방안 6가지

분류	웹 최적화 방안	설명
웹페이지 로딩 최적화	JS, CSS 로드 시 불로킹 방지	script 로드를 위한 script 태그는 DOM 생성 블로킹을 일으킬 수 있기 때문에 HTML 최하단에 배치
	JS, CSS 로드 사이즈 줄이기	Webpack, Parcle 같은 번들러가 제공하는 기능을 이용해서 파일 사이즈를 줄임
	WebP사용, 이미지 스프라이트	이미지 스프라이트는 여러 개 이미지를 하나로 생성 CSS 의 속성을 활용해 부분 이미지 사용
	레이지 로드(lazy load)이용	Html 의 loading 옵션을 이용 Intersection Observer 를 활용해서 적시 이미지 로드
웹페이지 랜더 및 실행 최적화	JS 실행 최적화	Web Worker 를 이용해서 비동기적으로 계산
	레이아웃 변경 전략	강제 동기 레이아웃 피하기, 레이아웃 스래싱 피하기 JS보다는 CSS 애니메이션을 활용
	DOM 변화는 최대한 적게	DocumentFragment 활용해서 한 번에 붙이는게 유리
	FCP(First Contentful Paint) 및 TTI(Time to Interactive) 개선	FCP(텍스트/이미지 그리기 시작), TTI(사용자가행동을 취할 수 있는 시점)을 개선하기 위한 전략 수립
공통 영역 최적화	도메인 분리	파일을 불러오는 도메인은 다르게 정의
	Service Worker 사용	JS코드나 스태틱 리소스들을 브라우저 내부에 캐싱해서 오프라인 상황에서도 사용
웹 서비스 성능 개선하기 위해서는 프론트-엔드 뿐만 아니라 백-엔드 성능까지 최적화가 필요

 

4. 백-엔드 관점에서의 웹 최적화 방안

웹 서비스 최적화를 위해 프론트-엔드 뿐만 아니라 백-엔드 및 프로토콜 최적화 등 3가지 관점에서 접근 필요

---

 

공감과 댓글은 아이티신비에게 큰 힘이 됩니다.

블로그 글이 유용하다면 블로그를 구독해주세요.♥