서버로 부터 받은 이미지 리소스의 로딩 시 속도 저하 개선 경험

저번에 MBC와 함께 모바일 호출 API를 개발하면서 이미지 리소스의 로딩 속도를 이미지 리사이징으로 어느정도 해결했던 경험이 있다. 어느정도 구현이 끝나고 모바일 이외 웹에서는 이 부분을 어떻게 해결했는지 궁금해졌다. 

 

역시나 웹에서도 서버에서 이미지를 받아오는 과정에서 눈에 띄게 속도 저하가 나타났다. 역시 방송사라 그런가 엄청난 고화질 사진들의 향연으로... 부득이하게 이를 개선해야 겠다 마음먹게 되었다. 언제 만들어졌는지는 모르지만 도저히 보기가 힘든.. 그랬다.. 

<그동안 이 게시판을 쓰긴 했을까..?>

🧵섬네일 추가

주니어 개발자로써 사실 더 나은 방법이 많긴할텐데.. 시간의 제한으로 일단 당장 생각나는 섬네일 로직을 추가시켜서 이미지 리스트에서는 원본보다 작은 섬네일을 보여주고 원할때만 원본이미지를 보여주는 형태로 구현을 할까한다. 여기에 브라우저 캐싱을 적용해 더욱 쾌적한 클라이언트 환경을 보여줄까 한다. 

 

이미지 섬네일 로직은 아래의 코드를 참고하였다.

public void GenerateThumbNail(string sourcefile, string destinationfile,int width)
{
    System.Drawing.Image image = 
       System.Drawing.Image.FromFile(Server.MapPath(sourcefile));
    int srcWidth = image.Width;
    int srcHeight = image.Height;
    int thumbWidth = width;
    int thumbHeight;
    Bitmap bmp;
    if (srcHeight > srcWidth)
    {
        thumbHeight = (srcHeight / srcWidth) * thumbWidth;
        bmp = new Bitmap(thumbWidth, thumbHeight);
    }
    else
    {
        thumbHeight = thumbWidth;
        thumbWidth = (srcWidth / srcHeight) * thumbHeight;
        bmp = new Bitmap(thumbWidth, thumbHeight);
    }

    System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
    gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
    gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
    gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
    System.Drawing.Rectangle rectDestination = 
           new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);
    gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, GraphicsUnit.Pixel);
    bmp.Save(Server.MapPath(destinationfile));
    bmp.Dispose();
    image.Dispose();
}

기존 서버에 Photo 폴더에 사진들이 관리되고 있었는데, Thumbnail 폴더를 추가한 뒤 원본데이터의 비율 그대로 1/10정도의 크기로 저장해주기로 하였다. 또한 이미지가 서버에 업로드시, 수정시 적용되도록 설정하였다.

 

DB와 Server 코드에서 섬네일 로직을 추가하고 적용해 보았고 실제로 테스트한 결과 이미지 리소스의 크기가  줄어들면서 속도 성능이 크게 향상되었다. 하지만 사진을 서버에 등록하거나 업데이트시에 섬네일을 추가하는 형식으로 기존 데이터는 적용이 힘든 문제가 있었다. (기존 데이터를 전부 섬네일로 만들기엔 너무 방대한 양...)

 

<기존은 로딩되는데 40초 걸리더랍니다..내 컴퓨터 문젠가?>

 

기존 데이터를 모두 섬네일로 만들어도, 많은 사람들이 보는 Page도 아니고 기록 보관의 용도가 크기 때문에 섬네일은 제작하지 않는 것으로 했다. 일단 기존 방대한 데이터 저장시 서버 비용도 만만치 않기 때문이다. 캐시와 이미지 리사이징 정도로 해결하여 속도 개선을 이룰 수 있었고 확실히 섬네일 적용 후 속도는 눈에 띄게 버벅거림이 사라졌다.  

 

<리소스의 크기 저하로 성능이 개선되었다.>

 

 

🧨마치며

최근 선배님들이 작성한 코드를 분석하고 개선하는 과정을 통해서 주니어로써 많이 배우고 있다. 아직 정말로 파릇파릇 병아리 수준이라고 느끼는 하루하루지만 매일매일 배울 수 있고 코딩을 일로 할 수 있음에 감사한다.  성능 개선을 하면서 내가 부족한 것을 느끼고 또한 설계단계가 얼마나 중요한지 깨닫게 된다.  기존 몇 만장에 이르는 이미지 리소스의 성능 향상을 위해 섬네일 로직을 추가한 건 좋았지만 역시나 기존 데이터의 속도향상은 다이나믹하게 개선시키지 못한 점은 아쉽다. 요즘 이름만 들어본 핫한 Nginx , Node.JS 스택을 통해 서비스 속도 개선을 이룰 수 있다고 하는데, 다음 프로젝트를 맡게 된다면 이런 기술을 공부해서 서비스에 적용해보고 싶다는 생각을 하게됬다.