터치감을 개선하기 위한 프로토타이핑

"최근, 게임 뿐만이 아니라 다양한 분야에서 UI/UX개발공정에 *프로토타이핑을 도입하는 사례가 늘고 있다고 느낍니다." 는 말을 시작으로,

사사키 씨는 「프리코네R」에 도입된 프로토타이핑에 관해, 제작 사례를 들어가며 소개했다.

*프로토타이핑 : 설계 후 바로 제작 및 도입에 들어가는 게 아니라, 시제품(프토토타입)을 만들고 비교평가/검증을 통한 개선을 거친 뒤 

실제 제품에 도입하는 방식.

사사키 씨는 우선 프로토타이핑의 목적을 '빠른 단계에서 평가, 검증을 실시함으로써 결과물을 갈아엎어야 하는 상황의 발생을 줄이고,

다양한 시점에서의 평가를 통해 UI를 고품질화 하는 것'으로 설정하고, 이를 만족하면서 고품질 UI를 단시간에 제작하는 것을 목표로 했다고 한다.

프로토타입을 제작할 때 결정해야 할 사항으로는 '충실도'가 있다. 간단히 말해 얼마나 실제 제품에 가까운 프로토타입을 제작하느냐에 따라서

전환이나 조작, 기능을 확인하기 위한 저충실도 프로토타입과, 게임에 가까운 외양을 통해 애니메이션 및 터치감 부분도 확인 가능한 고충실도

프로토타입으로 나뉜다.

저충실도 프로토타입은 게임 전체의 화면설계와도 상관있기 때문에, 개발 초기~중기에 도입하기 적합하며, 고충실도 프로토타입은 터치감과

애니메이션 등 세부 조정이 필요한 개발 중기~후기에 도입하기 적합하다. 「프리코네R」은 게임 체험을 개선함으로써 고품질 UI를 만드는 것을

목적으로 했기 때문에, 처음부터 고충실도 프로토타입을 채용했다고 한다.

[프로토타이핑 전체 공정 : 프로토타입 제작 → 크로스 리뷰 - A/B 테스트 → (개선의 여지가 있으면) 다시 프로토타입 제작부터 순서대로,

(평가 결과가 기준치를 만족했다면) 실제 도입]

(우선 프로토타입을 제작하고, 리뷰를 거친 뒤 실제 도입에 들어간다는 흐름이다.)

다만, 고충실도 프로토타입은 애니메이션 제작이나 코딩 등 만드는 데 시간이 걸릴 뿐만 아니라, 실제 도입도 매우 번거로워진다는 약점이 있었다.

이러한 약점을 극복하기 위해 Flash 등 애니메이션 제작이 가능한 「Adobe Animate」를 채용하였고, 나아가 제작된 애니메이션을 「Unity」에서

재생가능하게 만들어주는 독자 제작 툴 「FlashToUnity」를 사용해서 제작의 번거로움 및 재현성 문제를 해소했다. Adobe Animate를 채용한 이유는,

Flash파일을 iPhone의 네이티브 앱으로 빌드 가능한 기능을 갖고 있다는 점과, 개발중에 쓸 수 있는 툴이 이것 밖에 없었다는 점도 크게 작용했다고 한다.

[저충실도 프로토타입의 예]

(저충실도 프로토타입. 버튼을 터치하면 화면 전환하며, 게임의 흐름 등을 확인할 수 있다. 투박한 생김새에 애니메이션도 들어가 있지 않지만,

그만큼 빠르게 만들 수 있다.)

[고충실도 프로토타입의 예]

(고충실도 프로토타입은 사용감을 확인할 수 있을 정도로 완성도가 높지만, 프토토타입 제작에 들어가는 비용이 높다. 애니메이션 및 화면 전환 등

겉모습은 거의 게임과 동일함)

프로토타입을 제작한 뒤에는 크로스 리뷰를 실시해서 고품질화를 도모한다. 「프리코네R」은 프로토타이핑 리뷰 방식으로 여러 사람이 사용감을

평가, 검증하는 크로스 리뷰와, 이런 크로스 리뷰의 결과로 도출된 2개의 시안 중 하나를 채택할 때 A/B테스트를 실시했다. 크로스 리뷰는 실제 기기에서

확인할 수 있기 때문에 신뢰도가 높은 평가가 가능했다고 한다.

사사키 씨는 크로스 리뷰 과정에서 철저하게 유저 시점에서 바라보는 것의 중요성을 체감했다고 말한다. 매일 UI와 씨름하고 있다보면 개발진의

사정이 매우 잘 이해되버려 초심을 잃기 십상이기 때문이다. 개발 도중에도 여러 사람에게 테스트 플레이 감상을 듣는 것이 매우 중요하다고 한다.

[UI애니메이션 프리셋 : 전용 캔버스 위에 미리 자주 쓰는 애니메이션을 마련 - 효율화에 더해 퀄리티의 안정화를 도모할 수 있다]

(프로토타입 제작을 보다 고속화하기 위해, UI애니메이션 프리셋을 마련했다. 전용 Flash캔버스에 미리 자주 쓰는 애니메이션을 보존해두고,

각 애니메이션을 필요할 때마다 대상 화면에 이식할 수 있다. 이를 통해 효율적이고 안정된 퀄리티를 보장하는 프로토타입 제작이 가능해졌다.)

