David.Cheon
UIpac
David.Cheon
  • UIpac (461)
    • 기획·PM (26)
    • UI·UX (30)
    • 콘텐츠·서비스 (15)
    • 마케팅·분석 (15)
    • 경제·경영 (8)
    • 업무자료 (6)
    • 읽을거리 (142)
    • 정보공유 (143)
      • 교육 (24)
      • 인공지능 (19)
      • 모빌리티 (4)
      • ICT동향 (73)
      • 가트너 (12)
      • M-Report (10)
    • 개인공간 (74)
      • 비공개 스크랩 (0)
      • 자기계발 (25)
      • 음악·도서 (9)
      • 영화·공연 (7)
      • 여행·맛집 (3)
      • 프로젝트 (0)
      • 기타 (30)

인기 글

  • CSS 네이밍 규칙
    2017.08.14
  • [템플릿] 비즈니스 모델 캔버스, 린 캔버스
    2014.11.20
    [템플릿] 비즈니스 모델 캔버스, 린 캔버스
  • 에듀테크의 시장 현황
    2021.05.01
    에듀테크의 시장 현황
  • 파워포인트 단축키 모음
    2018.08.10
    파워포인트 단축키 모음
  • 영어 공부에 도움이 되는 54개 사이트
    2014.06.20
    영어 공부에 도움이 되는 54개 사이트

Tags

  • 벤치마킹
  • 사이트
  • 동향
  • Curation
  • 반응형웹
  • 다음카카오
  • 모바일
  • 가트너
  • 2014
  • UI
  • 디자인
  • 트렌드
  • 사물인터넷
  • 인공지능
  • daumkakao
  • 기획참고
  • 유니티
  • 트랜드
  • Gartner
  • 기획
  • Mreport
  • 분석
  • 큐레이션
  • trend
  • 디자인참고
  • 웨어러블
  • UX
  • 세계 게임시장 규모
  • 2015
  • 애플리케이션

최근 댓글

  • 감사합니다.
    아이폰
  • 너무 오래된 자료라 부족한게 많은데 도움이 되셨다니 감사합⋯
    David.Cheon
  • 자료 감사히 잘 쓰겠습니다!! 복 받으실꺼예요~!
    Heather
  • 최근에 만들어진 사이트인데 Episoden이라는 무료 영어⋯
    영어사랑 릴리
  • 감사합니다 ㅎ
    와우

방명록

전체 방문자
327,463
오늘
11
어제
116
Uipac
David.Cheon

UIpac

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

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

2014. 10. 13. 18:33


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

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

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

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

 
화면설계서_모바일웹_v01.pptx
다운로드

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 
간단하게 정리 해 본 모바일 화면설계서 템플릿 입니다. 모바일 웹을 기준으로 만들어진 화면이라 애플리케이션 과는 맞지 않을 수 있습니다. 
 
용도에 맞게 잘 사용하시면 될듯하네요^^ 
 
추후 버전에 업데이트 되면 다시 새롭게 정리하여 올리도록 하겠습니다. 

 

  • 카카오스토리
  • 트위터
  • 페이스북

'업무자료' 카테고리의 다른 글

파워포인트 단축키 모음  (0) 2018.08.10
[템플릿] 비즈니스 모델 캔버스, 린 캔버스  (0) 2014.11.20
애플리케이션 화면설계서 템플릿 v0.5  (0) 2014.09.07
모바일 사이트 화면설계서 템플릿 v0.3  (0) 2014.09.05
Choosing a good chart  (0) 2014.05.21
    모바일, 템플릿, 화면설계서
    댓글쓰기
    [템플릿] 비즈니스 모델 캔버스, 린 캔버스
    다음 글
    [템플릿] 비즈니스 모델 캔버스, 린 캔버스
    이전 글
    애플리케이션 화면설계서 템플릿 v0.5

    티스토리툴바