항해 플러스 프론트엔드 후기 (9주차) - 인프라 레벨에서의 프론트엔드 성능 최적화

헤욤이·2025년 2월 28일

개발자부트캠프 개발자스터디 개발자커뮤니티 프론트엔드스터디 프론트엔드커뮤니티 항해플러스프론트엔드 항해플러스후기 현직자부트캠프

항해 플러스 프론트엔드 4기

목록 보기

9/10

들어가면서

항해 플러스 chapter 4에서는 성능 최적화를 다룬다. 지난번 테스트코드에 이어, 성능 최적화는 프론트엔드 개발자라면 누구나 관심을 가져야 하는 핵심 주제다. 사용자와 직접적으로 맞닿아 있는 영역인 만큼, 콘텐츠를 빠르게 로딩하고 사용자 경험을 개선하는 것은 프론트엔드 개발자의 중요한 책임 중 하나다.

하지만 실무에서의 현실은... 기능 구현에 급급하여 성능 최적화에 충분한 관심을 기울이지 못하는 경우가 많다. 나 역시 그렇다. 심지어 사용자 경험이 특히 중요한 쇼핑 애플리케이션을 개발하면서도 말이다. 현직 개발자라면 공감하겠지만, 이미 작성된 코드를 리팩토링할 시간은 항상 부족하다. 설계 단계부터 코드를 작성하는 과정에서 성능 최적화 기법을 염두에 두고 적용하는 것이 가장 현실적인 접근법이라는 생각이 든다.

이번 항해 과제를 통해 얻은 지식을 바탕으로 앞으로는 개발 초기 단계부터 성능 최적화를 고려하며 기능을 구현할 수 있으리라 기대해 본다.

(이번 WIL을 작성하는 데 있어 이보라 코치님의 발제 자료를 많이 참고했다.)

9주차 WIL

웹 성능 최적화: 코드 레벨과 인프라 레벨

웹 애플리케이션의 성능을 향상시키는 방법은 크게 두 가지 접근법으로 나눌 수 있다. 코드 레벨 최적화와 인프라 레벨 최적화가 바로 그것이다.

코드 레벨

코드 레벨 최적화는 주로 JavaScript, CSS, HTML 및 리소스 관리에 중점을 둔다. 개발자가 주로 담당하며, 구현 난이도는 인프라 레벨 최적화보다는 쉬운 편이다.

코드 레벨 최적화의 큰 장점은 빠른 적용과 결과 확인이 가능하다는 점이다. 변경 사항을 바로 배포하고 효과를 즉시 측정할 수 있다. 하지만 지속적인 코드 관리가 필요하다.

이 접근법은 대체로 저비용이며, 로컬 성능 향상에 직접적인 영향을 미친다. 주로 프론트엔드 팀 내에서 협업이 이루어지며, 번들러, 프레임워크, 최적화 라이브러리 등의 여러 가지 도구를 활용하기도 하다.

예시 : 번들 최적화, 이미지 레이지 로딩, CSS 최적화 등 (프론트엔드 개발자들한테는 익숙한 용어들!)

인프라 레벨

인프라 레벨 최적화는 서버, 네트워크, 캐싱, 데이터베이스 등에 중점을 둔다. 백엔드 개발자나 DevOps 엔지니어가 주로 담당하며, 구현 난이도는 높은 편이다. 전체 시스템이나 여러 애플리케이션에 적용되며, 상대적으로 변경 주기가 덜 빈번하다.

인프라 레벨 최적화는 적용 및 결과 확인에 시간이 소요되지만, 확장성이 높다는 장점이 있다. 초기 투자 비용이 높을 수 있으나, 전체 시스템 성능에 광범위한 영향을 미친다.

설정 후에는 상대적으로 안정적이지만, 여러 팀 간의 협업이 필요하다. 클라우드 서비스, CDN, 캐싱 솔루션 등의 도구와 기술을 활용한다.

인프라 레벨 최적화의 주요 이점은 대규모 성능 향상과 안정성 개선이지만, 인프라 제약이나 비용이 제한 사항으로 작용할 수 있다.

예시 : CDN 활용, 압축 적용, HTTP/2 적용 등..

인프라 레벨 최적화의 대표적인 예시

CDN 활용

