지난 4월 9일, 계원예술대학교 시각디자인과에서 어시스터 팀의 디자인가이드 특강을 시작으로 수업에서 직접 어시스터 PS를 실습하며 활용할 수 있도록 '학교 라이센스'를 제공하는 양해각서(MOU)를 체결하였습니다.


특히 이번 협약을 통해 계원예술대학교 시각디자인과 학생들은 정규 수업 과정인 iUX Track 스튜디오 수업에 어시스터 PS를 공식 활용하기로 하였는데요. 지난 4월 9일, 위트스튜디오 채은석 대표의 특강으로 디자인가이드 실무 작업 과정에 대해 듣고, 직접 경험해 보는 시간을 가졌습니다.

지난 4월 9일 진행된 특강 현장 @계원예술대학교


계원예술대학교 시각디자인과 학생들이 실무에서 사용되는 툴을 수업 시간을 통해 직접 사용해 보며, 디자인 작업의 마무리에 대한 이해를 갖춘 실무형 인재로 거듭나기를 기대해 봅니다. :)


어시스터 PS 학교 라이선스 사용을 원하는 계원예대 시각디자인학과 학생은 별도 문의 바랍니다. :D

위트스튜디오 어시스터 팀은 실무 중심적인 UI 디자인 가이드 교육 커리큘럼과 함께 어시스터 PS 학교 라이센스를 지속적으로 제공하고 있습니다. 실무에서 사용되는 최신 툴과 기술을 가장 빠르게 받아들이고 교육시키는 것은 실무형 교육 기관으로서 최고의 경쟁력일 것입니다.

학생들을 뛰어난 실무형 인재로 교육시키고 싶으신 디지털 디자인 관련 학교 및 학과 관계자 분들은 언제든지 편하게 문의 주세요. (문의 service@witstudio.net)

신고


GUI 디자인 작업의 끝판왕. 바로 '디자인 가이드' 작업입니다.

원활한 UI 개발 작업을 위해, 디자인된 각 요소의 크기, 좌표 등을 정확히 작성하여 넘겨줘야 하는 부분이죠. 

생각할 부분을 크게 요구하지는 않지만 굉장히 반복적이고 번거롭기 때문에 스트레스를 받기 쉬운 작업입니다. 


이번 글에서는 디자인 가이드 작업중에서도 이미지를 잘못 적용하여 실패한 사례를 살펴보겠습니다.

그 주인공은 LOL(리그오브레전드)애플 입니다. 그럼, 바로 아래 그림을 보시죠. :)



  • 먼저 LOL(리그오브레전드)입니다. 저도 참 좋아하는데요, 주력 챔피언은 베이가 입니다.
    윗 부분의 메뉴 버튼은 롤오버를 하여도 문제가 없어 보입니다. 성공적으로 이미지를 적용하였네요.
    하지만 아랫 부분은 롤오버를 하였더니 순간적으로 이미지가 좌측으로 밀립니다. 아마 실수로 이미지의 크기를 다르게 잘랐거나 좌표를 잘못 입력한 것 같습니다.



  • 그리고 애플입니다. (iOS 6.1.3 기준)
    아이폰에서 웹브라우저 사파리를 이용하다가 발견하였는데 탭 하는 순간을 주목해 주세요. 탭의 성공을 알리는 화이트 이미지의 윗 부분이 잘려 있는 것을 볼 수 있습니다. 완벽을 추구하는 것으로 유명한 애플도 이런 실수를 하는 것을 보니 그들도 사람인가 봅니다. 아마도 디자이너가 이미지를 잘못 자른 것 같아요. :( 아니면 다른 이유가 있는지 궁금하네요.




이미지 슬라이스 작업을 하다보면 여러 이유로 이런저런 실수를 하게 되는데, 대표적으로 다음과 같은 상황이 있습니다.


보이는 것처럼 그림자가 적용된 디자인의 경우, 그림자가 어디에서 끝나는지 자세히 보고 잘라야 하지만 경계가 애매하여 잘못 자르는 경우가 종종 있습니다. 사실 이를 해결할 다른 방법은 딱히 없습니다. 단지 두눈을 부릅뜨고 다시 한번 더 정확히 잘라내는 수 밖에...

(물론 그림자 등은 개발에서 처리하는 경우도 있습니다. :D)


 



디자인 가이드 작업을 하다보면 당연히 이런저런 실수를 하게 됩니다. 하지만 최소한으로 줄이는 것이 최선이겠죠. UI 의 전체적인 완성도에 영향을 미치는 아주 중요한 부분이기 때문입니다.

 

 


 

 

만약 이런 실수를 줄이고자 한다면 어시스터 PS의 기능을 추천합니다. 선택된 레이어의 실제 크기를 인식하고(레이어 스타일 포함) 잘라주기 때문에 훨씬 빠르고 정확하게 이미지 슬라이스 작업을 할 수 있습니다. 아래 그림을 보시죠.

 

레이어를 선택하고 어시스터 PS의 'Layer Snips'를 클릭하면 레이어에 적용된 그림자를 인식하고 실제 크기 그대로 곧바로 슬라이스가 됩니다. 물론 여러개의 레이어를 동시에 처리할 수도 있습니다. :)  훨씬 정확하고 간편한 디자인 가이드 작업을 하고 싶다면 한번 http://assistor.net/ 를 방문해 보세요. 신세계가 열릴 수 도 있습니다.

 

 

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