언리얼 엔진 4의 기본 화면 구성과 레이아웃에 대해서 알아봅시다.

 

타임라인

0:00 개요

0:29 탭 바

0:51 메뉴 바

1:00 툴바

1:11 뷰포트 패널

1:35 모드 패널

1:56 월드 아웃라이너 패널

2:09 디테일 패널

2:21 콘텐츠 브라우저 패널

2:45 레이아웃 변경하기

3:09 레이아웃 저장하기

3:21 레이아웃 불러오기

3:28 기본 에디터 레이아웃으로 되돌리기

 

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

UI 비법서 (3) 

군무는 칼같은 각이 생명! Layout Group

 

작성 기준 버전 :: 2019.1 - 2019.4

 

[이 포스트의 내용을 유튜브 영상으로도 시청하실 수 있습니다]

 

UI를 구성할 때, 아무 위치에나 배치되는 경우는 거의 없다. 대부분의 UI는 미리 설계된 레이아웃에 따라서 배치된다. 대부분의 UI 혹은 메인 메뉴 같은 UI는 고정된 위치에 배치되고 그것이 추가/삭제되는 등의 변동이 실시간으로 일어나지는 않는다.

 

하지만 카드 수집형 게임(TCG) 같은 게임에서 자신이 보유한 카드를 보여주는 형식의 카드 인벤토리 UI를 예시로 들자면, 보유하고 있는 카드의 숫자에 따라서 보여주는 카드 UI의 숫자가 달라질 것이다. 카드를 새로 얻으면 가지고 있는 카드 UI들 끝에 새로 얻은 카드 UI가 바로 앞 카드 UI와 일정한 간격을 두고 생성되어야 한다. 그리고 카드를 이름이나 카드의 성능 등 사용자가 원하는 기준에 따라서 정렬하고자 하면 현재 보여주고 있는 카드 UI들을 기준에 맞춰 재정렬한 뒤에 보여주는 줘야한다. 이렇듯이 고정된 UI와 달리 실시간으로 UI를 추가/삭제하고 순서를 변동하는 작업을 필요로 한다.

 

실시간 카드 추가/제거 및 정렬을 위한 기능을 수동으로 직접 구현 한다면 상당히 많은 작업을 해야하고 시간 역시 많이 소모될 것이다. 이런 UI의 위치를 자동으로 맞춰주는 기능을 구현하는데 소모되는 시간을 줄여주기 위해서 유니티 엔진에서 제공하는 기능이 바로 레이아웃 그룹(Layout Group)이다.

 

『성능 최적화를 위해서는 사실 해당 기능을 직접 구현하는 것이 좋다. 레이아웃 그룹의 성능 문제는 본 포스트의 제일 하단에 언급되어 있다.』

 

 

 

 

 

레이아웃 그룹(Layout Group)

 

레이아웃 그룹은 UI를 자동으로 정렬하는 컴포넌트이다. 이 컴포넌트의 종류로는 수직 레이아웃 그룹(Vertical Layout Group), 수평 레이아웃 그룹(Horizontal Layout Group), 그리드 레이아웃 그룹(Grid Layout Group)이 있다.

 

  

 

수직 레이아웃 그룹(Vertical Layout Group)

 

수직 레이아웃 그룹은 주로 리스트 형식으로 UI들을 보여줄 때 사용된다. 

 

  

수직 레이아웃 그룹 컴포넌트를 사용하면 위의 이미지와 같이 하이어라키에서 자식 게임오브젝트로 들어온 UI들이 수직으로 자동 정렬된다. 이 때 캔버스에 표시되는 순서는 하이어라키에 표시된 순서와 같다.

 

 

하이어라키 창에서 Vertical Layout Group 게임오브젝트 아래에 있는 Image 게임오브젝트를 복사하면 복사/생성된 이미지 UI 게임오브젝트들이 자동으로 정렬되는 것을 확인할 수 있다.

 

 

수직 레이아웃 그룹의 프로퍼티는 위의 이미지에서 볼 수 있듯이 패딩(Padding), 스페이싱(Spacing, 간격), 차일드 얼라인먼트(Child Alignment, 자식 정렬), 컨트롤 차일드 사이즈(Control Child Size, 자식 크기 조절), 유즈 차일드 스케일(Use Child Scale, 자식 크기 사용), 차일드 포스 익스팬드(Child Force Expand, 자식 강제 확장)가 있다.

 

 

패딩(Padding)

 

 

