웹GL 성능 최적화: 꿀팁

웹GL 성능 최적화의 중요성

웹GL은 웹 브라우저에서 2D 및 3D 그래픽을 렌더링하기 위한 강력한 API입니다. 하지만 웹GL의 성능은 다양한 요인에 의해 저하될 수 있으며, 이는 사용자 경험에 부정적인 영향을 미칩니다. 따라서 웹GL 애플리케이션의 성능을 최적화하는 것은 매우 중요합니다.

웹GL 성능 최적화는 부드러운 애니메이션, 빠른 로딩 시간, 그리고 전반적으로 쾌적한 사용자 경험을 제공하는 데 필수적입니다. 최적화를 통해 하드웨어 리소스를 효율적으로 활용하고, 배터리 소모를 줄이며, 더 많은 사용자가 웹GL 콘텐츠를 원활하게 즐길 수 있도록 만들 수 있습니다.

성능 최적화를 위한 주요 기술

불필요한 렌더링 줄이기

렌더링은 웹GL 애플리케이션에서 가장 비용이 많이 드는 작업 중 하나입니다. 따라서 불필요한 렌더링을 줄이는 것이 성능 최적화의 핵심입니다. 이를 위해 뷰 프러스텀 컬링(View Frustum Culling)을 사용하여 화면 밖에 있는 객체를 렌더링하지 않도록 해야 합니다. 또한, 오클루전 컬링(Occlusion Culling)을 사용하여 다른 객체에 가려진 객체를 렌더링하지 않도록 하는 것도 중요합니다.

렌더링 상태 변경 횟수를 최소화하는 것도 중요합니다. 렌더링 상태 변경은 웹GL 드라이버에게 새로운 렌더링 설정을 적용하도록 지시하는 것으로, 비용이 많이 드는 작업입니다. 텍스처 바인딩, 셰이더 프로그램 변경, 버퍼 바인딩 등을 최소화해야 합니다.

텍스처 최적화

텍스처는 웹GL 애플리케이션에서 많은 메모리를 차지하며, 렌더링 성능에 큰 영향을 미칩니다. 따라서 텍스처를 최적화하는 것은 매우 중요합니다. 텍스처 압축을 사용하여 텍스처 크기를 줄이는 것이 좋습니다. 또한, 미ip맵(Mipmapping)을 사용하여 멀리 있는 객체의 텍스처 렌더링 성능을 향상시킬 수 있습니다.

텍스처 아틀라스(Texture Atlas)를 사용하여 여러 개의 작은 텍스처를 하나의 큰 텍스처로 결합하는 것도 좋은 방법입니다. 이는 텍스처 바인딩 횟수를 줄여 성능을 향상시킬 수 있습니다. 텍스처 필터링 모드를 신중하게 선택하는 것도 중요합니다. 선형 필터링(Linear Filtering)은 쌍선형 필터링(Bilinear Filtering)보다 빠르지만, 화질이 떨어질 수 있습니다.

셰이더 최적화

셰이더는 웹GL 애플리케이션에서 각 버텍스와 픽셀의 색상을 계산하는 프로그램입니다. 셰이더의 성능은 렌더링 성능에 큰 영향을 미치므로, 셰이더를 최적화하는 것이 중요합니다. 불필요한 계산을 제거하고, 연산의 정확도를 낮추면 셰이더 성능을 향상시킬 수 있습니다.

가능하면 미리 컴파일된 셰이더를 사용하는 것이 좋습니다. 셰이더 컴파일은 시간이 오래 걸리는 작업이므로, 미리 컴파일된 셰이더를 사용하면 로딩 시간을 줄일 수 있습니다. 또한, 셰이더 코드를 간결하게 유지하고, 복잡한 제어 흐름을 피하는 것이 좋습니다.

버퍼 최적화

버퍼는 웹GL 애플리케이션에서 버텍스 데이터, 인덱스 데이터, 텍스처 좌표 등을 저장하는 데 사용됩니다. 버퍼의 성능은 렌더링 성능에 큰 영향을 미치므로, 버퍼를 최적화하는 것이 중요합니다. 정적 버퍼(Static Buffer)를 사용하여 버퍼 데이터를 한 번만 업로드하도록 해야 합니다. 동적 버퍼(Dynamic Buffer)는 자주 변경되는 데이터에 적합하지만, 성능이 떨어질 수 있습니다.

