모바일 앱 설계의 꽃 - 와이어프레임

모바일 앱 설계, 모바일 설계, 와이어프레임, 와이어프레임 만들기, 모바일 앱 기획

사실 설계에는 정답이 없다. 어떤 기획자는 기능적인걸 강조하기도, 어떤 기획자는 사용자 편의성을 강조하기도, 또 다른 누군가는 심플함을 강조하기도 한다. 물론 이 세가지를 모두 충족시키는 서비스가 최고의 서비스가 될 수 밖에 없다. 특히나 웹 기획에 머물러 있다가 모바일 쪽으로 넘어오게 되면 작은 화면과 터치와 제스쳐로 구성되어 있는 다소 생소한 사용성에 처음 설계를 시도할 때는 마치 마우스로 조작해야할 듯한 화면이 나오기 마련이다. 아무리 웹 기획과 설계를 많이 했더라도 기본적으로 디자인 가이드라인 정도는 숙지하고 OS에 따라 어떤 개발방식을 갖게 되는지 숙지할 필요성이 다분하다.

예를 들어 안드로이드에는 기본적으로 뒤로가기 버튼을 제공하지만 아이폰에는 없다. 또한 아이폰 사용자들은 좌측 상단에 배치된 뒤로가기에 익숙하다. 조금만 자료를 뒤져보면 알겠지만 사용자는 대부분 엄지로 조작하며 화면이 커질 수록 상단에 있는 영역은 터치에 대한 의지가 떨어진다. 또한 손가락이 늘 화면을 터치하기 위한 대기상태로 있기 때문에 하단은 가독성이 떨어진다. 이러한 기본적인 UX는 파악해야 디자인이 나왔을 때의 어색함이 적을 수 있다.

사설이 길어졌다. 어쨋든 웹을 설계하든 모바일 앱을 설계하든 사용자의 편의성을 생각해야한다는 것은 변하지 않는 진리이다. 설계를 진행하기에 앞서 가장 막막한게 목업 tool이다. 파워목업을 포함해 많은 목업툴을 써봤지만 우선 파워목업이 오프라인에서도 작업이 가능하고 전달과 수정이 편하다는 장점이 있다. (게다가 느리지 않다.) 파워목업은 날이 갈수록 진화하고 있는데 Shapes (기존에는 stencil)의 확장으로 모바일 설계에도 큰 도움을 주고 있다. 안드로이드와 iOS목업을 제공하고 있으며 실제로 설계를 하다보면 디자인이 필요없을것 같은 수준까지 작업을 할 수 있다.

하지만 어떻게 설계를 진행했어도 개발에 가장 필요한 것은 와이어프레임이다. 웹과는 달리 화면의 이동과 구현 방식 등의 전달이 어렵기 때문이다. 예를 들어 웹에서는 메뉴가 출력되고 마우스로 클릭하고 이동하지만 모바일의 경우 좌, 우, 위, 아래, 길게 누르고 있거나 터치하거나 모두 다른 동작으로 다른 화면으로 넘어갈 수 있다. 사실 이러한 기능들을 많이 쓰는게 사용 편의성을 도모하는 것은 아니다. 사용자들 역시 touch guide를 자세히 보지 않기도 하며, 가이드를 보고 조작해야 사용이 가능하다는건 사용이 그만큼 어렵다는 의미이기 때문이다.

어쨋든 개발의 완성도와 편의성을 도모하기 위해 모바일의 경우 와이어프레임을 제작하게 되는데 대부분 화살표를 토대로 구현되고는 한다. 인터넷에 와이어프레임을 검색해보면 다양한 형태의 와이어프레임들이 보인다. 사실 와이어프레임은 간단한 논리 구조만 보여주면 된다. 다음화면이 어디인지, 어디로 이동하는 것인지, 어떻게 동작하라는 것인지이다. 애니메이션의 처리는 말로 설명하거나 예시의 화면을 보여줄 수 밖에 없다. (참고하면 좋은 사이트들을 소개한 다음 글을 참고하자)

2016/03/01 - [스타트업과 경영/경영] - 모바일 앱 설계부터 개발까지 도움이 되는 사이트 모음

결국 와이어프레임은 화면과 화면을 이어주고 언제를 명시해주면 끝나는 것이다. 예를 들어 A라는 메인화면에서 어떤 버튼을 tap하면 B라는 화면으로 이동한다고 하면 A화면과 B화면을 화살표로 이어주고 중간에 tap x button이라고만 써줘도 충분히 훌륭하다는 것이다. 이렇게 다 이어진 와이어프레임을 보기 편하게 정렬 등만 맞춰주면 제법 설계도 다운 와이어프레임을 만나볼 수 있을 것이다. 

사실 굉장히 직관적인 화면 구성을 한 경우라면 위 예제 이미지처럼 버튼에서 선을 이어줘도 되겠지만 파워목업으로는 저런 선과 detail을 살리기가 어렵다. 가장 좋은건 디자인이 완료되면 디자이너가 디자인 가이드라인과 함께 위 예제와 같은 와이어프레임을 제작하여 제공하는 것이다. 어쨋든 와이어프레임도 디자인이 필요하다는 의미이기도하다. (이렇게 디자인 된 작업물은 사용자에게 웹에서 제공되어도 충분히 훌륭하다.) 또한 각각의 화면에 대한 설명들도 작성된다면 금상첨화이다.

결론적으로 와이어프레임은 하나하나의 나무를 만들고 멀찌감치 떨어져 숲을 바라보게 하는 화면이라고 할 수 있다. 와이어프레임에는 어떤 정석도 존재하지 않는다. 개발자와 디자이너에게 사용자 편의성을 강조하고 있다면 자신의 설계도를 사용하는 디자이너와 개발자의 편의성이 고려된 설계도를 만들면 될 것이고, 기능을 강조했다면 내 설계도에 얼마나 정확하고 디테일하게 기능이 명시되고 나열되어있는지를 보길 바란다. 나와 함께하는 동료조차 생각하지 않은 서비스는 결국 사용자들도 고려하지 않은 서비스로 느껴진다.