# 시메지 관리

<h3 align="center"><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F30pNT46TAfXBVD3F3oxR%2F%EC%B6%94%EA%B0%80%EA%B8%B0%EB%8A%A5.png?alt=media&#x26;token=d1d88f10-1a13-4c2f-bf40-7a5c798d985d" alt="" data-size="line"></h3>

<h3 align="center"><strong>시메지 관리</strong></h3>

<p align="center">내 홈페이지를 돌아다니는 귀여운 캐릭터 만들기!</p>

<p align="center"><sub><em>+</em></sub> <em> </em><sub><em><mark style="color:purple;">20,000₩</mark></em></sub></p>

<p align="center"><br></p>

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.37.40.png_5871ec46-f889-4997-878f-d15b4bb1142d?alt=media\&token=5e1fa8c3-a3cc-47d1-9b9c-cd05a2cd76bc)

{% hint style="success" %}
**‘시메지**’란 바탕화면 등을 자유롭게 부유하며 움직이는 캐릭터 애니메이션입니다.

보통은 운영체제를 기반으로 작동하는 프로그램 명칭이지만

&#x20;**해당 시메지는 무공 갠홈 에서만 작동합니다.**
{% endhint %}

{% hint style="danger" %}

* 파츠를 세트로 만드셔서 배포하시는 행위 자유롭게 가능하십니다. \
  해당 시메지 바디 데포르메는 무공 자체 제작이나, \
  직접 제작하시는 파츠에는 무공의 저작권이 없으므로 자유롭게 명시하셔도 좋습니다.
* 해당 홈페이지 시메지 기능을 참고하여 타 커미션에 개발을 맡기시는 행위는 지양합니다.
  {% endhint %}