버텍스 데이터를 인터리브(Interleave)하여 버텍스 속성을 하나의 버퍼에 저장하는 것이 좋습니다. 이는 메모리 접근 패턴을 개선하고, 렌더링 성능을 향상시킬 수 있습니다. 불필요한 버텍스 속성을 제거하고, 버텍스 데이터의 크기를 줄이는 것도 중요합니다.

성능 분석 도구 활용

웹GL 애플리케이션의 성능을 분석하고 병목 현상을 파악하는 것은 성능 최적화의 중요한 단계입니다. 크롬 개발자 도구(Chrome DevTools)와 같은 성능 분석 도구를 사용하여 렌더링 시간, 메모리 사용량, CPU 사용량 등을 측정하고 분석할 수 있습니다. 이러한 도구를 통해 웹GL 애플리케이션의 성능을 개선할 수 있습니다.

최적화 기법	설명	효과
뷰 프러스텀 컬링	화면 밖에 있는 객체를 렌더링하지 않음	렌더링 부하 감소
오클루전 컬링	다른 객체에 가려진 객체를 렌더링하지 않음	렌더링 부하 감소
텍스처 압축	텍스처 크기 감소	메모리 사용량 감소, 렌더링 속도 향상
미ip맵	멀리 있는 객체의 텍스처 렌더링 성능 향상	렌더링 품질 향상, 성능 향상
셰이더 최적화	불필요한 계산 제거, 연산 정확도 낮춤	셰이더 실행 속도 향상

기타 최적화 팁

캔버스 크기를 최적화하십시오. 필요한 크기보다 큰 캔버스를 사용하면 성능이 저하될 수 있습니다.
프레임 속도를 제한하십시오. 높은 프레임 속도는 배터리 소모를 증가시킬 수 있습니다.
웹GL 컨텍스트를 신중하게 관리하십시오. 웹GL 컨텍스트를 자주 생성하고 삭제하면 성능이 저하될 수 있습니다.

웹GL 성능 최적화 사례

우리나라의 웹 개발 회사들은 웹GL을 사용하여 다양한 인터랙티브 콘텐츠와 시각화 도구를 만들고 있습니다. 이러한 애플리케이션의 성능을 최적화하는 것은 사용자 경험을 향상시키고 더 많은 사용자에게 접근성을 제공하는 데 매우 중요합니다. 예를 들어, 대규모 데이터 시각화 애플리케이션에서 웹GL 성능 최적화는 데이터 로딩 속도를 향상시키고, 부드러운 인터랙션을 제공하는 데 필수적입니다.

웹GL 성능 최적화는 지속적인 노력과 관심이 필요한 작업입니다. 위에 제시된 기술과 팁을 활용하여 웹GL 애플리케이션의 성능을 최적화하고, 사용자에게 최고의 경험을 제공하십시오.

자주 묻는 질문 (FAQ)

A: 웹GL 성능 최적화를 시작하기 전에 목표 성능 수준을 정의하고, 현재 성능 상태를 측정해야 합니다. 또한, 어떤 부분이 가장 큰 성능 병목인지 파악하는 것이 중요합니다.

A: 텍스처 압축은 텍스처 데이터를 저장하는 데 필요한 메모리 공간을 줄이는 기술입니다. 다양한 텍스처 압축 형식이 있으며, 각 형식은 압축률과 화질 면에서 서로 다른 특징을 가지고 있습니다.

A: 셰이더 최적화는 불필요한 계산 제거, 연산 정확도 낮춤, 코드 간결화 등의 단계를 거칩니다. 또한, 셰이더 컴파일러가 생성하는 코드를 분석하여 최적화할 부분을 찾을 수도 있습니다.

A: 웹GL 성능 분석 도구로는 크롬 개발자 도구, Spector.js, WebGL Insight 등이 있습니다. 이러한 도구를 사용하여 렌더링 시간, 메모리 사용량, CPU 사용량 등을 측정하고 분석할 수 있습니다.

A: 웹GL 성능 최적화는 프로젝트 개발 주기 동안 지속적으로 수행해야 합니다. 특히 새로운 기능이 추가되거나, 데이터 양이 증가할 때마다 성능을 측정하고 최적화하는 것이 좋습니다.

Photo by Michael Hamments on Unsplash

