본문 바로가기

Codinator/Tutorial

코디네이터 기능 파헤치기 2 : 모양 변경하기 (Shape Change)

 

 

안녕하세요. 위트스튜디오 코디네이터 팀입니다.

코디네이터 2.0 CBT 1차가 벌써 3주째 지나고 있네요. 다음 준비를 위해 저희도 열심히 개발하고 있습니다.

 

오늘 소개해 드릴 기능은 Shape Change 즉, 모양 변경하기 입니다.

지난 스타트업 마켓에서 공개 했을 당시 가장 많은 관심을 받았던 기능이니 두눈 크게 뜨고 보셔도 좋을 것 같습니다. :)

 

앞서 소개해 드렸듯이 코디네이터는 기본적으로 모양(Shape)과 스타일(Style)이 분리되어 있습니다.

이는 스타일을 완성해 놓았다면 모양을 변경하여도 스타일은 그대로 유지가 된다는 것을 의미합니다!

두 눈으로 직접 확인하셔야 이 기능이 가슴에 확 와 닿으실텐데 그림과 함께 설명을 드리겠습니다.

 

 

1. 다음과 같이 간단한 시계위젯 디자인이 완료되었다고 가정해 봅시다. 분명히 여기저기서 피드백이 쏟아지며 수정에 수정을 맞이할 운명에 놓여지게 되겠죠? 그 중 모양을 변경해 보자는 수정 이슈가 나타났다면? 이미 스타일링은 될대로 되어있고, 다시 모양을 새로 그린 다음에 스타일 복사를 하던지 다시 그리던지 해야 할 것입니다. 사실상 이 시계위젯 디자인은 거의 다시 작업되어야 할 운명이겠죠...

 

 

 

 2. 하지만 코디네이터의 Shape Change 기능을 사용하면 기분 좋게 다양한 디자인 실험을 할 수 있습니다. 먼저 시계 위젯을 하나 더 복사하여 옆자리에 위치한 다음 시계의 외곽 모양이 그려진 레이어를 선택합니다. 그 다음은 굉장히 쉽습니다. 그 레이어의 모든 정보를 담고 있는 우측의 Properties Dock에서 레이어의 모양(Shape)을 변경 할 수 있습니다.

 

 

 

 3. 사각형(Rectangle) 모양으로 변경한 후 라운딩 값을 한번 적용해 보았더니 스타일은 유지한채 모양만 변경된 것이 확인되었습니다.

 

 

 

4. 하지만 뭔가 어색합니다. 나머지 스타일이 적용되어 있는 레이어에도 동일한 모양이 적용되어야 할 것 같습니다. 그렇다면 모양을 복사해야 하겠죠. 방금 사각형으로 변경한 모양 정보를 '복사(Copy Shape)'한 다음에 나머지 레이어에 붙여넣기를 하면 해결 됩니다.

 

 

 

5. 보이는 것처럼 모양을 동일하게 변경하고자 하는 레이어를 선택한 후 Paste Shape을 하면 모두 동일한 모양으로 적용되고 스타일은 그대로 유지가 되어 있는 것을 확인할 수 있습니다.

 

 

 

6. 동일한 방법을 사용하면 클릭 몇 번 만으로 다양한 모양으로 변경해 볼 수 있습니다. 보시는 것처럼 스타일은 모두 유지가 되어 있습니다. 이제 모양을 변경하기 위해 작업을 다시 해야할 일이 없음은 물론, 귀찮음으로 인해 모양을 변경하지 않았던 지난날의 나의 모습도 모두 안녕입니다.  ^_^/  안녕~