불과 1년 전까지만해도 스스로 인터랙션 작업물을 만든다는 것이 막막하기만 했고 실무 활용이 가능한가에 대해서도 미지수였다. 하지만 시작이 반이라고 이것저것 시도해 본 경험이 바탕이 되어 이제는 간단한 아이디어를 전달하는 컨셉 구현 정도는 부담없이 할 수 있게 되었다.
사내 스터디 계획
스터디명: 프로토파이로 함께하는 코드 없는 프로토타이핑
기간 : 2017.07–10 (총 12주, 매주 1회 1시간)
준비물 : 프로토파이, 노트북
인원 : UI디자이너 18명
목표 : 담당서비스 인터랙션 선행작업이 가능한 정도의 이해도와 스킬 습득
내용 : 1회당 2개 정도의 프로토파이 샘플을 같이 만들어보면서 트리거 전반을 익히고 자유 작업물 1종씩 완성
초반에는 사내 스터디인데 자율성을 너무 침해하는 것이 아닌가 걱정이 되었다. 주최자인 나도 타 스터디를 신청했다가 업무상 제시간에 참여하지 못한 경험이 있어 십분 이해가 가는데 장기 스터디로 이탈률이 꽤 발생했고 나 자신도 샘플준비와 공부를 병행하며 체력적 피로도가 높아 미숙한 면이 많았다.
다수의 인원이 스터디를 이어나가기 위해서는 회차당 참여율에 따라 일정을 조정하면서 포기에 이르지 않게 하는 것, 내용을 목표지향적으로 구성하는 것이 중요하다. 하지만 이 두 가지는 서로 부딪히는 점이 많아 조절이 쉽지 않다. 만약 프로토타이핑 사내 스터디를 기획하고 있는 분이 있다면 다수보다는 소수로 장기보다는 단기로 쪼개어 운영하는 것을 추천하고 싶다.
스터디 결과물
주최자가 미숙한 점이 많았음에도 자신의 목표를 이행한 멤버들의 작업.
Hyugwon Ham — 불후의 띵곡
프로토파이를 통해 사운드가 출력되는 사례가 없어 연구 해보았습니다. 불후의 띵곡은 유저가 직접 음악을 연주 해볼 수 있는 Hi-Fi prototyping 입니다.해당 코드의 현을 탭 하였을 때, 혹은 그 위로 커서가 지나게 되었을 때의 두 가지 케이스에서 각기 다른 높이의 “띵”소리가 출력되게 하였습니다. 별도로 사운드를 넣을 수 있는 트리거가 없어 3x3의 mp4 영상을 만들어 화면 밖에 삽입하였으며, 반복해서 재생을 위해, 플레이 전 Playback-seek (00:00:00)으로 설정후 재생해야 하는 것을 테스트를 통해 알게 되었습니다.
주 사용 트리거 : Start, Tap, Mouse Over — Move, Playback(Seek or Play), Opacity
Sohyun You — 전시회 둘러보기
전시회 리스트를 넘겨보며 상세 정보를 살펴볼 수 있는 UI입니다. 버튼 이펙트, 팝업 등 다양한 인터렉션을 경험해 볼 수 있습니다.
주 사용 트리거 : Fling, Tap, Start, Range
실무적용
개인작업에서 적용할 수 있는 범위와 실무상 적용가능 범위는 간극이 클 수 밖에 없다. 스펙 파악을 하려면 선행 작업 공유는 필수이겠고, 그 안에서 현실적 범위를 추려내는 과정이 필요한데 결론적으로 화려함 보다는 단순함 내에서 사용자에게 전달하려는 바가 명확할 때 실제 적용되기 수월했다.
목적이 아예 다른 두 안이지만 결론적으로 구현이 단순한 후자가 실행 안이 되었다. 첫 번째 패럴렉스안은 콘텐츠 영역별 스크롤 값을 기준으로 Range 트리거를 활용했고, 두 번째 안은 Mouse over 영역을 상하 좌우로 분할해 각 영역에 따라 4개 이미지 Opacity 리스폰스 값을 달리 주었다. 만약 기본지식이 없는 상태에서 코드연구부터 시작했다면 며칠을 걸렸을 수도 있는 작업을 한, 두 시간만에 후자는 심지어 5–10분정도로 마무리 지을 수 있었고, 분할구조나 애니메이션 시간까지 개발에 거의 그대로 적용되었다. 코드를 직접 사용하지 않고 움직임 뿐 아니라 개발에 대한 이해를 가지고 커뮤니케이션이 가능하다는 것은 그냥 벤치마킹 자료를 가지고 소통하는 것에 비한다면 굉장한 장점이다.
프로그램이 지원하는 트리거와 리스폰스가 정해져있기 때문에 애니메이션마다 작업 소요시간이 다르고 상상하는 모든 작업이 다 가능하지는 않을 것이다. 학습시간이 비교적 짧은 것에 비해 Hi-fi라 응용폭이 넓은 편이다.
현재도 개인작업을 하면서 어떤 식의 응용이 더 가능한지 테스트를 해보고 있다. 지금까지는 개인작업에 초점을 두었다면 실무 반영가능한 선을 좀 더 적극적으로 찾아볼 예정.
프로그램이 지원하는 트리거와 리스폰스가 정해져있기 때문에 애니메이션마다 작업 소요시간이 다르고 상상하는 모든 작업이 다 가능하지는 않을 것이다. 학습시간이 비교적 짧은 것에 비해 Hi-fi라 응용폭이 넓은 편이다. 현재도 개인작업을 하면서 어떤 식의 응용이 더 가능한지 테스트를 해보고 있다. 지금까지는 개인작업에 초점을 두었다면 실무 반영가능한 선을 좀 더 적극적으로 찾아볼 예정.
