반응형 이미지 기법: srcset과 sizes 속성 활용하기 🖼️📱

웹 디자인의 세계에서 이미지는 단순한 시각적 요소를 넘어 사용자 경험을 좌우하는 핵심 요소입니다. 특히 다양한 디바이스와 화면 크기가 공존하는 현대 웹 환경에서, 반응형 이미지 기법의 중요성은 더욱 부각되고 있습니다. 이 글에서는 반응형 이미지 구현의 핵심인 srcset과 sizes 속성에 대해 깊이 있게 살펴보겠습니다.

웹 디자이너와 개발자들은 항상 최적의 사용자 경험을 제공하기 위해 노력합니다. 그 과정에서 이미지 최적화는 매우 중요한 과제입니다. 특히 모바일 기기의 사용이 급증하면서, 다양한 화면 크기와 해상도에 대응할 수 있는 반응형 이미지 기법이 필수적인 요소로 자리잡았습니다.

srcset과 sizes 속성은 이러한 요구를 충족시키는 강력한 도구입니다. 이 속성들을 활용하면 디바이스의 특성에 맞는 최적의 이미지를 제공할 수 있어, 웹사이트의 성능과 사용자 경험을 크게 향상시킬 수 있습니다.

이 글을 통해 여러분은 srcset과 sizes 속성의 기본 개념부터 고급 활용 기법까지 상세히 알아볼 수 있습니다. 또한, 실제 구현 사례와 최적화 전략을 통해 실무에 바로 적용할 수 있는 지식을 얻게 될 것입니다.

웹 디자인과 개발에 관심 있는 모든 분들, 특히 상세 페이지 디자인을 담당하시는 분들께 이 글이 유용한 가이드가 되길 바랍니다. 함께 반응형 이미지의 세계로 빠져들어 보시죠! 🚀

1. 반응형 이미지의 필요성 🌐

현대 웹 환경에서 반응형 이미지의 중요성은 아무리 강조해도 지나치지 않습니다. 다양한 디바이스와 화면 크기가 공존하는 오늘날, 사용자들은 어떤 기기로 접속하든 최적의 경험을 기대합니다. 이러한 기대에 부응하기 위해 반응형 이미지 기법이 등장했습니다.

반응형 이미지가 필요한 이유는 다음과 같습니다:

다양한 화면 크기 대응: 스마트폰부터 대형 모니터까지, 다양한 크기의 화면에서 최적의 이미지를 제공할 수 있습니다.
네트워크 대역폭 최적화: 필요 이상으로 큰 이미지를 전송하지 않아 데이터 사용량을 줄일 수 있습니다.
페이지 로딩 속도 개선: 적절한 크기의 이미지를 제공함으로써 페이지 로딩 시간을 단축할 수 있습니다.
사용자 경험 향상: 디바이스에 최적화된 이미지를 제공하여 더 나은 시각적 경험을 제공합니다.
SEO 개선: 페이지 로딩 속도 향상은 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

이러한 이유로, 웹 디자이너와 개발자들은 반응형 이미지 기법에 주목하고 있습니다. 특히 상세 페이지 디자인에서는 제품 이미지나 상세 설명 이미지 등 다양한 이미지를 효과적으로 표현해야 하므로, 반응형 이미지 기법의 활용이 더욱 중요합니다.

예를 들어, 재능넷과 같은 재능 공유 플랫폼에서는 다양한 재능을 시각적으로 표현해야 합니다. 이때 반응형 이미지 기법을 활용하면, 모바일 사용자에게는 가볍고 빠른 이미지를, 데스크톱 사용자에게는 고해상도의 상세한 이미지를 제공할 수 있어 사용자 만족도를 크게 높일 수 있습니다.

위의 도표는 반응형 이미지가 다양한 디바이스에서 어떻게 적용되는지를 시각적으로 보여줍니다. 모바일, 태블릿, 데스크톱 각각의 환경에 맞춰 최적화된 이미지를 제공함으로써 사용자 경험을 극대화할 수 있습니다.

