로딩 화면과 메뉴 구성

앱 로딩 화면

로딩 페이지인 첫 화면은 앱 명칭과 슬로건 및 로고와 함께 앱의 누적 이용자 현황을 보여주는 것으로 배치했다. 비즈니스 아이디어와 서비스 기획에 따라 다양하게 구성할 수 있다. 누적 이용자 숫자가 1~2초 로딩 후 앱의 메인 페이지인 이웃 학습자 페이지로 넘어간다.

* 로고, 아이콘 등 작업 중 요구되는 디자인 요소의 아이디어나 결과물을 빠르게 얻기 위해 다양한 템플릿의 디자인 요소를 만날 수 있는 웹 서비스 등 참고할 만한 유용한 사이트 정보는 평소 즐겨찾기 한다. 템플릿을 참고하는 경우 쉽게 의도하는 결과물을 만들 수 있고 외부 전문가에게 의뢰하는 경우에도 완성도 있는 결과물을 얻는데 도움이 된다.

가이드선 활용

메뉴 구성 및 배치

주메뉴 : 이웃 학습자 > 공유하기 > eBOOK신청 > 마이페이지

주 메뉴는 앱 서비스의 성격에 따라 신중히 정한다. 디자인 요소 배치 전 아트보드의 좌측 끝(<)에서 마우스 왼쪽 버튼을 눌러 가이드 선을 불러낸다. 좌우 여백은 45로 설정했다. 상단 로고 및 검색, 알림 아이콘의 아래 구분선 간격은 위로부터 100으로 설정했다. 설정은 작업창 우측의 '변형' 메뉴에서 적용하면 된다.

상단 아이콘 및 하단 메뉴 영역은 마우스로 전체 디자인 요소를 드래그해 선택한 후 작업 창 우측 메뉴에서 '스크롤 시 위치고정'을 각각 선택해 준다. 이는 스토리보드 작성 종료 후 프로토타입 미리보기에서 긴 화면을 위아래로 이동시킬 때 화면에 고정시키기 위함이다. 이후 추가 아트보드 생성은 복사 붙여 넣기를 반복해 생성해 나가면 설정이 적용된 값으로 생성된다. 아트보드는 바탕 더블클릭 시 사이즈를 늘릴 수 있고 화면을 아래로 길게 편집할 수 있다. 프로토타입 실행 시 길게 편집된 화면은 하단의 위치 고정된 메뉴바 아래로 숨는다.