콘텐츠 사이즈 피터를 사용하면 패딩 프로퍼티에 대해서 더 잘 이해할 수 있다. 좌 우 위 아래의 패딩 값을 조절을 하면 Vertical Layout Group 게임 오브젝트의 넓이와 높이가 늘어나며 Vertical Layout Group 게임오브젝트 아래에 있는 자식 게임오브젝트들을 감싸는 공간이 생기는 것을 확인할 수 있다.

 

 

스페이싱(Spacing)

 

 

스페이싱 프로퍼티는 자식 게임오브젝트 사이의 간격을 의미한다.

 

 

차일드 얼라인먼트(Child Alignment)

 

 

차일드 얼라인먼트는 수직 레이아웃 그룹 컴포넌트가 부착된 게임오브젝트 내부에서 어느 위치를 중심으로 콘텐츠들을 정렬할 것인가를 의미한다. 위의 이미지에서도 볼 수 있듯이 회색 사각형은 Vertical Layout Group 게임오브젝트의 영역인데, 차일드 얼라인먼트의 값에 따라서 차일드 게임 오브젝트들의 위치가 변하는 것을 확인할 수 있다.

 

 

 

 

 

컨트롤 차일드 사이즈(Control Child Size)

 

컨트롤 차일드 사이즈 프로퍼티는 단독으로는 큰 의미를 가지지 않는다.

 

 

하지만 위의 움직이는 이미지에서 볼 수 있듯이 컨트롤 차일드 사이즈 프로퍼티만 단독으로 사용할 때는 아무런 반응이 없었지만 차일드 포스 익스팬드 프로퍼티와 함께 사용하면 레이아웃 그룹 컴포넌트가 부착된 게임오브젝트의 사이즈만큼 하위 UI들의 크기가 커지는 것을 확인할 수 있다.

 

 

혹은 레이아웃 그룹의 하위에 속하는 요소들이 레이아웃 엘리먼트(Layout Element, 레이아웃 요소) 컴포넌트를 가지는 경우에도 의미를 가지고 동작한다.

 

 

위의 움직이는 이미지에서 레이아웃 엘리먼트와 레이아웃 그룹의 상호작용을 볼 수 있는데 컨트롤 차일드 사이즈를 넓이 옵션만 활성화 한 뒤, 레이아웃 엘리먼트의 Preferred Width와 Preferred Height를 둘 다 활성화하고 변경했지만, 넓이만 변경되는 것을 확인할 수 있다.

 

 

차일드 스케일 사용(Use Child Scale)

 

차일드 스케일 사용 프로퍼티는 하위의 UI들을 정렬할 때, 차일드 게임 오브젝트의 스케일 값을 사용할 것인가를 정한다.

 

 

위의 예시 이미지를 보면 차일드 스케일 사용 프로퍼티를 켜기 전에는 자식 오브젝트의 크기가 바뀌어도 정렬 위치 자체는 그대로인 반면에 차일드 스케일 사용 프로퍼티를 켜면 자식 오브젝트의 크기에 따라서 정렬 위치가 바뀌는 것을 확인할 수 있다.

 

 

차일드 강제 확장(Child Force Expand)

 

차일드 강제 확장 프로퍼티는 컨트롤 차일드 사이즈 프로퍼티 설명에서 봤듯이 자식 오브젝트의 크기를 레이아웃 그룹 컴포넌트가 부착된 게임 오브젝트의 크기에 맞춰서 강제로 늘어나게 만드는 옵션이다.

 

 

 

 

 

수평 레이아웃 그룹(Horizontal Layout Group)

 

 

수평 레이아웃 그룹은 자기 밑에 속한 자식 UI 오브젝트들을 수평으로 정렬한다. 그리고 수평 레이아웃 그룹 컴포넌트가 가진 프로퍼티는 수직 레이아웃 프로퍼티가 가진 것과 동일하며 그 기능 역시 같다.

 

 

그리드 레이아웃 그룹(Grid Layout Group)

 

 

그리드 레이아웃 그룹은 하이어라키 뷰에서 자식으로 속한 UI 게임 오브젝트들을 바둑판식으로 정렬한다. 그리드 레이아웃이 가지는 프로퍼티는 패딩(Padding), 셀 크기(Cell Size), 시작 코너(Start Corner), 시작 축(Start Axis), 차일드 얼라인먼트(Child Alignment), 제약(Constraint, 콘스트래인트)가 있다.

 

우선 패딩과 차일드 얼라인먼트 프로퍼티는 위의 수직/수평 레이아웃 그룹이 가지는 프로퍼티와 같은 기능이다.

 

 

셀 크기(Cell Size)

 

 

셀 크기 프로퍼티는 그리드 레이아웃 그룹에 속하는 UI들의 크기를 지정해주는데 사용된다.

 

 

