9-slice 미리보기
UI 버튼이나 말풍선 이미지를 9조각으로 나누는 경계선을 끌어서 정하고, 원하는 크기로 늘렸을 때 어떻게 보이는지 바로 확인해요. 경계값과 CSS border-image 코드를 복사할 수 있어요.
UI 이미지 바꾸기파일 선택
원본에서 점선을 끌어 경계를 정하세요
늘린 결과
경계 (px)
미리보기 크기
사용 방법
1이미지 올리기버튼, 패널, 말풍선처럼 모서리가 둥근 UI 이미지를 올려요.
2경계 정하기점선 4개를 끌어 모서리가 다 들어가도록 경계를 맞춰요. 숫자로 직접 넣어도 돼요.
3확인하고 복사크기 슬라이더로 늘려 보고, 괜찮으면 경계값이나 CSS 코드를 복사해요.
이런 때 쓰면 좋아요
버튼이나 대화창 이미지를 그냥 늘리면 둥근 모서리와 테두리 두께가 같이 늘어나서 뭉개져 보여요. 9-slice는 이미지를 가로세로 세 칸씩 9조각으로 나눠서 모서리는 그대로 두고 가운데와 변만 늘리는 방법이에요.
경계를 잘못 잡으면 늘렸을 때 모서리 일부가 늘어나거나 테두리 무늬가 끊겨 보여요. 이 도구로 실제 크기를 바꿔 가며 미리 보면 엔진에 넣기 전에 문제를 찾을 수 있어요.
찾은 경계값은 Unity의 스프라이트 테두리, Godot의 NinePatchRect 여백, 웹의 border-image-slice에 그대로 넣으면 돼요. 웹에서 쓸 때를 위해 CSS 코드도 만들어 드려요.
자주 묻는 질문
경계값 순서가 엔진마다 달라요.
이 도구는 왼쪽, 오른쪽, 위, 아래로 따로 보여 줘요. CSS border-image-slice는 위, 오른쪽, 아래, 왼쪽 순서라서 코드에는 그 순서로 넣어 드려요.
픽셀아트 UI도 되나요?
네. 작은 이미지는 크게 확대해서 보여 주고, 결과도 픽셀이 뭉개지지 않게 그려요.
미리보기를 경계 합보다 작게 줄이면요?
모서리가 겹치지 않도록 모서리 크기를 비율에 맞춰 줄여서 그려요. 실제 엔진도 비슷하게 처리하지만 엔진마다 조금 다를 수 있어요.
반복 모드는 무엇인가요?
가운데와 변을 늘리지 않고 타일처럼 반복해서 채워요. 무늬가 있는 테두리에 어울려요. CSS의 round와 비슷해요.
이미지가 업로드되나요?
아니요. 모든 처리는 브라우저 안에서 이뤄져요.