'코디네이터' 1.0을 성공적으로 런칭한 후 저희 제품을 이용한 약 2만여건의 프로젝트 생성, 그리고 2천여 다운로드를 기록하는 성과를 이루어 내었습니다. 국내보다 해외에서 더 많은 사용자들이 사용한 사실도 확인하였구요. 하지만 꾸준하게 단점으로 지적받았던 '플러그인 형태'와 'MS플랫폼 종속'의 문제는 계속 저희의 발목을 잡곤하였죠. 그리고 제품의 컨셉이 좋아 다른 플랫폼으로의 확장도 좋겠다는 의견도 많았었구요.

결국 '코디네이터'의 새로운 버전인 2.0 부터는 '독립툴'로서 개발하자는 결론에 이르렀고, 프로그램 개발에 매진하여 연내 베타테스트를 실시를 계획에 두고 있습니다.(윈도우, 맥 지원)

기존의 옷을 벗고 새로 태어날 코디네이터는 완전한 'UI 디자인 전용툴'이며, 앞으로 더 많은 사용자들에게 의미있는 프로그램이 될 수 있도록 끊임없이 노력하겠습니다. 많은 사랑 부탁드립니다! '0'

------------------------------------------------------------------------------------------------------------------------

앞으로 꾸준히 제품의 개발 과정과 기능 소개 등을 공유하겠습니다. :)

먼저, 현재 약 80% 정도 완성된 화면을 공유합니다.
기존의 디자인 재료, 컬러휠, 색맹/색약 시뮬레이터 등의 기능이 모두 포함되었고, 다양한 해상도에 곧바로 대응할 수 있는 레이아웃 기능과 이미지 자동 내보내기및 GUI 가이드 관련 기능(좌표/크기 출력 및 수치 계산 등)이 추가되었습니다. 기능에 대한 더 자세한 이야기는 다음에 소개하겠습니다.



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


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를 처음 공개하였습니다.

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


신고

최근 발매된 ipad를 필두로 현재 IT업계 최고 화두는 단연 UX입니다. 더 편한 인터페이스, 더 나은 사용자 경험을 만들어
내기 위해 지금도 여러 기업에서는 밤을 새어 고민하고 있습니다.

이 중에서 가장 열렬한 환호를 받고 있는 기업은 단연 애플입니다. 애플의 제품은 조금은 폐쇄적이면서 몇몇 단점이
있음에도 불구하고 사람들은 그것을 감수하고 애플의 제품에 환호를 보내고 있습니다. 그 이유야 여러가지가 있겠지만
애플의 각 제품에는 저마다의 스토리가 있고 그것을 포장해서 사람들에게 보여주는 기술이 대단해서가 아닐까 생각합니다.

각설하고 지금부터 말씀드릴 내용은 결코 애플 제품만의 이야기가 아니라 UI에서 이루어지는 여러가지 움직임에 대한
이야기 입니다. 여러 제품을 만져보고 느껴보면서 저는 UI의 움직임에 더 많은 생각을 해 보았고 먼저 아이폰에서 가장
눈에 띄는 몇가지 모션을 직접 캡쳐해 보았습니다.



아이폰OS의 움직임에서 가장 눈에 띄는 특징은 더 이상 존재하지 않는 영역의 방향으로 손가락을 스윕할 시 반동을
일으키며 존재하지 않는 영역을 순간적으로 보여 주었다가 다시 제자리로 돌아오는 것입니다. 이것은 사용자가 행하는
행동에 대한 성공과 실패를 시각적으로 확실하면서도 효과적으로 보여줌으로써 사용자의 인지력을 향상 시키는데
큰 역할을 합니다.

그리고 또 다른 특징으로는 카메라 어플을 동작하는 과정에서 파인더를 열고 닫는 일련의 과정입니다. 각 상황에
적절하게, 그리고 효과적으로 파인더가 열리고 닫히며 사용자의 상황 인지력을 높여주고 찍은 사진을 저장하는
과정에서는 빨려 들어가는 움직임을 줌으로써 별다른 텍스트 형태의 피드백 없이도 사용자는 자신이 한 행동에
대해 효과적으로 인식을 하게 됩니다.

그리고 결정적으로 제가 가장 눈여겨 본 부분은 음악재생 부분입니다. 연속 두번의 터치로 음반커버와 곡 리스트를
넘나드는 과정에서 단순히 커다란 판이 가운데 축을 중심으로 플립되는 움직임이 아니라 판이 뒤로 빠졌다가 앞으로
나오면서 플립이 됩니다. 저는 두가지 상황이 예상됩니다. 중심축이 앞뒤로 이동하는 상황, 그리고 판을 지탱하는
축이 우측이나 좌측끝에 위치하였다가 반대편으로 이동하면서 판은 축의 움직임에 따라 이동하는 상황입니다.

