[템플릿] 모바일 사이트 화면설계서 (2014.10.13)

기획을 어느 정도 하시고 화면들을 많이 작성해보신 분은 자신만의 템플릿을 가지고 있고 처음 모바일 화면을 설계 하게 되면 간단한 화면들이라고 해도 자신이 필요로 하는 화면을 직접 그리는데 시간을 많이 소비하게 됩니다. 물론 숙련된 기획자의 경우 자신만의 템플릿을 보유하고 있어 훨신 짧은 시간에 다양한 화면들을 작성할 수 있지요. 

이번에는 모바일 화면을 처음 설계 하시는 분들을 위해서 제가 사용하고 있는 간단한 템플릿을 공유해 드립니다. 

(아직 정리 중이라 완성도가 떨어지는 점 이해 부탁 드려요..ㅠ_ㅠ)

물론 이 템플릿이 절대적인게 아니니 참고 하셔서 자신의 템플릿을 만드시는 것을 추천해드려요. 

 

화면설계서_모바일웹_v01.pptx

다운로드

 

 

 

이제 파일에 대한 간단한 설명을 첨부합니다. 

 

 

화면에서 기본적으로 사용하는 버튼과 이미지, 셀렉트 박스등을 정리해 놓은 화면입니다. 그룹으로 묶여 있어서 마음에 맞는 것을 골라서 뒤쪽에 붙여 사용하시면 될듯합니다. 

 

 

입력 박스와 동영상 지도, 소셜 아이콘들을 모아 놨습니다. 

 

 

다양한 탭과 글 목록, 리스트 등의 템플릿 입니다. 

 

 

조금 트렌드가 지나긴 했는데.. 좌측 또는 우측에 사이트의 콘텐츠를 모두 확인할 수 있는 메뉴를 구성 하는게 사용자에게 많은 편의성을 제공하죠. 아주 새로운 메뉴가 아닌 이상 비슷한 항목의 메뉴를 구성하는 것으로 생각되어 해당 항목을 추가해 봤습니다. 

 

 

기본적으로 사용되는 화면입니다. 왼쪽 하단 부분의 라인인 아이폰/안드로이드(갤럭시 등등)의 해상도에 맞게 정의를 해 놓았습니다. 가장 위에 라인이 아이폰4 정도의 사이즈라고 생각하시면 될 듯하네요. 

 

 

콘텐츠의 내용이 길어서 한 화면에 모두 들어가지 않는 경우가 있습니다. 이럴 때 이용하실 수 있는 추가 화면입니다. 추가 화면을 붙일 때는 화면이 연결된다는 내용의 표시를 꼭 해주세요. 

 

 

간단하게 정리 해 본 모바일 화면설계서 템플릿 입니다. 모바일 웹을 기준으로 만들어진 화면이라 애플리케이션 과는 맞지 않을 수 있습니다. 

 

용도에 맞게 잘 사용하시면 될듯하네요^^ 

 

추후 버전에 업데이트 되면 다시 새롭게 정리하여 올리도록 하겠습니다.