[UX/UI] UX/UI이해와 활용 2일차

PT받고 다음낳... 그리고 그 전날부터 편치 않은 잠자리로 몸이 몹시 피곤합니다. 

9시 8분에 도착하였습니다.

=========================   1   ==========================

(09 : 18 ~ 10 : 14)

조금 기다리다가 오늘 강의 전반에 대한 시간표를 보여주셨습니다.

지난 주 강의시간에 하였던 실습에 대해서 각 조별로 

POP어플(Prototyping on Paper)에 관련하여 사용하는 방법을 알려주셨습니다.

depth back과 history back이 있습니다.

트렌지션과 제스쳐에 대한 정보를 변경 해 줄 수있다는 것을 강의 해 주셨으며, 그 두가지의 기능은 아래와 같습니다.

트렌지션은 화면의 전환에 관련된 기능으로 

{ none, fade, next, back, rise, dismiss }

제스쳐에는 

{tap , swipe up, swipe down, swipe left, swipe right, zoom in, zoom out, double tab}

강의시간에 질문을 하여 순서에 대한 고민을 해결하였습니다. 우선 해당 App은 이전 화면으로 돌아가는 것은 가능하지만 이전 화면에 대한 정보를 가지고 같은 부분에 동작을 처리하였을 때 다른 화면으로 이동을 하게 하는것은 불가능 합니다. (아직까지는) 하지만 순서를 보여주는 것이 목적이라면 간단한 해결방법이 있었는데 그 것은 같은 기능의 Page를 여러개를 만들어서 순서를 잘 고려해서 재생을 하면 Test를 해보는 입장에서는 충분히 하나의 페이지로 느낄 수 있다고 생각을 합니다.

즉 갤러리 화면을 G라고 하고 A,B,C에서 갤러리 화면으로 올 때 E,F화면으로 나가는 것이 G에서는 안되므로 

A->G->E

B->G->F

C->G->F

의 순서를 만들기 위해 

A->G1->E

B->G2->F

C->G2->F

이런 식으로 만들고 G1과 G2를 같은 이미지를 사용하면 약간의 번거로운 설정작업만 두번을 하면 위의 문제를 해결할 수 있습니다.

잠시 시간을 주신 후에는 각 조별로 스케치가 된 것으로 구성한 순서를 재생 해 보았습니다.

이 툴은 스케치를 활용하기 좋은 툴이며 빠르게 아이디어를 다른사람에게 전달하기에 좋은 App입니다. Test를 위한 tool은 더 적합한 다른 툴이 있다고 해 주셨습니다.

=========================   2   ==========================

(10 : 25 ~ 11 : 20)

강의 시작시 사용성 테스트를 쉽게 이해하고 필요성을 알기 위해서 2가지 영상자료를 보여주셨습니다.

산타가 쇼핑몰에서 주문을 하는 것, 그리고 "다른영상은 공군에 입대하기 힘들어"라는 것을 보여주는 영상을 보았습니다.

개발상에 문제가 없어도 사용성을 고려하지 않은 개발은 사용자에게 많은 불편을 줄 수 있다고 생각합니다.

그 후 

테스트하기 에 관한 내용을 강의자료(교제)를 갖고 이론강의를 진행 해 주셨습니다.

=========================   3   ==========================

(11 : 20 ~ 11 : 55)

모바일 프로토타이핑

Facebook paper라는 App에 관련된 영상을 보면서 모바일 App 개발에 대한 많은 이야기들이 있었다는 이야기와 해당 App에 관한 분석을 해 주셨습니다.

분명 훌륭한 App이었지만 사용자들의 필요나 기획등의 개발에 앞서서 확인해야 할 것을에 대한 착오로 성공하지 못했다고 의견을 주셨습니다.

=========================   3   ==========================

(13 : 00 ~ 14 : 33)

나머지 모바일 프로토타이핑 이론 수업 후

실습준비하였습니다.

먼저 Marvel이라는 App을 받았습니다.

사이트에 접속을 해서 계정을 생성해주고 모바일 엡을 받아서 접속했습니다., 

(물론 모바일 엡에서도 계정 생성은 가능합니다.)

우선 페이지 기반으로 작업을 할 수 있는 이 앱은 PC상에서 간편하게 편집을 할 수 있다는 것과 상, 하단에 일부 공간을 고정하고 스크롤을 하여 보여주는 작업을 할 수 있는것이 큰 특징이었습니다.

