디자이너는 생각합니다.

이런 버튼 사이즈나 아이콘 위치 정도는 개발자도 알 수 있는거 아냐?

아이콘 사이즈에, 타이틀 폰트 이름까지.. 꼭 따로 적고, 문서화까지해서 넘겨줘야 하나??


그리고, 개발자 역시 생각합니다.

디자이너가 디자인하고 PSD 파일만 넘겨주면 끝인가?

대체 이 버튼의 그림자는 뭐야.. 아.. 이 타이틀은 텍스트만 잘라서 줬네.. 여기 여백 포함해야 되는데..


이런 디자이너와 개발자의 갈등에서 출발한 어시스터 프로젝트는
UI/GUI 가이드를 위한 편리하고 효과적인 툴을 목표로 하고 있습니다.


어시스터 프로젝트의 첫 주자, 어시스터 PS는 "포토샵과 함께 쓰는 미니툴" 입니다.



먼저, 어시스터 PS의 주요 기능을 담은 영상을 살짝 둘러보겠습니다.


어시스터 PS는 기본적으로 별도의 디자인 툴이 아니라 포토샵과 함께 사용하는 독립 툴입니다.

(포토샵 익스텐션이나 플러그인이 아닙니다!)


레이어를 선택하고 버튼을 누르면 현재 레이어의 좌표가 출력되고, 해당 영역을 자동으로 잘라주고,

버튼 하나 눌렀을 뿐인데 자동으로 가이드 라인이 생성되는.. 

디자이너라면 꿈꿔왔을 마법 같은 기능이 가득 담긴 툴입니다. *_*


어시스터 PS 베타에 포함된 아래의 기능들은  디자이너/개발자 여러분께 도움이 될 것 입니다~

  • 포토샵에 생성된 레이어의 모든 정보를 추출할 수 있는 레이어 가이더(Layer Guider)
  • 포토샵에서 가이드라인을 정확하고 빠르게 생성할 수 있도록 도와주는 가이드 메이커(Guide Maker)
  • 멀티 디바이스 환경에 따른 다양한 단위로 변환할 수 있는 유닛 컨버터(Unit Converter)
  • 디자인 협업시, PSD 파일을 비교하여 변경된 부분을 한눈에 확인할 수 있도록 해주는 PSD 비교기(PSD Comparer)
  • 색맹/색약자 들에게 현재의 디자인이 어떻게 보이는지 시뮬레이션하여 보여주는 색약/색맹 시뮬레이터(Color Blind Simulator)

리고.. 앞으로 버전을 거듭하며 업데이트 될 다양한 추가 기능까지!


베타기간 동안 어시스터 PS의 감동적인 기능들을 하나씩 더 자세히~ 소개해 드리도록 하겠습니다!

신고

 

 

Assistor™(어시스터)는 디자인 작업의 마무리를 돕는 툴입니다. 

UI/GUI 디자인 작업 과정에는 디자인을 다 완성한 '이후의 작업'이 있습니다. 
바로, 완성한 디자인을 개발팀에 넘겨주기 위해 각 디자인 요소들의 크기, 좌표, 간격 등의 수치를 확인하여 표기하고,
버튼과 아이콘들을 하나하나 일일이 자르고, 이것을 문서화 하는 작업들인데요. 

제품의 완성도와 디자인 작업의 인수인계 등을 위해서는 굉장히 중요한 일이지만,
동시에 가장 번거롭고 반복적인 작업이기도 합니다. 

특히, 이런 작업 중 디자인 수정 요청이 들어오기라도 한다면..?! 
디자이너는 멘붕과 함께 그날 저녁 약속은 야근으로 대체되는 현실을 맞이하게 되는 것이죠...ㅜㅜ

 

Don't cry, designers :'(


디자이너가 이런 노가다(!)에 야근하지 않는 세상을 꿈꾸며 어시스터를 개발중에 있습니다.

신고


S/W를 평가하는 기준에서 UI가 차지하는 비중이 높아지면서 UI개발이 S/W개발 프로젝트에있어 큰 이슈로 자리잡고 있습니다. 때문에 UI개발 관련 기술이 발달하였고 높은 퀄리티의 UI제작이 가능하게 되었지만 개발의 과정과 관리는 역시 큰 문제로 자리잡고 있습니다.




이러한 문제를 해결하기 위해 저희 wit는 UI 테마 개념을 도입하여 그 동안의 프로젝트를 통해 쌓아온 UI개발 노하우를 녹여낸 WPF기반의 UI 테마제작 엔진 Codinator를 개발하였습니다. S/W의 UI를 개발할 때 UI 테마 개념을 도입하게 되면 사후 관리가 무척 편리해 지지만 그 개발과정이 쉽지않아 대부분 WPF를 사용한 프로젝트임에도 불구하고 이미지를 자르거나 재사용이 불가능한 형태로 UI를 개발하고 있습니다.















Codinator를 사용하게 되면 쉽지 않았던 UI 테마 개발은 물론 테마의 빠르고 디테일한 컬러수정, 그리고 포토샵에서나 가능했던 퀄리티의 이펙트 조정등이 가능해 집니다. 때문에 개발자와 디자이너의 커뮤니케이션이 수월해 짐은 물론 아쉬웠던 서로의 요구사항에 적절히 대응할 수 있습니다. 또한 가장 큰 문제로 자리잡았던 유지보수 과정이 훨씬 간소해 집니다. 이 외에도 색맹, 색약을 가진 사람들을 위한 Vision기능을 가지고 있어 그들에게 현재 UI컬러가 어떻게 보이는지 시뮬레이션 해보고 교정하는 것이 가능합니다.

저희 wit는 프라이머 엔턴십 프로그램에 참여하여 그동안 교육을 받아왔고 바로 어제(8/31) Demo Day를 통해 기자들과 업계관련 사람들에게 Codinator를 처음 공개하였습니다.

공개한 동영상을 아래에 공개합니다. 많은 관심 부탁드립니다!!


신고