지난 번 IA 작성에 이어, 이제 와이어프레임을 제작할 차례다.
IA 작성은 이전 글 참고!
2023.08.13 - [프로그래밍 언어/Mobile] - 앱 기획하기 - IA 작성
📌 와이어프레임(Wireframe) 제작하기
와이어프레임은 웹사이트의 골격이나 애플리케이션의 사용자 인터페이스(UI) 및 핵심 기능을 나타내는 단순한 선과 도형으로 구성된 다이어그램 또는 다이어그램의 집합이다.
쉽게 말하면, 화면을 어떻게 구성하고 그것들이 어떻게 연결되는지 대략적으로 그리는 것이다.
여기서 처음부터 디자인 요소를 첨가하여 제작할 필요는 없고, 이 정도 위치에 사진이 오고, 이 메뉴에서는 이 구성요소들을 이렇게 보여주고 등, 사용자 인터페이스를 어떻게 구성할지 골격을 만들면 된다.
사용자 인터페이스(UI)를 설계하는 것이기 때문에, UX 디자이너가 와이어프레임을 사용하여 클라이언트, 제품 디자이너 및 기타 팀 구성원에게 UI가 어떻게 보이고 작동하는지 보여주는 역할을 한다. 이런 면에서 개발 초기에 UI/UX 디자이너가 있다면 화면 구성요소를 어떻게 배치하면 사용자 경험(UX)을 향상시킬 수 있을지 등을 반영하여 설계할 수 있다는 장점이 있다.
그러나 제품 관리자와 기타 이해관계자는 디자인 경험이 많지 않더라도 와이어프레임을 사용하여 원하는 기능이나 디자인을 전달할 수 있다.
와이어프레임에는 다음의 요소들이 포함되면 된다.
- 화면 구성 및 설명: 사용자가 보는 화면에 무엇이 표시되는가?
- 필요한 페이지를 만들어 이름을 붙여준다. 그리고 그 페이지의 주 기능을 설명한다. 이 화면이 왜 있는지 그 이유를 설명하면 된다. 화면만 딸랑 만드는 것이 아니고, 그 옆에 그 화면에 대한 설명을 써주어야 한다.
- 구성 요소 작성 및 설명: 구성요소는 페이지의 어디에 배치되고, 각 구성요소는 어떤 기능을 하는가?
- 앱이나 웹의 화면 요소(컴포넌트)들을 잘 정리하여 표시하고 만들어 주어야 한다.
- 구성 요소들이 무엇을 위해, 어떤 기능을 하는지 설명을 해주어야 더 좋은 앱이 만들어진다.
- 화면 경로: 페이지들이 어떻게 이어지는가?
- 페이지들이 어떻게 이어지는지 경로를 작성해야 한다.
- 화면 경로가 없으면 나중에 화면을 추가 또는 삭제하면서 경로가 없어지거나, 원하지 않는 경로가 만들어져 기획과는 다른 앱이 될 수 있기 때문이다.
- 자연스러운 사용자 경험을 위해서라도 와이어프레임 제작 단계에서 화면 경로를 확실히 하는 것은 중요하다.
📌 화면 재구성
위의 작업들을 모두 완료했다면, 아직 끝난 게 아니다.
화면의 가독성을 위해 재구성하는 단계가 필요하다.
수많은 팝업으로 인해 복잡하거나, 한 화면에 너무 많은 요소들이 들어가면 가독성이 떨어질 수 있다, 이런 경우 화면을 추가하여 요소를 나누어 배치하면 어느 정도 해소할 수 있다.
구성요소들을 숫자나 알파벳으로 관리하면 가독성을 높일 수 있다.
표기가 되어 있으면 상세 설명을 하기도 쉽고 보기도 쉽기 때문이다. 색깔로 구별 짓는 것도 좋다.
예를 들면 단순 동작은 숫자로, DB 처리되어야 할 것은 알파벳으로, 에러 처리는 빨간색으로, 수정이 필요한 것은 노란색으로 표기하는 등, 알기 쉽게 표기하면 좋다.
개발자라면 상세 설명란에 Text, EditText, Image, Button 등을 바로 표기해도 좋다.
Text라면 최소/최대 몇 글자를 작성할 수 있는지도 미리 정해두면 편리하다.
화면에 기능과 알파벳, 숫자를 이용하여 화면에 이름을 붙였는데, 알파벳은 어떻게 분류해야 할지 잘 모르겠어서 일단 큰 기능으로 묶어서 순서대로 알파벳을 매겼다.
그리고 나는 1인 앱 개발을 하고 있기 때문에, 그냥 와이어프레임 단계에서 디자인도 같이 했다.
피그마로 IA 작성과 와이어프레임 모두 작업했는데, 피그마의 디자인 파일에서는 컴포넌트를 이용하여 여러번 사용되는 요소를 수정할 때에도 원본만 수정하면 그 복사본이 모두 적용되기 때문에 편리하다.
나중에 디자인을 위해 일일이 수정하는 것이 귀찮아서 한번에 컴포넌트를 만들어서 작업하였다.
뒤로 가기와 종료 처리
⭐️설명 꼭 해주어야 하는 것!! : 경로 처리
화면 경로들을 어떻게 이동하고 앱의 종료는 어떻게 하는지 표시해 주면 좋다.
예를 들면 뒤로 가기 동작을 어떻게 해야 팝업이 뜨는지 적는 것.
이동 경로들을 사용자가 어떻게 작동시키는지 기획에 담아야 한다.
iOS앱의 경우 뒤로가기 버튼을 만들어야 하고, 버튼이 없는 경우 옆으로 쓸어넘기기를 했을 때 어떤 페이지로 넘어가는지 경로를 표시해주어야 한다.
피그마의 디자인 파일에서 우측 상단에 있는 '프로토타입'을 누르면, 간편하게 화면 경로를 작성할 수 있다.
요소마다 이동 경로를 표시할 수 있기 때문에 매우 편리하고,
작성한 경로의 Flow를 재생하면 시뮬레이션 해볼 수도 있어서, 빼먹은 부분이나 잘못 설계된 부분들을 캐치할 수 있어서 좋다.
📝 와이어프레임을 제작하며...
머릿속으로만 구상하던 화면을 직접 설계한다는 것은 정말 쉽지 않은 일이다.
UI/UX 디자이너 선생님들 정말 존경스럽다..
IA로 작성한 서비스의 흐름과 기능을 생각하며 UI를 설계해보니, 구성 요소를 어떻게 배치해야 사용자가 이용할 때 편하게 사용할 수 있을지 등 고려해야 하는 부분들이 정말 많다는 것을 느꼈다.
사용자 경험을 향상시키기 위한 방법, 피그마 사용 방법, 소셜 로그인 로고 사용 방법, 팝업을 이용한 마케팅 방법 등등
와이어프레임을 만드는데도 단순히 화면 구성이라고만 하기에는 고려해야 할 것들이 정말 많았다.
실제로 많은 앱들을 이용하면서 불편함 없이 사용했다는 게 그 안에 얼마나 많은 노력이 숨어있었는지 다시 한번 깨닫게 되는 과정이었다.
와이어프레임을 제작하면서 이전에 작성했던 IA가 부족하다고 느껴서 수정하기도 했고, 좋은 아이디어가 생각나서 추가하기도 했다.
한 단계 한 단계 고민하면서 구체화해나갈수록 서비스가 더 풍성해지는 느낌이라 뿌듯했고, 이게 질려서 끝을 보기도 전에 그만두는 일이 없도록 빨리 개발로 뛰어들어야겠다는 생각이 들었다.
생각해보면 4명 정도 있는 팀이 해커톤에서 하룻밤만에 앱 하나 만들어내기도 하는데,, 아무리 혼자라고 해도 한달이면 넉넉하다라는 생각이 문득 들었다. 물론 견고함과 경력의 차이도 있겠지만, 후딱 해서 빨리 만들어내고 싶다 ㅎㅎ 그리고 나서 더 보완해야지!
개발하면서도 괜찮은 아이디어가 생각나면 와프를 수정하고 다음 버전에 추가하는 방식으로 업데이트하려고 한다.