아이디어 구현의 첫 단계 :목업스케치

플러스엑스 챌린지#26

'텔레스트레이션'이라는 보드게임이 있다. 제시어를 보고 한 명이 그림으로 그리면, 옆의 사람은 그림을 보고 원래의 제시어를 추측하고, 그 다음사람은 다시 그림을 그리고를 반복해 나가는 게임이다. 처음에는 명확히 전달했다고 생각했던 그림이, 사람을 거치며 점차 원래의 의도와는 달라지는 것을 볼 수 있다. 이런 참사를 막으려면 계속해서 어떤 결과물이 나와야 하는지를 공유하는 작업이 필요하다. 와이어 프레임, 목업 그리고 프로토타입을 통해 low fidelity부터 high fidelity까지(fidelity를 마땅히 번역할 단어가 생각나지 않아 그대로 적는다.) 아이디어를 구체해 나갈 수 있다.

점차 fidelity를 높인다

와이어프레임

와이어프레임은 말 그대로 와이어(wire)와 프레임(frame)으로 이뤄진 화면의 골격을 의미한다. 앞으로 작업 중 가장 low fidelity인 작업이다. 지금까지 만든 컨셉을 구현하는 단계로서, 시각적인 디자인보다는 정보와 기능들을 중심으로 배치한다. 와이어프레임에서는 정보, 레이아웃, 화면 간의 연계 등에 대해 정리해 볼 수 있는데, 와이어프레임의 강력한 점은 '적은 비용으로 빠르게' 만들 수 있다는 점이다.. 와이어프레임은 연필과 종이만 있어도 만들 수 있지만, 요즘은 다양한 지원툴이 나와 와이어프레임부터 프로토타입 단계까지 작업을 할 수도 있지만 아직도 PPT를 사용하는 곳도 있다. 와이어 프레임 단계에서는 아래와 같은 점을 고려해야 한다.

- 사용자의 흐름에 집중한다 : 사용자가 보는 화면에 집중해 서비스의 흐름을 그린다.

- 이해관계자와 호흡하며 구체화한다 : 기획자, 개발자, 디자이너와 협업하며 각 페이지의 기능 및 페이지 간의 연계에 대해 구체화한다.

- 빠르게 수정한다 : 사용자의 피드백을 받을 수 있다면 이 단계에서 받아 빠르게 반영할 수 있다.

목업

이렇게 만들어진 와이어프레임을 바탕으로 목업을 만든다. 목업은 medium-level fidelity 작업이다. 와이어프레임이 사용자의 흐름에 중점을 둔 작업이라면, 목업은 실제로 디자인까지 수행되는 작업이다. 서체, 타이포, 그래픽 등의 요소를 적용하며, 이때 회사차원의 스타일 가이드에 적합한지도 점검한다. 요즘 가장 많이 사용되는 피그마의 경우에는 와이어프레임 위에 목업 작업을 진행할 수 있고, 목업 작업에서 사용할 디자인 시스템도 만들어 놓을 수 있어서 효율적인 작업이 가능하다. 목업 단계에서는 다음과 같은 점을 고려해야 한다.

- UX컨셉의 재해석 : 아이디어 도출을 통해 잡은 방향성을 시각적 결과물로 재해석한다.

- 기능 및 구조 : 버튼, 배너, 리스트 등의 기능과 콘텐츠의 성격, 우선순위 등을 확인할 수 있어야 한다.

- 이해관계자를 위한 배려 : 전달받는 사람들이 알아야 할 내용들도 함께 표현이 필요하며, 필요하다면 여기서 스토리보드나 화면설계서 형태를 작성한다.

프로토타입

프로토타입은 high level fiedlity작업으로, 실제 상호작용까지 구현해 볼 수 있다. 사실상 코드만 없다 뿐이지 모양상으로는 거의 동작하는 것 같은 결과물을 얻어낼 수 있다. 피그마에서는 자주 사용되는 기능들을 구현해 두어, 목업 단계에서 프로토타입 단계까지 연계해 활용할 수 있게 하고 있다. 요즘은 AI기술이 발달하며, 화면 디자인만 하면 뒷단의 코드를 짜주는 노코드 빌더들도 소개되고 있지만, 아직은 서비스 운영에 쓰기에는 부족한 점이 있다. 하지만 이런 프로토타이핑 단계에서는 충분히 사용할만한 가치가 있다.

사용자의 시나리오에 기반해 기능을 정의하고

그 정의에 따라 화면을 구성한다.

이런 과정은 사용자의 니즈를 반영한 서비스가 될 수 있도록 돕는다. 이렇게 low에서 high fidelity로 이어지는 과정에서 반복해 사용자의 문제를 해결할 수 있는지, 사용자 관점에서 사용성을 해치는 요소는 없는지를 파악할 수 있기 때문이다.

#플러스엑스 #패스트캠퍼스 #plusxsharex #plusx #ui강의 #ux강의 #bx강의

#플러스엑스강의후기 #플러스엑스쉐어엑스 #플러스엑스환급챌린지