시작 코너(Start Corner)

 

 

시작 코너 프로퍼티는 자식 UI를 정렬될 때 시작 위치를 정하는 기능이다. 왼쪽 위(Upper Left), 오른쪽 위(Upper Right), 왼쪽 아래(Lower Left), 오른쪽 아래(Lower Right)로 설정할 수 있으며 위치를 제대로 잡기 위해서는 차일드 얼라인먼트와 함께 사용하는 것이 좋다.

 

 

시작 축(Start Axis)

 

 

시작 축은 자식 UI를 정렬할 때, 수직으로 먼저 정렬할 것인지, 수평으로 먼저 정렬할 것인지를 정하는 옵션이다. 기본 설정은 수평이며, 수직으로 변경하면 새로 생겨난 UI는 아래쪽 행으로 추가 되며 레이아웃 그룹 컴포넌트가 부착된 게임 오브젝트의 가장 아래쪽 행까지 채우고 나면 그 다음 옆에 열을 추가하는 방식으로 정렬된다.

 

 

제약(Constraint)

 

 

그리드 레이아웃의 제약 프로퍼티는 기본적으로 플랙시블, 즉 유연성있는 상태로 설정되어 있는데 이것은 위의 이미지와 같이 2x2, 3x3, 4x4 형태로 정사각형의 정렬된다. 그리고 해당 NxN의 레이아웃이 수용할 수 있는 UI의 갯수를 넘어가면 N+1xN+1 행렬로 자동으로 확장된다.

 

 

이렇게 자동으로 행렬 모두가 확장되는 방식은 일반적인 UI에서는 쉽게 사용되지 않는다. 대부분의 경우에는 행이나 열 중 하나는 갯수를 고정시켜두고 추가하는 방식을 사용한다.

 

제약 프로퍼티를 Fixed Column Count로 선택하면 첫 번째 이미지처럼 열의 갯수를 고정시킨 채로 행을 추가해 나갈 수 있고, Fixed Row Count로 설정하면 두 번째 이미지처럼 행의 갯수를 고정시킨 채로 열을 추가해 나갈 수 있다.

 

 

정리

 

레이아웃 그룹은 이렇게 동적으로 추가/제거되는 UI를 정렬하기에 좋은 컴포넌트이다. 하지만 동적이지 않은 UI더라도 일정한 간격을 두고 배치되는 UI라면 번거롭게 위치를 일일이 계산해서 배치하는 것보다 빠르게 작업할 수 있게 도와준다.

 

또한, 레이아웃 그룹 컴포넌트는 콘텐츠 사이즈 피터스크롤 뷰와 함께 사용하면 좋다.

 


 

추가로...

 

조금 늦게 알게된 사실이지만 최적화를 위해서는 레이아웃 그룹의 사용을 자제해야 된다는 유니티 최적화 팁이 있다. 해당 내용은 레이아웃 그룹 내에서 하나 이상의 자식 요소가 변경되면 레이아웃 시스템이 변경된 것으로 인식해서 레이아웃 그룹 내의 각 UI 요소 1개마다 최소 1회의 GetComponents 호출을 수행한다고 한다. 단순 GetComponents 호출이 아닌 연속적인 GetComponents 호출이 성능에 얼마나 악영향을 끼치는지는 대부분의 개발자들 역시 인지하고 있을 것이다.

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

Tutorial (2)

유니티 에디터의 화면 구성

 

작성 기준 버전 :: 2018.3.1f1

 

 

유니티 에디터로 프로젝트를 처음으로 열면 화면이 아래의 이미지와 같이 구성되어 있다.

 

 

 

이 화면의 구성에 대해서 하나씩 알아보도록 하자.

 

 

씬(Scene) 뷰

 

 

에디터 레이아웃 구성의 한 가운데 있는 것은 Scene 뷰다. 유니티에서 씬(Scene)이라는 개념은 일종의 맵(Map)이나 레벨(Level)에 해당한다. 씬 뷰는 이러한 씬에 배경을 꾸미기위해 소품이나 배경 건물 등을 배치하는데 사용된다.

 

 

하이어라키(Hierarchy) 창

 

 

씬 뷰의 좌측에 있는 하이어라키 창은 씬에 배치되어 있는 오브젝트들을 보여준다. 가장 상단에 SampleScene이라는 이름으로 현재 열려있는 씬의 이름이 표시되고, 그 아래에 그 씬에 포함된 오브젝트들이 나타난다. 기본적으로 배치되어 있는 오브젝트는 Main Camera라는 이름의 카메라와, Directional Light라는 이름의 조명이다.

 

 

프로젝트(Project) 창

 

 