웹GL 더 자세한 정보

Photo by Marija Zaric on Unsplash

웹GL 성능 최적화: 꿀팁 셰이더 최적화 전략

웹GL 셰이더 최적화의 중요성

웹GL을 사용하여 고성능의 3D 그래픽을 구현하는 것은 매력적이지만, 최적화 없이는 사용자 경험을 저해할 수 있습니다. 특히 모바일 환경이나 저사양 PC에서는 셰이더의 성능이 전체 렌더링 속도에 큰 영향을 미치므로, 셰이더 최적화는 필수적인 과정입니다.

최적화 전략

1. 불필요한 연산 줄이기

셰이더는 GPU에서 병렬적으로 실행되지만, 복잡한 연산은 성능 저하의 원인이 됩니다. 불필요한 계산을 제거하고, 필요한 연산만 수행하도록 셰이더 코드를 개선해야 합니다.

복잡한 수학 함수 (sin, cos, pow 등) 사용을 최소화합니다.
상수 값은 셰이더 유니폼(uniform)으로 미리 계산하여 전달합니다.
조건문 (if, else) 사용을 줄이고, 가능한 경우에는 믹스(mix) 함수를 활용합니다.

2. 낮은 정밀도(Low Precision) 사용

높은 정밀도는 더 많은 메모리와 연산 능력을 요구합니다. 셰이더 코드에서 `highp` 대신 `mediump` 또는 `lowp`를 사용하여 정밀도를 낮추면 성능을 향상시킬 수 있습니다. 단, 정밀도 감소로 인해 시각적인 문제가 발생하지 않도록 주의해야 합니다.

3. 텍스처 최적화

텍스처는 셰이더에서 가장 많이 사용되는 리소스 중 하나입니다. 텍스처 최적화는 셰이더 성능에 직접적인 영향을 미칩니다.

텍스처 크기를 줄입니다. 불필요하게 큰 텍스처는 메모리 낭비와 렌더링 속도 저하를 초래합니다.
밉맵(mipmap)을 사용합니다. 밉맵은 거리에 따라 다른 해상도의 텍스처를 자동으로 선택하여 렌더링 속도를 향상시킵니다.
텍스처 압축 기술 (ASTC, ETC)을 사용합니다. 텍스처 압축은 메모리 사용량을 줄이고 텍스처 로딩 속도를 향상시킵니다.

4. 벡터 연산 활용

GPU는 벡터 연산에 최적화되어 있습니다. 스칼라 연산 대신 벡터 연산을 사용하면 셰이더 성능을 크게 향상시킬 수 있습니다.

`vec2`, `vec3`, `vec4` 등의 벡터 타입을 적극적으로 활용합니다.
내장 함수 (dot, cross, normalize)를 사용하여 벡터 연산을 수행합니다.

5. 셰이더 컴파일 및 캐싱

셰이더는 컴파일 과정을 거쳐 GPU에서 실행 가능한 코드로 변환됩니다. 셰이더 컴파일은 시간이 오래 걸리는 작업이므로, 셰이더를 미리 컴파일하고 캐싱하여 재사용하는 것이 좋습니다. 웹GL 컨텍스트 손실 시에도 셰이더를 다시 컴파일할 필요가 없으므로, 사용자 경험을 향상시킬 수 있습니다.

구체적인 예시

예시 1: 노말 벡터 정규화 최적화

다음은 노말 벡터를 정규화하는 일반적인 셰이더 코드입니다.

위 코드는 `normalize` 함수를 사용하여 노말 벡터를 정규화합니다. 하지만, 노말 벡터가 이미 정규화되어 있다면 `normalize` 함수를 호출할 필요가 없습니다. 다음과 같이 코드를 수정하여 불필요한 연산을 줄일 수 있습니다.

예시 2: 텍스처 좌표 계산 최적화

다음은 텍스처 좌표를 계산하는 셰이더 코드입니다.

위 코드는 텍스처 좌표에 스케일과 오프셋을 적용합니다. 스케일과 오프셋 값이 상수라면, 셰이더 유니폼으로 미리 계산하여 전달하는 것이 좋습니다.

웹GL 셰이더 최적화 표

다음 표는 웹GL 셰이더 최적화 기법들을 요약한 것입니다.

