[YAPP 8주차] 기획자의 산출물을 남겨보자2 #스토리보드 #화면설계서

 

OVERVIEW

 화면설계서까지 작성하면서 진행하기에는 YAPP에서 주는 시간이 넉넉치 않아서 틈틈히 혼자 공부한 내용을 적어보려 해요. 저희 팀은 피그마로는 디자인 화면 확인, 기능명세서는 제가 리스트업 하며 개발자들과 소통했기 때문에 스토리보드는 따로 없이 진행했어요. 사이드플젝에서 산출물이 반드시! 있어야 하는건 아니지만 팀원 모두가 소통을 잘하고 있다면 충분하기 때문에. 

 

제가 팀원들에게 나중에 들은 이야기지만 기능명세서, 피그마를 왔다갔다 하면서 봐야 하는게 조금 불편했다고 하더라고요. 그래서 처음부터 스토리보드로 소통했으면 어떨까 하는 아쉬움도 남는데요,( _ _) 그럼 지금부터 기획자의 얼굴이라고 할 수 있는 산출물인 '화면설계서'를 공부한 내용을 담아볼게요.

여비의 디자인 화면

 

1. 화면설계서?스토리보드? 
뭐가 다른데

 

두가지의 의미는 거의 같게 쓰이는것 같은데 확실한 차이를 모르겠어서 백과사전으로 의미를 찾아보았어요. 화면설계서는 이전부터 IT산업군에서 쓰인 용어라면 스토리보드는 영화에서 넘어온 단어더라고요.(!)  둘차이가 뭘까요?

출처 : 구글

 

 

결론부터 말하면, 스토리보드는 UI에 초점이 되어 있고, 화면설계서는 정책적인 부분까지도 함께 있는것을 말해요. 즉 실무에서 쓰는 화면설계서는 '기능'에 대한 정책사항, 와이어프레임, UXUI에 대한 동작 정의까지 서비스 구현에 필요한 모든것이 담겨있는것 입니다.

 

예를들어, 카카오톡 [오픈채팅] 기능을 화면설계서에 적을때, 오픈채팅은 몇명까지 참여가 가능한지, 방장이 위임가능 한지, 오픈채팅은 최대 몇개까지 만들 수 있는지 등등의 정책 + 화면들에 대한 와이어프레임 + 기능명세 모든게 포함되어 있다는 의미에요.

 

 

2. 그럼 어떻게 하는건데

 

아래 화면은 여비의 로그인 화면으로 이미 디자인이 전부 완료되어 나열되어 있는 상태인데요, 이런 상태가 스토리보드란 거죠! 그럼 아래 화면들이 화면설계서로 작성되었을때, 어떻게 작성했어야 했을까요?(정답은 저도 잘 몰라요. 그냥 제가 적어봤던 설계서를 공유해볼게요. 더 좋은 방법이나 , 방식이 있다면 댓글로 알려주세요!!!!)

진입부터 로그인까지 디자인이 완료된 스토리보드,화면

 

 

1. 스플레시 & 첫진입 화면

 

일단 화면설계서의 상단에는 화면번호와, 경로를 적었어요. 화면번호 같은 경우에는 IA를 통해서 정의를 했었는데요, 경로에 따라 화면번호를 저렇게 부여했었어요. (진입은 0.0 , 스플레시는 1.0 , 로그인화면은 2.0 이에요.)  디스크립션은 와이어프레임에 번호를 붙여 작성했는데요, 일단 화면당 크게 번호를 붙이고 상세 항목들은 소수점(1.1)으로 나타내면서 작성했습니다. 정책 같은 경우에는 각 화면당 들어가는 [정책]이라 하고 정리해 넣었어요.

스플레시 & 첫진입 화면설계서

 

(화면번호와 관련된 내용이 궁금하시다면 이전 포스팅 한번 읽고 오시면 이해가 빠를거에요!)

[YAPP 7주차] 기획자의 산출물을 남겨보자 #IA #기능명세서 #정책

 

2. 약관동의 팝업 화면

 

약관동의 팝업과 닉네임 입력은 정책이 중요한 부분이라 꼼꼼히 적어보려 노력했어요. 각 버튼들이 어떻게 움직일때 어떻게 적용되어야 하는지를 전부 디스크립션에 나타냈습니다. 닉네임의 유효성 메세지도 어떤 경우에, 어떻게 반영되어야 하는지 입력했어요.

약관동의 및 닉네임수정 화면설계서

 

 

3. 이렇게 하는게 맞는가

 

위처럼 저는 화면별로 번호를 부여하고, 세부 기능마다도 번호를 부여해서 디스크립션을 작성해 화면설계서를 작성해봤습니다. 이 작업이 생각보다 오래걸려서 언제 전부다 할지 아득한데요,, 하나씩 전부 모든 화면에 대해 작성해보려합니다!  

 

이렇게 화면설계도를 혼자 공부하고 실습하면서 느낀것은 화면만 있었을때(UI 만 있는 스토리보드) 개발자 분들께 그대로 주면 다 전부 다르게 개발하지 않을까?라는 의문이 들었단겁니다.즉, 다시 말해서 설계서가 굉장히 굉장히 중요하다는것..! ( 실제로 저도 화면만 개발자분들께 넘기니 생각한 방향과 다른게 개발된 부분들도 있었어요)

 

저의 보잘것 없는 설계서를 공유한다는 것이 부끄럽지만 부족한 부분이 있다면 첨삭도 언제든 기다리고 있으니 댓글 부탁드립니다(_ _)!!! 이렇게 하는게 맞는지는 꼭 취업을 해서 실무에서 더 배워서 다시 포스팅하러 올게요!

 

-앞으로 화면설계서와 더 친해져야지