프로젝트 창은 현재 프로젝트에 포함된 텍스처나 모델링, 스크립트, 씬 등의 애셋(Asset)을 보여주는 창이다. 개발 경험이 많지 않은 경우에는 프로젝트 창에 애셋들이 추가되는 대로 중구난방으로 쌓아두는 일이 많은데, 애셋들을 적절하게 분류해서 정리해두는 버릇을 들여두는게 나중에 필요한 애셋을 찾거나 불필요한 애셋을 정리할 때 큰 도움이 되며, 개발 속도에도 긍정적인 영향을 미칠 것이다.

 

 

인스펙터(Inspector) 창

 

 

인스펙터 창은 지금은 아무 내용이 없지만, 하이어라키 창에서 씬에 배치된 오브젝트나 프로젝트 창에서 프로젝트에 포함된 애셋을 선택하면 그것에 대한 자세한 정보를 보여주는 역할을 한다.

 

 

하이어라키 창에서 메인 카메라 오브젝트를 선택하고 인스펙터 창을 보면 메인 카메라 오브젝트의 자세한 정보를 확인하고 수정할 수 있게 된다.

 

 

게임(Game)

 

 

씬 창 뒤에 탭으로 되어 있는 게임 창 탭을 선택하면 씬 창이 뒤로 전환되고 게임 창이 앞으로 나온다.

 

게임 창은 씬 창과 같이 씬을 보여주는 역할을 하지만, 게임 창은 씬 창과는 다르게 카메라가 보여주는 것만을 볼 수 있는 창이다. 즉, 실제 게임에서 보게 될 장면을 보여주는 창이다.

 

 

 

 

 

콘솔(Console) 창

 

 

콘솔 창은 개발도중에 발생한 에러나 경고, 개발자가 기능을 테스트하거나 값을 체크하기 위해 출력시킨 로그 등이 출력되는 창이다. 출력된 로그를 더블클릭하면 비주얼 스튜디오가 열리고 해당 로그가 출력된 스크립트의 위치로 이동하게 된다.

 

로그의 종류

 

 

유니티 엔진에서 로그는 크게 일반 로그, 경고 로그, 에러 로그로 나누어지고, 일반 로그는 데이터의 값이나 진행 상황, 상태를 체크하기 위해 사용되는 로그이고, 경고 로그는 치명적이지는 않지만 수정할 것을 권장하는 로그이며, 에러 로그는 게임이 정지하거나 기능에 심각한 이상이 발생하는 상황에 대한 로그이다.

 

세부적인 버튼의 내용은 다음과 같다.

 

 

뒤의 세 개 버튼은 각각 일반 로그, 경고 로그, 에러 로그 보기 버튼이며, 해당 버튼을 눌러서 원하는 종류의 로그만 볼 수 있다.

 

 

일반 로그만 활성화한 상태이다.

 

 

경고 로그만 활성화한 상태이다.

 

 

 

에러 로그만 활성화한 상태이다.

 

 

Clear 버튼은 현재까지 출력된 로그들을 모두 지운다.

 

 

 

Collapse 버튼은 같은 내용의 로그가 여러 번 출력되면 여러 줄로 표시하지 않고 한 줄로 표시하며 같은 내용의 로그가 몇 번이나 출력되었는지를 보여주는 기능이다. 이것은 로그의 순서가 중요하지 않고, 출력되었느냐 혹은 몇 회나 출력되었는지가 중요한 경우에 사용하게 된다.

 

Clear on Play 버튼은 에디터에서 플레이 버튼을 눌렀을 때, 남아있는 로그를 모두 지우고 플레이를 시작하게 만든다. 남아있는 이전에 띄운 로그가 남아있다면 플레이 중에 뜨는 로그가 보기 힘들어지는 경우가 많기 때문에 사용한다.

 

Error Pause 버튼은 플레이 도중에 에러 로그가 발생하면 플레이를 일시정지 시키는 버튼이다. 에러가 나도 플레이가 계속되면 에러가 발생하는 순간을 놓칠 수도 있기 때문에 에러가 발생한 순간을 잡아내기 위해서 사용하는 기능이다.

 

Editor 버튼은 에디터의 로그를 출력한다는 뜻의 버튼이다. 나중에 모바일 게임을 개발하다보면 APK로 빌드한 앱을 모바일 기기에 설치해서 컴퓨터와 연결하고 실행해서 실시간으로 로그를 보기위해서 사용되는 버튼이다.

 

 

애셋 스토어(Asset Store) 창

 

 

 

 