이제 우리는 반응형 이미지의 필요성을 충분히 인식했습니다. 다음 섹션에서는 이러한 반응형 이미지를 구현하는 핵심 기술인 srcset과 sizes 속성에 대해 자세히 알아보겠습니다. 이 속성들을 이해하고 활용함으로써, 여러분은 더욱 효과적이고 최적화된 웹 디자인을 구현할 수 있을 것입니다. 🎨✨

2. srcset 속성 이해하기 🖼️

srcset 속성은 반응형 이미지 구현의 핵심 요소 중 하나입니다. 이 속성을 사용하면 브라우저에게 여러 크기의 이미지 중 가장 적합한 것을 선택할 수 있는 옵션을 제공할 수 있습니다. srcset의 기본 개념과 사용법, 그리고 실제 적용 사례를 자세히 살펴보겠습니다.

2.1 srcset의 기본 개념

srcset 속성은 이미지 태그(<img>)에 사용되며, 브라우저에게 선택할 수 있는 이미지 소스의 목록을 제공합니다. 각 소스는 이미지 URL과 해당 이미지의 너비 또는 픽셀 밀도를 명시합니다.

srcset의 기본 구문은 다음과 같습니다:

<img src="default.jpg" srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w" alt="설명">

여기서 각 이미지 URL 뒤의 숫자와 'w'는 해당 이미지의 너비를 의미합니다. 브라우저는 이 정보를 바탕으로 가장 적합한 이미지를 선택하여 표시합니다.

2.2 srcset 사용의 장점

성능 최적화: 필요한 크기의 이미지만 다운로드하여 대역폭을 절약합니다.
디바이스 대응: 다양한 화면 크기와 해상도에 최적화된 이미지를 제공합니다.
유연성: 개발자가 브라우저에게 선택의 폭을 제공함으로써 더 나은 사용자 경험을 구현할 수 있습니다.
미래 대비: 새로운 디바이스나 해상도가 등장해도 유연하게 대응할 수 있습니다.

2.3 srcset 실제 적용 예시

실제 웹 디자인에서 srcset을 어떻게 활용할 수 있는지 살펴보겠습니다. 예를 들어, 재능넷의 상세 페이지에서 재능 판매자의 포트폴리오 이미지를 표시하는 경우를 가정해 보겠습니다.

<img src="portfolio-default.jpg"
     srcset="portfolio-small.jpg 300w,
             portfolio-medium.jpg 600w,
             portfolio-large.jpg 1200w"
     alt="디자이너의 포트폴리오 이미지">

이 코드는 브라우저에게 세 가지 크기의 이미지 옵션을 제공합니다. 브라우저는 현재 디바이스의 화면 크기와 해상도를 고려하여 가장 적합한 이미지를 선택하여 표시합니다.

위 도표는 srcset을 통해 제공되는 세 가지 크기의 이미지 옵션을 시각화한 것입니다. 브라우저는 이 중에서 현재 환경에 가장 적합한 이미지를 선택하여 사용자에게 제공합니다.

2.4 srcset 사용 시 주의사항

srcset을 효과적으로 사용하기 위해서는 몇 가지 주의사항을 염두에 두어야 합니다:

이미지 품질 유지: 작은 크기의 이미지를 단순히 확대하지 않도록 주의해야 합니다. 각 크기별로 최적화된 이미지를 준비해야 합니다.
적절한 크기 선택: 너무 많은 옵션을 제공하면 오히려 복잡성만 증가할 수 있습니다. 일반적으로 3-4개의 크기 옵션이면 충분합니다.
대체 텍스트(alt) 제공: 접근성을 위해 항상 의미 있는 alt 텍스트를 포함해야 합니다.
브라우저 지원 확인: 대부분의 현대 브라우저는 srcset을 지원하지만, 구형 브라우저를 위한 대체 방안도 고려해야 합니다.

srcset 속성은 반응형 웹 디자인에서 매우 강력한 도구입니다. 이를 효과적으로 활용하면 사용자에게 더 나은 경험을 제공할 수 있으며, 웹사이트의 성능도 향상시킬 수 있습니다. 다음 섹션에서는 srcset과 함께 사용되는 sizes 속성에 대해 알아보겠습니다. sizes 속성을 이해하면 더욱 정교한 반응형 이미지 전략을 수립할 수 있습니다. 🖼️🚀

3. sizes 속성 이해하기 📏

