웹 성능을 개선하기 위해 알아야 할 세 가지 지표 LCP(Largest Contentful Paint), FID(First Input Delay), CLS(Cumulative Layout Shift)에 대해 자세히 소개하고, Lighthouse로 개선하는 방법에 대해 살펴봅니다.
1. 웹 성능 개선은 무엇을 의미할까요?
2. 웹 성능 알아보기
3. Core Web Vitals
4. Lighthouse란?
5. Lighthouse로 개선하기
모바일 성능 모니터링, 웹 서버 성능 진단 및 부하테스트 컨설팅에 관심이 있으신 분은 아래 연락처로 연락해주시면, 전문 컨설턴트가 안내해드리겠습니다.
- 홈페이지: https://imqa.io
- 메일: support@imqa.io
- 전화: 02-6395-7730
- 채팅: https://imqa.channel.io/
[NDC 2014] 유저 수만큼 다양한 섬을 만들자
<야생의>의 절차적인 섬 생성 기법
발표장에서 시간이 없어서 답변드리지 못했던 Q&A 내용들을 뒷 부분에 추가하였습니다.
GIF 가 포함된 부분은 잘 나오지 않으므로 궁금하시면 직접 다운로드 받아서 보시기 바랍니다. - http://goo.gl/UUKmjL
[NDC 2014] 유저 수만큼 다양한 섬을 만들자
<야생의>의 절차적인 섬 생성 기법
발표장에서 시간이 없어서 답변드리지 못했던 Q&A 내용들을 뒷 부분에 추가하였습니다.
GIF 가 포함된 부분은 잘 나오지 않으므로 궁금하시면 직접 다운로드 받아서 보시기 바랍니다. - http://goo.gl/UUKmjL
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버Heungsub Lee
NDC14에서 발표한 "[야생의 땅: 듀랑고] 서버 아키텍처" 세션의 슬라이드입니다.
슬라이드에 설명이 많지 않은데, 디스이즈게임에서 발표 내용을 잘 정리해주었습니다. 기사도 함께 보시면 좋을 것 같습니다.
http://www.thisisgame.com/webzine/news/nboard/4/?n=54955
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기강 민우
펄어비스의 MMORPG, 검은사막에 적용되어있는 AI 네비게이션 기능은 VOXEL 기반으로 자체 개발한 엔진을 이용해 구현되어 있습니다. 기존의 대다수 상용 라이브러리들이 네비 메쉬라고 하는 이동가능한 평면을 표현하는 폴리곤 기반의 데이터를 이용해 길찾기를 수행해주는 것에 비해 근간이 다릅니다. 이 강연에서는 검은사막의 네비게이션 엔진을 구현하고, 서버 / 클라이언트에 적용하면서 얻게된 노하우와 적용된 결과물들을 소개합니다.
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...Amazon Web Services Korea
서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
[야생의 땅: 듀랑고] 서버 아키텍처 - SPOF 없는 분산 MMORPG 서버Heungsub Lee
NDC14에서 발표한 "[야생의 땅: 듀랑고] 서버 아키텍처" 세션의 슬라이드입니다.
슬라이드에 설명이 많지 않은데, 디스이즈게임에서 발표 내용을 잘 정리해주었습니다. 기사도 함께 보시면 좋을 것 같습니다.
http://www.thisisgame.com/webzine/news/nboard/4/?n=54955
[IGC 2017] 펄어비스 민경인 - Mmorpg를 위한 voxel 기반 네비게이션 라이브러리 개발기강 민우
펄어비스의 MMORPG, 검은사막에 적용되어있는 AI 네비게이션 기능은 VOXEL 기반으로 자체 개발한 엔진을 이용해 구현되어 있습니다. 기존의 대다수 상용 라이브러리들이 네비 메쉬라고 하는 이동가능한 평면을 표현하는 폴리곤 기반의 데이터를 이용해 길찾기를 수행해주는 것에 비해 근간이 다릅니다. 이 강연에서는 검은사막의 네비게이션 엔진을 구현하고, 서버 / 클라이언트에 적용하면서 얻게된 노하우와 적용된 결과물들을 소개합니다.
오딘: 발할라 라이징 MMORPG의 성능 최적화 사례 공유 [카카오게임즈 - 레벨 300] - 발표자: 김문권, 팀장, 라이온하트 스튜디오...Amazon Web Services Korea
서비스 런칭을 위해 라이온하트와 카카오게임즈가 어떻게 최적 성능의 인스턴스를 선택하고, Windows 운영 체제를 최적화하며, 왜 Amazon Aurora를 기본 데이터베이스로 채택하였는지를 설명합니다. 또한, 출시부터 운영까지의 과정에서 MMORPG가 어떻게 AWS 상에서 설계되고, 게임 서버 성능을 극대할 수 있었는지에 대해 전달해드립니다.
어느 해커쏜에 참여한 백엔드 개발자들을 위한 교육자료
쉽게 만든다고 했는데도, 많이 어려웠나봅니다.
제 욕심이 과했던 것 같아요. 담번엔 좀 더 쉽게 !
- 독자 : 백엔드 개발자를 희망하는 사람 (취준생, 이직 희망자), 5년차 이하
- 주요 내용 : 백엔드 개발을 할 때 일어나는 일들(개발팀의 일)
- 비상업적 목적으로 인용은 가능합니다. (출처 명기 필수)
글로벌 향 서비스 구축 시, 네이버 클라우드 플랫폼에서 사용할 수 있는 서비스들과 인프라단에서 고려해야 할 사항들에 대해서 자세히 소개해 드립니다 | Let me introduce you in detail the services available on the Naver cloud platform and what the infrastructure needs to consider when building a global service.
2022년 11월 18일 코엑스에서 개최한 공공솔루션마켓에서 발표한 강연 자료입니다.
디지털 전환이 가속화됨에 따라 더욱 중요해진 디지털 경험 모니터링과 장애 및 병목 등 성능을 개선한 실 사례를 공유드립니다.
생생한 강연 영상으로 확인해 보세요!
https://youtu.be/_Cdms2TxO3M
CoreDot TechSeminar 2018 - Session2 Ji DonghyunCore.Today
코어닷 기술 세미나 2018
Session #2 : 지동현 (NXTechnology 개발팀장)
Node.JS를 활용하여 IoT 플랫폼 만들기
15:00 ~ 15:50
프론트엔드와 백엔드가 함께 소통하기 위해 필요한 API. 그 API를 Node.JS로 만들고, 이를 IoT에서 활용하는 우리 회사의 사례를 소개해 드립니다.
- API란?
- 왜 Node.JS가 좋은가
- IoT에 적용해 보는 Node.JS
https://coredottoday.github.io/2018/10/15/Coredot-기술-세미나/
https://www.youtube.com/watch?v=Uf8Ef_UZFYQ
2022년 11월 30일 코엑스에서 개최한 베스트콘2022(Better Software Testing Conference 2022)에서 발표한 강연 자료입니다.
대규모 장애를 막기 위해 소프트웨어/품질 엔지니어가 알아야 할 내결함성의 개념과 설계 기법을 공유드립니다.
생생한 강연 영상으로 확인해 보세요!
https://youtu.be/OLsv7oG0VPo
MDTF (Maryladn Test Facility)는 출입국이 빈번하게 일어나는 공항/항구 환경에 최적화된 생체 테스트로, DHS S&T MDTF 생체 인식 기술 대회에 대한 내용을 조사한 문서를 공유드립니다.
AI 테스팅 및 데이터 확보 방법에 관심이 있는 분은 mkbaek@onycom.com연락 부탁드립니다.
BeSTCon 2021에 발표한 AI 파이프라인과 실전 테스트 발표 자료입니다.
어니컴은 안면인식/이상행동 식별 사업, 불법복제 판독 식별, AI 스피커 성능 테스팅에 참여하면서, AI 테스팅에 풍부한 경험이 쌓여있는 기업입니다.
본 자료에서는 실제 AI 테스팅시 알아야할 기초적인 개념과 유의할 사항 그리고 성능 지표 / 평가 데이터 구축에 대한 전반에 대한 것들을 소개하고자 합니다.
-AI 파이프라인의 이해
-품질 검증을 위해 품질 업체가 참여해야 하는 영역
-AI 모델에서 사용하는 주요 성능 평가 지표 설명
-안면인식 /이상행동 사례
-평가 데이터 선정
-편향성, 공정성에 대한 고민들
-학습/평가 데이터 정제와 고민해야 하는 것들
-성능 리포트 작성시 고려해야 하는 사안들
NIST(미국 국립표준기술연구소)가 주관하는 안면인식 공급업체 테스트(Face Recognition Vendor Test, 이하 FRVT) 는 안면 정보를 이용하여 출입국 심사, 여권 불법 복제 탐지, 미성년자 이용 범죄 피해자 식별 등 민간, 사법, 보안 영역에서 활용하는 자동화된 얼굴 인식 기술의 성능을 측정하는 대회로 본 문서에서는 주요 4가지 평가 유형 및 특징에 대해 설명합니다.
안면인식 테스트 (이미지, 영상)과 이상행동 식별에 대한 테스트가 필요한 경우는mkbaek@onycom.com으로 연락 부탁드립니다.
급증하는 온라인 사용자 증가, 부하테스트가 필요하지 않으신가요?
요즘 인터넷 뉴스에는 홈페이지 접속자 폭증으로 인한 서버 다운, xx은행 모바일 앱 접속 에러, 인터넷 뱅킹 장애 등 온라인 시장과 모바일 시장이 급격하게 성장함에 따라 이에 따른 장애 소식이 끊이지 않고 전해지고 있습니다.
그렇다면, 우리는 이런 장애들을 어떻게 대비할 수 있을까요?
웹∙앱 부하테스트 (성능 진단) 및 컨설팅 안은 웹∙앱 부하테스트(성능 진단 테스트) 진행 과정과 이를 기반으로 어떻게 컨설팅을 진행하고 있는지 소개하고, 나아가 관련 장애들을 대비할 수 있는 방법에 대해 설명합니다.
(공유드리는 파일은 slideshare에 업로드되었던 웹∙앱 부하테스트 성능 진단 및 컨설팅 안을 업데이트한 최신 본입니다.)
웹∙앱 부하테스트 (성능 진단) 및 컨설팅 자료는 아래와 같이 구성되어있습니다.
• 웹∙앱 성능을 진단하고 문제에 대한 원인 분석 및 개선방향을 제시합니다.
• 컨설팅 안에는 여러 실 성능 진단을 예시로 들고 이에 대한 원인 분석 및 개선방향을 도
출한 내용이 포함되어 있습니다.
1. 앱 성능 진단
• 앱 진단 절차
• 앱 진단 상세 내용
2. 웹 서버 성능 진단
• 웹 진단 절차
• 웹 진단 방향
3. 부하 테스트
• 현 테스트 시나리오 분석
• 테스트 시나리오 보완 방법
• 부하 테스트 진행 방안
• 부하 테스트 전략
• 클라우드 기반 테스트 방안
모바일 성능 모니터링, 웹 서버 성능 진단 및 부하테스트 컨설팅에 관심이 있으신 분은 아래 연락처로 연락해주시면, 전문 컨설턴트가 안내해드리겠습니다.
hhjung@onycom.com l 02-6395-7722
성능 진단 및 컨설팅 제안서입니다.
모바일 성능 모니터링, 모바일 자동화 테스트, 웹 서버 성능 테스트를 합리적인 가격에 컨설팅 해 드립니다.
⁍ 업데이트된 최신본 성능 진단 및 컨설팅 제안서 확인해 보세요!
https://www.slideshare.net/IMQAGroup/imqa-performance-consulting
50. Core Web Vitals
시각적인 안정성
빠른 상호작용
빠른 로딩
CLS
Cumulative Layout Shift
FID
First Input Delay
LCP
Largest Contentful Paint
사용자 경험을 최적화하는 핵심 지표
컨텐츠가 빠르게 나타나며, 빠른 반응의 상호작용과 안정적인 레이아웃은
사용자에게 좋은 경험을 안겨준다.
56. Lighthouse
Navigation Timespan Snapshot
라이트하우스 모든 지표 측정 가능
페이지 로딩 직후 접근성분석
단일 페이지 앱 분석하기 지원안함
시간범위에 따른 레이아웃 변화 측정
전체 성능 점수 측정 불가능
페이지 상태 분석 불가능
현재 상태에서 페이지 분석
현재 페이지의 DOM,
외부 요인 분석 불가능
분석 방법
71. LCP - Largest Contentful Paint
Lighthouse
Lagest Contentful Paint 같은 경우 화면에서 가장 큰 컨텐츠가 빠르게 나올 수록 높은 점수를 준다.
가장 큰 컨텐츠는 가장 중요한 컨텐츠이며
시각적으로 큰영역이기에 사용자가 빠르다고 느낍니다.
72. TBT - Total Blocking Time
Lighthouse
메인 스레드가 입력 응답을 막을 만큼 오래 차단되었을 때 FCP, TTI 사이의 총 시간을 측정
73. TBT - Total Blocking Time
Lighthouse
Long task의 50ms 제외한 나머지 시간
74. CLS - Cumulative Layout Shift
Lighthouse
레이아웃은 사용자에게 의도치않는 결과를 가져오게 만듭니다.
CLS는 화면기준으로 특정 영역이 이동한 거리로 계산합니다.
75. CLS - Cumulative Layout Shift
Lighthouse
버튼이 생성되면서 화면에서 반을 차지하고있는 초록박스가 이동됩니다.
버튼이 생성되면서 아래로 이동된 수치와 초록박스의 영향되는 영역을 계산
보여지는 화면 기준 초록박스 영역 50% x 아래로 이동된 수치 14%를 계산해서 0.5x0.14 = 0.07
76. CLS - Cumulative Layout Shift
Lighthouse
예상한 레이아웃 이동과 예상치 못한 레이아웃 이동
사용자 이벤트(입력) 기준으로 500ms가 지나면 예상치 못한 레이아웃이동