애셋 스토어 창은 다른 개발자들이 만든 게임 개발용 애셋들을 구매할 수 있는 창이다. 대규모 개발팀이나 회사는 게임에 필요한 모든 리소스들을 개발할 여력이 있겠지만, 소규모 개발팀이나 1인 개발자는 모든 리소스를 만들어내기 매우 어렵기 때문에 다른 사람이 만든 애셋을 구매해서 사용하면 더 빠르게 게임을 개발할 수 있다는 장점이 있다.

 

 

그 외의 창들

 

유니티 엔진에는 방금 화면 구성에서 소개한 창들 외에도 많은 종류의 창들이 존재한다.

 

 

에디터 상단의 메뉴 바에서 Window 메뉴를 클릭해서 드롭다운 메뉴를 펼치면 숨겨진 창들의 목록을 보고 필요한 창을 열어서 사용할 수 있다.

 

 

그 외의 버튼들

 

 

이 버튼들은 씬에 배치된 오브젝트를 이동, 회전, 크기 조절을 하는데 사용되는 버튼들이다.

 

 

이 버튼들은 에디터에서 게임을 실행, 일시정지, 한 프레임씩 넘기기를 하는 버튼이다.

 

 

좌측 버튼부터 순서대로, 팀단위 작업을 위한 유니티 콜라보(Collaborate) 버튼, 유니티가 제공하는 서비스 버튼, 계정 관리 버튼, 씬 창에서 보이기 원하는 레이어를 선택하는 버튼, 유니티 에디터의 레이아웃 버튼이다.

 

 

유니티 에디터 레이아웃 수정하기

 

유니티 에디터의 화면 구성은 사용자가 편한 방식으로 레이아웃을 수정할 수 있다.

 

 

위치를 수정하려고하는 창의 탭을 드래그해서 에디터에서 완전히 떼어내거나 다른 곳에 배치할 수 있다.

 

 

완전히 떼어낸 하이어라키 창

 

 

다른 위치에 배치한 하이어라키 창

 

 

각자 사용하기 편한 방식으로 레이아웃을 배치해보자.

 

 

수정한 레이아웃 저장하기

 

수정한 레이아웃은 저장해두고 언제든지 다시 불러올 수 있다. 에디터 우측 상단 구석에 Default 버튼을 클릭하면 드롭다운 메뉴 중에 Save Layout... 버튼을 클릭하면 수정한 레이아웃의 이름을 지어줄 수 있는 대화상자가 뜬다.

 

 

좌측부터 게임, 씬, 콘솔이 한 묶음으로 묶여있고, 그 다음엔 하이어라키와 프로젝트, 마지막으로 인스펙터로 나열되서 3-2-1로 배치되어 있으니 이 레이아웃의 이름을 Countdown이라고 저장하겠다.

 

 

레이아웃을 저장하고 나면 Default로 되어있던 버튼이 Countdown으로 되어있으며 추가한 Countdown 레이아웃이 드롭다운 목록에 추가되어 있는 것을 확인할 수 있다. 이렇게 레이아웃을 저장해두면, 레이아웃이 바뀌어도 언제든지 손쉽게 자주 사용하는 레이아웃으로 돌아올 수 있다.

 

 

[유니티 어필리에이트 프로그램]

아래의 링크를 통해 에셋을 구매하시거나 유니티를 구독하시면 수익의 일부가 베르에게 수수료로 지급되어 채널의 운영에 도움이 됩니다.

 

에셋스토어

여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다.

assetstore.unity.com

 

Easy 2D, 3D, VR, & AR software for cross-platform development of games and mobile apps. - Unity Store

Have a 2D, 3D, VR, or AR project that needs cross-platform functionality? We can help. Take a look at the easy-to-use Unity Plus real-time dev platform!

store.unity.com

 

Create 2D & 3D Experiences With Unity's Game Engine | Unity Pro - Unity Store

Unity Pro software is a real-time 3D platform for teams who want to design cross-platform, 2D, 3D, VR, AR & mobile experiences with a full suite of advanced tools.

store.unity.com

[투네이션]

 

-

 

toon.at

[Patreon]

 

WER's GAME DEVELOP CHANNEL님이 Game making class videos 창작 중 | Patreon

WER's GAME DEVELOP CHANNEL의 후원자가 되어보세요. 아티스트와 크리에이터를 위한 세계 최대의 멤버십 플랫폼에서 멤버십 전용 콘텐츠와 체험을 즐길 수 있습니다.

www.patreon.com

[디스코드 채널]

 

Join the 베르의 게임 개발 채널 Discord Server!

Check out the 베르의 게임 개발 채널 community on Discord - hang out with 399 other members and enjoy free voice and text chat.

discord.com

 

반응형

+ Recent posts