초보 예비 디자이너의 서비스 구축 기획하기 4편
화면설계서 작성하기 - 이 화면은 왜 이렇게 될까?
보 예비 디자이너의 서비스 구축 기획하기 1편 : https://brunch.co.kr/@sbcookie/15
초보 예비 디자이너의 서비스 구축 기획하기 2편 : https://brunch.co.kr/@sbcookie/16
초보 예비 디자이너의 서비스 구축 기획하기 3편 : https://brunch.co.kr/@sbcookie/17
3편에서는 내가 필요한 요구사항들을 어떻게 보여주면 좋을지에 대해 리서치리포트라는 산출물로 알기 쉽게 정리해보았다. 이제 요구사항들을 반영하여 화면을 기획하고 설계해야 되는데, 이 단계에서 나오는 산출물이 '화면설계서'이다.
#5 화면설계서 작성하기
1. 화면설계서의 구성
1. 화면설계서 작성 시 유의사항
화면설계서에서 제일 중요한 것은 누락된 요구사항이 없도록 작성해야 된다는 것이다. 실제로 이번 프로젝트에서도 요구사항들을 반영하여 작성하다 보니, 정보구조도 자체에 페이지로써 누락되어 있는 부분들이 상당히 있었다. 처음에 60 남짓한 페이지로 작성되어 있던 정보구조도가 실제로 각 요구사항들을 반영하여 화면 플로우에 맞춰 페이지를 제작하다보니 "어? 이런 페이지도 필요한 것 같은데?" 하면서 추가한 페이지들을 포함하여 70페이지를 훌쩍 넘었다.
그 다음으로 중요하다고 생각한 것은 정보구조도에서 작성한 페이지가 누락없이 모두 화면설계서와 매칭되어야 된다는 것이다. 정보구조도를 바탕으로 모든 페이지를 1명의 기획자가 모두 화면설계를 하는 것이 아니라, 여러 명의 기획자가 분담하여 작성하기 때문에 분담해서 작성하는 과정에서 누락되는 페이지가 있을 수 있다. 따라서 화면설계서와 정보구조도의 ID가 모두 매칭되어 누락이 없도록 관리해야 된다.
2. 화면설계서 구성 요소 (주관적)
어느 정도 화면설계서의 기본적인 구성 요소는 있는데, 요구사항과 정보구조도의 누락 없이 표기할 수 있는 frame을 피그마에서 제작하는 것이 좋을 것 같다는 생각이 들어서 아래와 같이 새로 만들어보았다. (현재 같이 서비스 기획을 하고 있는 분들과는 이야기된 내용이 아니기 때문에 개인적으로 사용할 목적으로 제작하였다. - 기획자분께서 짜놓은 틀 참조하였음)
서비스명, 화면번호, 반영된 요구사항ID, 접속경로, 작성자가 표기된 frame
화면에 대해서 구체적으로 어떤 기능으로 구현되는 서술하는 영역해당 frame을 가지고 화면설계서를 어떻게 작성하였는 지 간단한 예시 파일은 아래와 같다.
presentation용으로 16:9 (1920 * 1080) 사이즈 대지에 위에서 만든 frame을 삽입한 뒤 작성해보았다. (모두 반응형 frame으로 제작되어 있기 때문에 어떤 사이즈의 아트보드가 와도 커버되는 점이 figma의 장점!)어떤 영역에 대해서 상세 기능 디스크립션을 작성해야 되는지 빨간색 숫자 딱지를 통해 notice해주고 거기에 대해 필요한 주요 기능들을 오른쪽에 넘버 매칭하여 작성하는 형태로 진행하면 된다.
3. 화면에 무엇을 넣어야 되나요?
진짜 아무리 생각해도 이 부분이 초보인 나에게 제일 어려웠던 것 같다. 위에서 예시로 보여준 투어 상세페이지에 대해서 와이어프레임을 작성하려고 했는데, 어떤 기능들을 넣어야 되는지 머리 속이 새하앴다. 우여곡절을 겪으며 작성한 상세 페이지에 대한 화면설계를 통해 터득한 넣어야 될 기능 리스트업 방법을 공유하려 한다.
방법은 바로 동일 내용 페이지를 벤치마킹하고 나서, 내 서비스에 맞게 가감하기
여행에 관련된 앱을 기획하고 있다보니, 잘나가는 여행사들의 패키지투어 상세페이지를 벤치마킹하는 것을 최우선으로 진행하였다. 예를 들어서 아래와 같이 하나투어에 대한 벤치마킹을 진행해보았다.
GNB / Main(Contents) / Tab Bar 순으로 살펴보면,
GNB : 2뎁스로 들어온 상세페이지이기 때문에 뒤로가기 버튼 필수, 공유하기와 찜하기, 홈으로 돌아가기, 상단에 롤링 배너 이미지, 이미지 갯수에 대한 페이지네이션 제공, 헤더와 평점과 가격 표기
Main : 잔여좌석과 가격, 혜택, (그 외 일정등은 변동사항이므로 확인안했음)
Tab Bar : 문의하기와 찜하기, 예약하기버튼을 눌렸을 때 인원 별로 가격 설정 다르게 할 수 있도록 제공, 총 합계 가격 표시
추가로 리뷰탭도 확인해보았는데, 리뷰갯수, 리뷰평점, 작성날짜, 리뷰사진 등이 필수로 있으면 될 것 같다.
리뷰 탭과 관련해서는 네이버쇼핑에서 한 번 더 확인해보았다.
리뷰갯수, 리뷰 정렬 순서, 리뷰 주제, 평점, 프로필사진, 아이디(***비공개처리), 작성날짜, 작성글(더보기 줄이기), 사진 등이 필요하다는 것을 추가로 알 수 있었다.
위처럼 리스트업을 모두 해놓고, 우리 서비스에 필요한 부분들만 생각해서 반영하면 생각보다 손쉽게 화면설계서를 작성할 수 있었다. 다만 UI적으로 어떻게 풀어나갈 지는 계속해서 다른 레퍼런스들을 참고를 많이 해야되긴 했다. 이렇게 레퍼런스 벤치마킹을 하기 전과 후의 화면설계서가 어떻게 바뀌었는지 살펴보면,
변경점 리스트
1. 여행특성 상 이미지가 중요하기 때문에 배너 사이즈를 키워서 조금 더 몰입도 있는 여행 상세 페이지로 구축함
2. 제일 중요한 가격을 상단에 배치, 평점을 같이 노출하여 중요한 내용들을 페이지 진입 후 인지할 수 있도록 구현
3. 가격과 관련된 카드혜택과 할인쿠폰 카테고리를 상단에 바로 제공
4. 좌석마감 / 투어마감이 발생하는 경우 별도의 페이지를 따로 작성하지 않아도 되도록 재오픈 알람등록 버튼을 배너 하단에 바로 배치. 고객들도 진입하자마자 재오픈 알람 등록버튼을 찾을 수 있음
5. 잔여좌석을 전체좌석 대비 얼마나 찼는지 시각적으로 표현하여 인지할 수 있도록 만듬
6. 수량 선택은 모달 Page로 변경하여 Tab bar에서 예약하기 클릭 시 선택할 수 있도록 만듬
7. 공유하기 버튼과 찜하기 버튼은 이미지를 가리지 않고 타이틀 옆 여백에 배치, 크기 키움
화면설계서를 작성하는 데에 정말 시간이 많이 걸린 것 같다.(아직도 현재 진행형...) 역시 백지에서 무언가를 구현한다는 것 자체가 정말 대단한 일이라고 생각한다. 세상 모든 서비스 기획자분들과 디자이너분들이 더욱 대단하다고 느껴진다. 단순히 UI적으로 구현하는 것 자체도 솔루션을 떠오르는 것 자체가 어려운데 그걸 UX적으로 다시 재해석하는 것이 정말 큰 에너지가 소모되는 일인 것 같다. 하지만 이렇게 한 걸음씩 걸어나갈 때마다 어려워서 포기하고 싶은 것 보다 더더욱 잘해지고 싶다는 생각이 강렬히 든다.
이 주제로는 아마 한동안 글이 없을 것 같다. 이유는, 화면설계서를 토대로 이제 디자인 작업을 진행할 예정인데 꽤나 오래걸릴 것 같다. 틈틈이 UI/UX 관련된 서적에 대한 회고록을 올리는 걸로 브런치 활동을 이어가고, 개인적으로는 노코드개발 공부와 함께 디자인 작업을 이어나갈 것 같다. 총 4편까지 작성되었지만, 나중에 다시 실제 UI 디자인 작업과 함께 돌아오겠습니다. 그럼 안녕-!