\ <mark style="color:blue;">**\[1]**</mark> [#undefined-2](#undefined-2 "mention")

<mark style="color:blue;">**\[2]**</mark> [#undefined-4](#undefined-4 "mention")

<mark style="color:blue;">**\[3]**</mark> [#undefined-5](#undefined-5 "mention")

<mark style="color:blue;">**\[4]**</mark> [#undefined-7](#undefined-7 "mention")

<h2 align="center">#1</h2>

<h3 align="center"><strong>캐릭터 추가/수정/삭제</strong></h3>

시메지 관리 기능은 **\[내 프로필] - \[메인 홈 설정] - \[시메지 관리]**&#xC5D0; 있습니다.

**\[+추가]** 버튼을 누를 시 기본 시메지가 추가됩니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.38.43.png_54fc4ab5-0333-4fe0-bc65-21d67f406d58?alt=media\&token=4e6b8c52-5bbd-4995-886a-585ac6d3467b)

> ### **시메지 캐릭터 상태**
>
> <sup>**각 상태는 랜덤시간, 랜덤으로 출력되며 표정 및 애니메이션이 다르게 작동합니다.**</sup>
>
> * 기본
> * 걷기
> * 꾸벅꾸벅
> * 이동
> * 클릭
> * 냠냠

<h2 align="center">#2</h2>

<h3 align="center"><strong>얼굴 커스텀</strong></h3>

컬러 파레트를 통해 피부색, 눈색 등을 설정할 수 있습니다.

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.45.51.png_5f22e796-bd80-4ba2-93e9-577d159c9645?alt=media\&token=8468a65e-8459-45f3-83d8-b4be707c744e)

눈은 굵기 지정이 가능하며, 각 벡터 수치를 통해 섬세하게 커스텀 할 수 있습니다.\
입모양 등은 지정이 가능합니다.

<div align="left"><img src="https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.46.36.png_930edd0d-24fb-4e0d-ae23-8056818d4742?alt=media&#x26;token=1eac5702-2a72-40ec-84db-c22564dd838e" alt=""></div>

<h2 align="center">#3</h2>

<h3 align="center"><strong>헤어/의상 커스텀</strong></h3>

헤어, 의상, 악세사리는 모두 '직접 등록'하여 커스텀 하는 형태입니다.

아래에 이미지를 만드는 상세한 가이드를 따로 만들어 두었습니다. 참고 해주세요.

> ### **주요내용**
>
> * 이미지 크기는 100px \* 120px 고정입니다.
> * 해당 이미지 안쪽의 적절한 바디 위치에 파츠를 그려주시면 됩니다.
> * 가장 선명한 노출을 위해 추천하는 이미지 형식은 ‘벡터’ 입니다. 확장자는 .svg입니다.\
>   **페이지 가장 하단에 SVG파츠 제작방법이 첨부되어 있습니다.**
> * 복잡도가 있는 의상은 벡터 이미지 보다, png를 권장합니다.

1. **바디 가이드**

아래의 바디 이미지를 다운받아, 투명도를 낮추고 그 위에 파츠를 그려주세요.\
모든 파츠는 레이어 분리해 추출해 주세요.

{% file src="<https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F6SbQ6HTfiuinZe6gU5Sy%2F%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%86%E1%85%A7%E1%86%AB.png?alt=media&token=47958018-e013-4422-9bcf-1bc861b44390>" %}

{% file src="<https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F1g9LYK7cVwIvW62MqN1u%2F%E1%84%8B%E1%85%A7%E1%87%81.png?alt=media&token=0e2ab3be-619e-4868-aad1-f87cb60daba0>" %}

![](https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FDczCsQc53xofNh7rAoWO%2Fimage.png?alt=media\&token=9752968a-9b81-4664-a2c4-15eb3217fbd6)![](https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FNXdwYphDpBRnnozTr96I%2Fimage.png?alt=media\&token=74a6c6e7-980d-4abb-845c-3f8a1a19fab8)

2. **헤어 가이드**

\[정면] 이미지와 \[옆면] 이미지를 제작해 주세요.\
\[뒷머리]도 옵션에 따라 제작 가능합니다.\ <img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FsAv1ddWgmbmF2jviotV1%2Fimage.png?alt=media&#x26;token=ddd8d68b-5063-465b-8959-f80c47421711" alt="" data-size="original">

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F1XsSo6FOBAkuYvDfuDAR%2Fimage.png?alt=media&#x26;token=6986325f-ac48-4556-8109-b8d76c82eef9" alt=""><figcaption></figcaption></figure>

3. **의상 가이드**

{% hint style="info" %}
필요한 의상 가이드 목록 :  **왼팔  |  오른팔  |  왼다리  |  오른다리  |  옷(몸통)**&#x20;
{% endhint %}

<div align="left"><figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2F7qnjGomv94T0oGavWune%2Fimage.png?alt=media&#x26;token=93b34018-c9d7-4fda-9201-c6d4ec9bd755" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FSw3RaGp2gHHH4idaPyQL%2Fimage.png?alt=media&#x26;token=dbc2224c-3e2c-47ec-b4c6-b5f96d74534b" alt=""><figcaption></figcaption></figure>

4. 악세사리 가이드&#x20;

악세사리는 기호도에 따라 추가하시면 됩니다.\
**왼쪽 악세사리는 \[걷기]모드로 측면이 노출될 시 보이지 않는 귀 쪽입니다.**

<div align="left"><figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FJfcwdX4helJODp4oe8AM%2Fimage.png?alt=media&#x26;token=1a2ea60b-e02b-4235-9574-27cfec5be86f" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://370831306-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODJXq0uhOJ46oP3YIDsO%2Fuploads%2FYZearyUrs0eLsdFg4Reo%2Fimage.png?alt=media&#x26;token=73aa74e6-0848-471d-be34-c762dfe929d7" alt=""><figcaption></figcaption></figure>

> 🌸  **SVG제작 가이드**\
> 이미지를 벡터로 작업하고 싶으신 경우 아래 툴을 추천드립니다.\
> \
> [**Figma**](https://www.figma.com/community/file/1425293606912256927/moogong-simeji)<br>
>
> 위의 figma  툴은 무료이며, 레디메이드 파츠를 제공합니다.<br>
>
> `open in figma` 버튼을 눌러 파일을 다운받고 수정할 수 있습니다.
>
> 상세 가이드 또한 파일 안쪽에 첨부하였습니다.

<h2 align="center">#4</h2>

<h3 align="center"><strong>음식, 스크립트 커스텀</strong></h3>

**\[음식]** 은 **\[냠냠]** 모션일때만 노출되며, 등록한 갯수만큼 랜덤으로 출력됩니다.

<div align="left"><img src="https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.45.03.png_1f56ebf2-56b5-41f6-8ea3-84bd015dc8c1?alt=media&#x26;token=db64b0d8-b980-4c99-92a3-c63884a7433c" alt=""></div>

**\[스크립트]**&#xB294; 여러개를 등록할 수 있으며, 랜덤 출력됩니다.\
저장 당시 설정된 눈매, 눈썹 값을 **\[표정]**&#xC73C;로 지정해 쌍으로 저장할 수 있습니다.

<div align="left"><img src="https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2FFrame%2031033.png_9f3e365c-30e4-459a-94e1-073a679e9a22?alt=media&#x26;token=cd5675de-403d-4608-ba46-7ca0ee87e61d" alt=""></div>

![](https://firebasestorage.googleapis.com/v0/b/ts-boilerplate-b2b14.appspot.com/o/posting%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-08-25%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%207.44.34.png_5da0721f-c8bd-44fb-acb3-76ce1d3fc3f3?alt=media\&token=78ffb25b-f6ec-4fbe-8975-d35b3ff605a8)

<br>

<br>