sizes 속성은 srcset과 함께 사용되어 반응형 이미지의 동작을 더욱 정교하게 제어할 수 있게 해줍니다. 이 속성은 브라우저에게 이미지가 페이지에서 어떤 크기로 표시될 것인지를 알려주는 역할을 합니다. sizes 속성의 개념, 사용법, 그리고 실제 적용 사례를 자세히 살펴보겠습니다.

3.1 sizes 속성의 기본 개념

sizes 속성은 미디어 조건과 그에 해당하는 이미지 슬롯 크기의 목록을 정의합니다. 이를 통해 브라우저는 현재 뷰포트 크기에 맞는 이미지를 더 정확하게 선택할 수 있습니다.

sizes의 기본 구문은 다음과 같습니다:

<img src="default.jpg" 
     srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w" 
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
     alt="설명">

여기서 sizes 속성은 세 가지 조건을 제시합니다:

뷰포트 너비가 600px 이하일 때, 이미지는 뷰포트 너비의 100%를 차지합니다.
뷰포트 너비가 601px에서 1200px 사이일 때, 이미지는 뷰포트 너비의 50%를 차지합니다.
뷰포트 너비가 1200px 초과일 때, 이미지는 뷰포트 너비의 33%를 차지합니다.

3.2 sizes 사용의 장점

정확한 이미지 선택: 브라우저가 실제 표시될 이미지 크기를 알고 있어 더 정확한 이미지를 선택할 수 있습니다.
레이아웃 변화 대응: 반응형 레이아웃의 변화에 맞춰 이미지 크기를 조절할 수 있습니다.
성능 최적화: 불필요하게 큰 이미지를 다운로드하는 것을 방지하여 페이지 로딩 속도를 개선합니다.
디자인 유연성: 다양한 화면 크기에 대해 세밀한 이미지 크기 조정이 가능합니다.

3.3 sizes 실제 적용 예시

재능넷의 상세 페이지에서 재능 판매자의 작품 갤러리를 표시하는 경우를 예로 들어보겠습니다.

<img src="artwork-default.jpg"
     srcset="artwork-small.jpg 300w,
             artwork-medium.jpg 600w,
             artwork-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="작가의 최신 작품">

이 코드는 다음과 같이 동작합니다:

모바일 기기(600px 이하)에서는 이미지가 화면 전체 너비를 차지합니다.
태블릿(601px-1200px)에서는 이미지가 화면 너비의 절반을 차지합니다.
대형 화면(1200px 초과)에서는 이미지가 화면 너비의 1/3을 차지합니다.

위 도표는 sizes 속성에 따라 다양한 디바이스에서 이미지가 어떻게 표시되는지를 시각화한 것입니다. 각 디바이스 유형에 따라 이미지가 차지하는 비율이 다르게 적용되는 것을 볼 수 있습니다.

3.4 sizes 사용 시 주의사항

sizes 속성을 효과적으로 사용하기 위해서는 다음 사항들을 고려해야 합니다:

정확한 레이아웃 파악: 실제 페이지 레이아웃을 정확히 파악하고 그에 맞는 sizes 값을 지정해야 합니다.
미디어 쿼리와의 일관성: CSS의 미디어 쿼리와 sizes 속성의 조건을 일치시켜 일관된 사용자 경험을 제공해야 합니다.
퍼포먼스 고려: 너무 복잡한 sizes 조건은 브라우저의 처리 시간을 증가시킬 수 있으므로 적절히 단순화해야 합니다.
브라우저 지원 확인: 대부분의 현대 브라우저는 sizes를 지원하지만, 구형 브라우저에 대한 대체 방안도 고려해야 합니다.

sizes 속성은 srcset과 함께 사용될 때 그 진가를 발휘합니다. 이 두 속성을 적절히 조합하면, 다양한 디바이스와 화면 크기에 최적화된 이미지를 제공할 수 있습니다. 이는 사용자 경험을 향상시키고 웹사이트의 성능을 개선하는 데 큰 도움이 됩니다.

다음 섹션에서는 srcset과 sizes 속성을 실제로 어떻게 조합하여 사용하는지, 그리고 이를 통해 어떤 효과를 얻을 수 있는지 더 자세히 알아보겠습니다. 이를 통해 여러분은 더욱 효과적인 반응형 이미지 전략을 수립할 수 있을 것입니다. 📏🖼️