최적화 기법	설명	효과
불필요한 연산 줄이기	셰이더 코드에서 불필요한 계산을 제거합니다.	셰이더 실행 속도 향상
낮은 정밀도 사용	`highp` 대신 `mediump` 또는 `lowp`를 사용합니다.	메모리 사용량 감소, 셰이더 실행 속도 향상
텍스처 최적화	텍스처 크기 줄이기, 밉맵 사용, 텍스처 압축 기술 사용	메모리 사용량 감소, 텍스처 로딩 속도 향상, 렌더링 속도 향상
벡터 연산 활용	스칼라 연산 대신 벡터 연산을 사용합니다.	셰이더 실행 속도 향상
셰이더 컴파일 및 캐싱	셰이더를 미리 컴파일하고 캐싱합니다.	초기 로딩 시간 단축, 사용자 경험 향상

웹GL 성능 분석 도구

셰이더 최적화의 효과를 측정하고, 성능 병목 지점을 파악하기 위해서는 웹GL 성능 분석 도구를 사용하는 것이 좋습니다. 다음과 같은 도구를 활용할 수 있습니다.

Chrome DevTools: 크롬 브라우저에 내장된 개발 도구로, 렌더링 통계, 메모리 사용량, 셰이더 컴파일 시간 등을 확인할 수 있습니다.
Spector.js: 웹GL API 호출을 캡처하고 분석하는 도구입니다. 셰이더 코드, 텍스처, 렌더링 상태 등을 자세하게 확인할 수 있습니다.

결론

웹GL 셰이더 최적화는 고성능 3D 그래픽을 구현하기 위한 필수적인 과정입니다. 제시된 꿀팁들을 활용하여 셰이더 코드를 최적화하고, 사용자에게 쾌적한 경험을 제공할 수 있습니다. 우리나라 웹 개발자들이 이러한 최적화 전략을 활용하여 더욱 뛰어난 웹GL 콘텐츠를 만들어내기를 기대합니다. 웹GL은 앞으로도 중요한 기술이 될 것입니다.

A: 셰이더 최적화는 웹GL 애플리케이션의 성능을 향상시키고 사용자 경험을 개선하는 데 매우 중요합니다. 특히 모바일 기기나 저사양 PC에서는 최적화되지 않은 셰이더가 성능 문제를 일으킬 수 있습니다.

A: 가장 먼저 불필요한 연산을 제거하고, 정밀도를 낮추는 것을 고려해야 합니다. 또한, 텍스처 최적화와 벡터 연산 활용도 중요한 최적화 대상입니다.

A: 셰이더 최적화는 성능 향상을 목표로 하지만, 시각적인 품질 저하를 초래할 수 있습니다. 최적화 후에는 반드시 시각적인 문제를 확인하고, 균형을 맞추는 것이 중요합니다.

A: 셰이더 컴파일은 시간이 오래 걸리는 작업이므로, 셰이더를 미리 컴파일하고 캐싱하여 재사용하면 초기 로딩 시간을 단축하고 사용자 경험을 향상시킬 수 있습니다. 특히 웹GL 컨텍스트 손실 시에도 셰이더를 다시 컴파일할 필요가 없으므로 매우 유용합니다.

Photo by Wolfgang Hasselmann on Unsplash

웹GL 성능 최적화: 꿀팁 텍스처 관리 비법

효율적인 텍스처 관리를 위한 웹GL 최적화 전략

웹GL 기반 애플리케이션의 성능은 텍스처 관리에 크게 좌우됩니다. 고품질 텍스처는 시각적인 완성도를 높이지만, 부적절하게 관리될 경우 성능 저하의 주요 원인이 될 수 있습니다. 따라서 효율적인 텍스처 관리 전략은 웹GL 애플리케이션의 성능을 극대화하는 데 필수적입니다.

밉맵(Mipmaps)을 활용한 텍스처 최적화

밉맵은 원본 텍스처의 크기를 점진적으로 축소한 일련의 텍스처 집합입니다. 웹GL은 거리에 따라 적절한 밉맵 레벨을 선택하여 렌더링하므로, 멀리 있는 객체의 텍스처를 렌더링할 때 불필요하게 고해상도 텍스처를 사용하는 것을 방지할 수 있습니다. 밉맵을 사용하면 메모리 사용량을 줄이고 렌더링 속도를 향상시킬 수 있습니다. 밉맵 생성은 gl.generateMipmap() 함수를 통해 간단하게 수행할 수 있습니다.

