08. 와이어프레임과 프로토타입
기획자가 배우는 디자인툴 Adobe XD, FIGMA
와이어프레임, 프로토타입 비슷한 거 같기도 하고
다른 거 같기도 한데.. 종이에 연필로 뼈대만 그리는 스케치도 와이어 프레임이고 디자이너가 쓰는 전문 그래픽 툴로 레이아웃을 잡아가는 뼈대만 그려도 와이어 프레임이다.
어떤 서비스를 기획하면서 필요한 각각의 화면을 쓱~ 쓱 그려보고 , 언제든 쉽게 버려도 부담 없는 퀄리티로 이해관계자와 의사결정을 해가면서 제품을 완성하는 과정에 쓰이는 그림들..
Wareframe
손으로 그린 와이어 프레임 예시디자이너에게 절대로 디자인하지 말고
퀄리티 높은 프로토타입으로 만들지도 말고
와이어프레임만 그리고 만나자라고 해봐라
10중 8,9는 대부분 그래도 엄청 퀄리티가 좋고
레이아웃이 딱딱 떨어지고 , 정렬이 기준에 맞는 그림을 가져올 것이다. 그냥 버리기에 아까운 공들인 시간의 결과물이 나올 것이다. 반대로 디자이너가 아닌 비즈니스 담당자에게 종이와 펜을 주고 우리가 만들려고 하는 Goal의 서비스가 어떤 것들이 필요한지 그려보라고 하자. 그냥 봐서는 모르겠고.. 설명을 좀 해달라고 해야 할지 모르겠다.
와이어 프레임은 딱 그 중간 정도의 퀄리티로
다양한 관점의 시도와 실험을 할 그림이라고 생각한다.
결국엔 그런 중간 정도의 그림을
완성하고 그리는 사람이 서비스 기획자이다.
그런데 언제까지 비효율적으로 ppt에 남들이 애쓴 것을 알아주지 않는 고난도의 그림을 그릴 수는 없지 않을까?
그래픽 툴을 사용한 와이어프레임 예시디자이너가 모바일앱, 웹, 데스크톱 웹사이트 제품을 만들 때 사용하는 디자인 툴은 Photoshop과 illustrator가 전부였다가 Sketch App이 점령군처럼 잠식했었고
지금은 Adobe XD를 쓰기도 Figma를 쓰기도 하면서.. 또 변화하고 있는데.. 이 변화의 중심엔 디자이너가 있지만
그런 변화의 필요성을 느끼게 해주는 사람들은
개발자, 기획자이기도 하다
우선, 피그마라는 툴은 app을 설치해서 사용도 가능하지만 브라우저상에서 모든 제작과 동작이 가능하다는 특징이 가장 크다.
이 사이트의 첫 화면에 있는 소개를 짧게 붙인 영상인데..
잠깐 봐도 디자인 툴을 써본 적이 없다면 어렵다는 생각에 관심 밖의 일이 되겠지만.. 막상 기획자가 필요한 기능은 몇 개 안되고 ~ 하루 한 시간 3일만 쓰면 이 툴 공부는 끝난다.
실제로 2년 전에 회사에서 기획자들에게 자기 계발 스터디를 만들어서 실습 강의를 해봤는데..
3시간이면 충분하다.. 좀 더 몇 가지 잔기술을 더 하면 3.5시간이면 충분하다.
<Figma 스터디>
- 이 스터디를 하면 사용자 경험 & 프로토타이핑을 직접 만들 수 있습니다.
- 해커톤에서 마지막 Prototype제작이 힘들었던 분들
- 서비스 기획을 하면서 Designer 도움 없이 사용경험 초기 기획을 하고 싶었던 PM분들
- 인터렉션까지 포함된 생동감 있는 고객 경험을 기획하고 싶었던 기획분들.
- 개발자 없이 사용자 경험을 만들고 내 폰에서 먼저 써보고 싶은 사람
누구나 3시간만 어쩌면 그 보다도 더 짧은 시간만에 이 툴을 쓸 수 있다.
저 3시간에는 프로그램 설치 따라 하기부터 있었으니까...
그리고 Figma를 배우거나 AdobeXD를 배우면 서로 주요 기능은 같기 때문에 비슷한 종류는 다 쓸 수 있다고 생각하면 된다.
Learn the basics of Figmahttps://help.figma.com/hc/en-us
피그마 툴은 웹브라우저에서도 모든 작업이 가능하기 때문에 2년 전쯤부터 나는 이 툴을 선호하는데 ~
디자이너들도 스케치 앱을 버리고 피그마로 갈아타는 분위기이다. 와이어프레임은 물론, 프로토타입 작업까지 한 번에 가능하고 디자이너, 개발자가 커뮤니케이션하는 모두가 사용하는 툴로 자리 잡고 있다.
Prototype
프로토타입과 와이어프레임의 차이는
한마디로 시제품을 사용해 볼 수 있나? 의 차이가 있다.
과거에는 종이로 오리고 붙여서 사용성 테스트를 했던 적도 있다. 지금도 그런 과정이 특수한 상황에서는 쓰일 수도 있겠지만
종이로 만든 프로토타입 로그인 패스워드 입력 예시이제는 그럴 필요 없이 피그마 툴에서 와이어프레임으로 설계한 시안을 사용자 동선을 고려한 interaction 지정과 prototype 기능으로 화면 전환 속도와 방향까지 지정하면서 내손 안의 폰에서 바로 사용할 수 있다.
3시간이면 배울 수 있는 이 툴을
글로 어떻게 설명할지... 고민을 좀 해봐야겠다.
영상을 만들어서 등록하는 것이 쉽겠지만
글쓰기 도전이니까..
Account 계정 기획에 필요한 내용을 설명하다가..
여기까지 와버렸는데~ 계정 기획 하나만 하더라도
이런 전체의 과정과 스킬이 필요하다