CDN은 전 세계 여러 위치에 분산된 서버 네트워크를 통해 웹 콘텐츠를 사용자와 가까운 위치에서 제공하는 기술이다.
단일 서버에서 모든 정적 자산을 제공하면 지리적으로 먼 사용자의 로딩 속도가 느려진다.
CDN을 활용하면 사용자와 가까운 위치에서 콘텐츠를 제공하여 로딩 속도를 크게 향상시킬 수 있다. 또한 원본 서버의 부하를 분산시켜 전체 시스템의 안정성도 높일 수 있다.
CloudFront나 Cloudflare 같은 CDN 서비스를 도입하면 전 세계 사용자의 평균 페이지 로드 시간이 크게 감소하고, 원본 서버 트래픽을 줄일 수 있다. 특히 글로벌 서비스를 운영하는 경우 CDN은 필수적인 요소다.

function ProductImage() {
  // 기존 방식 (CDN 미사용)
  // return <img src="/images/product.jpg" alt="Product" />;
  
  // CDN 활용 방식
  return <img 
    src="https://your-cdn-url.com/images/product.jpg" 
    alt="Product"
  />;
}

브라우저 캐시 최적화

브라우저 캐시 최적화는 웹 리소스에 적절한 캐싱 정책을 설정하여 반복 방문 시 리소스를 다시 다운로드하지 않도록 하는 기술이다.
적절한 캐시 정책 없이 모든 리소스를 매번 새로 다운로드하면 불필요한 네트워크 사용이 발생한다. HTTP 헤더(Cache-Control 등)를 통해 효과적인 캐시 정책을 구현하면 반복 방문 시 페이지 로드 속도를 크게 향상시킬 수 있다.

// webpack.config.js
module.exports = {
  output: {
    // 파일 이름에 해시 추가 - 내용이 변경될 때만 새 파일명 생성
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].chunk.js',
  },
};

서버 사이드 렌더링 (SSR) 구현

서버 사이드 렌더링은 서버에서 페이지의 HTML을 생성하여 클라이언트에 전달하는 방식으로, 초기 로딩 속도와 SEO를 개선한다.
클라이언트 사이드 렌더링만 사용하면 초기 로딩 속도가 느리고 SEO에 불리하다. SSR을 구현하면 서버에서 초기 HTML을 생성하여 전송하므로 사용자가 더 빠르게 콘텐츠를 볼 수 있다. 또한 검색 엔진이 콘텐츠를 더 잘 인식할 수 있어 SEO에도 유리하다.

// Next.js를 활용한 SSR 구현 예시
// pages/product/[id].js
export async function getServerSideProps(context) {
  const { id } = context.params;
  const product = await fetchProductById(id);
  
  return {
    props: {
      product,
    },
  };
}

function ProductPage({ product }) {
  // 서버에서 전달받은 데이터로 페이지 렌더링
  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span>{product.price}</span>
    </div>
  );
}

export default ProductPage;

이 외에도 압축(Gzip, Brotli), HTTP/2, 로드 밸런싱 등의 전략이 있지만 프론트엔드 개발자들한테 익숙한 전략을 중심으로 다루어 봤다. ...더 공부가 필요하다.

마무리하면서

웹 성능 최적화는 단순히 기술적 과제가 아니라 사용자 경험과 비즈니스 성과에 직접 영향을 미치는 중요한 결정이다. 페이지 로드 시간이 3초를 넘어갈 때마다 이탈률이 32% 증가한다는 연구 결과가 있다. 이런 수치가 계속 언급되는 걸 보면 성능 최적화의 중요성은 분명해 보인다.

얼마 전 우리 앱의 이미지 로딩 속도가 느려 이번 주차에서 배운 CDN을 적용해 보고자 S3에 접속해 이미지를 뜯어보고 있는데, 우리 회사에서 이미 CloudFront를 사용하고 있다는 사실을 그때 알게 되었다. (...) 부끄러운 일화이지만 그만큼 기능 구현에 급급해 최적화에 무지했던 나를 반성하며 솔직하게 밝혀본다.

인프라 레벨의 최적화에 있어서는 프론트엔드 개발자로서 앞으로 갈 길이 멀지만, 결국 다루고 알아야 할 내용인 건 분명하다. 앞으로 실무를 하며 더 적극적으로 성능 최적화 기법을 학습하고 적용할 것이다. 기능 개발과 성능 최적화 사이의 균형을 찾아 사용자에게 더 나은 경험을 제공하는 것이 진정한 프론트엔드 개발자의 역할이라고 생각한다. 이번 항해 플러스를 통해 얻은 지식이 그 첫걸음이 되어줄 것이라 기대해본다.

항해 플러스 5기 모집 중입니다 :)
https://hanghae99.spartacodingclub.kr/plus/fe

(추천인 코드 ELPVP6 를 입력하시면 수강료를 20만원 할인받을 수 있습니다)