텍스처 압축을 통한 메모리 절약

텍스처 압축은 텍스처 데이터를 압축하여 메모리 사용량을 줄이는 기술입니다. 웹GL에서는 다양한 텍스처 압축 포맷을 지원하며, 압축 포맷에 따라 압축률과 화질이 달라집니다. 일반적으로 S3TC (DXT), ETC, ASTC 등의 포맷이 많이 사용됩니다. 적절한 압축 포맷을 선택하면 메모리 사용량을 크게 줄이고, 텍스처 로딩 시간을 단축할 수 있습니다.

텍스처 아틀라스(Texture Atlas)를 활용한 드로우 콜 감소

텍스처 아틀라스는 여러 개의 작은 텍스처를 하나의 큰 텍스처 이미지에 모아 놓은 것입니다. 텍스처 아틀라스를 사용하면 여러 번의 텍스처 바인딩을 한 번으로 줄여 드로우 콜 수를 감소시킬 수 있습니다. 드로우 콜은 웹GL 애플리케이션의 성능에 큰 영향을 미치므로, 텍스처 아틀라스를 활용하여 드로우 콜 수를 줄이는 것은 매우 효과적인 최적화 방법입니다. 텍스처 아틀라스를 만들 때는 텍스처 간의 간격을 적절하게 설정하여 텍스처 블리딩 현상을 방지해야 합니다.

적절한 텍스처 포맷 선택

텍스처 포맷은 텍스처 데이터를 저장하는 방식을 정의합니다. 웹GL에서는 다양한 텍스처 포맷을 지원하며, 각 포맷은 메모리 사용량, 화질, 렌더링 성능 등의 측면에서 차이가 있습니다. 예를 들어, 불투명한 텍스처의 경우 RGBA 포맷 대신 RGB 포맷을 사용하면 메모리 사용량을 줄일 수 있습니다. 또한, 8비트 텍스처 대신 16비트 텍스처를 사용하면 화질을 향상시킬 수 있지만, 메모리 사용량은 증가합니다. 따라서 애플리케이션의 요구 사항에 따라 적절한 텍스처 포맷을 선택해야 합니다.

스트리밍 텍스처 (Streaming Textures)

큰 텍스처를 한 번에 로드하는 대신, 필요한 부분만 점진적으로 로드하는 방식을 스트리밍 텍스처라고 합니다. 이는 특히 고해상도 텍스처를 사용하는 경우 초기 로딩 시간을 줄이는 데 효과적입니다. 웹GL에서는 texSubImage2D 함수를 사용하여 텍스처의 일부분을 업데이트할 수 있습니다.

메모리 관리 및 텍스처 삭제

더 이상 사용하지 않는 텍스처는 gl.deleteTexture() 함수를 사용하여 즉시 삭제해야 합니다. 텍스처를 삭제하지 않고 계속 생성하면 메모리 누수가 발생하여 애플리케이션의 성능이 저하될 수 있습니다. 또한, 텍스처 캐싱을 사용하여 자주 사용되는 텍스처를 메모리에 유지하면 텍스처 로딩 시간을 줄일 수 있습니다.

우리나라 웹 환경에 맞는 텍스처 최적화 고려 사항

우리나라의 다양한 웹 환경(PC, 모바일)과 네트워크 환경을 고려하여 텍스처 최적화를 진행해야 합니다. 모바일 환경에서는 PC 환경보다 메모리 제약이 더 크므로, 텍스처 압축과 밉맵을 적극적으로 활용하여 메모리 사용량을 줄여야 합니다. 또한, 네트워크 환경이 좋지 않은 경우 스트리밍 텍스처를 사용하여 초기 로딩 시간을 줄이는 것이 좋습니다.

