[UI] 드리블(Dribbble) 리디자인 -2
디자인 사이트 드리블 리디자인하기 - 프로토타이핑 (low-fi)
-지난글 보기-
프로토타이핑의 기본
https://uxplanet.org/basics-of-prototyping-1a4106e12c0e
프로토타이핑은 실제 개발에 들어가기전에 디자인을 실험하고 사용성을 확인하는 단계이다. 대다수의 디자이너의 작업은 프로토타이핑에서 끝난다. (그 이후엔 개발자님들의 엄청난 개발 단계..)
속도와 완성도'Prototypes typically created with a mixture of sketches, wireframes or mockups, prototypes depending on the project timelines and these are representations of the design.'
'프로토타입은 보통 프로젝트의 기간에 따라 스케치, 와이어프레임, 목업, 프로토타입(Hi-fi)으로 구성된다.'
프로토타이핑은 보통 low-fi (low-fidelity)와 High-fi(high fidelity)로 구분하기도 한다. low-fi는 직역하자면 낮은 충실도, 즉 빠르게 쓱쓱- 대충 느낌을 볼 수 있는 프로토타이핑이다. 속도는 빠르게 작업할 수 있지만 완성도가 떨어지기 때문에 디테일한 것들은 잡을 수 없다. High-fi는 높은 충실도로, 시간을 투자하여 완성도 높은 프로토타입을 구현하는 것이다. 실제 화면 구성 디자인이나 인터렉션까지 구현하는 경우가 많다.
작업의 순서
프로토타이핑은 필요성과 물리적 시간 여유에 따라 몇 단계를 거칠지 결정할 수 있다. 나의 경우에는 스터디의 개념도 있고 여러 과정을 거치고 싶어 스케칭과정과 와이어 프레임 과정 총 두가지의 Lo-fi 프로토타이핑과 그걸 실제 모델처럼 구현하는 Hi-fi 프로토타이핑으로 진행하기로 했다.
스케칭을 들어가기 전에, 리카테고라이징을 통해 새로 정리한 네비게이션 바를 만들었다. 미리 느낌을 잡아봐야 스케치할 때 감을 잡을 수 있을 것 같았다. 각 아이콘의 크기는 26이지만 추후 변경 될 수도 있을 것 같다.
스케치(Not 'Sketch'!)하기
문득 왜 스케치 툴이 이름을 스케치로 지었는지 알 것 같았다.(ㅋㅋㅋ)
우리가 스케치하듯 쓱쓱- 빠르게 그려낼 수 있는 툴이라는 것을 말하고 싶었던 모양이다. 실제로 스케치는 내게 굉장히 빠르게 작업물을 만들어주는 좋은 툴이 되어가고 있다.
각설하고! 첫 단계인 스케치는 위 사진의 스케치 툴이 아니다. 말 그대로 종이 위에 손으로 슥슥 그리는 단계이다. 사실 어떤 글에서 보면 여러 단계의 프로토타이핑을 거치는 것보다 바로 HI-fi 프로토타이핑에 들어가는 것이 효율적일 수 있다고도 했다. 어느 정도 공감이 간다. 왜냐하면 스케치나 피그마, 어도비 XD같은 툴들이 워낙 편리하게 되어있어 바로 형태를 잡고 바로바로 수정하기 굉장히 편리하기 때문이다.스케치로 스케치할 수 있는 시대가 된 것 같다.
하지만 본 리디자인의 목적에는 여러 '경험'이 포함되어 있기 때문에 비록 효율성이 떨어지더라도 경험해보기로 했다. (이로 인해 실제 업무에서는 더욱 효율적으로 적용할 수 있기를!)
미대 준비할 때도, 대학을 다닐 때도 계속 손으로 그림을 그리는 것이 익숙 했기에 종이와 펜을 준비했다. 확실히 슥슥 생각을 적어나가는 데에는 종이와 펜이 최고인 것 같다. (나에게는)
다만 각 화면의 인터페이스 설계를 하는데 있어서 매번 화면 크기를 그리드 위에 자를 대고 그리는 과정들이 꽤나 비 효율 적이었다. 그래서 얼른 아이패드로 갈아탔다.
아날로그와 디지털 그 사이
프로크리에이트(Procreate)사용한 앱은 아이패드의 프로크리에이트(Procreate). 한번 구입하면 영구적으로 사용할 수 있고, 가격도 9.99$로 기억한다. 아이패드를 산다면 거의 필수 앱인 프로크리에이트! UI 스케치에도 톡톡히 한몫을 했다.
프로크리에이트 화면애초에 아트보드를 1125*2436으로 설정해두고 그리면 되기 때문에 굉장히 편리하다. ( 375로 하지 않은 이유는 프로크리에이트는 비트맵 방식이기 때문이다.) 프로크리에이트는 레이러 복사 기능이나 위치를 쉽게 이동시킬 수 있기 때문에 스케치가 굉장히 편리하다.
각 화면의 UI 구성을 생각이 나는대로 슥슥 그렸다. 머릿속에 두루뭉술하게 있던 인터페이스를 빠르게 그려보며 대략적인 느낌을 볼 수 있었다. 한가지 아쉬운 것은 그냥 흑백으로 그렸으면 보다 빠르게 결과물을 만들어 냈을 것 같다는 점이다. 색을 불필요하게 적용한 것 같아 아쉽다.
???스케치한 화면들을 나열하고 각 화면의 이동 경로를 표시했다. 뎁스(?)가 부족한 화면도 많고, 또 빠진 화면도 있다는 것을 확인했다. 또 경로가 끊기거나 누락된 부분도 있었다.
플로우 정리
이러한 시행착오(?)를 겪고, 급하게 플로우를 시각적으로 정리를 하였다. 뎁스를 어디까지 설정할 건지, 어떤 플로우로 유저들이 사용하게 될 것인지 다시 정리하였다.
뎁스는 3단계를 최대(MAX)로 잡았고, 각 하단 네비게이션 바의 카테고리별로 정리했다. 이렇게 정리를 해두니 뒤로 가거나 다음 화면으로 진입하기위한 버튼이나 아이콘, 혹은 카드(이미지+텍스트)의 유무나 위치에 대한 감이 섰다. 스케치 전에 먼저 정리를 했어야 하는데 라는 아쉬움이 남는다.
다음 단계는?
<!미리보기!>다음 단계는 와이어프레임을 제작하는 것이다. 목표는 디테일에 신경쓰기보단 grayscale로 빠르게 스케치해두었던 인터페이스를 디지털로 옮기는 것이다. 컬러와 디자인을 입히는 건 제대로 플로우와 화면설계가 된 다음에 해도 늦지 않기 때문에!
사실 드리블에 올라오는 많은 UI design들이 실제 작동하는 앱이 아니라 컨셉디자인인 경우가 굉장히 많다. (이에 대한 비판적인 시선도 적지 않다.) 빠르게 요즘 트랜드를 읽을 수 있고 다양한 디자인을 볼 수 있다는 점은 좋지만, 사실 버튼의 위치나 구성에 대해서는 사용자 경험을 고려하지 않은 껍데기 뿐인 디자인도 더러 보인다.
이러한 디자인을 지양하기 위해서는 꼭 내가 만들고자 하는 서비스에 대한 이해와 방향설정, 그에 따른 인터페이스 설정이 굉장히 중요하다고 생각한다. 그렇기에 화면 기획 단계가 무척 중요하고, 또 디자이너로서 끊임 없이 사용성을 테스트하는 자세가 필요하다! 와이어프레임을 통해 꾸밈을 적용하는 시간을 단축하여 실제 사용성을 테스트하고 또 실험하는 단계가 꼭 필요하다고 생각된다. 이를 염두하며 다음 단계에 들어가고자 한다 ;)
*많은 관심과 오지랖과 피드백과 따끔한 조언은 큰 힘이 됩니다.
