사이드 프로젝트로 앱 만들어서 수익 창출하기 - 4편
4. 와이어프레임 만들기
이 글은 다음과 같은 분들에게 추천합니다.
1. 사이드 프로젝트가 이뤄지는 전 과정을 알고 싶은 분
2. 한 서비스의 디자인 프로세스를 알고 싶은 분
3. 디자이너와 개발자와의 커뮤니케이션 방법을 알고 싶은 분
4. 실제로 앱 출시부터 홍보까지 수익 창출하는 방법을 알고 싶은 분
와이어프레임? 핵심 기능부터 출발하기
이번 자기암시 앱은 서비스명인 '셀프스펠(Self Spell)'에서 알 수 있듯이, 자기 자신에게 반드시 이루고 싶은 것을 주문처럼 되뇐다는 컨셉이었습니다. 따라서 와이어프레임을 만들기 전 가장 중요한 핵심 기능을 '녹음, 플레이, 알림'으로 설정하였고 이에 따라 '각 핵심 기능들을 어떻게 하면 ui/ux로 잘 녹여내는 가'가 다음 과제였습니다.
그런데 가만 생각해보니 이런 일련의 과정들이 마치 음악 앱으로 노래를 듣는 것과 별 다른 차이가 없었습니다. 단 하나 차이가 있다면, 녹음 기능이 없는 음악 앱이었습니다. (굳이 하나 더 뽑자면 노래를 듣는 시간을 알려주는 알림 정도가 더 추가된 것 같습니다.)
사용자의 입장에서도 생각해봐도 음악 앱의 ui/ux는 사실 수년간 변하지 않는 가장 친숙한 ui/ux입니다.
1. 듣고 싶은 앨범 커버 클릭 후 곡 타이틀 및 정보 확인하기
2. 플레이 화면에서 재생 컨트롤 및 가사 보기
그렇기에 셀프스펠 앱도 동일한 ui/ux에 약간의 변형만 가미하는 것이 최고의 선택이라고 생각했습니다.
1. 리스트 화면에서 저장된 녹음(앨범 커버) 클릭 시 바로 재생하기
2. 플레이 화면에서 재생 컨트롤 및 작성한 주제와 내용(가사) 확인하기
3. 이루고 싶은 주제와 내용을 작성하고 녹음하기
와이어프레임은 최대한 단순하게, 없어도 좋다.
사실 사이드 프로젝트로 진행하는 프로젝트의 경우 와이어프레임이나 프로세스에 긴 시간을 쏟을 필요가 없습니다. 앱의 형태나 구조가 워낙 단순하기 때문입니다.
보통은 복잡한 형태를 본격적인 디자인이 들어가기 전에 와이어프레임으로 단순화 작업을 거치는 경우에는 효율이 증가하지만 와이어프레임 자체가 이미 지나치게 단순할 경우 실제 디자인과의 차이가 거의 없어 효율이 떨어지기 때문입니다.
프로세스 및 설계 과정도 마찬가지입니다.
'[회원가입] → [로그인]' 이런 프로세스 구조화도 과감하게 생략이 가능합니다. 이 부분은 실제로 작업이 완료된 경우일지라도 개발자가 확인하지 않을 수도 있습니다. 왜냐하면 이미 많은 개발자들은 복잡하게 글로만 얽혀있는 프로세스 트리 구조보다 실제 디자인 페이지를 확인하고 각 기능들을 판단하는 경우가 많기 때문입니다.
따라서 사이드 프로젝트 시 핵심 기능이 담긴 주요 3~4 페이지만을 와이어 프레임으로 작성하고 곧바로 실제 디자인 작업을 진행하는 것이 효율성 측면에서 좋은 선택이라 할 수 있습니다.
전체 디자인 페이지 완성
핵심 기능이 담긴 와이어 프레임 3장을 가지고 각 플로우에 필요한 페이지를 하나둘씩 이어 나가면 전체 디자인 페이지가 완성됩니다.
작업을 하기 전 전체적인 톤앤매너와 디자인 컨셉은 미리 머릿속으로 생각해두거나 벤치마크할 디자인 자료를 가지고 있는 것이 좋습니다.
저는 이미 기존 시장에 나와 있는 자기암시 앱의 경우, 디자인이 너무 요란하거나 색상을 너무 많이 사용해 화려한 편이 많아서 오히려 자기암시라는 고도의 자기 집중을 방해한다고 생각했습니다.
따라서 블랙 모노톤의 깔끔하지만 확고한 의지가 곁들여진 느낌의 톤앤매너로 심플한 디자인 컨셉으로 진행하기로 결정했습니다.
앞서 말씀드렸던 것처럼, 이번 자기암시 앱은 저 혼자만 진행할 수 있는 프로젝트가 아닌, 저희 사내 개발자님의 적극적인 참여가 필요했습니다. 개발자는 프로젝트에 참여하는 PM, 기획자, 디자이너 등 전 직군을 통틀어 서비스를 실제로 구현하여 마무리할 수 있는 유일한 포지션입니다. 적어도 개발자가 있어야 어떤 서비스든지 세상에 나올 수 있는 기회를 얻습니다.
다행히도 저희 사내 개발자님께서 해당 디자인 페이지와 플로우를 검토하신 후 사이드 프로젝트에 흔쾌히 응해주셨습니다. 물론 이 앱이 무조건 성공한다. 진짜 좋다는 강력한 주장과 설득은 반드시 필요합니다.
다음 편에서는 '개발자와의 커뮤니케이션' 편으로 이어집니다.