좀 더 확실한 움직임을 보여드리기 위해 느린 재생으로 인코딩을 해 보았고 우측 상단 윗부분을 보면 작은 아이콘은
축의 이동없이 정사각형이 플립되는 것을 볼 수 있는데 그것과 비교를 해보면 더욱 그 차이가 느껴질 것이라 생각합니다.



사실 이 부분의 움직임은 사용성과 크게 연관이 있지 않을수도 있겠지만 더욱 완성도를 높이고 시선을 집중 시키기
위한 움직임에 대해 그들이 얼마나 심혈을 기울였는지 알 수 있는 부분인지라 그 의미가 크다고 생각합니다.


다음으로는 공개 당시 커다란 반향을 일으켰던 윈도우즈7폰시리즈의 움직임을 캡쳐해 보았습니다.



처음에 이 영상을 보고 굉장히 놀라워 했던 기억이 나네요.
이번 윈도우즈폰7시리즈는 전체적으로 기존의 윈도우즈 모바일에서 완벽하게 탈피하였다는 점이 이슈입니다.
그 중에서도 가장 눈에 띄는 부분은 역시 움직임이고 주목할 점은 바로 터치하는 순간에 있습니다. 똑같은 사각형의
영역일지라도 어느 부분을 터치하느냐에 따라 달리 움직이는 모습은 짧지만 굉장히 인상적이며 경탄을 자아내기에
충분합니다. 그리고 역시 이 부분에서도 축의 개념이 들어가 있는 것을 알 수 있습니다.

각 대메뉴간의 이동에 있어서도 커다란 축이 존재 함으로써 자연스럽고 유기적인 움직임을 보여주고 있으며 메뉴
이동과정에 있어 보여지지 않는 부분을 순간적으로 보여주기 때문에 사용자로 하여금 컨텐츠에 대한 예상을 할 수
있도록 유도하고 있습니다. (덤으로 17초 부분에서는 최상단에 사진 전송의 의미로 작은 점들이 일렬로 이동하는데
이 또한 백미군요. 전통적으로 윈도우즈 부팅시에 보여졌던 지렁이의 메타포인가 하는 생각도 듭니다.)

개인적으로는 직관적인 아이폰OS의 UI도 굉장하지만 이번 MS의 시도 또한 찬사를 받기에 충분하다고 생각합니다.

이렇게 가장 대표적으로 주목 받고 있는 두 회사의 제품을 움직임으로써 살펴 보았는데 이러한 효과적인 움직임들은
단순히 시각적인 화려함을 제공하여 사용자들의 눈을 현혹 시키려는 술수가 아닌것을 알 수 있습니다. 더 나은 사용자
환경을 위해 그들이 얼마나 심혈을 기울였는지 다시 한번 생각해 볼 만 합니다.

움직인다는 것의 의미


UI의 효과적인 움직임이 의미하는 것에 대해 간단히 정리를 해 보자면 다음과 같습니다. 
인지력의 향상 :
사용자가 행하는 행동에 대한 성공과 실패를 시각적으로 확실히 보여줌으로써 학습의 속도가 빠르다. 즉 사용자의 실수를 줄여준다.

속도감의 향상 :
움직임이 가미 됨에 따라 그 프로세스가 실행되는 절대적 시간은 느려질 수도 있다. 하지만 빠르고 완성도 높은 움직임은 오히려 사용자로 하여금 속도감을 향상시키는 효과를 주게 된다. 이러한 효과로 사용자는 더 반응이 좋고 빠르다고 인식하게 된다.

심미성의 향상 :
각 상황에 걸맞는 적당한 움직임은 사용자의 지루함을 달래주고 사용하는 즐거움을 제공한다. 

결론적으로 적절하고 완성도 높은 움직임은 위와 같은 수많은 가치를 창출해 낼 수 있지만 그렇지 못한 경우에는
안하니 못한 상황이 연출될 것입니다. 이 모든것이 효과적으로 연출 되려면 움직임을 위한 최적화된 기술이 가장
중요할 것이고 상황에 맞는 적당한 움직임에 대한 철저한 연구는 당연할 것입니다.

끝으로, 완성도 높은 UI에 적절하게 가미된 움직임 요소는 사용자들로 하여금 기계를 기계로만 생각하지 않고 하나의
살아있는 유기체로 받아들이게끔 만들고 있다는 점에선 누구나 동의할 것이라고 생각합니다.
저작자 표시 비영리 동일 조건 변경 허락
신고


지난 2009년 10월 김대욱, 김성욱, 채은석 매니저가 경기도 안산시에 위치한 디지털미디어고등학교에서
자기계발, 프로그래밍, 디자인의 내용으로 강연활동을 하였습니다.
열정이 넘치는 고등학생들 앞이라 많이 떨렸지만 다행히 많은 호응을 보내주셔서 즐거운 시간을 보내고
왔습니다~~ 좋은 기회를 마련해주신 디미고 선생님분들께 감사의 말씀을 드립니다.

한국디지털미디어고등학교 홈페이지 바로가기




신고