게임 개발을 위한 렌더링 기법 한성환
TRANSCRIPT
![Page 1: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/1.jpg)
게임 개발을 위한 렌더링 기법
민커뮤니케이션MAD 팀 한성환
2010.05.26
![Page 2: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/2.jpg)
목차
ShadingBase RenderingAdvanced Rendering렌더링 관련 최적화
![Page 3: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/3.jpg)
Shading
Flat ShadingGouraud ShadingPhong Shading
![Page 4: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/4.jpg)
Flat Shading
![Page 5: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/5.jpg)
Flat Shading
![Page 6: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/6.jpg)
Gouraud Shading
![Page 7: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/7.jpg)
Phong Shading
![Page 8: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/8.jpg)
목차
ShadingBase RenderingAdvanced Rendering렌더링 관련 최적화
![Page 9: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/9.jpg)
Base Rendering(Gouraud Shading)
Feature ( 특징 )DiffuseSpecular장단점
![Page 10: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/10.jpg)
Feature(Gouraud Shading)
점단위의 Color 계산 두점 사이의 컬러값 선형보간
![Page 11: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/11.jpg)
Diffuse
점의 Normal 방향
Light 방향 내적
Material Dif-fuse
Light Diffuse
![Page 12: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/12.jpg)
Diffuse 문제 Light Diffuse Color ( 255, 255, 0 ) Material Diffuse Color ( 0, 0, 255 ) 무슨 컬러가 나올까요 ~?
LightDiffuse * MaterialDiffuse * 내적(Normal,LightDir)
R = 255 * 0 * 내적수치 ; G = 255 * 0 * 내적수치 ; B = 0 * 255 * 내적수치 ; Color( R, G, B ) -> Color( 0, 0, 0 )
![Page 13: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/13.jpg)
Specular
점의 Normal 방향
Light 방향 캐릭터 시점 Half Vector 내적 ( Half,
Normal )
![Page 14: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/14.jpg)
Base Rendering 장단점
작업이 쉽다 .모든 그래픽
카드에 지원이 가능하다 .
퀄리티가 부족하다 .
장점 단점
![Page 15: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/15.jpg)
Base Rendering 의 보완책은…Phong ShadingSpecular 는 점단위에 의지 하지
않도록 작업
![Page 16: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/16.jpg)
Pixel Shader 1.4 = Phong Shading
Normalize()
Pixel 단위 Normal 수치 선형 보간
우리에게 필요한 것은 ~!!
Phong Shading 은 Pixel Shader 2.0 이상 부터 지원
![Page 17: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/17.jpg)
목차
ShadingBase RenderingAdvanced Rendering렌더링 관련 최적화
![Page 18: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/18.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
T&L Shader
![Page 19: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/19.jpg)
Sphere Mapping #1
![Page 20: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/20.jpg)
SphereMapping #2 카메라 시점 Vertex 의 Normal TEXTURETRANSFORM-
FLAGS -
D3DTSS_TCI_CAMERASPACENORMAL
- Normal (-1~1) -> UV (-1~1)
텍스쳐 행렬 - D3DTS_TEXTURE0 - UV (-1~1) -> UV (0~1)
x = ( (x) * 0.5 + 0.5 );
y = ( -(y) * 0.5 + 0.5 );
0.0, 1.0
0.7, 0.7
1.0, 0.00.0, 0.0 0.5, 0.0
0.35, 0.35
0.0, 0.5
-1.0, 0.0
0.0, -1.0
0.0, 0.5 0.5, 0.5 0.75, 0.5 1.0, 0.5
0.5, 0.0
0.5, 1.5
0.85, 0.15
0.5, 0.75
0.67, 0.67
![Page 21: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/21.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
T&L Shader
![Page 22: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/22.jpg)
RimLight #1 ( SphereMapping )
![Page 23: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/23.jpg)
RimLight #2
![Page 24: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/24.jpg)
RimLight 원리 ( T&L 용 )
카메라 공간에서의 Normal 수치를 가지고 텍스쳐를 입힘
Sphere Mapping Sphere Texture 를 조작 D3DTSS_COLOROP 는 D3DTOP_ADD
사용
![Page 25: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/25.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
T&L Shader
![Page 26: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/26.jpg)
Cube Mapping #1
![Page 27: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/27.jpg)
Cube Mapping #2
왜곡 현상이 덜 하다 . 여러방향에서 Environment map-
ping 을 볼수 있다 .
Sphere Mapping 과 비교
( 하지만 시각적으로 인지하기 어려움 .)
![Page 28: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/28.jpg)
Cube Mapping #3
Sphere Mapping 과 비교
![Page 29: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/29.jpg)
Cube Mapping #4
왜곡 현상이 덜 하다 . 여러방향에서 Environment map-
ping 을 볼수 있다 . Texture Size 가 크다 . 실시간으로 만드는 것이 비교적 쉽다 .
Sphere Mapping 과 비교
( 하지만 시각적으로 인지하기 어려움 .)
![Page 30: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/30.jpg)
Cube Mapping #5
실시간 생성
![Page 31: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/31.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
T&L Shader
![Page 32: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/32.jpg)
Toon Shading #1 Light 방향 Vertex 의 Normal TEXTURETRANSFORM-
FLAGS -
D3DTSS_TCI_CAMERASPACENORMAL
텍스쳐 행렬 - D3DTS_TEXTURE0
![Page 33: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/33.jpg)
Toon Shading #2
![Page 34: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/34.jpg)
Toon Shading #3 T&L 의 Texture 방식의 Feature - Shading 용 텍스쳐로 여러 느낌가능 . - Diffuse Color 를 Phong Shading 비슷하게 할
수 있음 .
- Phong Shading 느낌의 Specular 는 불가능 - Line 이 곡선이 아닌 직선으로 생김
![Page 35: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/35.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
T&L Shader
![Page 36: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/36.jpg)
Edge Rendering #1
One Pixel 짜리 선 생성 메쉬 내부에서 선 생성 메쉬 외부에서 생성되는 외각선 Pixel Shader 를 사용하여 Pixel 에
기입
종류
![Page 37: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/37.jpg)
Edge Rendering #2
WIREFRAME Render
Z bias Anti-Aliasing
Sphere Mapping 응용
RimLight 와 반대되는 Image 를 사용함 .
One Pixel 선 생성 메쉬 내부에서 선 생성(Silhouette Edge Rendering)
![Page 38: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/38.jpg)
Edge Rendering #3Surface Angle Silhouetting
![Page 39: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/39.jpg)
Edge Rendering #4
Normal 방향으로 스케일된 Mesh 를 Render
미리 계산된 Normal Mesh 를 생성
Mesh 생성시 정점을 Merge 시켜줌
메쉬 외부에서 선 생성
![Page 40: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/40.jpg)
Edge Rendering #5NormalMesh 를 그대로 사용할 경우
문제점같은 위치에 있는 점이지만 Merge 되어 있지 않은 상태
( 노멀값이 다른 상태 )
![Page 41: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/41.jpg)
Edge Rendering #6
Laplician Filter - ColorBuffer - Z Buffer - Normalmap
Pixel Shader 를 이용
![Page 42: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/42.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
T&L Shader
![Page 43: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/43.jpg)
Glow #1 좌우로 늘린 후 상하로
늘린다 . GPU 부하와 Quality Texture Size Pixel Move Count
- 512- 3
칸
![Page 44: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/44.jpg)
Glow #2
![Page 45: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/45.jpg)
Glow #3
![Page 46: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/46.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
T&L Shader
![Page 47: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/47.jpg)
Fur Rendering #1
ALPHA TEST
여러층의 Mesh
구현 방법 예제 ) 완다와 거상
![Page 48: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/48.jpg)
Fur Rendering #2
면을 평평한 각도로 보면 어색함이 표시
추가 Ren-dering 필요 .
값 비싼 Al-pha Test 필요
단점
![Page 49: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/49.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
T&L Shader
![Page 50: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/50.jpg)
NormalMap #1 Use Shader
High Quality
Graphic Card 의 가격하락과 성능향상 ( Pixel Shader 지원 카드 대중화 )
Specular 하나만으로도 충분한 효과 발휘
![Page 51: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/51.jpg)
NormalMap #2
![Page 52: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/52.jpg)
Advanced Rendering
Environment Map-ping
- Sphere Mapping - Cube Mapping Toon Shading Edge Rendering Rim Lighting Glow Fur Rendering
T&L 에 있는 것 전부 NormalMap
메르메르에서 쓰이는 연마효과
T&L Shader
![Page 53: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/53.jpg)
메르메르에서 쓰이는 연마효과이미지의 조합으로 연마효과를 만듬 .Ambient 수치를 변경Specular 수치 변경특정 Texture 를 흐르게 작업 .
(Flow Tex-ture)
![Page 54: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/54.jpg)
연마효과 (Flow Texture 셋팅방법 )
RenderTarget 을 이용하여 Flow Texture 2 장을 대칭되게 움직여 랜덤한 이미지 생성
새로 생성한 이미지를 Sphere Mapping 과 같은 원리로 작업 .
컬러도 customizing 가능하도록 작업 .
![Page 55: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/55.jpg)
목차
ShadingBase RenderingAdvanced Rendering렌더링 관련 최적화
![Page 56: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/56.jpg)
렌더링 관련 최적화 DIP Calls
( DrawIndexedPrimitive ) VB Change Texture Changes State Changes sets DrawPrimitiveUP Alpha Tex Index Buffer
( < 500DIP )
( < 500 )
( < 200 )
( < 200 )
![Page 57: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/57.jpg)
속도 향상을 위한 텍스쳐 제작 Texture 는
가능하다면 1장으로 해결
( 단점 - 제작시간이 오래 걸림 . )
Texture 사이즈를 최대한 작게 제작
DDS 포맷 사용
기술적으로 Tex-ture 를 합치는 기능을 만들어 준다 .
옵션에 Texture 사이즈 변경 기능 추가
그래픽 팀 프로그램 팀
![Page 58: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/58.jpg)
DDS 구조 (DXT1)
(16Pixel) 4Byte * 16 = 64Byte
최고와 최저 수치의 Color 를 얻어옵니다 .
( 최고 , 최저 Pixel) 2Byte * 2 = 4Byte
각 Pixel 에 Index 사용으로 2Bit 를 할당합니다 .
(16Pixel) 2Bit * 16 = 32Bit -> 4Byte
(1Pixel) ARGB = 32Bit = 4Byte
(1Pixel) RGB = 16Bit = 2Byte
2Bit 는 0, 1, 2, 3 으로 4 개의 값을 가질수 있습니다 .
최고 최저
1001
3020
11
112
23
3
4Byte(Color) + 4Byte(Index) =8Byte 사용 (16Pixel)
보간보간
![Page 59: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/59.jpg)
DDS 사용 예 Opaque Texture - DXT1
Hard Alpha Tex-ture
- DXT1, DXT3
Soft Alpha Tex-ture
- DXT5
![Page 60: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/60.jpg)
이름을 사용한 Alpha 구별 Opaque Texture - 기존 이름을 사용한다 .
Hard Alpha Texture - 이름 뒤에 _a 를 추가로 붙인다 . ( DXT5
예외 )
Soft Alpha Texture - 이름 뒤에 _a, _a1, _a2 를 추가로
붙인다 . - DXT5 일 경우만 적용
![Page 61: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/61.jpg)
왜 SoftAlpha 는 a, a1, a2 으로 나눴을까 ?
AlphaTest 를 쓰면 OK
하지만… .
![Page 62: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/62.jpg)
Alpha Texture 의 위험성 남발 할 경우 느리다 .
![Page 63: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/63.jpg)
Q & A
![Page 64: 게임 개발을 위한 렌더링 기법 한성환](https://reader033.vdocuments.site/reader033/viewer/2022061523/558a5bc2d8b42aa21b8b4623/html5/thumbnails/64.jpg)
궁금하신 부분이 있으시다면 !!
감사합니다