앱 서비스 기획의 꽃: 화면 설계하기
첫 기획과 실제로 구현된 것, 그 사이의 시간들에 대한 회고
워크샵을 통해 서비스 타겟과 핵심 기능을, 서비스 네이밍과 로고를 개발하며 브랜딩 기반을 잡은 다음 단계는 앱 서비스 기획의 꽃, 화면 설계였다.
본업으로 UX 리서처 일을 하고 있던 유진과, 서비스 기획을 한 번도 해본 적 없는 마케터 하늘이 페이지 기획을 하기로 했다. 크게 홈 화면과 상세페이지, 마이페이지로 구분하고 머릿속에 있던 기획을 설계서로 옮겨 시각화했는데, 지금 보면 최종적으로 구현된 화면과는 다른 부분이 많다.
개발을 하고 디자인을 입히면서 최초 화면 설계의 부족한 점과 디벨롭할 부분이 발견되었기 때문이다. 백지 상태에서 화면을 설계할 때만 해도 생각하지 못했던 부분들이 실체가 있는 무언가로 구체화되니 보이기 시작했다.
그래서 화면 설계에 대한 회고는 그 변천사를 되짚는 방식으로 해보려고 한다.
처음에 기획했던 것과 실제로 구현된 것.
그 사이의 시간 동안 우리가 어떤 고민과 논의를 거쳐왔는지 돌아보기에 좋은 방식일 것 같다.
알림센터 꼭 필요한가요?
가장 크게 달라진 부분은 홈+마이 페이지 메뉴 구성에서 홈+알림센터+마이페이지 구성으로, 메뉴가 추가되었다는 것! 최초 화면 설계 시에는 마이페이지가 알림센터 역할까지 겸하고 있는 구조였다.
최초의 마이페이지 설계. 종모양 아이콘이 보여주듯 사실상 알림센터 역할까지 겸하고 있다. 알림 신청내역과 수신내역을 한 화면에 구현할 수 있을거라 믿었던 UX알못의 설계..그런데, 알림 신청 내역은 1건이라도 실제 알림 수신은 빈자리가 생길 때마다 수시로 올 수 있기 때문에, [알림 신청 내역]과 [알림 수신 내역]은 분리하여 보여줄 필요가 있었다.
이에 알림 수신 내역을 확인하고 예약 사이트로 넘겨줄 수 있는 [알림센터]와 알림 신청 내역을 조회하고 삭제할 수 있는 [마이페이지]로 메뉴를 구분했다.
그 결과! [알림 신청 내역], [알림 수신 내역], [알림기능 가이드]까지 온갖 정보가 뒤섞여있던 화면(좌측)은 한결 깔끔하게 정리되었다.
현재는 마이페이지(가운데)에 알림 신청 내역 확인과 알림 수신 동의 설정 기능만 남아있다. 대신 알림센터(우측)가 추가되었는데, push알림을 받고 앱으로 접속 시 알림센터 화면으로 연결되며, 이곳에서 알림 수신 내역을 확인하고 예약하러 가기 버튼을 통해 예약 사이트로 접속할 수 있다.
빈자리 알림 중심에서 직관적이고 보기 편한 방식으로
생각해보면 기획 초기에는 우리의 1순위 메인 피처인 "빈자리 알림 기능"을 중심으로 화면을 그려나갔던 것 같다. 초기의 화면 설계를 보면 이 마음이 여실히 드러나는데, 캘린더 메뉴 타이틀이 무려 [빈자리 알림]이었으니..!!! [빈자리 알림]이라는 타이틀과 빈자리 알림 버튼이 화면 중간에 자리잡고 있고, 예약오픈 알림은 하단에 동떨어져 있는 이 어색한 그림을, 그때는 어색하다고 느끼지 못했다.
빈자리 알림이라는 유용한 기능을 내보이고 싶은 마음이 앞섰던 탓이다.
그러나 유저는 이왕이면 빈자리 알림을 신청하기보다는 본인이 원하는 일정 중 예약이 가능한 날짜를 찾아 바로 예약하러 가기를 원할 것이다. 또, 캘린더는 빈자리 알림 신청만을 위한 것이 아니라 예약 현황 조회를 위한 것이기도 하기에, 모든 유저 케이스를 아우를 수 있는 [일정 선택]으로 타이틀을 변경했다.
또, 따로 떨어져 있어 불편했던 버튼 위치를 한 곳으로 모으고 하단에는 알림 기능에 대한 가이드를 배치했다.
알림 카피 기획 : 매번 같은 문구 말고, 상황에 따라 다른 메시지 보내기!
사실 우리 서비스에 있어 가장 중요한 화면은, 앱에 진입하기 전 잠금화면의 push 알림 화면일지도 모른다.
push 알림 기능을 구현하는데도 꽤 공을 들였었는데, 포인트는 두 가지였다.
만약 빈자리가 몇 시간 이상 계속 사라지지 않고 남아있을 때
1) 얼마만큼의 주기를 두고 반복 알림을 줄 것인가, 그리고 2) 어떤 내용의 알림을 줄 것인가.
알림 주기에 대해서는 의견 차이가 있었다. 너무 성가시지 않으면서도 빈자리의 존재를 리마인드하기에 적절한 타이밍을 논의하다가, 4시간 간격으로 반복 발송을 하기로 했다.
대신 알림 문구도 최초 알림과는 좀 다르게 보내자는 의견이 있었고, 행운을 상징하는 네잎클로버 이모지와 함께 '빈자리가 아직 남아있어요'라는 메시지를 담았다.
처음 기획했던 설계와 최종 출시된 버전을 비교해서 보면서, 완벽한 draft를 그리려고 애쓰는 것보다 빠르게 초안을 만들고 발전시켜나가는 것이 더 효율적인 방법이라는 생각을 다시금 했다. 머릿속으로만 그렸을 땐 드러나지 않지만 실행에 옮기고 나면 비로소 보이는 것들이 분명 있다. 다음 포스팅은 기획을 실행으로 옮기기 위한 가장 중요한 역할, 이 모든걸 가능케한 갓발자님의 개발 스토리를 올릴 예정!
완성된 화면이 궁금하신 분들은
