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

곧 CBT 1차가 마무리되고, 약 일주일의 준비기간 후 2차 CBT가 시작될 예정입니다.

일정이 확정되면 다시 한번 공지를 해 드릴 예정이니 많은 관심 부탁 드립니다. :)

 

오늘 소개해 드릴 기능은 '이미지 자동 내보내기' 입니다.(Export)

앱 디자인 작업이 완료된 후에는 이미지를 잘라내어야 하는 무시무시한 작업이 기다리고 있습니다!

각 레이어의 정확한 크기를 눈으로 가늠하고 판단하여 일일이 수작업으로 잘라 내어야 하는데 여간 까다로운 작업이 아닙니다.

더군다나 이미지를 잘라낸 후에도 잘려진 각 이미지의 크기 및 좌표를 확인하여 표기하는 것도 굉장한 번거로운 작업중 하나이구요.

 

이런 류의 번거롭고 노가다성 짙은 작업을 탈피하도록 돕기 위해 탄생된 툴이 바로 코디네이터인데 당연히 도움을 드려야 마땅하겠죠!

그럼 그림과 함께 이미지 내보내기 기능을 자세히 설명해 드리겠습니다.

 

 

 

1. 설리님이 웃고 있는 모바일 앱 디자인이 하나 완성되었습니다. 이제 각 레이어를 이미지로 잘라내어야 합니다.

 

 

 

 

2. 방법은 굉장히 간단합니다. 내보내고자 하는 레이어를 선택하고 'Export' 를 클릭하기만 하면 그만입니다. 

 

 

 

 

3. 이렇게 레이어가 이미지로 변경되어 저장됩니다. 그리고 스타일에 사용된 그림자 등의 효과도 자동으로 영역이 계산되어 크기에 맞게 잘 빠져나옵니다.

 

 

 

 

 

 

 

4. 당연히 모든 레이어를 한꺼번에 내보낼 수도 있습니다. 내보내고자 하는 레이어를 선택하고 'Export'를 클릭하면 폴더선택 창이 나타나며, 폴더를 생성하고 내보내면 그만입니다.

 

 

 

5. 모든 레이어가 이미지로 내보내기 된 모습입니다. 이미지의 이름은 레이어 이름을 그대로 따라가며, 하나의 이미지로 내보내고 싶은 레이어는 '그룹핑' 하여 내보내기를 하면 됩니다.

 

 

 

6. 그리고 내보내진 이미지의 이름과 좌표, 크기 등의 기본 정보는 모두 문서화 되어 함께 내보낼 수도 있습니다.

 

 

 

 

 

이미지 내보내기는 보통 굉장히 번거롭고 반복적인 작업입니다. 이 기능을 더욱 스마트하고 강력하게 발전시켜 오직 창의적인 디자인 작업과 완성도에 집중할 수 있는 시간을 벌 수 있도록 도와드리겠습니다. :)

 

 

 

 

저작자 표시 비영리 변경 금지
신고

 

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

코디네이터 2.0 CBT 1차가 마무리 주에 접어 들었습니다. 다음 일정은 오픈베타가 아닌 CBT 2차가 시작될 예정이고, 테스터를 접수받아 진행할 예정이니 많은 관심 부탁드립니다.

 

오늘 소개해 드릴 기능은 컬러휠(Color-Wheel)기능입니다.

쉽게 설명 드리자면 선택한 레이어에서 사용된 모든 컬러를 잡아내어 한꺼번에 쉽게 색상을 변경할 수 있도록 돕는 기능입니다.

색조(Hue), 채도(Saturation), 명도(Brightness) 를 따로 제어할 수 있기 때문에 디자인의 전반적인 분위기를 아주 쉽게 변경해 볼 수 있습니다.

 

자세한 내용은 아래부터 설명해 드리겠습니다!

 

 

 

1. 다음과 같이 디자인 작업이 완성되어 있는 상황에서 다양한 디자인 실험 또는 요구사항에 의해 푸른톤의 색감을 다른 분위기로 변경해야 한다면 여간 힘든일이 아닐 것입니다. 작업된 레이어를 일일이 잡고 컬러를 보정해야 하겠죠. 또한 이 한페이지에서 끝나는 것이 아니라 기본 몇십페이지가 될 분량을 일일히 변경해야 하는 것은 큰 곤욕일 것입니다. 

 

 

 

2. 컬러휠 기능을 사용하면 이런 문제는 의외로 간단히 해결됩니다. 변경하고자 하는 레이어 또는 그룹을 선택하면 Color-Wheel Dock에 실제 사용된 컬러가 잡히게 되고 그 컬러를 돌려 다양한 분위기로 변경을 할 수 있습니다. 또한 컬러휠에 잡힌 각 컬러는 서로간의 상대값을 유지하기 때문에 전체 느낌이 결코 무너지지 않고 변경이 될 수 있도록 조율해 줍니다.

 

 

 

3. 단 1초만에 연두색 색감으로 분위기가 변경되었습니다. 보시는 바와 같이 전체 느낌은 무너지지 않았습니다.

 

 

 

4. 또 순식간에 푸른 파스텔톤으로 분위기를 변경해 보았습니다.

 

 

 

5. 컬러휠 기능을 응용하여 색조, 채도, 명도 를 따로 적절히 조절하면 아래와 같이 순식간에 전혀 다른 느낌의 디자인 실험도 가능합니다. 지금까지 보신 이 모든 작업은 단 1분이 채 걸리지 않았습니다.

 

분위기를 한번 변경하려면 다시 1부터 100까지 새로 시작해야 하는 것이 현실입니다. 더군다나 몇 십에서 부터 몇 백페이지에 이르는 앱디자인 특유의 작업 성격상 이런 작업은 스타일 복사 노가다를 해야하는 부분이기도 하구요. 가장 커다란 문제점은 분위기를 변경하는 과정에서 결과를 예측하기가 굉장히 어렵다는 점입니다.

 

컬러휠은 단순히 빠른 분위기 변경만을 위한 기능이 아니라 다양한 디자인 실험과 디자인 작업의 즐거움을 느끼길 원하는 호기심 많은 모든 디자이너들을 위한 기능입니다.

 

 

저작자 표시 비영리 변경 금지
신고

 

 

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

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

 

 

 

 

저작자 표시 비영리 변경 금지
신고

 

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

현재 코디네이터 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)를 추가하고, 지금껏 해오던 방식 그대로 스타일링을 하면 됩니다. 

 

 

 

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

 

  

 

 

 

 

 

 

 

 

저작자 표시 비영리 변경 금지
신고

 

앱디자인 전용 툴 '코디네이터' 2.0 이 9/1 부터 약 한달간 클로즈베타 서비스를 시작합니다.

 

1.1 버전 이후로 더욱 강력하고 놀라운 기능으로 돌아온 코디네이터에 많은 관심을 부탁드립니다. ^0^

클로즈베타 테스트를 통해 중점적으로 기본 사용성을 테스트하고 테스트 결과에 따라 부분적인 기능을 추가하거나 사용성을 개선하여 오픈베타 버전을 런칭할 예정입니다.

 

전세계 디자이너들이 쾌적하고 효율적인 디자인 작업을 할 수 있도록, 그리고 누구나 열정만 있다면 손쉽게 앱디자인 작업을 할 수 있도록 좋은 툴을 만들어 가겠습니다.

 

 

 

www.codinator.net

(문의 사항은 service@codinator.net 으로 부탁 드립니다.)

 

 

 

 

 

저작자 표시 비영리 변경 금지
신고