하지만 G4라는 안드로이드 폰에서는 고정을 위해 사용하는 하단의 PNG파일의 투명하게 처리 된 부분이 IMAGE의 바탕인 흰색과 G4의 바탕색이 검정색으로 서로 달라서 어색한 점이 있었습니다.

comment 기능과 Canvas에 대해서 설명을 해 주셨습니다. Comment기능은 친구추가 하는 것 이후에 잠시 놓쳐서 도구별로 정리를 할 때 조사를 해서 알아봐야겠습니다.

Canvas는 간단하게 화면을 다른 그래픽툴을 사용하지 않고 바로 작업을 해서 활용할 수 있는 수준입니다.

share 에서 user test는  iOS에서만 활용할 수 있는 기능입니다.     

실습 1. kakaoTalk 

https://marvelapp.com/109f506

=========================   4   ==========================

(14 : 50 ~ 15 : 40)

지난 시간까지 하던 App인 Marvel에서 움직이는 Gif 파일을 활용하여 작업을 할 수 있는것 또한 Explore 기능에서 다른 사람들의 작업을 확인할 수 

실습 2. mail

https://marvelapp.com/f76jd8

=========================   5   ==========================

(15 : 50 ~ 17 : 40)

지난 실습을 확인하시고 invision은 실습 대신에 간단하게 설명을 해 주시고 실습은 생략하신다고 하셨습니다. 기능은 거의 비슷하며 공유에 대한 기능이 강화되어있는 라이브쉐어 라는 기능이 써 볼만 할 것 같습니다.

한 화면을 보면서 커서나 팬을 사용하여 표시가 가능하고 체팅 뿐 아니라 음성통화도 지원이 됩니다.

협업에 대한 기능이 강화되어있으며 디자이너에게 보다 작업하기 적합한 도구라고 하셨습니다.

상황에 맞는 도구를 사용하면 된다는 것을 강조하셨습니다.

레이어 기반의 도구인 PIXATE라는 도구로 실습을 진행 할 예정입니다.

STUDIO와 APP이 구분되어있음.

홈페이지에는 튜토리얼 동영상도 있으며 스크롤의 경우는 생각보다는 조금 복잡했습니다. 우선 스크롤을 할 항목들을 하나의 Layer에 넣어주고 그 레이어를 투명한 레이어 안에 넣어 준 다음에 투명한 레이어에 스크롤 인터랙션을 넣어주면 정상적으로 스크롤이 되는 모습을 확인할 수 있습니다.

스크롤, 드레그, 로테이트, 핀치 4가지의 기능을 사용하여 작업을 해 보았습니다.

미리 작성되어있는 셈플에 대해 롱프레스 기능을 넣는 방법을 설명 해 주셨고 또한 딜레이 시간을 설정하여 일정 시간 뒤에 사라지게 만드는 것 또한 보여주셨습니다.

Framer.JS를 마지막으로 보여주시면서 약간의 코드작업을 할 수 있다면 재미있는 인터랙션을 만들 수 있다고 하셨습니다. 또한 기종을 선택하여 숫자수치 값이나 색의 값들을 수치로만 입력받는 것이 아니라 도구 자체에서 UI를 이용하여 가시적으로 선택 및 사용하여 작업을 할 수 있습니다.

========================   마무리   =======================

관심 있으신 분들은 Tool 소개가 잘 되어있으므로 시간을 두고 공부를 하고 사용을 해 보는것이 일단은 실력을 늘리는데에 도움이 된다고 하셨습니다.

pixate는 Learn에 들어가보면 간단한 사용자안내 및 Demo를 볼 수 있습니다. 간단한 인터렉션에 대한 것 부터 여러 Demo를 확인 해 볼 수 있습니다. Stater는 인터랙션이 안들어 가 있는것이고 그 옆의것은 완성된 것으로 시험삼아서 작업을 해 볼 수 있고 작업을 하다가 막히는 부분에 대해서는 완성본을 보면서 참고를 할 수 있습니다.

framer js또한 Learn page가 잘 만들어 져 있으며 또한 다른사람의 작업을 다운로드? 받을 수 있다고 했습니다.

일련의 과정이 의미가 있었다는 것을 실무에 도움이 되셨기를 바란다고 하셨습니다.