이미지는 웹 앱에서 필수적인 부분이며, 사용자에게 시각적으로 매력적인 경험을 제공하는 데 중요한 역할을 합니다. 자바스크립트 웹 앱에서 이미지를 효과적으로 처리하고 보여주기 위해 Storybook을 활용할 수 있습니다.

Storybook은 컴포넌트 기반 개발을 지원하는 도구로, 개발자는 여러 상황에서 컴포넌트의 모습을 미리 볼 수 있습니다. 이를 통해 이미지 처리에 대한 다양한 시나리오를 빠르게 확인하고 테스트할 수 있습니다.

이미지 로딩 및 표시

Storybook에서 이미지를 로딩하고 표시하는 가장 간단한 방법은 “storybook-addon-imgdim” 플러그인을 사용하는 것입니다. 이 플러그인은 이미지의 크기를 표시해주어 개발자가 레이아웃을 조정할 수 있도록 도와줍니다.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withImgDim } from 'storybook-addon-imgdim';

import MyComponent from './MyComponent';
import myImage from './myImage.png';

storiesOf('MyComponent', module)
  .addDecorator(withImgDim)
  .add('with image', () => (
    <MyComponent image={myImage} />
  ));

위의 코드에서는 withImgDim 데코레이터를 사용하여 이미지 크기를 함께 표시하고, MyComponent라는 컴포넌트에 image 속성으로 myImage.png를 전달합니다.

이미지 변환

웹 앱에서 사용되는 이미지의 크기 및 형식을 최적화하면 로딩 속도를 향상시킬 수 있습니다. Storybook에서 이미지 변환을 처리하기 위해 “sharp”와 같은 이미지 처리 라이브러리를 활용할 수 있습니다.

아래의 예시는 원본 이미지를 리사이즈하여 다른 형식으로 변환하는 코드입니다.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { withImgDim } from 'storybook-addon-imgdim';

import sharp from 'sharp';
import myImage from './myImage.png';

storiesOf('MyComponent', module)
  .addDecorator(withImgDim)
  .add('with transformed image', () => {
    // 이미지 리사이즈 및 형식 변환
    const transformedImage = sharp(myImage)
      .resize(300, 200)
      .toFormat('webp')
      .toBuffer();

    return <MyComponent image={transformedImage} />
  });

위의 코드에서는 sharp를 사용하여 myImage.png를 리사이즈하고 웹포맷(webp)으로 변환한 후, MyComponent에 전달합니다.

결론

Storybook은 자바스크립트 웹 앱에서 이미지 처리를 효과적으로 다룰 수 있는 도구입니다. 이미지의 로딩과 표시, 크기 및 형식 변환 등 다양한 기능을 제공하며, 개발자들은 이를 통해 이미지 처리에 대한 다양한 시나리오를 빠르게 확인하고 테스트할 수 있습니다.

• Storybook 공식 문서
• storybook-addon-imgdim GitHub