From 8474578c00578c3d83c6bedcc45dd99626d319e7 Mon Sep 17 00:00:00 2001 From: gunom Date: Wed, 14 Jun 2023 16:32:12 +0900 Subject: [PATCH] =?UTF-8?q?[FEAT]=201=EC=A3=BC=EC=B0=A8=20=EC=83=9D?= =?UTF-8?q?=EA=B0=81=EA=B3=BC=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...35\352\260\201\352\263\274\354\240\234.md" | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 "1\354\243\274\354\260\250/\354\203\235\352\260\201\352\263\274\354\240\234.md" diff --git "a/1\354\243\274\354\260\250/\354\203\235\352\260\201\352\263\274\354\240\234.md" "b/1\354\243\274\354\260\250/\354\203\235\352\260\201\352\263\274\354\240\234.md" new file mode 100644 index 0000000..365c25e --- /dev/null +++ "b/1\354\243\274\354\260\250/\354\203\235\352\260\201\352\263\274\354\240\234.md" @@ -0,0 +1,51 @@ +# 웹 최적화 + +웹 최적화는 크게 두 가지 관점에서 생각할 수 있다. 하나는 성능적인 관점과 다른 하나는 UI/UX 관점이다. + +## 성능적인 관점 + +- 로딩 시간 최적화: 웹 페이지의 로딩 속도를 최적화하여 유저가 빠르게 컨텐츠에 접근할 수 있도록 한다. **파일 압축**, **캐싱**, **이미지 최적화** 등 기술을 고려할 수 있다. +- 반응성 및 처리 속도 최적화: 유저의 입력에 빠르게 반응하고, 데이터 처리 및 서버 응답 시간이 최소화되도록 한다. 단순 클라이언트 사이드만이 아닌 서버 사이드에서도 함께 고려해야 한다. +- 네트워크 최적화: 데이터 전송량을 최소화하고, 네트워크 리소스를 효율적으로 사용하여 성능을 향상시킨다. CDN, 데이터 압축, 미디어 스트리밍 등을 적용할 수 있다. + +### 파일 압축 + +파일 압축은 Gzip 압축을 통해 파일 크기를 줄이고, 서버와 클라이언트 사이에 전송 시간을 단축할 수 있다. + +### 캐싱 + +브라우저 캐싱을 통해 웹 브라우저에서 서버에서 받은 파일을 로컬에 캐시하여 반복적인 요청에 대한 성능울 향상시키고 네트워크 트래픽을 줄일 수 있다. + +### CDN + +분산 서버 네트워크를 통해 콘텐츠를 캐싱하고 전송하여 웹 서버의 부하를 분산시킨다. + +### 이미지 최적화 기술 + +이미지 포맷에 대해 사진은 JPEG를 사용하고, 투명도가 필요한 이미지는 PNG를 사용하는 등 용도에 맞는 포맷을 지정. + +이미지를 표시할 때 보여지는 크기보다 큰 이미지를 사용하는 것은 성능에 부하를 발생시키므로 파일크기를 조절하여 최적화할 수 있다. + +이미지 파일을 압축하여 성능을 개선할 수도 있다. + +### 네트워크 최적화 방식 + +- 캐싱 헤더 사용: 서버에서 클라이언트로 전송되는 응답 헤더에 캐싱 헤더를 포함하여 콘텐츠를 캐싱할 수 있다. +- 지연 로딩: 웹 페이지에 이미지나 동영상을 필요할 때까지 로딩하지 않고 필요 시 로딩 시작. 초기 페이지 로딩 속도 향상 가능하다. +- 스프라이트 이미지: 여러 개의 작은 이미지를 하나의 큰 이미지로 결합하여 사용. 네트워크의 오버헤드를 줄이고 로딩 속도 향상 가능하다. + +## UI/UX 관점 + +- 유저 친화적 인터페이스: 웹 사이트의 디자인과 레이아웃을 사용자가 쉽게 이해하고 조작할 수 있는 방식으로 구성한다. +- 상태 표시를 통한 피드백: 유저의 입력 및 상태 변화에 대한 적절한 피드백을 제공하여 유저가 어떤 동작을 취했는지 이해하고, 웹 사이트의 상태를 인식할 수 있도록 한다. ex) 로딩 페이지 +- 모바일 친화적 디자인: 모바일에서 웹 사이트를 사용하는 유저를 고려하여 반응형 디자인이나 모바일 전용 디자인을 적용. + +# 최적화가 필요한 이유 + +## 유저 경험 향상 + +유저 경험이 좋아지면 이용자의 유입을 높이고 이탈률 감소에 도움이 된다. + +## SEO 향상 + +검색 엔진 최적화를 위해서도 중요하다. 검색 엔진은 웹 사이트의 로딩 속도와 사용자 경험을 고려하여 검색 결과의 순위를 결정한다.