[1. 디자이너가 평가할 점

- 캐릭터와 세계관이 매력적인가 : 캐릭터와 세계관을 매력적으로 표현하고 있는가. 귀여움을 충분히 어필하고 있는가.

- 조작성 : 버튼이 누르기 쉽게끔 배치되어 있는가.

- 통일성 : 다른 화면들 간에 디자인, 표현, 조작성 등의 면에서 통일성이 있는가. 설계 규칙을 지키고 있는가.

- 연출 및 애니메이션의 품질 : 연출 및 애니메이션의 품질이 보장되고 있는가. 유저에게 불편감을 주고 있지 않는가]

[2. 플래너/엔지니어가 평가할 점

- 사양(플래너) : 처음에 플래너가 상정했던 사양을 만족시키고 있는가. 누락된 부분은 없는가.

- 도입 난이도(엔지니어) : 실제 도입 난이도의 산출, 도입 방법 검증.

- 알기 쉬움 : 어디를 조작하면 될지 이해할 수 있는가. 쓰기 불편한 부분은 없는가 ← 디자이너 이외의 스탭이 실시하는 최초의 리뷰]

[3. 사내 스탭이 평가할 점

- 알기 쉬움 : 한 눈에 어디를 조작하면 될지 이해할 수 있는가. 쓰기 불편한 부분은 없는가

- 조작성 : 버튼의 위치 등, 조작하기 불편한 부분은 없는가.

- 첫인상 : 그 외에, 처음 리뷰 대상 화면을 봤을 때 느낀 감상 등.]

(크로스 리뷰는 처음에는 디자이너, 그 다음에는 프로젝트 플래너와 엔지니어, 마지막으로는 프로젝트 내외의 스탭이 참여하는 식으로,

단계적으로 리뷰어의 규모를 넓혀가며 실시했다.)

[A/B테스트란? 

- 위의 화면은 버튼의 배치 방식을 테스트한 예

- B안이 더 사용감이 좋을 것 같다는 의견이 많았다.]

(버튼의 배치 형태가 다른 2개의 시안으로 A/B테스트를 실시한 예. 크로스 리뷰에서는 평가가 갈렸으나, 2개까지 줄인 뒤 A/B테스트를 실시했을 때에는

B안의 사용감이 더 좋을 것 같다는 의견이 다양한 파트에서 많이 나왔다. A/B테스트는 이러한 미세한 디자인의 차이를 판단할 때 적합하다.)

[프로토타이핑 도입시 고려해야할 사항

- 수정, 시행착오 기간을 정해둔다 : 프로토타입은 시행착오를 몇 번까지 할 수 있냐가 중요. 어느 화면을 언제까지 결정할 것인가 라는 인식을

 관계자 전원이 공유하는 것이 중요하다.

- 목표(골)를 명확히 한다 : 프로토타입 제작에 들어가기 전에 이 화면은 어느 정도의 완성도를 추구할 필요가 있다 등의 인식을 관계자 전원이

 공유하는 것이 중요하다.

- 프로토타입도 실제 기기로 확인한다 : 무심코 PC화면 상 확인으로만 떼워버리기 쉽지만, 실제 기기에 도입한 뒤 단말로 조작해 보면 쓰기

 불편하더라. 하는 경우도 있다.]

(크로스 리뷰 시 고려해둬야 할 점은 수정, 시행착오 기간을 정해두는 것. 언제까지 작업을 끝낼지를 관계자 전원이 의식하고 있는 것 뿐만이 아니라

어떤 요건을 만족시켜야 목적 달성(골)인지도 명확히 해둬야만 한다. 실제 기기로 확인하는 것도 필수)

마지막으로 사사키 씨의 "본 작품은 '애니메이션RPG'라는 컨셉트를 기반으로, 모두가 그 컨셉트를 구현하기 위해 시행착오를 거쳤습니다.

유저가 원하는 바를 실현하기 위해서라도, UI시점에서 가능한 것은 무엇인가를 항상 생각하는 것이 중요합니다. 

개발을 통해서 게임성, 캐릭터, 세계관 등을 최대한 이끌어내는 것이 UI디자이너의 업무란걸 절감했습니다." 라는 말을 끝으로, 강연은 종료됐다.

====================================================

1. 그야 이거 현업 개발자를 대상으로 한 강연이었으니까 내용도 실무지향적이고 분석적일 수 밖에 없지.

2. 유저 시점에서는 크게 의미가 없지만, 이쪽 업계로 가고 싶은 여중생/여고생 쟈응이 있을 수 있기 때문에 내가 읽을 겸 번역했음.

3. 작년인가 재작년 데레스테 관련 강연도 그렇고, 사이게 쪽 건 내용이 충실한 만큼 읽을 맛이 있다는게 개인적인 감상.

4. 다만 본문에서도 나와있지만 이런 고충실도 프로토타이핑 방식은 제작 과정에 걸리는 시간 및 비용이 커지는 만큼, 예산 및 인력풀이 충실한

대기업에서나 가능할 법한 이야기였음. 앞 부분(번역글 1번)의 내용은 비용 외적인 부분이니 능력과 열정만 충분하다면 추구해야 할 영역이라고

생각하지만.

5. 오타 지적 및 번역 개선 건의 등은 댓글로 부탁해.

6. 나 구한다. 마없찐 베하 보스 2트클 조합.