일러스트레이터에서 9 slice scaling 기능을 활용하면 아주 간단합니다.

웹이나 모바일에서 많이 보이는 모서리가 둥근 버튼들이 있습니다. 일러스트레이터에서 Rectangle(사각형)을 그린뒤 effect > stylize > round corners 명령을 통해 만들어도 되고, 애초에 round rectangle(둥근사각형) 툴로 만들어도 되죠. 그런데 문제가 있습니다. 버튼 크기를 조절할 경우엔 모서리도 같이 늘어나고 줄어들다보니 모양이 영 예쁘지 않아요.

웹이나 모바일 등 디자인을 하다보면 은근히 둥근 모서리형 버튼을 많이 쓰게 되는데요. 이런걸 매번 모서리가 뭉개지는걸 신경쓰면서 작업한다는건 보통 스트레스가 아니죠. 

플래시에도 있는 기능입니다만, 일러스트레이터에도 9 slice-scaling 이란 기능이 있습니다. 말 그대로 9개 영역으로 분할해주는 편리한 기능이죠. 만드는 방법도 아주 간단합니다.

저는 name을 Round button으로 정해줬습니다. 아무거나 정해도 되고 안정해도 큰 상관은 없습니다. type은 플래시에 import할때 필요한 옵션입니다. Graphic과 Movie Clip 옵션이 있지만, 플래시와 연동해서 작업할 것이 아니면 큰 상관 없으므로 무시하고 넘어갑니다.  registration은 기준점을 이야기합니다. 현재는 가운데를 기준으로 정해져있습니다. 이 심볼은 가운데를 기준으로 크기가 조절된다는 이야기죠. 여기서 중요한건 Enable Guides for 9-Slice Scaling 옵션을 켜는 것입니다. Align to pixel grid는 픽셀 기준으로 작업할때는 유용하지만, 그렇지 않을때는 오히려 성가시기때문에 꺼놓고 하도록 하겠습니다. OK를 누릅니다.

보시는 바와같이 네개의 가이드라인이 생깁니다. 이것을 아래와 같이 조절했습니다.

어떻게 배치해야하는지 아시겠나요? 저런식으로 모서리가 굴러가기 바로 전 위치까지 가이드라인을 적당히 배치해줍니다. 이제 저 기준선을 기준으로 영역이 어떻게 나뉘어있나 제가 숫자로 표현해놓은 아래 사진을 보시면서 나머지 설명을 이어가겠습니다.

위와같이 9개 영역으로 나뉘어있는데요. 위 영역들은 이제 앞으로 이 심볼을 늘리거나 줄일때 개별적으로 늘어나게됩니다. 가이드라인을 기준으로 9개의 도형이 따로따로 움직이는것처럼 작동한다는 이야기죠. 따라서 1,3,7,9번 모서리 영역또한 개별적으로 인식되다보니 둥근 모서리가 뭉개지지 않는겁니다.