최적화 방법	설명	장점	단점	적용 시 고려 사항
밉맵 생성	텍스처의 크기를 점진적으로 축소한 텍스처 집합을 생성	메모리 사용량 감소, 렌더링 속도 향상	텍스처 로딩 시간 증가, 추가 메모리 공간 필요	텍스처의 크기가 클수록 효과적, 텍스처 필터링 설정 필요
텍스처 압축	텍스처 데이터를 압축하여 저장	메모리 사용량 감소, 텍스처 로딩 시간 단축	화질 저하 가능성, 압축 포맷에 따른 성능 차이	적절한 압축 포맷 선택 중요, 압축률과 화질 간의 균형 유지
텍스처 아틀라스	여러 개의 작은 텍스처를 하나의 큰 텍스처 이미지에 통합	드로우 콜 수 감소, 렌더링 속도 향상	텍스처 패킹 작업 필요, 텍스처 간 간격 설정 중요	텍스처 블리딩 현상 방지, UV 좌표 계산 필요
적절한 텍스처 포맷 선택	애플리케이션의 요구 사항에 맞는 텍스처 포맷 선택	메모리 사용량 감소, 렌더링 성능 향상, 화질 향상	포맷에 따른 성능 차이, 호환성 문제 발생 가능성	불투명도 유무, 색상 정보량 고려, 플랫폼별 지원 포맷 확인
스트리밍 텍스처	텍스처의 필요한 부분만 점진적으로 로드	초기 로딩 시간 단축, 메모리 사용량 최적화	텍스처 업데이트 시 오버헤드 발생, 복잡한 구현	네트워크 환경 고려, 텍스처 업데이트 빈도 조절

결론

웹GL 성능 최적화를 위해서는 텍스처 관리가 핵심적인 역할을 합니다. 밉맵, 텍스처 압축, 텍스처 아틀라스, 적절한 텍스처 포맷 선택, 스트리밍 텍스처 등의 다양한 기술을 활용하여 텍스처를 효율적으로 관리하면 웹GL 애플리케이션의 성능을 크게 향상시킬 수 있습니다. 우리나라의 웹 환경을 고려하여 텍스처 최적화를 진행하면 더욱 효과적인 결과를 얻을 수 있습니다.

A: 텍스처 압축 포맷은 애플리케이션의 요구 사항과 플랫폼에 따라 달라집니다. 일반적으로 모바일 환경에서는 ETC 또는 ASTC 포맷이 많이 사용되며, PC 환경에서는 S3TC (DXT) 포맷이 많이 사용됩니다. 각 포맷은 압축률, 화질, 성능 등의 측면에서 차이가 있으므로, 애플리케이션의 특성에 맞는 포맷을 선택해야 합니다.

A: 텍스처 아틀라스를 만들 때는 텍스처 간의 간격을 적절하게 설정해야 합니다. 텍스처 간의 간격이 너무 좁으면 텍스처 블리딩 현상이 발생할 수 있습니다. 또한, 텍스처 아틀라스에 텍스처를 배치할 때 공간을 효율적으로 활용해야 합니다. 텍스처 패킹 알고리즘을 사용하면 텍스처 아틀라스의 공간 활용도를 높일 수 있습니다.

A: 밉맵은 일반적으로 성능을 향상시키지만, 텍스처의 크기가 매우 작거나 텍스처가 항상 가까이에서 보이는 경우에는 오히려 성능이 저하될 수 있습니다. 밉맵을 생성하는 데 시간이 걸리고, 추가적인 메모리 공간이 필요하기 때문입니다. 따라서 밉맵을 사용할 때는 텍스처의 크기와 사용 빈도를 고려해야 합니다.

A: 웹GL에서는 gl.getError() 함수를 사용하여 텍스처 관련 오류를 확인할 수 있습니다. 텍스처 생성, 바인딩, 업데이트 등 텍스처 관련 작업을 수행한 후 gl.getError() 함수를 호출하여 오류가 발생했는지 확인합니다. 또한, 웹GL 디버깅 도구를 사용하면 텍스처 관련 오류를 더욱 쉽게 찾을 수 있습니다.

A: 텍스처 최적화 외에도 버텍스 버퍼 최적화, 셰이더 최적화, 드로우 콜 최적화 등 다양한 웹GL 성능 최적화 방법이 있습니다. 버텍스 버퍼 최적화는 버텍스 데이터를 효율적으로 관리하여 메모리 사용량을 줄이고 렌더링 속도를 향상시키는 방법입니다. 셰이더 최적화는 셰이더 코드를 간결하게 작성하고 불필요한 계산을 줄여 렌더링 성능을 향상시키는 방법입니다. 드로우 콜 최적화는 드로우 콜 수를 줄여 렌더링 오버헤드를 최소화하는 방법입니다.

Photo by Tanya Kartashėva on Unsplash