4. srcset과 sizes 속성 조합하기 🔗

srcset과 sizes 속성을 함께 사용하면 반응형 이미지의 성능과 유연성을 극대화할 수 있습니다. 이 두 속성의 조합은 브라우저가 최적의 이미지를 선택하는 데 필요한 모든 정보를 제공합니다. 이번 섹션에서는 이 두 속성을 어떻게 효과적으로 조합할 수 있는지, 그리고 이를 통해 얻을 수 있는 이점에 대해 자세히 알아보겠습니다.

4.1 srcset과 sizes의 조합 원리

srcset과 sizes를 함께 사용할 때, 브라우저는 다음과 같은 과정을 거쳐 적절한 이미지를 선택합니다:

브라우저는 현재 뷰포트 크기를 확인합니다.
sizes 속성을 참조하여 이미지가 표시될 실제 크기를 계산합니다.
계산된 크기와 디바이스의 픽셀 밀도를 고려하여 필요한 이미지 크기를 결정합니다.
srcset에서 제공된 옵션 중 결정된 크기에 가장 근접한 이미지를 선택합니다.

4.2 실제 적용 예시

재능넷의 상세 페이지에서 재능 판매자의 프로필 이미지를 표시하는 경우를 예로 들어보겠습니다:

<img src="profile-default.jpg"
     srcset="profile-small.jpg 300w,
             profile-medium.jpg 600w,
             profile-large.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="재능 판매자의 프로필 이미지">

이 코드는 다음과 같이 동작합니다:

모바일 기기에서는 화면 전체 너비(100vw)의 이미지가 필요하므로, 300w 또는 600w 이미지가 선택될 가능성이 높습니다.
태블릿에서는 화면 너비의 절반(50vw)크기의 이미지가 필요하므로, 대부분의 경우 600w 이미지가 선택될 것입니다.
대형 화면에서는 화면 너비의 1/3(33vw) 크기의 이미지가 필요하므로, 화면 크기에 따라 600w 또는 1200w 이미지가 선택될 수 있습니다.

위 도표는 srcset과 sizes 속성의 조합이 다양한 디바이스에서 어떻게 작동하는지를 시각화한 것입니다. 각 디바이스 유형에 따라 적절한 크기의 이미지가 선택되어 표시되는 것을 볼 수 있습니다.

4.3 srcset과 sizes 조합의 이점

최적화된 이미지 제공: 각 디바이스와 화면 크기에 가장 적합한 이미지를 제공합니다.
성능 향상: 필요 이상으로 큰 이미지를 다운로드하지 않아 페이지 로딩 속도가 개선됩니다.
대역폭 절약: 특히 모바일 사용자의 데이터 사용량을 줄일 수 있습니다.
유연한 레이아웃 대응: 반응형 디자인의 다양한 레이아웃 변화에 효과적으로 대응할 수 있습니다.
향상된 사용자 경험: 모든 디바이스에서 최적의 이미지 품질을 제공하여 사용자 만족도를 높입니다.

4.4 구현 시 고려사항

srcset과 sizes를 효과적으로 조합하기 위해서는 다음 사항들을 고려해야 합니다:

이미지 버전 준비: 다양한 크기의 이미지를 미리 준비해야 합니다. 이는 추가적인 작업을 요구하지만, 최적화된 사용자 경험을 위해 필수적입니다.
정확한 sizes 값 설정: 실제 레이아웃에 맞는 정확한 sizes 값을 설정해야 합니다. 이는 CSS 미디어 쿼리와 일치시키는 것이 좋습니다.
브라우저 지원 확인: 구형 브라우저에 대한 대체 방안(예: 기본 src 속성 사용)을 마련해야 합니다.
성능 테스트: 다양한 디바이스와 네트워크 환경에서 실제 성능을 테스트하고 최적화해야 합니다.

4.5 실제 적용 사례

재능넷의 상세 페이지에서 이 기술을 적용한 실제 사례를 살펴보겠습니다:

<picture>
    <source media="(max-width: 600px)" 
            srcset="talent-small.jpg 300w, talent-medium.jpg 600w"
            sizes="100vw">
    <source media="(max-width: 1200px)" 
            srcset="talent-medium.jpg 600w, talent-large.jpg 1200w"
            sizes="50vw">
    <source media="(min-width: 1201px)" 
            srcset="talent-large.jpg 1200w, talent-xlarge.jpg 2400w"
            sizes="33vw">
    <img src="talent-default.jpg" alt="재능 판매자의 작품 이미지">
</picture>

이 예시에서는 <picture> 요소를 사용하여 더욱 세밀한 제어를 가능하게 했습니다. 각 <source> 요소는 특정 미디어 조건에 대한 srcset과 sizes를 정의하고 있습니다.

srcset과 sizes 속성의 조합은 반응형 이미지 구현의 핵심입니다. 이를 통해 우리는 다양한 디바이스와 화면 크기에 최적화된 이미지를 제공할 수 있으며, 결과적으로 더 나은 사용자 경험과 웹사이트 성능을 달성할 수 있습니다.

다음 섹션에서는 이러한 기술을 실제 프로젝트에 적용할 때의 모범 사례와 주의사항에 대해 더 자세히 알아보겠습니다. 이를 통해 여러분은 더욱 효과적이고 최적화된 반응형 이미지 전략을 수립할 수 있을 것입니다. 🖼️🚀

5. 반응형 이미지 최적화 전략 🎯

srcset과 sizes 속성을 이해하고 조합하는 방법을 알았으니, 이제 이를 실제 프로젝트에 적용할 때의 최적화 전략에 대해 알아보겠습니다. 효과적인 반응형 이미지 구현을 위한 모범 사례와 주의사항, 그리고 성능 최적화 팁을 자세히 살펴보겠습니다.

5.1 이미지 포맷 선택

적절한 이미지 포맷 선택은 반응형 이미지 최적화의 첫 걸음입니다:

JPEG: 사진이나 그라데이션이 있는 이미지에 적합합니다. 압축률이 높아 웹에서 널리 사용됩니다.
PNG: 투명도가 필요한 이미지나 텍스트가 포함된 이미지에 적합합니다. 그러나 파일 크기가 큰 편입니다.
WebP: 구글이 개발한 새로운 이미지 포맷으로, JPEG보다 30-50% 더 작은 파일 크기를 제공합니다. 브라우저 지원을 확인해야 합니다.
SVG: 벡터 이미지에 적합하며, 확대해도 품질 저하가 없습니다. 로고나 아이콘에 이상적입니다.

5.2 이미지 압축 및 최적화

이미지 압축은 파일 크기를 줄이는 핵심 전략입니다:

손실 압축: JPEG 이미지의 경우, 품질을 약간 낮추어 파일 크기를 크게 줄일 수 있습니다. 보통 품질 70-80%가 웹에서 적당합니다.
무손실 압축: PNG 이미지의 경우, 이미지 품질을 유지하면서 파일 크기를 줄일 수 있는 도구들이 있습니다.
메타데이터 제거: 불필요한 메타데이터를 제거하여 파일 크기를 줄일 수 있습니다.

5.3 적절한 이미지 크기 선정

srcset에 포함할 이미지 크기를 선정할 때 고려할 사항:

디바이스 해상도: 일반적으로 1x, 2x, 때로는 3x 해상도를 고려합니다.
일반적인 뷰포트 크기: 모바일, 태블릿, 데스크톱의 일반적인 화면 크기를 고려합니다.
레이아웃 변화: 반응형 레이아웃에서 이미지가 차지하는 비율 변화를 고려합니다.

5.4 지연 로딩 (Lazy Loading) 구현

지연 로딩은 페이지 초기 로딩 시간을 크게 줄일 수 있는 기술입니다:

네이티브 지연 로딩: 최신 브라우저에서는 loading="lazy" 속성을 사용할 수 있습니다.
JavaScript 라이브러리: 구형 브라우저 지원이 필요한 경우, 라이브러리를 사용할 수 있습니다.
Intersection Observer API: 더 세밀한 제어가 필요한 경우 이 API를 활용할 수 있습니다.

5.5 CDN (Content Delivery Network) 활용

CDN을 사용하면 사용자와 가까운 서버에서 이미지를 제공하여 로딩 속도를 향상시킬 수 있습니다:

글로벌 분산: 전 세계 사용자에게 빠른 속도로 이미지를 제공할 수 있습니다.
자동 최적화: 많은 CDN 서비스가 자동 이미지 최적화 기능을 제공합니다.
캐싱: 효과적인 캐싱 전략으로 서버 부하를 줄이고 응답 속도를 높일 수 있습니다.

5.6 성능 모니터링 및 최적화

지속적인 모니터링과 최적화는 필수적입니다:

성능 측정 도구: Google PageSpeed Insights, Lighthouse 등의 도구를 활용하여 정기적으로 성능을 체크합니다.
사용자 데이터 분석: 실제 사용자의 경험 데이터를 수집하고 분석하여 최적화 포인트를 찾습니다.
A/B 테스트: 다양한 최적화 전략을 테스트하여 가장 효과적인 방법을 찾습니다.

위 도표는 반응형 이미지 최적화의 주요 전략들을 시각화한 것입니다. 이미지 포맷 선택, 압축 및 최적화, 지연 로딩 등의 전략을 종합적으로 적용하여 최상의 성능을 달성할 수 있습니다.

5.7 접근성 고려

최적화 과정에서 접근성을 잊지 말아야 합니다:

대체 텍스트(alt) 제공: 모든 이미지에 의미 있는 alt 텍스트를 제공합니다.
적절한 색상 대비: 이미지 내 텍스트가 있다면 충분한 색상 대비를 확보합니다.
키보드 접근성: 인터랙티브한 이미지의 경우 키보드로도 접근 가능하게 만듭니다.

이러한 최적화 전략들을 종합적으로 적용하면, 사용자에게 더 나은 경험을 제공하고 웹사이트의 전반적인 성능을 크게 향상시킬 수 있습니다. 재능넷과 같은 플랫폼에서는 다양한 재능과 작품을 시각적으로 표현해야 하므로, 이러한 최적화 전략이 특히 중요합니다.

반응형 이미지 최적화는 지속적인 과정입니다. 기술의 발전과 사용자 환경의 변화에 따라 계속해서 전략을 수정하고 개선해 나가야 합니다. 이를 통해 우리는 항상 최상의 사용자 경험을 제공할 수 있을 것입니다. 🚀🖼️

6. 결론 및 미래 전망 🔮

지금까지 우리는 반응형 이미지 기법, 특히 srcset과 sizes 속성의 활용에 대해 깊이 있게 살펴보았습니다. 이제 이 모든 내용을 종합하고, 웹 이미지의 미래에 대해 전망해 보겠습니다.

6.1 핵심 요약

반응형 이미지의 중요성: 다양한 디바이스와 화면 크기에 대응하기 위해 반응형 이미지 기법은 필수적입니다.
srcset과 sizes의 역할: 이 두 속성의 조합으로 브라우저는 최적의 이미지를 선택할 수 있습니다.
최적화 전략: 이미지 포맷 선택, 압축, 지연 로딩 등 다양한 전략을 통해 성능을 극대화할 수 있습니다.
사용자 경험 향상: 최적화된 반응형 이미지는 로딩 속도 개선과 데이터 사용량 절감으로 이어집니다.

6.2 미래 전망

웹 이미지 기술은 계속해서 발전하고 있습니다. 앞으로 우리가 주목해야 할 몇 가지 트렌드와 기술들은 다음과 같습니다:

새로운 이미지 포맷: WebP를 넘어 AVIF와 같은 더 효율적인 포맷이 등장하고 있습니다. 이들은 더 작은 파일 크기로 높은 품질을 제공합니다.
AI 기반 이미지 최적화: 인공지능을 활용한 자동 이미지 최적화 기술이 더욱 발전할 것으로 예상됩니다.
가변 폰트와의 통합: 가변 폰트 기술과 결합하여 더욱 유연한 디자인이 가능해질 것입니다.
5G와 이미지 전략: 5G 네트워크의 보급으로 이미지 전송 전략이 변화할 수 있습니다.
AR/VR과의 융합: 증강현실(AR)과 가상현실(VR) 기술의 발전으로 웹에서의 이미지 사용이 더욱 다양해질 것입니다.