본문 바로가기

Codinator/Tutorial

코디네이터의 기능 파헤치기 1 : 스타일링 (Styling)

 

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

현재 코디네이터 2.0 CBT 1차가 2주째 지나고 있습니다. 테스터분들의 소중한 피드백 덕분에 점점 더 멋진 툴로 성장해 나가고 있습니다!

 

이제 부터 코디네이터의 기본 개념부터 기능을 서서히 하나씩 풀어 정보를 제공해 드리고자 합니다.

코디네이터가 왜 '앱 디자인(GUI) 전용 툴'인지 그 강력한 기능을 꼼꼼히 차례대로 상세히 알려 드리겠습니다.

 

그 첫번째 순서로 코디네이터에서의 디자인 작업을 하는 방법에 대해 그 개념을 알려드리고자 합니다.

코디네이터는 기본적으로 모양(Shape)과 스타일(Style)이 분리되어 있습니다. 즉 먼저 모양을 그리고 그 위에 스타일을 입혀 디자인을 완성하는 방식입니다. 스타일을 입히는 방법은 굉장히 쉬운데요, 마테리얼이라고 불리우는 '디자인 재료(Material)'를 마치 레고 조립 하듯이 추가하면 그만입니다. 그림과 함께 설명을 드리자면 다음과 같습니다.

 

 

 

1. 캔버스 위에 Shape Tool을 사용하여 사각형의 모양을 먼저 그려 보았습니다. 그러면 우측의 Properties Dock에서 Stylist 라는 그룹에 자동으로 Fill이라는 기본 디자인재료가 자동으로 추가되어 있습니다. 

 

 

2. 그 이후는 간단합니다. 그저 원하는 디자인 재료를 추가하고 조절하면 그만입니다. 여기서 한가지 놀라운 사실은 동일한 디자인 재료라도 원하는 만큼 추가할 수 있다는 점입니다. 즉, 레이어 한개로 원하는 스타일을 마음껏 구현할 수 있다는 것을 의미합니다. 

 

 

 

3. 사용자가 추가하고 싶은 모든 효과는 디자인 재료(Material)에 모두 있습니다. 기본적인 Fill, Stroke, Drop Shadow 뿐만 아니라 Blur, Level, Texture, Pattern 등 GUI 디자인 작업에 필요한 모든 재료가 준비되어 있습니다. 또한 디자인 재료(Material)을 모두 수치값을 보존하고 있기 때문에 언제든지 수정이 가능합니다. 

 

 

 

4. 이미지를 불러와 작업하는 것도 물론 가능합니다. 이미지를 불러들일 수 있는 디자인 재료(Material)를 추가하고, 지금껏 해오던 방식 그대로 스타일링을 하면 됩니다. 

 

 

 

소개된 것과 같이 코디네이터는 레고블럭 조립방식과 동일한 스타일링 방법을 갖고 있기 때문에 굉장히 직관적인 디자인 작업이 가능하며, 얼마든지 쉽게 추가하고 제거할 수 있는 유동성까지 갖추고 있습니다.